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