A maioria dos projetos usa desenvolvimento modular, exigindojs é um modelo para o desenvolvimento do módulo AMD, por isso é necessário aprendê -lo. Usando o requerjs passo a passo para escrever demos, podemos aprender o processo geral de desenvolvimento de requisitos e alguns dos sentimentos de uso requisitos por você mesmo.
AMD: Um mecanismo para o carregamento assíncrono do código JavaScript com base em módulos. Ele recomenda os desenvolvedores para encapsular o código JavaScript em módulos, e a dependência de objetos globais se torna uma dependência de outros módulos, sem declarar muitas variáveis globais. Resolva as dependências dos módulos individuais por meio de atraso e carga sob demanda. Os benefícios do código JavaScript modular são óbvios. O acoplamento frouxo de vários componentes funcionais pode melhorar bastante a reutilização e a manutenção do código. Esse carregamento rápido simultâneo do código JavaScript permite outros elementos da interface do usuário na página da web que não dependem do código JavaScript, como imagens, CSS e outros nós DOM, para carregar primeiro, a página da web carrega mais rápido e os usuários também têm uma experiência melhor.
1. Download de requisitos
Antes do desenvolvimento modular com os requisitos, precisamos preparar algo. Isso deve estar baixando o arquivo requer.js, hahaha, porque foi desenvolvido com base nele.
2. Crie um arquivo HTML
Depois de criar um arquivo HTML, a importação requerjs deve usar a tag <Script>, não há dúvida sobre isso. Depois, há um atributo de dados de dados nesta tag. Sua função é atuar como uma entrada e saída, isto é, após o carregamento requisitos, digite o atributo de main-main.
Por exemplo, o seguinte é:
<! Doctype html> <head> <title> requer </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> </adhead> <body> <!-Isso é requisito, o dados é usado como o módulo de entrada, aqui é js/main-> <! src = "js/requer.js"> </script> </body> </html>
Quando carrego JS/requer.js, vou executar o arquivo JS do JS/Main. Main também é um arquivo JS. Podemos omitir seu sufixo .js e requerjs o adicionarão.
3. Dados-principal
Depois que o programa executa <script data-main = 'js/main' src = 'js/requer.js'> </script>, digite o main.js através do Data-Main e execute main.js. Então, o que há em main.js?
Por favor, veja o código:
/* requer.config Executa BaseUrl como 'JS', BaseUrl refere-se ao diretório raiz do arquivo do módulo, que pode ser um caminho absoluto ou um caminho relativo*/requer.config ({baseurl: 'js', requeres: {jQuery: 'jQuery -.8.2.min'}}); função anônima, como macaco-> mk*/requer (['macacão'], função (mk) {mk.init ();});A partir do código acima, você pode ver que o main.js contém dois módulos: requer.config e requer.
A função do requer.config é configurar alguns parâmetros do requimjs e, em seguida, consultá -lo publicamente.
Por exemplo, a função do BaseUrl acima é usá -lo como caminho base e procurar arquivos neste caminho. Eu coloquei todos os arquivos .js na pasta JS. Portanto, após a configuração dessa propriedade, os arquivos subsequentes procurarão conteúdo no caminho JS.
do seguinte modo:
requer (['macaco'], função (macaco) {Monkey.init ();});Quando se refere ao macaco, é o macaco de referência, não o JS/Monkey.
Qual é o papel dos caminhos? É para substituir alguns arquivos JS comumente usados por nomes comuns. Por exemplo, jQuery-1.8.2.min.js, não podemos escrever isso toda vez que chamamos de, portanto, por conveniência, substituímos o jQuery-1.8.2.min.js. No futuro, podemos usar diretamente o jQuery, o que é rápido e conveniente.
Ok, requer.config está basicamente familiarizado com ele. Em uma palavra, sua função é configurar o requentJS.
Que tal exigir?
A função de requer é executar. Por exemplo, aqui eu só preciso de Monkey.js para executar, então importei o macaco e depois obtive o valor de retorno após a execução do macaco através do parâmetro MK. Se houver um valor de retorno, podemos fazer o processamento correspondente do MK.
Ei, o que está dentro do macaco?
Vamos dar uma olhada:
/* Definir parâmetro é uma função anônima, que retorna um objeto*/define (['jQuery'], function ($) {var init = function () {console.log ($. navegador);}; return {init: init};});definir! Sua função é definir um módulo JS para uso por outros módulos ou necessidades. Seu método de se referir a outros módulos JS é semelhante ao exigente. Ele apresenta os arquivos JS necessários e corresponde aos parâmetros um por um. É importante observar que outros módulos não podem acessar os métodos ou variáveis definidas em Definir; portanto, se você deseja que outros módulos possam acessá -los, poderá lançar o método correspondente (retornar) objetos ou funções. Aqui, o que eu retorno é um objeto que fornece init para outros módulos para ligar.