javascript 模块化的问题

发布于 2022-09-01 20:00:31 字数 3633 浏览 19 评论 0

;(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        //AMD
        define(factory);
    } else if (typeof exports === 'object') {
        //Node, CommonJS之类的
        module.exports = factory();
    } else {
        root.resLoader = factory(root);
        // root 是window  window.resLoader = (function(){})(window) 这里的window有特殊含义么?还是只是一个匿名立即执行函数
    }
}(this, function () {
    var isFunc = function(f){
        return typeof f === 'function';
    }
    //构造器函数
    function resLoader(config){
        this.option = {
            resourceType : 'image', //资源类型,默认为图片
            baseUrl : './', //基准url
            resources : [], //资源路径数组
            onStart : null, //加载开始回调函数,传入参数total
            onProgress : null, //正在加载回调函数,传入参数currentIndex, total
            onComplete : null //加载完毕回调函数,传入参数total
        }
        if(config){
            for(i in config){
                this.option[i] = config[i];
            }
        }
        else{
            alert('参数错误!');
            return;
        }
        this.status = 0; //加载器的状态,0:未启动   1:正在加载   2:加载完毕
        this.total = this.option.resources.length || 0; //资源总数
        this.currentIndex = 0; //当前正在加载的资源索引
    };

    resLoader.prototype.start = function(){
        this.status = 1;
        var _this = this;
        var baseUrl = this.option.baseUrl;
        for(var i=0,l=this.option.resources.length; i<l; i++){
            var r = this.option.resources[i], url = '';
            if(r.indexOf('http://')===0 || r.indexOf('https://')===0){
                url = r;
            }
            else{
                url = baseUrl + r;
            }

            var image = new Image();
            image.onload = function(){_this.loaded();};
            image.onerror = function(){_this.loaded();};
            image.src = url;
        }
        if(isFunc(this.option.onStart)){
            this.option.onStart(this.total);
        }
    }

    resLoader.prototype.loaded = function(){
        if(isFunc(this.option.onProgress)){
            this.option.onProgress(++this.currentIndex, this.total);
            console.log(this.currentIndex,this.total)
        }
        //加载完毕
        if(this.currentIndex===this.total){
            if(isFunc(this.option.onComplete)){
                this.option.onComplete(this.total);
            }
        }
    }

    //暴露公共方法
    return resLoader;
}));

var loader = new resLoader({
    resources : [
        'http://p2.qhimg.com/t01ed1438874f940dc0.jpg',
        'http://p9.qhimg.com/t01b4ff03b72c7dc6c7.jpg',
        'http://p2.qhimg.com/t01dd90dfbec92074d0.jpg',
        'http://p7.qhimg.com/t01cfec6d87cde457c5.jpg',
        'http://p9.qhimg.com/t01943ced462da67833.jpg',
        'http://p0.qhimg.com/t01943ced462da67833.jpg',
        'http://p6.qhimg.com/t01aa15a7ba7ccb49a7.jpg',
        'http://p8.qhimg.com/t010f1e8badf1134376.jpg',
        'http://p8.qhimg.com/t01cf37ea915533a032.jpg',
        'http://p3.qhimg.com/t0193d8a3963e1803e9.jpg',
        'http://p3.qhimg.com/t01cd6a4d4b4bd4457b.jpg'
    ],
    onStart : function(total){
        console.log('start:'+total);
    },
    onProgress : function(current, total){
        console.log(current+'/'+total);
        var percent = current/total*100;
        console.log(percent,current,total)
    },
    onComplete : function(total){

        alert('加载完毕:'+total+'个资源');
    }
});
loader.start();

root.resLoader = factory(root);

 root 是window  window.resLoader = (function(){})(window) 
 这里的window有特殊含义么?还是只是一个匿名立即执行函数 
 还有就是这种支持amd commmon 的写法 有个模式名称么?
   
   

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

甜中书 2022-09-08 20:00:31

root 是window window.resLoader = (function(){})(window) 这里的window有特殊含义么?还是只是一个匿名立即执行函数 还有就是这种支持amd commmon 的写法 有个模式名称么?

著墨染雨君画夕 2022-09-08 20:00:31

window是Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一:

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文