O método de carregamento padrão do JS através das tags de script é sincronizado, ou seja, depois que o JS na primeira tag de script é carregado, o segundo começa a ser carregado e assim por diante, até que todos os arquivos JS sejam carregados. Além disso, as dependências do JS devem ser garantidas através da ordem de script; E durante o carregamento do JS, o navegador parará de responder, o que afeta bastante a experiência do usuário. Com base nisso, muitas soluções para JS apareceram e carregadas, exigindo que o JS é um deles.
Os módulos carregados pelos requisitos geralmente são módulos que cumprem os padrões da AMD, ou seja, módulos que definem com definir e retornar métodos e variáveis expostos com rotatividade; O requestJS também pode carregar módulos que voam com padrões da AMD, mas é mais problemático e não estarão envolvidos desta vez.
Requer carregar o js main envolve os seguintes aspectos:
Demonstração HTML
<script src = "js/requer.js" adiar async = "true" data-main = "js/main"> <!-Dê o caminho necessário, declare-o como carregamento assíncrono, especifique o módulo de entrada como main.js (pode ser omitido.js)->
main.js
require.config ({// declara a localização dos caminhos do módulo: {"jquery": "libs/jquery" "login": "libs/login"} // ou use base para especificar o caminho de todos os módulos Baseurl: "js/libs"}); // use requer para carregar o módulo. O primeiro parâmetro é uma matriz, ou seja, o módulo a ser carregado será carregado na ordem da matriz; O segundo é uma função de retorno de chamada, que é executada após o carregamento de todo o carregamento. requer (['jQuery', 'Login'], function ($, login) {alert ("JQuery e Login Module Load Success!"); login.do_login (); // Alguns});Definição do módulo de login em linha com a AMD
Definição da definição de jQuery (['jQuery'], function ($) {// Algumas definições função do_login () {$ .post ('/sessions/create', {uname: $ ("#uname"). Val (), senha: $ ("#senha"). }); // Definição Definição de outros módulos (function () {// Algumas definições retornam {xx: xx};});Os trilhos não aplicam um carregador JS. Por um lado, a nova versão do Rails Asset Pipe empacotará todos os arquivos JS em um arquivo JS, sem vários status de carregamento de JS. Por outro lado, o Turbolink usa a chamada tecnologia PJAX com elogios e críticas mistas. O link padrão é alterado para o método Ajax e só obtém a parte do BOD do HTML e a parte da cabeça permanece inalterada, de modo que o carregamento do JS é executado apenas quando o site é aberto pela primeira vez.
Caso 1: Carregando arquivos JavaScript
<script src = "./ js/requer.js"> </script> <cript> requer (["./ js/a.js", "./js/b.js"], function () {myfunctiona (); myfunctionB ();}); </script>O parâmetro da matriz da string no método requisito pode permitir valores diferentes. Quando a string termina com ".js", ou começa com "/", ou é um URL, requerjs pensará que o usuário está carregando diretamente um arquivo JavaScript. Caso contrário, quando a string for semelhante a "My/Module", ele pensará que este é um módulo e carregará o arquivo JavaScript em que o módulo correspondente está localizado com o BaseUrl e os caminhos configurados pelo usuário. A seção de configuração será descrita em detalhes posteriormente.
Deve -se ressaltar aqui que, por padrão, o requerjs não garante que MyFunctionA e MyFunctionB sejam executados após o carregamento da página. Quando é necessário garantir que o script seja executado após o carregamento da página, o requerjs fornece um módulo Domready independente. Você precisa fazer o download deste módulo no site oficial do requerjs, que não está incluído no requestJS. Com o módulo Domready, o código no caso 1 é apenas ligeiramente modificado e a dependência de Domready.
Caso 2: Execute o JavaScript após o carregamento da página
<script src = "./ js/requer.js"> </script> <cript> requer (["Domready!", "./js/a.js", "./js/b.js"], function () {myfunctiona (); myfunctionB ();}); </script>Depois de executar o código do caso 2, através do Firebug, você pode ver que os requeries Atualmente, o atributo assíncrono é suportado pela maioria dos navegadores, o que indica que o arquivo JS nesta tag <Script> não bloqueará o download de outro conteúdo da página.
Caso 3: <Script> inserido por requerjs
<script type = "text/javascript" charset = "utf-8" async = "" data-requireContext = "_" data-requiremodule = "js/a.js" src = "js/a.js"> </script>
Use requerjs para definir módulos JavaScript
O que é diferente do código JavaScript tradicional aqui é que ele não requer acesso a variáveis globais. O design modular permite que o código JavaScript passe essas "variáveis globais" como parâmetros por meio de dependências quando precisa acessar "variáveis globais" e evitar acessar ou declarar variáveis ou funções globais na implementação, evitando efetivamente um grande número e gerenciamento de espaço para nome complexo.
Conforme declarado na especificação da AMD dos Commonjs, a definição de módulos JavaScript é implementada através do método Definy.
Vamos primeiro olhar para um exemplo simples. Este exemplo cria objetos do aluno no programa principal e coloca os objetos do aluno na turma, definindo um módulo de aluno e um módulo de classe.
Caso 4: Módulo de Aluno, Student.js
define (function () {return {CreateStudent: function (nome, gênero) {return {nome: nome, gênero: gênero};}};}); });Caso 5: Módulo de classe, classe.js
define (function () {var allStudents = []; return {ClassId: "001", departamento: "Computer", AddToclass: function (Student) {allStudents.push (Student);}, getClassSize: function () {return allstudents.length;}};};);Caso 6: Programa Principal
exigir (["js/aluno", "js/classe"], function (aluno, clz) {clz.addtoclass (student.createstudent ("jack", "masculino")); clz.addtoclass (student.createstudent ("rose", "feminino));O módulo do aluno e o módulo de classe são módulos independentes. Vamos definir um novo módulo. Este módulo depende dos módulos de aluno e classe, para que a lógica da parte principal do programa também possa ser embrulhada.
Caso 7: Módulo de gerente que se baseia em módulos de estudante e classe, gerente.js
define (["js/aluno", "js/class"], function (aluno, clz) {return {addNewStudent: function (nome, gênero) {clz.addtoclass (student.createstudent (nome, gênero);}, getMyclassize: function () {return.cl.cls);Caso 8: Novo programa principal
requer (["js/gerente"], function (gerente) {gerenciador.addnewstudent ("jack", "masculino"); gerente.addnewStudent ("rose", "feminino"); console.log (gerenciador.getMyclassize ()); // output 2});Através do exemplo de código acima, entendemos claramente como escrever um módulo, como esse módulo é usado e como definir as dependências entre os módulos. Ainda existem algumas dicas para usar:
Tente não fornecer o ID do módulo. Conforme declarado na especificação da AMD, este ID é uma opção. Se fornecido, a migração do módulo será afetada na implementação do requestJS e as alterações no local do arquivo farão com que o ID seja modificado manualmente.
Cada arquivo JavaScript define apenas um módulo. O algoritmo de pesquisa para o nome do módulo e o caminho do arquivo determina que esse método é ideal. Vários módulos e arquivos serão otimizados pelo otimizador. Evite dependências circulares dos módulos. Se for realmente impossível de evitar, você pode adicionar dependências aos módulos "requerem" ao módulo e usá -los diretamente no código.
requer ("dependencyModuleName")Configurar requerjs:
Na introdução anterior, parece ter esquecido uma pergunta básica: como veio o nome do módulo? Quando eu preciso de um módulo, como esse mapa do módulo para um arquivo JavaScript específico? Isso envolve como configurar o requerjs.
A maneira mais simples de carregar requerjs é mostrada no caso 2. Nesse caso, não especificamos um BaseUrl e os caminhos para exigirjs. Se o método mostrado no Caso 10, o Data-Main especificar a /js/main.js na pasta paralelo ao diretório atual índice.html como entrada do programa, e o diretório /js também será usado como base na definição de outros módulos.
Caso 9: Carregando requer.js
<script data-main = "js/main" src = "scripts/requer.js"> </script>
Portanto, todas as dependências do módulo em nossos exemplos anteriores podem ser removidas de "JS/" e Write "Student", "Class", "Manager" etc. diretamente. Uma maneira mais direta de exibir os caminhos e os caminhos especificados é usar o requer.config para definir esses parâmetros. Como mostrado no caso dez.
Caso 10. Configurando requerjs
<script type = "text/javascript" src = "./ js/requer.js"> </script> <script type = "text/javascript"> requer.config ({baseurl: "./js", caminhos: {"alguns": "alguns/v1"},, espera -se: 10; requer (["algum/módulo", "meu/módulo", "./js/a.js"], function (somemodule, mymodule) {}); </script>BaseUrl indica o URL base de todos os módulos. Por exemplo, o script carregado por "meu/módulo" é realmente /js/my/module.js. Observe que os arquivos que terminam em .js não usarão o Baseurl ao carregar, eles ainda usarão o caminho relativo onde o índice atual.html está localizado, para que você ainda precise adicionar "./js/". Se Baseurl não for especificado, o caminho especificado no Data-Main será usado.
O caminho definido nos caminhos é usado para substituir o caminho no módulo, como algum/módulo no exemplo acima. O caminho do arquivo javascript específico é /js/some/v1/module.js. WaitSeconds especifica quanto tempo leva para carregar um arquivo JavaScript. O padrão é de 7 segundos sem o usuário especificá -lo.
Outra configuração importante são os pacotes, que podem especificar outras estruturas de diretório que cumprem a especificação Commonjs AMD, trazendo assim uma rica escalabilidade. Módulos como dojo, jQuery etc. também podem ser carregados por requerjs nessa configuração.
Outras opções configuráveis incluem localidade, contexto, DEPs, retorno de chamada, etc. Os leitores interessados podem verificar os documentos relevantes no site oficial do requisitojs.