layer.js源碼解析

定義layer對象：

var layer = {...}

layer對象 初始化函數，像UEditor等開源js也是這樣的方式，初始化完成以後執行回調。

其中第二個參數就是回調函數。

ready: function(path, fn){

        //斷定第一個參數是否是函數，若是是的話將它賦值給函數fn

       //這覺得着咱們調用該函數時能夠不用設置path

        var type = typeof path === 'function';

        if(type) fn = path;

       //$.extend(）這個函數比較常見，用於合併屬性

      //ready.config中的ready是一個定義好的對象，主要是存儲layer的配置：包含js腳本路徑，事件屏蔽，配置config,默認            按鈕數組，layer彈出層的類型數組。

        layer.config($.extend(ready.config, function(){

           return type ? {} : {path: path};

        }()), fn);

        return this;

    //return type ? {} : {path: path}; 這行代碼 說明ready這個函數僅僅有入參的時候，設定{}空對象跟默認配置合併，不然將傳進來的參數path，定義{path: path}，與默認配置合併

接着是下一個函數layer.config();解析，在項目主頁的文檔中，標註出來的api是layer.config(options) - 初始化全局配置

少了一個參數fn,fn是回調函數，回調函數是給ready(框架準備完畢)的時候調用的，由於ready裏面調用了layer.config()進行設定path,因此官方文檔裏面有一句說明：可是若是你已經經過layer.config配置了path，你在使用layer.ready時，是不須要path的。

config: function(options, fn){

        var item = 0;

        //下面這行代碼的寫法很廣泛，意思是 options 不存在時，就設定一個空的對象{};不少框架都這樣寫

        options = options || {};

      //這段話就是options和默認配置合併  

      layer.cache = ready.config = $.extend(ready.config, options);

    //在配置信息合併完畢以後若是ready.config.path不存在，則執行layerd對象的path函數，它的實現是 ready.getPath  經過  ready對象的getPath  方法得到。

 //因此說若是咱們不設定js文件的路徑時會經過ready.getPath得到默認路徑，就是layerjs這個框架所在的目錄。

    layer.path = ready.config.path || layer.path;

       //這句話意思是  假如options.extend是一個字符串的話，執行options.extend = [options.extend]，將

options.extend 設定爲一個數組，而且將options.extend（options設定爲數組前）這個字符串做爲數組的其中一個值

//這種的寫法代碼量少，不過可能須要細心讀

        typeof options.extend === 'string' && (options.extend = [options.extend]);

// layer.use是layer對象內置方法，用於加載配件，該函數 use: function(module, fn, readyMethod),第一個參數是模塊名，第二個參數是執行函數，第三個函數是回調函數。

//加載配件相關的配置

//經過layer.use()函數源碼 document.createElement(iscss ? 'link' : 'script');能夠看到是加載css或者js,

        layer.use('skin/layer.css', (options.extend && options.extend.length > 0) ? (function loop(){

            var ext = options.extend;

            layer.use(ext[ext[item] ? item : item-1], item < ext.length ? function(){

                ++item; 

                return loop;

            }() : fn);

        }()) : fn);

        return this;

    }

//下面這種函數寫法是當即執行的意思，layer.js的開頭就是這行代碼

 ;(function poll() {             }());