O problema complexo em módulos relativamente independentes, este projeto pode reduzir a complexidade processual e aumentar a reutilização de código, mas também propício para o desenvolvimento trabalho em equipe e pós-manutenção e expansão.

Desde ECMAScript2015o início da introdução do conceito de módulos, que chamamos: ECMAScript Module, referido como:ESM。

2. O núcleo modular

âmbito independente - vai código isolar eficazmente, o código não vai influenciar um ao outro entre os módulos
Como exportar módulo de dados interna - acesso a dados modular
Se um módulo externo para importar dados

3.ESM

Desde o ECMAScript2015/ECMAScript6início, JavaScripto nativo introduziu o conceito de módulos, e agora os navegadores tradicionais têm suporte muito bom.

3.1 Âmbito módulos independentes

Um arquivo é o módulo, um escopo independente e exportação módulos automaticamente no 严格模式caso , a saber: 'use strict'.

Se o arquivo é carregado através de uma modular, então:

O arquivo terá um escopo separado;
O código padrão dentro do arquivo é executado no modo restrito a saber: 'use strict'a.

Modo estrita ( 'use strict'):

Variáveis devem ser declaradas antes do uso;
Sem elevador variável (mecanismo de pré-resolução).

dados interna módulo 3.2 derivação

Use exportdeclarações exportar módulo de dados interno.

// 导出单个特性
export let name1, name2, …, nameN;
export let name1 = …, name2 = …, …, nameN;
export function FunctionName(){...}
export class ClassName {...}

// 导出列表
export { name1, name2, …, nameN };

// 重命名导出
export { variable1 as name1, variable2 as name2, …, nameN };

// 默认导出
export default expression;
export default function (…) { … }
export default function name1(…) { … }
export { name1 as default, … };

// 模块重定向导出
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;

módulo de dados externo 3,3 importação

Importando dividido em dois modos

estática Import
Importação dinâmica

3.3.1 estática Import

No navegador importdeclaração só pode ser declarada type="module"usando o script do rótulo .

E declarações de importação deve ser escrito em arquivo JS topo;

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

modo de importação estático não suporta o carregamento lento, importvocê deve ser o começo deste módulo

document.onclick = function () {

    // import 必须放置在当前模块最开始加载
    // import m1 from './m1.js'

    // console.log(m1);

}

3.3.2ESM Import Export - Exemplo:

Projeto Caminho:

index.html: Observe o uso da modular ESM, tags de script deve ser type = atributo "módulo".

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 在浏览器中，import 语句只能在声明了 type="module" 的 script 的标签中使用。 -->
    <script type="module" src="./js/main.js"></script>
</body>
</html>

main.js:

notas:

caminho do arquivo deve terminar' js;
Quando você importar uma lista de todos os nomes de variáveis e nomes de variáveis deve exportar um tempo, você não quer onze objetos usando um alias;
importação padrão não pode adicionar {} exportação;
Quando a exportação modular redirecionamento (que é exportado a partir de outro arquivo de módulo ou script), a representação do módulo de uma exportação de arquivo script existente ...


//导入m1模块
//1.导出单个特性:因为不是默认导出，所以需要声明变量接收,且文件必须有.js结尾
import {cssFunc1,cssFunc2,cssFunc3,M1Class} from './m1.js';

// 2.导入列表：:此处a,b,c必须和导出中的变量名一一对应
import {a,b,c} from './m1.js';

//3.重命名导出：导入导出的变量名需一一对象，想在导入时使用不同名字可使用别名， 变量名 as 别名
// import {name,pw} from './m1.js'
import {name as name1,pw as pw1} from './m1.js';

//4.默认导入：注意：default导入导出都不需要加{}
// import aa from './m1.js';
// import defaultFunc from "./m1.js"
// import defaultFunc2 from './m1.js';
import bb from './m1.js';

// 5.模块重定向导出
import * as obj from './m1.js'
import {v1,v2} from './m1.js';
import {value1,value2} from './m1.js';
import {default as defaultV} from './m1.js';


// 1.导出单个特性
let a1 = 10;
let m1Class = new M1Class();
m1Class.m1ClassFunc();

console.log("main.js",a1,cssFunc1,cssFunc2,cssFunc3);

//2.导入列表
console.log(a,b,c);//1 2 3

//3.重命名导出
// console.log(name,pw);//张三 1234
console.log(name1,pw1);//张三 1234

