Detalhamento do uso de RequireJs

1. Por que usar RequireJS?

　 <script src="a.js"></script>
　　<script src="b.js"></script>
　　<script src="c.js"></script>

Quando vários arquivos js forem carregados, o navegador parará a renderização da página (JS bloqueia a renderização do navegador)Quanto mais arquivos forem carregados, maior será o tempo em que a página perderá a resposta; Além disso, a gestão das dependências entre os arquivos é difícil.

A função do RequireJs:

(1)Realização do carregamento assíncrono de arquivos js, evitando que a página perca a resposta;

(2)Gestão de dependências entre módulos, facilitando a escrita e manutenção do código.

(3Definiu um escopo para evitar a poluição do espaço de nomes global.

Segundo, o carregamento do require.js

1.DePágina oficialBaixe a versão mais recente do require e coloque na pasta js, use script para incluir a página:

<script src="js/require.js">

Para não bloquear a renderização da página, pode ser colocado no final do HTML ou alterado da seguinte forma:

<script src="js/require.js" defer async="true" ></script>

A propriedade async indica que o arquivo precisa ser carregado de forma assíncrona (a propriedade defer é compatível com o IE).

2.Carregar código lógico da página:

Supondo que o arquivo de código seja main.js e esteja na pasta js, use uma das seguintes maneiras para incluir:

Método1:

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

dados-A propriedade main especifica a entrada principal do programa da página da web, este arquivo será carregado primeiro pelo requirejs. O requirejs depende por padrão de recursos js, então pode-se abreviar main.js para main.

Método2:

Após carregar o require.js, carregar o arquivo de configuração config (se houver) usando requirejs, finalmente carregar o módulo principal:

require([‘configUrl’],function () { //config.js deve ser carregado pelo requirejs para registrar
 require([moduleAName],function(moduelA){
 //Código lógico
 )
});

Terceiro, a escrita do módulo principal

// main.js
　　require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　　　// Alguns códigos aqui
　　});

A função require() aceita dois parâmetros, o primeiro parâmetro é um array, que representa os módulos dependentes do módulo atual; o segundo parâmetro é uma função de callback, que será chamada após o carregamento bem-sucedido dos módulos especificados. Os módulos carregados serão passados como parâmetros para a função de callback, permitindo que esses módulos (com valores de return) sejam usados dentro da função de callback.

O require() carrega de forma assíncrona o moduleA, moduleB e moduleC, o navegador não perderá a resposta; a função de callback especificada, só será executada após todos os módulos dependentes serem baixados e executados os callbacks correspondentes.

Quarto, configuração do módulo

O método require.config() pode definir os caminhos dos módulos e definir dependências em forma de nomes curtos de módulos. Este métodoPode ser escrito no início de cada módulo principal (main.js), usado em conjunto com o módulo principal.

Os parâmetros são um objeto, cuja propriedade paths especifica os caminhos de carregamento de cada módulo. pathsPode configurar múltiplos caminhos，se a biblioteca CDN remota não for carregada com sucesso, carregar a biblioteca local.

Se a configuração do módulo não for definida, as dependências no módulo principal precisam ser escritas com caminho completo.

Configure caminhos conforme necessário em cada página:

require.config({  //Configuração de registro do módulo, para uso posterior no código
　　　　baseUrl: '/js/', 
 paths: {
 　　"jquery":”cdnUrl”, "Jquery"/jquery-1.12.0.min"
  "fixheight": "login"/fixheight"
 }
 });
 require(['jquery', 'fixheight'], function ($, fixHeight) {
 ...outro código; 
 fixHeight.init();
});

Ou configure a configuração como um arquivo js separado e depois

