Este artigo é um resumo de alguns pontos de conhecimento do requimjs, acompanhados por análise de exemplo em aplicativos de várias páginas.
A estrutura de diretório deste caso é a seguinte:
requerjs API Três funções principais: define (crie módulo), reque (módulo de carga) e config (config)
1. Carregar o arquivo JS no arquivo html
O conteúdo de Page1.html é o seguinte:
<! Doctype html> <html> <head> <title> página 1 </title> <script data-main = "scripts/page1" src = "scripts/lib/requer.js"> </script> </ad Head> <Body> <a href = "página2.html> </sage> </wead> <body> <a href =" página2.html>
O conteúdo de Page2.html é o seguinte:
<! Doctype html> <html> <head> <title> página 2 </title> <script data-main = "scripts/page2" src = "scripts/lib/requer.js"> </script> </head> <body> <a href = "Page1.html>
Extensão do conhecimento:
O atributo Data-Main especifica o módulo principal do programa da Web, e esse arquivo é carregado pela primeira vez pelo requentJS. Como o nome do sufixo de arquivo padrão do requerjs é JS, Page1.js pode ser abreviado como página1
Regras de prioridade do caminho raiz para carregar arquivos de script
Ao carregar um módulo com requer (), o sufixo .js será omitido e será pesquisado no Baseurl; Se houver sufixo .js ou começar com "/", ou contém o protocolo URL (http/https), a raiz será
Pesquise de acordo com as configurações específicas do caminho
Config> Data-Main> Baseurl padrão
Se os dados e a configuração não estiverem definidos, o BaseUrl padrão é o diretório em que a página HTML que as referências requer.js está localizada.
Definir data-main, então BaseUrl é o diretório em que o módulo principal está localizado (por exemplo, o módulo principal no primeiro html é Page1.js, de modo que o diretório onde está localizado/scripts é o diretório raiz)
Configurar Config, defina explicitamente BaseUrl e também defina um caminho separado para cada módulo.
2. Configure os caminhos dos módulos, etc.
Use o método requer.config () para personalizar o comportamento de carregamento do módulo. Em um aplicativo de várias páginas, a configuração pode ser gravada em um arquivo compartilhado, como o arquivo Common.js neste exemplo. Depois de cada página carregar a configuração atual, os módulos necessários são carregados na função de retorno de chamada.
O código Common.js é o seguinte:
require.config ({baseurl: 'scripts/app', caminhos: {jquery: ['http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min'.'../lib/jquery']}});Extensão do conhecimento:
Itens de configuração suportados:
Baseurl:
O caminho raiz de pesquisa para todos os módulos. NOTA: Quando o arquivo JS carregado (termina com .js, começa com "/", contém um protocolo), BaseUrl não será usado;
Caminhos:
Mapas de caminho Nomes de módulos que não são colocados diretamente em BaseUrl. A posição inicial ao definir o caminho é relativa ao BaseUrl, a menos que a configuração do caminho inicie com "/" ou contenha um protocolo URL;
Nota: O caminho definido nos caminhos não pode conter sufixos .js, porque o mecanismo de resolução do caminho adicionará automaticamente sufixos .js; e o caminho de carregamento pode ser definido várias vezes. Se o carregamento do CDN falhar, o arquivo JS local será carregado;
calço:
Configurar para módulos que não usam define () para declarar dependências;
Existem dois parâmetros que precisam receber atenção a:
(1) Valor de exportações (nome da variável de saída), exponha a interface do método
(2) matriz de deps, indicando a dependência do módulo
como:
requer.config ({baseurl: '/scripts/lib', shim: {zepto: {exports: '$'}, backbone: {deps: ['subscore', 'zepto'], exporta: 'backbone'}, 'zepto.anmate': ['zepto']}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}};3. Carregamento do módulo
O código Page1.js é o seguinte:
requer (['./ Common'], function (Common) {requer (['SayPage1'], function (SAYPAGE1) {SAYPAGE1.HELLO ();});});O código Page2.js é o seguinte:
requer (['./ Common'], function (Common) {require (['saypage2'], function (saypage2) {saypage2.hello ();});});Expansão do conhecimento:
A função requer () aceita dois parâmetros. O primeiro parâmetro é uma matriz que representa o módulo para o qual depende; O segundo parâmetro é uma função de retorno de chamada e será chamado somente depois que todos os módulos atualmente especificados forem carregados com sucesso. O módulo carregado pode ser chamado de parâmetro para a função de retorno de chamada.
Para garantir que o módulo necessário seja carregado somente após a conclusão da configuração, é principalmente a análise correta do caminho e requer na função de retorno de chamada.
4. Definição de módulos
Código em SayPage1.js:
define (['jQuery'], function ($) {function dizhi () {$ ('body'). Append ('<H1> olá página1! </h1>');} return {hello: Sayhi}});Extensão do conhecimento:
A função define também aceita dois parâmetros. O primeiro parâmetro é uma matriz de módulos dependentes, e o segundo parâmetro é uma função de retorno de chamada.
Obviamente, quando finalmente é lançado, os arquivos JS precisam ser mesclados e compactados. Você pode usar o R.JS, que é conveniente e rápido ~
O exposto acima é um exemplo de análise do aplicativo de várias páginas requirejs que o editor apresentou a você. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!