Especificaciones del módulo JS: CommonJS, AMD, CMD, ES6
Una comprensión modular
1. ¿Qué es un módulo
Un procedimiento complejo de acuerdo con una cierta especificación empaquetados en varios archivos, y combinado
2. ¿Por qué Modular?
- reducir la complejidad
- mejorar el desacoplamiento
- Fácil de implementar
3, las ventajas de modular
- conflictos evitar nombrar reducción de la contaminación (espacio de nombres), la reducción de la contaminación variable global
- Mejora de la capacidad de reutilización
- El código más fácil de mantener
- La separación se puede lograr módulo de carga bajo demanda
- La reducción del número de peticiones HTTP en cierta medida
Dos, CommonJS
CommonJSSe carga de forma sincrónica, NodeJS en el uso de CommonJS, porque módulo de lectura es un disco local en el servidor, se cargan rápidamente, para el servidor. CommonJSEspecificación, cada archivo es un módulo, tiene sus propios independientes de alcance, variables y métodos, no son visibles para otros módulos
//加载模块
var modA= require('modA');
modA.start();
三, AMD (Asynchronous Módulo Definición)
AMD se carga de forma asíncrona, la aplicación RequireJS de esta especificación, primero definir todas las dependencias, a continuación, ejecutar la función de devolución de llamada después de la finalización de la carga.
1, definepara definir el módulo
define(id?,dependencies?,factory). id es una cadena única que identifica el tipo de módulo (se pueden omitir), un literal de matriz de dependencias para un bloque definido actualmente es el módulo dependiente (extensiones de archivo por defecto Js), cuando no hay dependencias, el módulo es un módulo independiente, no depende de ningún módulo. la fábrica es ser instanciado función, una función de los parámetros que dependen de un solo módulo, la función devuelve un valor requerido, el valor de retorno de una función que representa el contenido actual del módulo está expuesto.
2. Uso requirede módulo de llamada
requirees función definida require(dependencies,factory). dependencias literal es una matriz, denominada bloque, necesidad fábrica pase a una función de devolución de llamada para explicar la operación llevada a cabo después de la finalización del módulo de carga asíncrona
requiere la función en sí es un objetivo, que tiene una función para configurar las funciones de configuración requieren parámetro de funcionamiento, la función config toma un objeto como un parámetro. config parámetro de objeto tiene los siguientes atributos:
baseUrl
parámetros baseUrl Especifica el directorio de la posición de referencia módulo local, es decir el camino que el módulo local con respecto a la guía.paths
caminos parámetro especifica la ubicación de cada módulo. Esta posición puede ser una ubicación relativa en el servidor, o puede ser una fuente externa. La pluralidad de posiciones se puede definir para cada módulo, si la primera posición de carga falla, la segunda posición de carga, se verá más adelante en los ejemplos específicos.shim
Algunas bibliotecas no son compatibles con AMD, entonces usted necesita para especificar el valor de la propiedad cuña. shim se utiliza para cargar la biblioteca ayuda require.js especificación no AMD.
3, citando el ejemplo
// module1.js
// 定义一个没有依赖的模块
define(function() {
let msg = '123456';
function get() {
return msg;
}
return { get }; // 暴露模块
})
// module2.js
// 定义一个依赖module1的模块
define(['module1'],function(module1) {
let _msg_ = '7890';
function con() {
return module1.get()+_msg_;// 将两个字符串连接起来
}
return { con }; // 暴露模块
})
// main.js
function(){
require.config({
baseUrl:'./modules/',
paths:{
module1:'module1',
module2:'module2'
},
});
require([module2],function(module2){
console.log(module2.con());
});
}();// 1234567890
// index.html
<!DOCTYPE html>
<html>
<head>
<title>AMD</title>
</head>
<body>
<!-- 引入require.js并指定js主文件的入口 -->
<script data-main="js/main" src="js/libs/require.js"></script>
</body>
</html>
bibliotecas de terceros en el archivo module.js, main.js archivo debe tener la configuración de ruta adecuada. Además, también puede especificar una biblioteca a una pluralidad de direcciones de dirección alternativa, utilizando la dirección alternativa cuando la dirección de antes del fallo, por ejemplo
// main.js
function(){
require.config({
baseUrl:'./modules/',
paths:{
jquery:'xxxx'
},
});
}();
require.config({
paths: {
jquery: [
// 路径定义为数组，数组的每一项为一个地址定义
'//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',
'lib/jquery'
]
}
});
三, CMD (Módulo Común definición)
CommonJS integra características y especificaciones de AMD específicamente para-lado del navegador, módulo de carga asíncrona, la especificación del módulo define el formato de la escritura y las reglas básicas de interacción.
CMD se define por las especificaciones definen el módulo de palabras clave, la sintaxis básica para la define (de fábrica), los valores de fábrica puede ser una función o cualquier valor legal (objetos, matrices, cadenas, etc.). Cuando la fábrica es una función que representa el constructor del módulo, la función tiene tres parámetros ---- "requerir, las exportaciones, el módulo" . requerir parámetro es un método que toma como parámetros de módulo de identificación único, para introducirlos. exportaciones parámetros para exponer módulo, puntos de parámetros del módulo al bloque actual.
módulo de carga asíncrona, seajs respetados especificación, es dependiente de la CMD cerca, cuando se utiliza de nuevo requerir
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CMD Demo</title>
<!--引入Sea.js库-->
<script type="text/javascript" src="../../sea-modules/seajs/seajs/2.2.0/sea.js"></script>
<script type="text/javascript">
seajs.use("../../static/cmd/main");// 使用模块
</script>
</head>
</html>
// module1.js
// factory为对象
define({foo:foo});
// module2.js
// factory为字符串
define(foo:"123456");
// module3.js
// factory为数字
define(foo:666);
Lo anterior es factorypara el caso general, cuando el valor de uno cuando mira el siguiente factorytiempo en función
// main.js
define(function(require) {
//通过riquire引用模块
var module1=require('./module1');
var module2=require('./module2');
var module3=require('./module3');
console.log(module1.foo);// foo
console.log(module2.foo);// 123456
console.log(module3.foo);// 666
});
Determinar si la página actual no CMD Módulo cargador
if(tepyof define === "function" && define.cmd){
// 有Sea.js等CMD模块加载器存在
}
La mayor diferencia entre AMD y CMD depende del momento de la aplicación de los diferentes módulos de procesamiento, en lugar de tiempo de carga o de formas diferentes, ambos son todos los módulos de carga asíncrona.
AMD se basa frontal, js fácilmente pueden saber que dependen módulo se carga de inmediato, y CMD cercana dependen, necesidad de utilizar el módulo de análisis sintáctico en una cadena de nuevo saber los módulos dependientes
Cuatro, ES6
ES6 especificación de diseño del módulo es ser capaz de determinar dependencias del módulo tanto como sea posible cuando estática, permite que el compilador. Los CommonJS y CMD, sólo puede determinar las dependencias en tiempo de ejecución.
- Exponer interfaces de
comando de exportación se utiliza para especificar las interfaces externas del módulo, la sintaxis básica para la exportación xxx, interfaz expuesta pueden ser objetos, funciones, tipos básicos de variables. También se puede utilizar la exportación xxx por defecto especifica los módulos de salida por defecto, ya que muchos usuarios no saben cuando el nombre del atributo a ser módulo cargado - Invocando módulo de
función de entrada de comando de importación proporcionada por los otros módulos, la sintaxis básica de la importación de xxx xxx, xxx en el que el primer módulo se incorpora nombres de atributo, xxx es la segunda posición del módulo.
// module1.js
let s='';
function proc(){
s='123456';
return s;
}
export {num,inc};// 暴露接口
// main.js
import {s,proc} from './module1';// 引入依赖
console.log(s);//
console.log(proc);// 123456
En la memoria descriptiva de uso CommonJS, una copia del valor de salida, que es después de los cambios de salida dentro de un módulo no afecta a la salida. Sin embargo, lo opuesto es ES6, especificación ES6 es un valor de salida de referencia, es decir, cambios internos afectan el módulo de salida.
ES6 módulo es un valor de referencia dinámica no se almacenan en caché, el módulo dentro de sus asociaciones de variables en el módulo.