require([“configJsUrl”],function(){  //É necessário carregar a configuração do módulo de forma assíncrona no arquivo main
 require([‘ModuleName’],function(Name){
 …outro código
 )
)

Para evitar que o require seja aninhado em cada página, você pode usar o seguinte método:

Primeiro crie um arquivo separado config.js:

require.config({ //Configuração de registro do módulo, para uso posterior no código
 baseUrl: "/js/app/" //Outras dependências são caminhos relativos a esta posição
 // Configuração de caminho
 paths: {
underscore: 'vender/underscore.min',   backbone:'vender/backbone.min'
 jquery: ‘cdnUrl','vender/jquery/jquery-1.12.0.min',
 “Nome curto do módulo” : ”Endereço de caminho relativo ao baseUrl, omitindo o sufixo .js do arquivo do módulo”
 },
 // Bibliotecas escritas em não AMD precisam ser configuradas novamente
 shim: {
 underscore: {
  exports:'_'
 },
 backbone（o nome curto do módulo ainda precisa ser definido pelo caminho）: {
  exports: 'Backbone',  　　　　//Nome da variável de saída da biblioteca, indicando o nome com o qual o módulo é chamado externamente
  deps:['jquery','underscore'] //Dependências do módulo
 }
 },
 urlArgs: "bust=" + document.getElementById('publishDate').attributes['value'].value　　//Parâmetros do recurso js, controlando atualização e cache da versão
});
define([ 'marionette'], function () { }); //仍是会被执行的js代码，会依次加载需要的模块

然后通过如下方式使用：

通过主入口直接将模块配置注册到requirejs命名空间中，页面中后续的require方法无需再注册，可以直接使用短模块名进行依赖加载。

如果没有显式指定config及data-main，则默认的baseUrl为加载RequireJS的HTML页面所在目录。如果指定了data-main而没有在config中指定根路径，则该路径被设为baseUrl。

若想避开"baseUrl + paths"的解析过程，而是直接指定加载某一个目录下的脚本。可以这样做：如果一个module ID符合下述规则之一，其ID解析会避开常规的"baseUrl + paths"配置，而是直接将其加载为一个相对于当前HTML文档路径的脚本：

•　　　 以 ".js" 结束.

•　　　 以 "/" 开始.

•　　　 包含 URL 协议, 如 "http:" or "https:".

eg. require(['/www/js/app/vender/underscore.min.js'], function (_) {…})

require.js要求，每个模块是一个单独的js文件。加载多个模块就会发出多次HTTP请求，影响网页的加载速度。因此require.js提供了一个优化工具(r.js)，当模块部署完毕以后，可以用这个工具将多个模块合并在一个文件中，减少HTTP请求数，但又需要和缓存之间进行取舍。

六、AMD模块的写法

require.js加载的模块，必须按照AMD的规定来写。即模块必须采用特定的define()函数来定义，通常返回一个对象，该对象具有供别的模块使用的方法或属性；或只执行相关逻辑而无输出。

七、require.js的相关插件

text插件，允许require.js异步加载txt、css或html等文本资源供js使用，而不需要在script内构建Html字符串。

define(['text!components/multiple/template.html', 'image!cat.jpg'],
 function(template,cat){
 $('body').append($(template));
 document.body.appendChild(cat);
　}
); 

Atenção:

As dependências do módulo podem ser introduzidas através de [] ou introduzidas no callback function através do método require(), o efeito é o mesmo. Porque o método define escaneará primeiro as dependências do método require dentro do callback function e baixará, e então executará o callback function. Mas neste momento, é necessário passar a dependência require herself, caso contrário, será gerado um erro:

define(function(require){
 var helper=require('helpModuleUrI');//também carregará antecipadamente essa dependência
 ...
)

Quando múltiplos módulos dependem de um mesmo módulo várias vezes, o módulo será baixado e inicializado apenas uma vez, e o require manterá a referência para que outros módulos possam usá-lo novamente.

Diferenciar a execução do método require e a execução do callBack:

require('config',callBack1);
require('b',callBack2);
// Os dois métodos require serão executados imediatamente, mas a ordem de execução do callBack é incerta, dependendo da ordem de download.
//Diferente do seguinte código, executará rigorosamente em ordem
require('config',function(){
 require('b',callBack2)
)

Isso é tudo o que há no artigo, esperamos que o conteúdo deste artigo ajude a aprendizagem ou ao trabalho de todos de alguma forma, e também esperamos que recebam mais apoio ao tutorial Gritar!

Declaração: O conteúdo deste artigo é extraído da Internet, pertence ao autor original, o conteúdo é contribuído e carregado voluntariamente pelos usuários da Internet, o site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidades legais relacionadas. Se você encontrar conteúdo suspeito de violação de direitos autorais, seja bem-vindo a enviar e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar, e forneça provas relevantes. Apenas após verificação, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.)