前端模块化梳理

女神镇场

相信不只我一个人对模块化这里感觉不熟练，因为commonJS、AMD、CMD真的很容易把人弄得云里雾里，本着“服务他人，方便自己”的原则，特整理这篇文章，希望对大家有帮助。

• WHY(为什么要使用模块化？)

1. 解决全局变量的命名冲突问题，每个模块相当于一个独立的空间，即使不同模块中的某些变量命名相同也完全没有关系。
   就好像，中国有一HARRISKNG，恰好美国也有一个，我们俩在不同的国家，不会相互影响彼此的生活，反正国家之间的对接是由外交部长来进行的，这是一个道理；

2. 解决依赖的模块顺序问题，即假设你需要引用jQuery，则jQuery必须在改文件之前被加载，但是当加载文件数量增加，这种管理将会非常复杂，因此需要规范来解决。

• WHAT(模块化规范介绍)

  • AMD
    是浏览器端运行的模块化规范。
    主要是为了解决：

    • 文件依赖顺序问题
    • 页面渲染阻塞问题

这里将重点讲解requireJS来对AMD规范进行深入解析，具体见下一篇

• CMD
  即seajs，是中国出品。

• commonJS
  具体形式：(node端运行)

//a.js
var name = "harrisking";
function sayName(){
  console.log(name);
}
function sayHello(){
  console.log('hello'+' '+name);
}
module.exports = {
  sayHello : sayHello,
  sayName : sayName
}

---

//b.js
var nameModule = require('./a.js');
nameModule.sayName();
nameModule.sayHello();

或者

var people = {
  name: 'harrisking',
  age:23,
  saysth: function(){
    console.log('hello,my name is '+this.name+',my age is '+this.age);
  }
}

module.exports = people;

---

var info = require('./a.js');
info.saysth();

• RELATION(规范关系图)