使用CommonJS，AMD以及CMD编写模块化JavaScripts

模块化编程

首先，我想说说模块化编程这个概念
当我不清楚这个概念的时候，其实说什么模块化编程多好多好都是懵逼的
而我一直不以为有多好，其实也是由于我从开始写js，就一直都在模块化编程啊

//咱们写一个文件check.js

function check(){
    return true;
}

//而后咱们在html文件中引入

<scripts src="check.js"></scripts>

//而后调用方法

<script type="text/javascript">
if(check()){
    console.log("哈哈");
}
</script>

这样已是模块化编程了
其实我今天要探讨的并非如何模块化编程
由于或多或少咱们都是在模块化编程
但想要把一个项目
用模块化编程的思想去处理
让它变得易扩展易维护
须要长期的扑街爬起扑街爬起

今天想讲的其实应该是如何更有效的处理划分引入js文件

CommonJS

像上述最原始的模块化编程引入的方法
咱们能够看到会有多行
<scripts src=""></scripts>
但凡有点追求的程序员，是不会容许一个页面里面有多行重复的内容的
并且主要引入文件的时候会有过多的全局变量暴露在外
平时写写小项目 就算有bug 找出缘由也是容易的
但项目一大 开发人员一多
就会出现我放在客厅里的点心被偷吃了一块，那么怪谁呢，谁叫你放在客厅里

先举个CommonJS 的写法的例子

//先建立一个 check_commonjs.js 的文件

var flag = true;

function check(){
    return flag;
}

module.exports = {
    check: check,
}

//在咱们须要用到的页面加载模块

var module = require('./check_commonjs.js');

if(module.check()){
    console.log("哈哈哈");
}

在CommonJS里面，被var定义的，在文件中做为全局存在的，在引入后，都仍是私有的。固然，设计者们不是傻瓜
在定义内容前 加入 global 那也仍是全局的

CommonJS的用法 在Node里面被应用的很溜
然而平时咱们在作web开发的时候并不被前端开发人员所追逐
那是为何呢？
Node做为服务端应用，加载一个文件，速度就是真的是能够忽略不计的
然而浏览器做为一个客户端，在这个大框框下面，想要加载完一个js文件
再执行下面的js语句
起码如今速度真没那么快
因此就有了咱们经常使用的AMD和CMD

AMD

AMD:异步模块定义
最多见的应用例子就是RequireJS
先举一个RequireJS的例子

// 先建立一个 check_amd.js 的文件

define(['check'], function(){
    var flag = true;
    function check(){
        return flag;
    }

    return {
        check: check
    };
});

// 在咱们须要用到的页面加载模块

require(['check_amd'], function (check){
    if(check.check()){
        console.log("哈哈哈");
    }
});

从代码的整洁性和可读性来说
CommonJS 要好不少
但AMD定义下的RequireJS 解决了上述同步加载文件致使的问题

与AMD对应的就有CMD

CMD

CMD:通用模块定义
最多见的应用例子就是SeaJS
有些人把RequireJS 与 SeaJS作比较的时候
会简单的认为异步与同步的区别
这明显不太对是否是
加载文件的时候首先必定是异步的

先举一个SeaJS的例子

// 先建立一个 check_cmd.js 的文件

define(function(require, exports, module) {
    var a = require('a');//这里就不举例再建立a文件了
    function check(){
       return a.flag;
    }
    exports.check = check;
});

// 在咱们须要用到的页面加载模块
seajs.use(['check_cmd.js'], function(check){
    if(check.check()){
        console.log("哈哈哈");
    }
});

能够看出来AMD与CMD的本质区别就是
AMD是加载彻底部你所须要的文件
CMD是当你须要那个文件的时候他才加载
两个比较下来就是说AMD用户体验好，由于没有延迟，依赖模块提早执行了，CMD性能好，由于只有用户须要的时候才执行

最后

其实AMD与CMD的模式比较下来仍是很繁琐
最喜欢的仍是CommonJS的模式
那么如何利用CommonJS来编写JavaScripts，并无最上述提到的因为浏览器加载文件须要时间，传统CommonJS模块在浏览器环境中没法正常运行的问题呢
且听下回分解

附上个人订阅号，欢迎关注，一块儿学前端