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

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

///

/// 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)

///

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