嗨,老铁,欢迎来到我的博客!

如果觉得我的内容还不错的话,可以关注下我在 segmentfault.com 上的直播。我主要从事 PHP 和 Java 方面的开发,《深入 PHP 内核》作者之一。

[视频直播] PHP 进阶之路 - 亿级 pv 网站架构的技术细节与套路 直播中我将毫无保留的分享我这六年的全部工作经验和踩坑的故事,以及会穿插着一些面试中的 考点难点加分点

周梦康 发表于 2014-06-06 4074 次浏览 标签 : javascript

免费领取阿里云优惠券 我的直播 - 《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的呢?我还不明白
虽然在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(),但是回调函数需要作为最后一个参数。

嗨,老铁,欢迎来到我的博客!

如果觉得我的内容还不错的话,可以关注下我在 segmentfault.com 上的直播。我主要从事 PHP 和 Java 方面的开发,《深入 PHP 内核》作者之一。

[视频直播] PHP 进阶之路 - 亿级 pv 网站架构的技术细节与套路 直播中我将毫无保留的分享我这六年的全部工作经验和踩坑的故事,以及会穿插着一些面试中的 考点难点加分点

评论列表