//4.默认导入
// defaultFunc();
// defaultFunc2();
// console.log(aa);
// console.log(bb);

//5.模块重定向导出
console.log(obj);//Module {…}
console.log(v1,v2);//2 3
console.log(value1,value2);//2 3
console.log(defaultV);//ƒ m2Func(){ console.log(v1+v2); }

m1.js:

console.log("m1模块...");

function css1(){
    console.log("m1模块下的css1方法");
}


//1.导出单个特性
export let cssFunc1 = css1;

export let cssFunc2 = function css2(){
    console.log("m1模块下的css2方法");
}

export function cssFunc3(){
    console.log("m1模块下的cssFunc3方法");
}

export class M1Class{
    constructor(){

    }
    m1ClassFunc(){
        console.log("m1模块下的m1ClassFunc");
    }
}

//2.导出列表
let a = 1,b=2,c=3;
export {a,b,c};

//3.重命名导出
let username = "张三";
let password = "1234";
export {username as name,password as pw};

//4.默认导出
let aa = 1;

// export default aa;
// export default function() { 
//     let defaultVal = 33;
//     console.log("defaultVal:"+defaultVal);
    
//  }
// export default function defaultFunc2() {
//     console.log("defaultFunc2方法");
// }
let bb = 2,cc = 3;
//不能同时导出多个。如export { bb as default,cc as default};
// export { bb as default};

// 5.模块重定向导出: from－从已经存在的模块、脚本文件…导出
export * from './m2.js';
export {v1,v2} from './m2.js';
export { v1 as value1, v2 as value2 } from './m2.js';
export { default } from './m2.js';

m2.js:

let v1=2,v2=3;
export {v1,v2};
export default function m2Func(){
    console.log(v1+v2);
}

resultados:

3.3.3 Dinâmica introduzido importação ()

Além disso, há uma função semelhante dinâmica import(), que não depende type="module"da tag script.
Palavras-chave importpode ser como chamar uma função de módulos importadores dinamicamente. Nesta chamada forma, ele irá retornar um promise.
Use assíncrona de carregamento de atraso await é assíncrona, para usar o método padrão (), derivada em função da exportação deve tempo

Método 1: Método do objeto promessa, em seguida,

import('./m.js')
  .then(m => {
    //...
});
// 也支持 await
let m = await import('./m.js');

Por um import()método de introdução de dados de retorno vai ser embalado em um objecto, mesmo que o defaultverdadeiro

Exemplo: A importação () é derivado a partir de um objecto promessa.

M3.js carrega o arquivo não está no carregamento da página inicial, mas a carga quando clicado.

m3.js:

let obj = {
    a:1,
    b:2
}

export default obj;

main.js: Se você importar através da declaração de importação

//6.动态导入：通过import()方法导入，返回一个promise对象进行异步延迟加载
document.onclick = function(){
    //直接通过import导入会报错
    // import obj from 'm3.js';
    // console.log(obj);
    import('./m3.js').then(obj=>{
        console.log(obj);
        
    });
}

resultados:

A segunda maneira: usando assíncrona de carregamento de atraso aguardam

Use assíncrona de carregamento de atraso await é assíncrona, para usar o método padrão (), derivada em função da exportação deve tempo

m3.js:

function css(){
    console.log("css");
}

export default css;

main.js:

//使用async  await进行异步延迟加载
document.onclick = async function(){
    let m1 = await import('./m3.js');
    console.log(m1);
    m1.default();
}

resultados:

4. modular compatível com versões anteriores

commonjs
AMD
UMD
ESM

Se é o tipo de especificações modulares, com foco em:

módulo Scope Independent
módulo de dados interna exportação
módulo de importação de dados externa

5.CommonJS

No início dos anos front-end para modular e não existe um padrão, mas é inclinado para o servidor de aplicação tem uma procura forte, especificação commonjs é um conjunto de polarização do lado do servidor modular normalizado, NodeJS sobre o uso da presente especificação .

NodeJS e distal JS é a mesma raiz, o analisador V8 NodeJS, o ECMAscript língua mais subjacente, com base nesta NodeJS estender um arquivo, como sistemas operacionais, redes, discos rígidos diferentes do navegador meios operacionais.

Commonjs backend especificação modular, realizada através do funcionamento do sistema de arquivos, o sistema de arquivos não pode operar, mas o front-end, o front-end não pode usar especificação commonjs.

5.1 Âmbito módulos independentes

Um arquivo é o módulo, um escopo independente.

