JS模块化规范之commonjs,AMD

什么是commonjs

CommonJs 是一种 JavaScript 语言的模块化规范，它通常会在服务端的 Nodejs 上使用。

• 根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在一个文件定义的变量（还包括函数和类），都是私有的，对其他文件是不可见的
• 而且：CommonJS 加载模块是同步的，所以只有加载完成才能执行后面的操作 服务端NodeJS采用了commonJS规范

commonjs服务端应用

• module.exports = value(只能使用一个)
• module.exports = function(){}
• exports.XXX(可以定义多个)
• npm init

commonjs浏览器

1. 利用插件Browserify进行打包，因为浏览器不认识nodejs语法
2. 全局安装 npm install browserify -g
3. 局部(生产依赖): npm install browserify -g
4. 打包处理js：browserify js/src/app.js js/dist/bundle.js
5. 命令行：browserify app.js -o dist/bundle.js
6. 页面引入打包文件

什么是Browserify

Browserify是JavaScript的模块打包器。也称为CommonJS的浏览器端的打包工具

Browserify作用

预编译打包nodejs模块，使之能够在浏览器端使用。

原理

Browserify从entry着手，对源代码进行抽象语法树分析，从而获得整个项目的依赖关系图，最后将整个项目打包成一个JavaScript文件。

什么时候需要Browserify

当你的js文件想在html文件引入，并在浏览器使用，就必须使用Browserify插件或者webpack。(否则你的控制台会报错不认识require等)

AMD模块化规范

• Asynchronous Module Definition，即异步模块加载机制 专用于浏览器端，模块的加载是异步的

基本语法

定义暴露模块

//定义没有依赖的模块
define(function(){
	return 模块
})

//定义有依赖的模块
define(['module1', 'module2'], function(m1, m2){
	return 模块
})

引入使用模块

require(['module1', 'module2'], function(m1, m2){
	使用m1/m2
})

实现(浏览器端)

使用requirejs

requirejs是什么

requireJS是让js代码模块化；而且js之间的依赖关系，不再依靠script标签的顺序，可以加载不阻塞

使用Require.js
(function () {
  //配置
  require.config({
    //基本路径
    baseUrl: 'js/',
    //映射: 模块标识名: 路径
    paths: {
      //自定义模块
      'alerter': 'modules/alerter',
      'dataService': 'modules/dataService',
      
    },

  })

  //引入模块使用
  require(['alerter'], function (alerter) {
    alerter.showMsg()
  })
})()

在页面引入

 <script data-main='js/main.js' src="js/libs/require.js"></script>

data-main 是入口途径，src使用requirejs

大佬链接