第二十三节：JS模块化历史、CommonJs详解、AMD和CMD规范知悉

一. JS模块化历史

1. 什么是模块化？

(1) 到底什么是模块化、模块化开发呢？

事实上模块化开发最终的目的是将程序划分成一个个小的结构；

这个结构中编写属于自己的逻辑代码，有自己的作用域，不会影响到其他的结构；

这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用；

也可以通过某种方式，导入另外结构中的变量、函数、对象等；

(2) 上面说提到的结构，就是模块；按照这种结构划分开发程序的过程，就是模块化开发的过程；

(3). 无论你多么喜欢JavaScript，以及它现在发展的有多好，它都有很多的缺陷：

比如var定义的变量作用域问题；

比如JavaScript的面向对象并不能像常规面向对象语言一样使用class；

比如JavaScript没有模块化的问题；

(4). Brendan Eich 本人也多次承认过JavaScript设计之初的缺陷，但是随着JavaScript的发展以及标准化，存在的缺陷问题基本都得到了完善。

2. 模块化的历史

(1).在网页开发的早期， Brendan Eich 开发JavaScript仅仅作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的：这个时候我们只需要讲JavaScript代码写到

导出代码

define(function() {
  const name = "why"
  const age = 18
  function sum(num1, num2) {
    return num1 + num2
  }

  return {
    name,
    age,
    sum
  }
})

导入代码

require.config({
	baseUrl: "",
	paths: {
		foo: "./src/foo",
	},
});

// 或者
// require.config({
//   paths: {
//     foo: "./foo",
//     bar: "./bar"
//   }
// })

require(["foo"], function (foo) {
	console.log("main:", foo);
});

四. CMD规范【了解】

1. 简介

CMD规范也是应用于浏览器的一种模块化规范：

CMD 是Common Module Definition（通用模块定义）的缩写；它也采用了异步加载模块，但是它将CommonJS的优点吸收了过来；但是目前CMD使用也非常少了；

CMD也有自己比较优秀的实现方案：SeaJS

2. 应用

导出代码

define(function(require, exports, module) {
  const name = "why"
  const age = 18
  function sum(num1, num2) {
    return num1 + num2
  }

  // exports.name = name
  // exports.age = age

  module.exports = {
    name,
    age,
    sum
  }
});

导入代码

define(function(require, exports, module) {
  const foo = require("./foo")
  console.log("main:", foo)
})

作者 : Yaopengfei(姚鹏飞)
博客地址 : http://www.cnblogs.com/yaopengfei/
声明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
声明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。

16-JS高级

第二十三节：JS模块化历史、CommonJs详解、AMD和CMD规范知悉

相关

标签