JavaScript -CommonJS modulares, AMD, CMD, UMD, ES6

Introducción: Las necesidades de desarrollo modular

A principios de la JS, utilizar la etiqueta script para introducir JS, puede causar los siguientes problemas:

Cuando las cargas de bloqueo prestación Web, la introducción de más JS, ya tiempo de bloqueo.
Fácil de contaminar la variable global.
existen dependencias de los archivos js, tiene que haber secuencia cargada. Cuando los proyectos de mayor tamaño, dependerá del complejo.
JS introdujeron excesiva, desagradable, y no es fácil de manejar.

A, especificación CommonJS

CommonJS módulos / 1,0 especificación, la especificación de servidor.

Node.js ampliamente utilizado. El núcleo de esta especificación es: El método permite que el módulo de sincronización requiere la carga de otros módulos depende, a continuación, las exportaciones o module.exports derivados de interfaz necesita ser expuesta.

características:

Un módulo es un archivo

Uso module.exports exportaciones o módulo de exportación

// module.js
exports.add = (a, b) => a+b

module.exports = {
  add: (a, b) => a + b
}

Requieren el uso de módulos de carga

a. require命令第一次加载模块时，执行整个脚本，在内存中生成对象
b. 多次执行require命令再次加载该模块时，不会再执行该脚本，直接从缓存中取值
c. CommonJS加载模块是同步加载模块

Consejos:

¿Por qué especificación CommonJS es inapropiado para un navegador especificaciones

由于CommonJS是同步加模块，在服务端加载模块时都是从本地硬盘中加载，读取速度很快。但是在浏览器端加载模块时，需要请求服务器端，涉及网速、代理的问题，一旦等待时间过长，浏览器会处于“假死”状态。

Dos, especificación ADM

AMD (Asynchronous Módulo Definición) definición de módulo asíncrono, las especificaciones del cliente.
De forma asincrónica cargar ejecución del módulo de carga del módulo detrás de esto no afecta a la generación de la declaración.

AMD es require.js en el proceso de promoción del uso del producto estandarizado definición de módulo.

En uso, la necesidad de introducir require.js

característica

Use Definir módulo de definición ()

/**
 * @param id 模块名称，如果为空，模块的名字默认为模块加载器请求的指定脚本名
 * @param dependencies 模块依赖
 * @param factory 工场函数，模块初始化执行的函数或对象
 */
define(id? dependencies? factory)

Requieren el uso de módulos de carga
```
require([module], callback)
```
AMD depende del módulo frontal

Tres, la especificación CMD

CMD (Common Module Definition) de definición de módulo común, módulo de carga asíncrona.

CMD es la estandarización del producto en el módulo del proceso de promoción sea.js definido.

En uso, la necesidad de introducir sea.js

características:

Use Definir módulo de definición () usando requerir módulo de carga ()
```
define(function (require, exports, module) {
	let a = require('a')
	let b = require('b')
	exports.eat = a.eat
	exports.run = b.run
})
```
Entonces requiere módulo de carga se carga más cercana respetado CMD dependiente, a un módulo requerido
Uso seajs.use cargado usando módulo
```
seajs.use(id, callback?)
```

Cuatro, Especificaciones UMD

UMD (módulo universal Definición) definición de módulo común, para ser compatible con AMD, CMD y especificaciones no modulares de desarrollo

/**
 * UMD-Universal Module Definition 通用模块定义
 * */
 (function (root, factory) {
	 // 判断是否是AMD/CMD
	 if (typeof define === 'function') {
		 define([], factory)
	 } else if (typeof exports === 'object') {
		 // Node CommonJS规范
		 module.exports = factory()
	 } else {
		 // 浏览器环境
		 root.someAttr = factory
	 }
 })(this, function () {
	 let add = function (a, b) {
		 return a + b
	 }
	 return {
		 add,
		 module: 'UMD'
	 }
 })

Cinco, el módulo ES6

ES6 imort consigue mediante módulos de entrada y de salida, y la, función de entrada de comando de importación exportación proporciona en otro módulo, un comando para un módulo de interfaz externa de exportación predeterminado.

características:

Uso módulo de exportación de exportación

// test.js
export let module = 'ES6 Module'
export let hello = function () {}
let demo = function () {}
// 默认导出
export default demo

El módulo de importación de importación

// 导入默认模块
import demo from './test.js'

// 导入指定模块
import { hello, module } from './test'

// 导入指定模块，并重命名
import { hello as hi, module } from './test.js'

// 导入全部模块，并重命名
import * as test from './test.js'

posdata

Y que Hu hermano hoy para compartir contenido, como un socio pequeño para recordar 收藏, y 转发haga clic en el botón de abajo a la derecha a 在看lo recomiendo a socio de menor rango de Yo, la bienvenida a una gran cantidad de intercambios de mensajes ...

Hu hermano algo que decir, una habilidad, un sentimiento de hermano Hu! Ahora Ren extremo delantero de un león Jingdong sitio.
Hu hermano algo que decir, se centran en la parte delantera de un gran campo de la tecnología, el intercambio de la arquitectura del sistema de front-end, el principio de la aplicación marco, la última y más eficiente tecnología de la práctica!

Prensa código de exploración de que se trate, más guapo y más bella Yo! Sin la atención del público Hu hermano algo que decir, puede seguir un profundo intercambio con Hu hermano Yo!

Hu hermano algo que decir