前端模块化梳理

前端模块化梳理_第1张图片
女神镇场

相信不只我一个人对模块化这里感觉不熟练,因为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(规范关系图)
前端模块化梳理_第2张图片

你可能感兴趣的:(前端模块化梳理)