非权威的JS模块化编程笔记

前言:对于JS的模块化编程,一直都处于边学边用的状态,借着此次重构代码的机会,对“JS模块化编程”做一个系统的完整的学习和整理。(随时更新)

参考文章:http://www.ruanyifeng.com/blo…

什么是模块化编程?为什么需要模块化编程?
当一个项目越来越大,那么它包含的JS也会越来越多。过多的JS文件会降低代码的可读性,同时增加后续的开发和维护成本。容易出现一下情景:
“大神,为什么这个js在执行的时候会报错?我命名包含进来了呀?”
“我看看…(5分钟后),汗你这有问题。B.JS依赖于A.JS,所以引入时候要放在A.JS的后面,不然会报错。”
为了降低以上现象,引入模块化编程思想,类似强类型语言的“类”、“模块”。一个模块(JS文件)完成一类功能,需要某功能时,引入其对应的模块(JS文件)即可。

如何进行模块化编程?
模块化是一个思想,当把“同一类”功能的方法(或函数)放到一起,形成一个“类”,我们就可以把它们当成一个模块:

function m1(){ //计算手续费...
//...
}
function m2(){ //计算收益...
//...
}

这样,m1和m2就算是组成一个模块了。但是,这样的写法“污染”了全局变量。比如,此时新来了一个同事C,他不知道m1、m2已经被前辈“占”用了,然后自己写了一个“模块”,也包含了名为m1、m2的方法。同事C在自己代码里引用以上模块时,就会出现同名方法。为了避免以上问题,又对模块化进行“升级”。

模块化编程形成
将模块写成对象,这样即使重名了,因为方法属于不同对象,所以不会造成冲突:

var module1 = new Object({
    _count : 0,
    m1 : function (){
            //...
        },
    m2 : function (){
            //...
        }
  });

这样一来,同事C即使自己写了一个模块(对象),模块(对象)里包含同名方法也不需要担心冲突了

模块化编程演变
有一天,技术大佬找到同事C,说他写的模块有问题,同事D在调用的时候发现BUG。同事C一脸懵逼的跑回座位上看着自己写的模块,心里泛着低估“自己命名都用了那么久了,没啥问题”。查看了一下同事D的代码后,发现同事D不小心将他代码里边的变量_count变成了空字符串:

module1._count=""

所以在使用其他方法的时候才报错,于找到同事D痛批了一顿…
后来回到座位上,同事C思考了,虽然只是不小心,但是万一其他人也不小心那可不行。于是,同事C想到了java里边的private变量,如果让所有模块都只暴露出方法,而不暴露属性,这样就可以避免了这个问题的再次发生。

模块化编程的雏形
通过“立即执行函数”,单独将需要暴露出来的方法返回:

var module1 = (function(){
    var _count = 0;
    var m1 = function(){
        //...
        };
    var m2 = function(){
        //...
    };
    return {
    m1 : m1,
    m2 : m2
    };
    })();

模块化编程的改造
同事C在开发的时候,引入了一个很久以前写了模块,他发现一个问题:如果要在原先写好的模块上新增功能,那么就必须要改这个模块,但是这么一来就有可能影响到其他使用这个模块的项目。如果再准备一个新的模块,然后把原来写好的模块复制出来,然后在这模块上新增功能,这样就出现重复代码了。后来经过细心的斟酌,同事C改装一下自己的模块,增加模块的扩展性:放大模式。

var module1 = (function (mod){
    mod.m3 = function () {
                //...
            };
    return mod;
})(module1);

模块化的规范:AMD(异步模块定义,Asynchronous Module Definition)
AMD规定,采用require()方法进行加载模块。require()包含两个参数:模块、回调函数。

require([module], callback);

第一个参数:模块,表示当前JS文件(也可以是模块)包含哪些模块;
第二个参数:回调函数,当所需的模块(第一个参数)被从服务器中下载并加载完成后进行调用。

AMD的实现
待更新…

    原文作者:Lycop
    原文地址: https://segmentfault.com/a/1190000015709234
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