使用CommonJS，AMD以及CMD编写模块化JavaScripts
模块化编程
首先，我想说说模块化编程这个概念
当我不清楚这个概念的时候，其实说什么模块化编程多好多好都是懵逼的
而我一直不觉得有多好，其实也是因为我从开始写js，就一直都在模块化编程啊
//我们写一个文件check.jsfunction check(){ return true;}//然后我们在html文件中引入//然后调用方法if(check()){ console.log("哈哈");}这样已经是模块化编程了
其实我今天要探讨的并不是如何模块化编程
因为或多或少我们都是在模块化编程
但想要把一个项目
用模块化编程的思想去处理
让它变得易扩展易维护
需要长期的扑街爬起扑街爬起
今天想讲的其实应该是如何更有效的处理划分引入js文件
CommonJS
像上述最原始的模块化编程引入的方法
我们可以看到会有多行
但凡是有点追求的程序员，是不会允许一个页面里面有多行重复的内容的
而且主要引入文件的时候会有过多的全局变量暴露在外
平时写写小项目 就算有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模块在浏览器环境中无法正常运行的问题呢
且听下回分解
关键字：JavaScript, 模块化, 模块化开发
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！