JS模块化规范之commonjs,AMD

- 日理万妓 2022-10-31 04:28 282阅读 0赞

# 什么是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()
      })
    })()

## 在页面引入 ##

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

[大佬链接][Link 1]

[Link 1]: http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html