JavaScript设计模式(三十三)【同步/异步模块模式】

左手的ㄟ右手 2021-07-04 23:59 300阅读 0赞

/** * 异步模块模式AMD之前，当然还有同步模块模式 * 同步模块的代码较为简单，如string.trim 这样的模块对应的就是{string:{trim:{}}}这样的结构 * 维护一个define定义模块，维护一个module取得模块 * module的最后利用fn.apply(null, modules); (当然null不太好) * 使用的话则是F.module('string.trim',function(trim){}) 这样的用法 * 第一个参数可以是数组，也可以有多个模块的参数，最后的回调函数的形参对应前面的顺序 * * 当然，异步模式可能显得更为重要，下面实现一个异步模式 * */
    
    
    (function(F) { 
        var moduleCache = { };
    
        function getUrl(moduleName) { 
            // lib/ajax 变成lib/ajax.js
            return String(moduleName).replace(/\.js$/g, '') + '.js'
        }
    
        function loadScript(src) { 
            var _script = document.createElement('script');
            _script.type = 'text/javaScript';
            _script.charset = 'UTF-8';
            _script.async = true;
            _script.src = src;
            document.getElementsByTagName('head')[0].appendChild(_script);
            0
        }
    
        function setModule(moduleName, params, callback) { 
            var _module, fn;
            if (moduleCache[moduleName]) { 
                _module = moduleCache[moduleName];
                _module.status = 'loaded';
                _module.exports = callback ? callback.apply(_module, params) : null;
                while (fn = _module.onload.shift()) { 
                    fn(_module.exports)
                }
            } else { 
                callback && callback.apply(null, params);
            }
        }
    
        function loadModule(moduleName, callback) { 
            var _module;
            if (moduleCache[moduleName]) { 
                _module = moduleCache[moduleName];
                if (_module.status === 'loaded') { 
                    // 这个很重要，loadModule一定是异步的，effectiveJS 上的某一条建议有写，永远不要同步的调用异步函数，这非常重要
                    setTimeout(callback(_module.exports), 0);
                } else { 
                    // 加载完成的时候调用
                    _module.onload.push(callback);
                }
            } else { 
                // 第一次加载
                moduleCache[moduleName] = { 
                    moduleName: moduleName,
                    status: 'loading',
                    exports: null,
                    onload: [callback]
                };
                loadScript(getUrl(moduleName));
            }
        }
    
        // 模块的url， 模块的依赖， 模块的callback
        F.module = function(url, modDeps, modCallback) { 
            var args = Array.prototype.slice.call(arguments),
                callback = args.pop(),
                deps = (args.length && args[args.length - 1] instanceof Array) ? args.pop() : [],
                url = args.length ? args.pop() : null,
                params = [],
                depsCount = 0,
                i = 0,
                len = deps.length;
            // 如果存在依赖
            if (len) { 
                for (i = 0; i < len; i++) { 
                    // 这样的写法已经可以被es6的let替换了，包括前面的Array.prototype.slice.call的写法也可以用array.from
                    (function(i) { 
                        depsCount++;
                        // 这是一个异步加载的过程,depsCount保存的是加载中的模块，所以加载前++，等加载完后--
                        // 另外，loadModule是异步的，for循环的时候就会全部++，而回调会在for结束后才有可能调用
                        loadModule(deps[i],
                            function(mod) { 
                                params[i] = mod;
                                depsCount--;
                                if (depsCount === 0) { 
                                    // 这个在模块缓存中修正状态
                                    setModule(url, params, callback);
                                }
                            })
                    })(i);
                }
            } else { 
                setModule(url, [], callback);
            }
        }
    })(function() { 
        // 这个函数创建了模块管理器F,并且把它加到了全局变量上，这个F也会传给闭包的形参
        return window.F = { };
    });
    
    
    /* * 使用方式*/
    // 在lib/dom里写以下代码
    F.module('lib/dom',
        function() { 
            return { 
                g: function(id) { 
                    return document.getElementById(id);
                },
                html: function(id, html) { 
                    if (!html) return this.g(id).innerHTML;
                    else { 
                        this.g(id).innerHTML = html;
                    }
                }
            }
        });
    
    // 在lib/event里写以下代码
    F.module('lib/event',
        ['lib/dom'],
        function(dom) { 
            return { 
                on: function(id, type, fn) { 
                    dom.g(id)[on + 'type'] = fn;
                }
            }
        });
    
    // 在mainScript中使用他们
    F.module(['lib/event', 'lib/dom'],
        function(event, dom) { 
            events.on('demo',
                'click',
                function() { 
                    dom.html('demo', 'success');
                })
        });
    
    /* 看了好多遍才理解这个……真是很厉害…… 跟着代码走一遍，看看流程到底是怎样的 首先这个代码是说 在lib下面有2个文件，dom和event，然后相当于页面里有一个代码加载他们 看主线代码，['lib/event', 'lib/dom']，这是要加载2个依赖，所以在module函数里，走if里面的代码，做loadModule loadModule先去加载event,这是第一次接在，走loadModule的else语句，所以在cache里创建了一个event的项 目前的代码还是 { moduleName: 'lib/event', status: 'loading', exports: null, onload: [callback] 这个callback是loadModule的callback } 然后去用了loadScript 这部分代码到此完结 同样 dom部分也做一遍，完结了 那么，这剩下的代码是怎么做的，它是怎么完成调用的呢 是loadScript去加载了event这个文件，放到了head标签里 这时候就会去做event这个文件的内容 做的是什么，event里写的是F.module('lib/event', ['lib/dom']………………这样的一段，所以开始做这段代码 这段代码说需要有dom的依赖，所以又做loadModule 但是因为刚刚已经缓存过这个了，所以做if语句里的，我们假设这时候dom还没加载完 那么，就做了else的，把callback添加到onload里 这个callback是loadModule的callback 注意不要搞混，这个module里的变量是不和刚刚的主函数里的module里的变量共享的，所以完成计数depsCount是不共享的 但是loadModule的回调函数是添加在moduleCache中的，这个是共享的 同样，loadScript也去做了加载dom的一遍 现在,开始加载dom了，所以做dom里的语句，F.module 这里没有依赖，直接做else的setModule 虽然F.module里的局部变量不是共享的，但是moduleCache这东西是共享的 所以在setModule中moduleCache里有它，就改变了状态，同时将exports改成了dom里定义的return的对象 然后做了onload的回调函数，这个回调函数是loadModule的哦 loadModule的回调被调用，依赖交给params，depsCount--，这时候对于event来说，依赖全部完成了，开始做event的setModule 同样，event的setModule让自己的状态变成loaded，并且触发moduleCache('lib/event')里的onload 这时候dom和event都减为0了，所以主流程里的setModule被调用 主流程并没有模块名(匿名模块),在setModule里走else语句 也就是直接执行函数，所以完成了 有点复杂……很厉害啊 */