Desvantagens do carregamento normal do JS
A interface precisa começar a renderizar depois que o js for carregado
Se houver dependências entre js, elas precisam ser carregadas em ordem de acordo com as dependências. Se as dependências forem complexas, é mais complicado escrever e manter o código
Assim, require.js surgiu na voz das amplas massas do povo.
O papel da require.js
Implemente carregamento assíncrono do js para evitar a falta de resposta da página
Gerencie dependências entre módulos para facilitar a escrita e manutenção do código
require.js carregando
Primeiro, acesse o [site oficial] http://requirejs.org/ baixe a versão mais recente
Deposite as require.js baixadas ou copiadas no diretório do projeto
Carregue require.js na página desejada
Carregamento direto: Write <scrip{filter}t src="js/require.js"></scrip{filter}t>
Carregamento assíncrono: <scrip{filter}t src="js/require.js" defer async="true" ></scrip{filter}t>
Nota: assíncrono significa que este arquivo precisa ser carregado de forma assíncrona para evitar que a página da web fique sem resposta. IE não suporta assíncrono, então carregue o atributo de diferência;
Depois que o require.js está carregado, o próximo passo é carregar nosso próprio código. Suponha que nosso próprio arquivo de código seja main.js, também colocado no diretório js. Então, basta escrever o seguinte: <scrip{filter}t src="js/require.js" data-main="js/main"></scrip{filter}t>
A função do atributo data-main é especificar o módulo principal do programa web. No exemplo acima, esse arquivo será carregado primeiro require.js main.js sob o diretório js. Como require.js sufixo padrão do arquivo é js, você pode abreviar main.js para main.
Como escrever o módulo principal
O main.js da seção anterior é chamado de módulo principal. Ou seja, o método de entrada para todo o módulo.
Como escrever main.js
Métodos escritos diretamente para o main.js sem depender de outros módulos
main.function()
O módulo principal depende de outros módulos, então use a função require()
main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
Um pouco de código aqui
});
A função require() aceita dois parâmetros:
O primeiro parâmetro é um array que representa os módulos dos quais depender
O segundo parâmetro é uma função de callback que será chamada após todos os módulos especificados na linha frontal serem carregados. Os módulos adicionados são passados na forma de parâmetros, para que possam ser usados dentro da função de callback.
Carregamento dos módulos
Exemplo: Se o módulo dependente do módulo principal (main.js) for ['jquery', 'crypto-js', 'qualquer coisa']
Carregamento por padrão
Se os arquivos desses três módulos dependentes estiverem jquery.js, crypto-js.js, anything.js e main.js no mesmo diretório, eles podem ser carregados automaticamente conforme a seção anterior
Carregamento de configuração require.config()
Require.config() é escrito na cabeça do módulo principal (main.js).
Como os módulos AMD são escritos
require.js carregou o módulo, usando especificação AMD. Ou seja, o módulo deve ser escrito de acordo com as regulamentações da AMD.
Especificamente, módulos devem ser definidos por uma função define() específica. Se um módulo não depende de outros módulos, ele pode ser definido diretamente na função define()
Suponha que agora exista um arquivo math.js que define um módulo de matemática. Depois, math.js escreva:
Veja como carregar:
Se o módulo também depende de outros módulos, então o primeiro argumento da função define() deve ser um array que indica as dependências do módulo.
Quando a função requerido() carrega o módulo acima, ela carrega myLib.js arquivo primeiro.
Carregar módulos não AMD
Existem muitos módulos no mercado que não atendem à especificação AMD require.js podem ser carregados
Antes que esses módulos possam carregar, eles precisam ser configurados para requisitar.config() para definir algumas de suas características
Por exemplo, noamd.js e noamddeps.js ambos os módulos não são AMD, e se você quiser carregá-los, precisa definir suas características:
require.js aceita um objeto de configuração que, além da propriedade de caminhos, também possui uma propriedade de shim especificamente para configurar módulos que não sejam AMD.
Especificamente, cada módulo define:
- Valor de exportação (nome da variável de saída): indica o nome do módulo quando é chamado externamente
- Array DEPs: indica as dependências deste módulo
Por exemplo, o plugin jQuery pode ser definido assim:
require.js plugin
require.js também oferece uma variedade de plugins que implementam alguns recursos especiais
O plugin domready permite que a função de callback seja executada após a estrutura do DOM da página ser carregada:
Plugins de texto e imagem, que permitem require.js carregar arquivos de texto e imagem:
Plugins semelhantes incluem JSON e MDOWN para carregar arquivos JSON e Markdown.
|
Publicado em 11/10/2017 09:31:50
|
|
|
