JavaScript模块化编程学习笔记

一、前言

从开始接触JavaScript到现在也快两年了，一直是需要什么功能，便写什么代码，在这个过程中也一直缺乏归纳总结，代码的重用性和可维护性非常低。前段时间学习了一下requireJs，越发觉得JavaScript的模块化很重要，既能提高代码的重用性和可维护性，也使代码看起来整洁大方，心情愉悦呀~~~（废话真多！）

这次的学习笔记主要是根据阮一峰大神的博客来记录的

Javascript模块化编程（一）：模块的写法

Javascript模块化编程（二）：AMD规范

二、模块知多少

模块：实现特定功能的方法

2.1 原始写法

function m1(){
  //...
}

function m2(){
  //...
}

缺点：
①污染全局变量
②可能与其他模块发生命名冲突
③模块成员之间看不出直接关系

2.2 对象写法

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

缺点：
①暴露所有模块成员
②内部状态可以被外部改写，例如：module1._count = 5

2.3 立即执行函数

立即执行函数(Immediately-Invoked Function Expression，IIFE)

(1) 基本写法

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

优点：不暴露私有成员
函数语法说明：第一个（）将函数变成表达式，第二个（）执行了这个函数。
另一种改进的形式：

(function(){}())

两者功能一致。

(2)放大模式

放大模式（augmentation），将它们作为函数调用并传递参数进去。

var a=2;
(function IIFE(global){
  var a=3;
  console.log(a); //3
  console.log(global.a); //2
})(window);
console.log(a); //2

应用场景：
①模块较大，需要拆分成几个部分
②一个模块需要继承另一个模块
③为原有模块增加新方法

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

④倒置代码的运行顺序，将需要运行的函数放在第二位，在IIFE执行之后当做参数传递进去。

(function IIFE(def){
  def(window);
})(function def(global){
  var a =3;
  console.log(a); //3
  console.log(global.a); //2
})

(3)宽放大模式

宽放大模式(Loose augmentation),”立即执行函数”的参数可以是空对象

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

三、规范知多少

目前，通行的Javascript模块规范共有两种：CommonJS和AMD

规范	代表	应用于	模式	等待时间
CommonJS规范	node.js	服务器端	同步加载(synchronous)	取决于硬盘读取时间
AMD规范	requirejs等	客户端	异步加载(asynchronous)	取决于网速的快慢

CommonJS规范语法：

var math = require('math');
math.add(2, 3);

AMD规范语法：

require([module], callback);

require(['math'], function (math) {
　　math.add(2, 3);
});

一、前言
二、模块知多少
三、规范知多少