método de carregamento commonjs é o uso de documentos modulares mistos síncronos. Somente após a carga modular de sucesso vai continuar a descer a implementação.

5,2 módulo de exportação de dados internos

Por module.exportsou exportsmódulos objectos de dados interna derivados.

Nota: module.exportsou exports dois métodos não podem ser utilizados simultaneamente.

// a.js
let a = 1;
let b = 2;

module.exports = {
  x: a,
  y: b
}
// or
exports.x = a;
exports.y = b;

módulo de dados externo 5.3 importação

Por requireintrodução de dados da função módulo externos

// b.js
let a = require('./a');
a.x;
a.y;

Especificação usa exemplos 5.4CommonJS

Pelo ambiente NodeJS, usando main.js nodemon começar main.js.

m1.js:

let a = 1, b =2;
// module.exports = {
//     x:a,
//     y:b
// }

exports.l = a;
exports.m = b;

main.js:

let obj = require('./m1');
// console.log(obj);//{ x: 1, y: 2 }
console.log(obj);//{ l: 1, m: 2 }

6.AMD

Como alguns recursos especificação commonjs (baseado no sistema de arquivos, sincronização é carregado), não se aplica para o navegador, as especificações de modo ainda mais definidos se aplicam ao navegador

AMD(Asynchronous Module Definition)。AMD没有办法获取本地文件，因此使用异步文件加载方式实现模块化加载。

https://github.com/amdjs/amdjs-api/wiki/AMD

O navegador e não existe um código específico que implementa a especificação, que pode ser resolvido por algumas bibliotecas de terceiros. Como RequireJS.

7.AMD - RequireJS

Site oficial: https://requirejs.org/

Deve ser especificado pela entrada de arquivo na página de dados principal;

// 1.html
<script data-main="scripts/main" src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js"></script>

7.1 Âmbito módulos independentes

Por um definemétodo para definir um bloco, e por geração de um segundo parâmetros de alcance de chamada de retorno independentes para este método

// scripts/Cart.js
define(function() {
  // 模块内部代码
})

dados interna módulo 7.2 derivação

Exportar módulo de duas formas:

voltar caminho;
estilo exportações Use commonjs

Ao returnderivar os dados internos do módulo: o método pode ser derivado, um objecto outras coisas;

// scripts/Cart.js
define(function() {
  return class Cart {
    add(item) {
      console.log(`添加商品：${item}`)
    }
  }
})

módulo de dados externo 7.3 importação

Lista de dados de importação através do módulo externo dependente da frente

// scripts/main.js
// 定义一个模块，并导入 ./Cart 模块
define(['./Cart'], function(Cart) {
  let cart = new Cart()
  cart.add({name: 'iphoneXX', price: 1000000})
})

7.4AMD - RequireJS usa exemplos

Você deve estar na página especificado pelo arquivo Dados de entrada-principal ;
Quando a entrada especifica o arquivo usando dados Main, cria dinamicamente uma tag de script, então o arquivo via ajax maneira (solicitação de rede Método) para carregar o arquivo JS para carregar (main.js), porque a página deve ser executado em um ambiente de servidor ;
Ao definedefinir uma abordagem modular, e o código do módulo de isolamento;
módulo de exportação: Modo 1: Ao voltar a returnderivação do módulo de dados interno, em segundo lugar maneira: o estilo commonjs derivados;

index.html:

Você deve especificar o principal arquivo de dados de entrada

<body>
    <script data-main="js/main.js" src="js/require.js"></script>
</body>
</html>

require.js:

Como as cargas do website oficial lentamente, após a execução, a JS e depois copiar o seguinte endereço na página da web para baixo, gerando arquivos require.js no diretório especificado

https://cdn.bootcss.com/require.js/2.3.6/require.min.js

main.js:

Quando o arquivo de importação, o arquivo deve ser utilizado nos suportes [] para a aplicação

//导入模块化文件时，通过方法的参数获取到模块中导出的数据
//注意导入时，文件名需要使用中括号
define(['./m1'],function(Cart){
    let cart = new Cart()
        return cart.add({name: 'iphoneXX', price: 1000000})
    }
);

m1.js:

Exportar dados modulares por meio de retorno

define(function () {
    return class Cart {
        add(item) {
            console.log("m1模块");
            console.log(`添加商品：${item}`, item)
        }
    };
});

resultados:

estilo 8.requireJS de commonjs

require.jsTambém suporta CommonJSsintaxe estilo

