模块化编程
起首,我想说说模块化编程这个观点
当我不清楚这个观点的时刻,实在说什么模块化编程多好多好都是懵逼的
而我一向不觉得有多好,实在也是因为我从最先写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模块在浏览器环境中没法一般运转的题目呢
且听下回分解
附上我的定阅号,迎接关注,一同学前端