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() {
           
  }()); 


你可能感兴趣的:(layer.js源码解析)