dados interna módulo 8.1 derivação

// scripts/Cart.js
define(['require', 'exports', 'module'], function(require, exports, module) {
  class Cart {
    add(item) {
      console.log(`添加商品：${item}`)
    }
  }
  exports.Cart = Cart;
})
// 忽略不需要的依赖导入
define(['exports'], function(exports) {
  class Cart {
    add(item) {
      console.log(`添加商品：${item}`)
    }
  }
  exports.Cart = Cart;
})
// 如果是依赖的导入为：require, exports, module，也可以省略依赖导入声明
define(function(require, exports, module) {
  class Cart {
    add(item) {
      console.log(`添加商品：${item}`)
    }
  }
  exports.Cart = Cart;
})

módulo de dados externo 8.2 importação

//CommonJS风格导入导出模块化数据
define(function(require) {
    //注意如果导出的是类，则需要将对象中的类解构出来才能用
    let {Cart} = require('./m2');
    let cart = new Cart();
    
    cart.add({name: 'iphoneXX', price: 1000000})
  })

exemplo estilo commonjs de 8.3requireJS

m2.js:

// define(['require', 'exports', 'module'], function(require, exports, module) {
//     class Cart {
//       add(item) {
//             console.log("m2模块");
//             console.log(`添加商品：${item}`, item)
//       }
//     }
//     exports.Cart = Cart;
//   })

// // 忽略不需要的依赖导入
// define(['exports'], function(exports) {
//     class Cart {
//       add(item) {
//         console.log(`添加商品：${item}`,item)
//       }
//     }
//     exports.Cart = Cart;
//   })

  // 如果是依赖的导入为：require, exports, module，也可以省略依赖导入声明
  define(function(require, exports, module) {
    class Cart {
      add(item) {
        console.log(`添加商品：${item}`,item)
      }
    }
    exports.Cart = Cart;
  })

main.js:

//CommonJS风格导入导出模块化数据
define(function(require) {
    //注意如果导出的是类，则需要将对象中的类解构出来才能用
    let {Cart} = require('./m2');
    let cart = new Cart();
    
    cart.add({name: 'iphoneXX', price: 1000000})
  })

9.UMD

Estritamente falando, UMDnão pertence a uma especificação de módulo, que é usado principalmente para processar CommonJS, AMD, CMDas diferenças de compatibilidade, o código do módulo é capaz de funcionar adequadamente na parte frontal do módulo em ambiente diferente

Se o módulo determina um objecto alvo, e o tipo de exportação obejct é derivado em ambiente NodeJS;
e uma função para definir define.amd é verdade, então o próximo uso AMD;
Depois que o juiz irá executar a função de exportação na auto-execução;
AMD vai ser capaz de realizar modular exportados no navegador através do julgamento, e no próximo e, em seguida, ser capaz de usar o back-end NodeJS commonjs especificação de exportação modular

(function (root, factory) {
  	if (typeof module === "object" && typeof module.exports === "object") {
        // Node, CommonJS-like
        module.exports = factory(require('jquery'));
    }
    else if (typeof define === "function" && define.amd) {
      	// AMD 模块环境下
        define(['jquery'], factory);
    }
}(this, function ($) { // $ 要导入的外部依赖模块
    $('div')
    // ...
    function b(){}
    function c(){}

    // 模块导出数据
    return {
        b: b,
        c: c
    }
}));

1275012490

Publicado 95 artigos originais · Louvor obteve 115 · vista 120 000 +

carta particular preocupações

Webpack modular

1. Modular

2. O núcleo modular

3.ESM

3.1 Âmbito módulos independentes

dados interna módulo 3.2 derivação

módulo de dados externo 3,3 importação

3.3.1 estática Import

3.3.2ESM Import Export - Exemplo:

3.3.3 Dinâmica introduzido importação ()

4. modular compatível com versões anteriores

5.CommonJS

5.1 Âmbito módulos independentes

5,2 módulo de exportação de dados internos

módulo de dados externo 5.3 importação

Especificação usa exemplos 5.4CommonJS

6.AMD

7.AMD - RequireJS

7.1 Âmbito módulos independentes

dados interna módulo 7.2 derivação

módulo de dados externo 7.3 importação

7.4AMD - RequireJS usa exemplos

estilo 8.requireJS de commonjs

dados interna módulo 8.1 derivação

módulo de dados externo 8.2 importação

exemplo estilo commonjs de 8.3requireJS

9.UMD

Acho que você gosta