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的工程師們可能就是爲了封裝吧。