模块化是怎么回事

日期:2015-6-10 21:29 | 标签: 模块化 | 阅读:467

最近经常听到模块化这词,让人感觉高深莫测的样子,顿时有种想吃透它的感觉,与其说是JS发展多年的产物,倒不如说是项目复杂度空前提升的产物,开始理解还是有点吃力。

公司内部

公司内部并没有人提及过模块化这个词。对JS代码的处理一般会进行JQ插件化,即把代码封装成一个个插件,从而解决了模块化常常提及的问题如:命名冲突,可维护性等,专业的讲我们其实此采用的是JQ的集市模式,集市模式的特点是互不干扰,相对应的是大教堂模式,代表有Dojo、KISSY等,其组件之间有着千丝万缕的联系,其各有应用场景,与此对比,模块化其实可以有以下几种优势(这里指SeaJS),一,异步加载;二,版本管理;三,颗粒度为文件方便维护,四,模块依赖管理。

开发场景

我的误解

对照下我们的开发场景,开始我认为是不太适合采用模块化开发策略的,我们的模块不是为了公布接口给外部引用,二是一系列的页面渲染逻辑,如果不把这些逻辑分离出来是无法进行模块化改造的。模块化返回的是接口对象,以供外部调用,模块之间的关系其实是相互引用的关系,并不能一次加载到处使用,其毫无业务关系可言。我们在工作中的确可以使用到模块化的一些功能,但并不符合模块化实际针对的场景!

后知后觉

事实上,模块之间的关联没有我想象的那么分散,其可以做到对象公用,有一次加载多次使用的好处,你若是要体现模块之间的业务关系,只需要根据业务需要进行模块组织就行,为了证明这个,我还专门花了两个小时下了下验证代码。如SeaJS对应的require、use、define加载依赖代码的场景模拟。

好处

模块化会给代码的管理带来很大的好处,代码量越大业务越复杂,其优势就越明显,当然我们也应该根据实际的场景有所取舍。

几种模块化方案

  1. commonJS
    适用于服务端,没有异步加载的概念
  2. AMD
    异步模块定,Asynchronous Module Definition,代表作是requireJS,参考:
    http://www.cnblogs.com/lyzg/p/4865502.html
  3. CMD
    这个由淘宝玉伯提出,可恨的是,一般的组件都不支持这个规范。
  4. umd

怎样支持模块化

这里对barrentlee的小段代码做更改后的实现为:

    // UMD(barrentlee)
    function umd(name, component) {
        switch (true) {
            case typeof module === 'object' && !!module.exports:
                module.exports = component;
                break;
            case typeof define === 'function' && !!define.amd:
                define(name, function() {
                    return component;
                });
                break;
                // 支持seajs(kobepeng)
            case typeof define === 'function' && !!define.cmd:
                define(name, function(require, exports, module) {
                    return module.exports = component;
                });
                break;
            default:
                try { /* Fuck IE8- */
                    if (typeof execScript === 'object') execScript('var ' + name);
                } catch (error) {}
                window[name] = component;
        }
    };

module.exports与exports

exports其实是指向module.exports默认创建的{},当module.exports被重新赋值后,它俩之间的连接就断开了。

参考:

https://github.com/seajs/seajs/issues/547
http://joebon.cc/commonjs-amd-cmd/
http://web.jobbole.com/82238/
update at @2016-08-25 JavaScript模块化编程简史 by yuguo:http://yuguo.us/weblog/javascript-module-development-history/

使用记录:

  1. seajs不仅可以加载模块文件,也可以加载常规文件,使用到其异步加载功能
  2. define[id,deps,function],这种用法不属于CMD 规范,属于Modules/Transport规范(AMD?)

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式