javascript 从ueditor中学到的闭包知识

研究了一下ueditor代码发现有部分内容看不懂，细细研究了一下竟然是这个意思

browser = {
/**
* 将css样式转换为驼峰的形式
* @method cssStyleToDomStyle
* @param { String } cssName 需要转换的css样式名
* @return { String } 转换成驼峰形式后的css样式名
* @example
* ```javascript
*
* var str = 'border-top';
*
* //output: borderTop
* console.log( UE.utils.cssStyleToDomStyle( str ) );
*
* ```
*/
cssStyleToDomStyle:function () {
var test = document.createElement('div').style,
cache = {
'float':test.cssFloat != undefined ? 'cssFloat' : test.styleFloat != undefined ? 'styleFloat' : 'float'
};

return function (cssName) {
return cache[cssName] || (cache[cssName] = cssName.toLowerCase().replace(/-./g, function (match) {
return match.charAt(1).toUpperCase();
}));
};
}(),

/**
* 动态加载文件到doc中
* @method loadFile
* @param { DomDocument } document 需要加载资源文件的文档对象
* @param { Object } options 加载资源文件的属性集合， 取值请参考代码示例
* @example
* ```javascript
*
* UE.utils.loadFile( document, {
*     src:"test.js",
*     tag:"script",
*     type:"text/javascript",
*     defer:"defer"
* } );
*
* ```
*/

/**
* 动态加载文件到doc中，加载成功后执行的回调函数fn
* @method loadFile
* @param { DomDocument } document 需要加载资源文件的文档对象
* @param { Object } options 加载资源文件的属性集合， 该集合支持的值是script标签和style标签支持的所有属性。
* @param { Function } fn 资源文件加载成功之后执行的回调
* @warning 对于在同一个文档中多次加载同一URL的文件， 该方法会在第一次加载之后缓存该请求，
*           在此之后的所有同一URL的请求， 将会直接触发回调。
* @example
* ```javascript
*
* UE.utils.loadFile( document, {
*     src:"test.js",
*     tag:"script",
*     type:"text/javascript",
*     defer:"defer"
* }, function () {
*     console.log('加载成功');
* } );
*
* ```
*/
loadFile:function () {
var tmpList = [];

function getItem(doc, obj) {
try {
for (var i = 0, ci; ci = tmpList[i++];) {
if (ci.doc === doc && ci.url == (obj.src || obj.href)) {
return ci;
}
}
} catch (e) {
return null;
}

}

return function (doc, obj, fn) {
var item = getItem(doc, obj);
if (item) {
if (item.ready) {
fn && fn();
} else {
item.funs.push(fn)
}
return;
}
tmpList.push({
doc:doc,
url:obj.src || obj.href,
funs:[fn]
});
if (!doc.body) {
var html = [];
for (var p in obj) {
if (p == 'tag')continue;
html.push(p + '="' + obj[p] + '"')
}
doc.write('<' + obj.tag + ' ' + html.join(' ') + ' ></' + obj.tag + '>');
return;
}
if (obj.id && doc.getElementById(obj.id)) {
return;
}
var element = doc.createElement(obj.tag);
delete obj.tag;
for (var p in obj) {
element.setAttribute(p, obj[p]);
}
element.onload = element.onreadystatechange = function () {
if (!this.readyState || /loaded|complete/.test(this.readyState)) {
item = getItem(doc, obj);
if (item.funs.length > 0) {
item.ready = 1;
for (var fi; fi = item.funs.pop();) {
fi();
}
}
element.onload = element.onreadystatechange = null;
}
};
element.onerror = function () {
throw Error('The load ' + (obj.href || obj.src) + ' fails,check the url settings of file ueditor.config.js ')
};
doc.getElementsByTagName("head")[0].appendChild(element);
}
}()
}

从中我们可以看到

browzer={

cssStyleToDomStyle:function () {
var test = document.createElement('div').style,
cache = {
'float':test.cssFloat != undefined ? 'cssFloat' : test.styleFloat != undefined ? 'styleFloat' : 'float'
};

return function (cssName) {
return cache[cssName] || (cache[cssName] = cssName.toLowerCase().replace(/-./g, function (match) {
return match.charAt(1).toUpperCase();
}));
};
}()
}

也就是说

browzer={

demofunc:function () {
var test = “someword”

return function (cssName) {
return cssName+test;
};
}()
}

也就是说

browzer={

demofunc:function (cssName) {
//var test = “someword”
return cssName+“someword”;

},
}

//从上面可以看出下面的function（）{}后面跟了一对小括号，也就和闭包原理一样吧test封装到了闭包里外界无法访问到test数据了。并且demofunc其实已经在初始化运行的时候就已经运行了

js文件初始化后 就成了上面那段代码的那个样子。

在这里ueditor的工程师们可能就是为了封装吧。