phpwind的JS加载机制：延时加载、按需加载、并行加载、顺序执行 - wind.js [分析中...]

免费领取阿里云优惠券 我的直播 - 《PHP 进阶之路》

代码地址：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的呢？我还不明白

/*** 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()，但是回调函数需要作为最后一个参数。