代码地址:https://gist.github.com/zhoumengkang/4bdbb205495a1772b0fe
phpwind的 wind.js
是基于 head.js
开发而成的。
HeadJS的最大特点就是并行加载但是顺序执行,这样加快了加载速度,但却不会打乱依赖关系。详细介绍请看:http://headjs.com/
而phpwind的 wind.js
则是在其基础上增加了 按需加载
+ 延时加载
,因为按需加载,但是不是在页面加载的时候就加载了,而是事件发送的时候有需求的时候才去加载,比如某个页面有弹窗的功能,弹窗的JS和CSS不是在页面打开的时候就加载的,而是在点击按钮打开弹窗的时候才去加载。也不知道这样说(按需、延时)准不准确,也就是“需要时才去请求并且调用”。
通过 Wind.use
来对需要调用的资源进行延时加载。
一般传入资源的别名(别名在wind.js初始化设置)和回调函数,如下:
Wind.use("artDialog", function () { //... }); Wind.use('validate', 'ajaxForm', 'artDialog', function () { //... })
查看 Wind.use
的代码:
//通过别名来加载各个脚本文件 Wind.use = function() { var args = arguments,len = args.length; for( var i = 0;i < len;i++ ) { if(typeof args[i] === 'string' && alias[args[i]]) { args[i] = alias[args[i]]; } } Wind.js.apply(null,args); };
但是这里的 Wind.js.apply(null,args)
是哪来的呢?原来是调用的前面的 HeadJS
里面的 api.js
,也就是:
api.js = api.load;//但是Wind是如何“成为”api的呢?我还不明白虽然在HeadJS里面有:
/*** public API ***/ headVar = win.head_conf && win.head_conf.head || "Wind", api = win[headVar] = (win[headVar] || function () { api.ready.apply(null, arguments); }),
实际使用的时候打印该api,显示的是 function () { api.ready.apply(null, arguments); }
好绕啊。。。不管怎样,我都无法把 Wind.js
是如调用了 api.load
这块连接起来。跳过这块,往下看:
//先看异步加载的时候api.load api.load = function () { ///<summary> /// INFO: use cases /// head.load("http://domain.com/file.js","http://domain.com/file.js", callBack) /// head.load({ label1: "http://domain.com/file.js" }, { label2: "http://domain.com/file.js" }, callBack) ///</summary> var args = arguments, callback = args[args.length - 1], items = {}; if (!isFunction(callback)) { callback = null; } each(args, function (item, i) { if (item !== callback) { item = getAsset(item); items[item.name] = item; load(item, callback && i === args.length - 2 ? function () { if (allLoaded(items)) { one(callback); } } : null); } }); return api; };
需要调用的js脚本和回调一起传入api.load()
,但是回调函数需要作为最后一个参数。