好久没写博客了,人总是有那么一种惰性,不知不觉就影响了自己,在学习前端这条路上最大的障碍应该就是这个货了吧,差点被消磨了热情与热血,现在缓过神来还来的及,(*^__^*) 嘻嘻……
前端模块化这个名词之前听过但是一直没去了解过怎么个模块化,意思都没有什么理解,只知道有这么个东西,好像在今后的开发中很好用!
直到今日充满惰性的我,终于想起来要去了解下模块化真正的含义;对前端模块化的了解我市通过别人的博客学习,在这里贴下链接吧http://www.cnblogs.com/dolphinX/p/4381855.html 转自博客园!这篇文章讲的还是蛮容易懂得,下面就来总结下我对模块化的理解吧~
JavaScript是一门弱类型语言,所以它没有像Java那样有类,模块的概念,所以想要让JavaScript有模块化这个概念需要模拟出类似的功能,来隔离、组织复杂的JavaScript代码,我们称为模块化。
函数的封装
function fn1(){
statement
}
function fn2(){
statement
}
在函数封装之后 在其他项目中只需要引用就可以直接拿来用,但是这样的方法有一定的缺点:污染了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间没什么关系。
由于上述方法有一定的缺点,所以又引出了对象的写法
var myModule = {
var1: 1,
var2: 2,
fn1: function(){
},
fn2: function(){
}
}
这种写法可以通过
myModule.fn1()
直接调用,这样避免了变量污染,只要保证模块名唯一即可,同时同一模块内的成员也有了关系。
但是这类写法有安全问题,外部可以随意修改内部内容,即:
myModule.var1=3
立即执行函数
var myModule = (function(){
var var1 = 1;
var var2 = 2;
function fn1(){
}
function fn2(){
}
return {
fn1: fn1,
fn2: fn2
};
})();
以上为模块化的基础,目前JavaScript 的模块规范主要有两种 commonjs 和 AMD;
CommonJs
模块输出:module.exports把模块希望输出的内容放入该对象;
加载模块:require 方法
//模块定义 myModel.js
var name = 'geww';
function printName(){
console.log(name);
}
function printFullName(firstName){
console.log(firstName + name);
}
module.exports = {
printName: printName,
printFullName: printFullName
}
//加载模块
var nameModule = require('./myModel.js');
nameModule.printName();
AMD(Asynchronous Module Definition) 异步模块定义
采用RequireJs
定义模块myModule.js:
// 定义模块 myModule.js
define(['dependency'], function(){
var name = 'Byron';
function printName(){
console.log(name);
}
return {
printName: printName
};
});
// 加载模块
require(['myModule'], function (my){
my.printName();
});
其中的define函数(全局变量,用来定义模块)
define(id?,dependdencies?,factory);
1.id:可选参数,用来定义模块的标识,如果没有改参数即脚本文件名(没有后缀);
2.dependencies:是一个当前模块以来的模块名称数组
3.factory:工厂方法,模块初始化要执行的函数或对象。如果为函数,它应该只被执行一次,如果是对象,此对象为模块的输出值。
require()函数加载模块
require([dependencies],function(){});
1.第一个参数是一个数组,表示所依赖的模块
2.第二个参数是一个回调函数,加载模块会以参数的形式传入该函数,从而在回调函数内部就可以使用这些模块。
require()函数在加载时是异步加载的
CMD(Common Module Definition) 通用模块定义
采用seajs
语法:
define(id?,deps?,factory)
factory有三个参数:
function(require,exports,module)
require (id) 接受模块标识
exports 用来向外提供模块接口
module 存储了与当前模块相关联的一些属性和方法
demo:
// 定义模块 myModule.js
define(function(require, exports, module) {
var $ = require('jquery.js')
$('div').addClass('active');
});
// 加载模块
seajs.use(['myModule.js'], function(my){
});
浅谈AMD 与 CMD 的区别
在模块定义时对依赖的处理不同
1.AMD推崇依赖前置,在定义模块是就要声明其依赖的模块
2.CMD推崇就近依赖,只有在用到某个模块时再去require
AMD 与 CMD对依赖模块执行的时机不同~