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

Introduction: besoins de développement modulaire

Au début des années JS, utilisez la balise de script pour introduire JS, peut causer les problèmes suivants:

Lorsque les charges de blocage rendu Web, l'introduction de plus JS, le blocage de plus de temps.
Facile à pollue la variable globale.
dépendances de fichiers js existent, il doit être séquence chargée. Lorsque les grands projets, dépendra du complexe.
fichiers JS introduit excessive, disgracieux, et pas facile à gérer.

A, spécification CommonJS

CommonJS spécification modules / 1,0, la spécification de serveur.

Node.js largement utilisé. Le noyau de la présente description est la suivante: Le procédé permet au module de synchronisation nécessite le chargement d'autres modules dépend donc des exportations ou module.exports dérivés d'interface doit être exposée.

Caractéristiques:

Un module est un fichier

Utiliser des exportations de module.exports ou module d'exportation

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

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

Exiger l'utilisation de modules de charge

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

Conseils:

spécification Pourquoi CommonJS est inapproprié pour les spécifications du navigateur

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

Deux, la spécification ADM

AMD (Asynchronous Module Définition) définition du module asynchrone, les spécifications du client.
Charge de manière asynchrone exécution du module de charge le module derrière elle ne modifie pas la génération de la déclaration.

AMD est require.js dans le processus de promotion de l'utilisation de la définition du module produit standardisé.

En utilisation, la nécessité d'introduire require.js

caractéristique

Utilisez define () module de définition

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

Exiger l'utilisation de modules de charge
```
require([module], callback)
```
AMD dépend du module avant

Trois, spécifications CMD

CMD (Common Définition Module) de définition de module commun, le module de chargement asynchrone.

CMD est la standardisation du produit dans le module du processus de promotion défini.

En utilisation, la nécessité d'introduire sea.js

Caractéristiques:

Utilisez le module de définition define () à l'aide require () module de charge
```
define(function (require, exports, module) {
	let a = require('a')
	let b = require('b')
	exports.eat = a.eat
	exports.run = b.run
})
```
Ensuite, nécessitent module de chargement est chargé respecté le plus proche dépendant CMD, à un module requis
Utilisation seajs.use chargé module à l'aide
```
seajs.use(id, callback?)
```

Quatre, Spécifications UMD

UMD (définition Universal Module) Définition du module commun, pour être compatible avec AMD, CMD et spécifications de développement non modulaires

/**
 * 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'
	 }
 })

Cinq, le module ES6

ES6 Imort obtenue par modules d'entrée et de sortie, et l'exportation, la fonction d'entrée de commande d'importation prévu sur un autre module, une commande pour un module d'interface externe à l'exportation prédéterminée.

Caractéristiques:

Utilisez le module d'exportation d'exportation

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

Le module d'importation d'importation

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

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

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

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

post-scriptum

Et ce frère Hu aujourd'hui pour partager du contenu, comme un petit partenaire de se rappeler 收藏, et 转发cliquez sur le bouton en bas à droite pour le 在看recommander à partenaire plus jeune Yo, bienvenue à un grand nombre d'échanges de messages ...

Hu quelque chose à dire frère, une compétence, un sentiment de frère Hu! Maintenant Ren Jingdong extrémité avant d'un lion de siège.
Hu quelque chose à dire frère, se concentrer sur l'extrémité avant d'un grand domaine de la technologie, le partage de l' architecture du système frontal, cadre principe de mise en œuvre, la dernière et la pratique de la technologie la plus efficace!

Composez le code de balayage concerné, plus beau et plus beau Yo! Pas l'attention du public quelque chose Hu frère dire, peut se poursuivre en profondeur les échanges avec Hu frère Yo!

Hu frère quelque chose à dire