Baixar e instalar
Para usar o SEAJS em seu projeto, toda a preparação que você precisa fazer é baixar o Sea.js e colocá -lo em algum lugar do seu projeto.
O projeto SEAJS está atualmente hospedado no Github, com a página inicial em https://github.com/seajs/seajs/. Você pode baixar o Sea.js (compactado) ou o mar-debug.js (não compactado) no diretório de construção da biblioteca Git.
Após a conclusão do download, coloque -o na posição correspondente do projeto e, em seguida, apresente -o através da tag <Script> na página e você pode usar o SEAJS.
Princípios de desenvolvimento básico do SEAJS
Antes de discutir o uso específico dos SEAJs, vamos primeiro introduzir o conceito modular e os princípios de desenvolvimento dos SEAJs.
O princípio básico do uso do SEAJS para desenvolver JavaScript é: tudo é um módulo. Depois que o SEAJS foi introduzido, escrever código JavaScript tornou -se um módulo após o outro. Dados e métodos públicos podem ser chamados por outros módulos.
Além disso, cada módulo deve ser definido em um arquivo JS separado, ou seja, um correspondente a um módulo.
A seguir, descreve a escrita e a chamada de módulos.
Definição e escrita de módulos
Função de definição do módulo Definir
Nos SEAJs, use a função "Definir" para definir um módulo. Como a documentação do SEAJS não tem uma referência completa para definição, li o código -fonte do SEAJS e descobri que o Definy pode receber três parâmetros:
Copie o código da seguinte forma:/**
* Define um módulo.
* @param {string =} id o módulo ID.
* @Param {Array. | String =} DepS as dependências do módulo.
* @param {function () | objeto} fábrica a função de fábrica do módulo.
*/
fn.Define = function (id, deps, fábrica) {
// Código de função…
}
O acima é extraído do código -fonte do SEAJS. Depois de ler o código -fonte, descobri que as regras de análise para o número de diferentes parâmetros de definição são os seguintes:
Se houver apenas um parâmetro, atribua o valor à fábrica.
Se houver dois parâmetros, o segundo será atribuído à fábrica;
Se houver três parâmetros, eles serão atribuídos a ID, DEPS e fábrica, respectivamente.
No entanto, quase todos os lugares onde são usados são usados, incluindo o exemplo oficial do SEAJS, apenas uma função de fábrica é aprovada, semelhante ao seguinte código:
A cópia do código é a seguinte:
Definir (função (requer, exporta, módulo) {
// Código do módulo ...
});
Pessoalmente, recomendo que você siga os padrões dos exemplos oficiais do SEAJS e defina o módulo com uma definição de parâmetro. Então, o que será feito com ID e DEPS?
ID é a sequência de identificação de um módulo. Se você usa o Definy para definir o módulo no arquivo A.JS em Exple.com, o ID deste módulo será atribuído a http://example.com/a.js. o id. Os DEPS geralmente não precisam ser transmitidos e os módulos necessários podem ser carregados com requisitos.
Análise de fábrica de funções de fábrica
As funções de fábrica são o corpo principal e o foco do módulo. Quando apenas um parâmetro é passado para definir (método de escrita recomendado), este parâmetro é a função de fábrica.
1. Função de carregamento do módulo de requisito, usado para registrar módulos dependentes.
2.exporta-interface Point, ao definir dados ou método, expõe-os a chamadas externas.
3.Módulo-Os metadados do módulo.
Esses três parâmetros podem ser selecionados conforme necessário para exibir a especificação.
Vamos falar sobre o módulo abaixo. Um módulo é um objeto que armazena as meta -informações do módulo, como segue:
1.module.id - o ID do módulo.
2.Module.Dependências - uma matriz que armazena a lista de identificação de todos os módulos dos quais este módulo depende.
3.Module.Exports-aponta para o mesmo objeto que as exportações.
Três modos para escrever módulos
O primeiro modo a definir módulos é o modo baseado em exportações:
A cópia do código é a seguinte:
Definir (função (requer, exporta, módulo) {
var a = requer ('a');
var b = requer ('b');
var data1 = 1; // dados privados
var func1 = function () {// Método privado
retornar A.Run (Data1);
}
exports.data2 = 2; // Dados públicos
exports.func2 = function () {// Método público
retornar 'olá';
}
});
O acima é um modelo de definição de módulo relativamente "autêntico". Além de anexar dados públicos e métodos às exportações, você também pode retornar diretamente um objeto para representar o módulo, como o código a seguir tem a mesma função do código acima:
Copie o código da seguinte forma: define (function (requer) {
var a = requer ('a');
var b = requer ('b');
var data1 = 1; // dados privados
var func1 = function () {// Método privado
retornar A.Run (Data1);
}
retornar {
Data2: 2,
func2: function () {
retornar 'olá';
}
};
});
Se a definição do módulo não tiver outro código e retornar apenas um objeto, o seguinte método de escrita simplificado poderá ser encontrado:
Copie o código da seguinte forma: Definir ({
Dados: 1,
func: function () {
retornar 'olá';
}
});
O terceiro método é muito adequado para módulos que definem dados JSON puro.
Carregando e referência de módulos
Algoritmo de endereço do módulo
Como mencionado acima, um módulo corresponde a um arquivo JS. onde o módulo real está localizado. O SEAJS apóia os seguintes identificadores:
Endereço absoluto - fornece o caminho absoluto ao arquivo JS.
como:
A cópia do código é a seguinte: requer ("http: // exemplo/js/a");
Significa carregar http: //example/js/a.js.
Endereço relativo - Use chamadas relativas para encontrar o módulo para encontrar o endereço relativo do arquivo JS em que a função de carga está localizada.
Por exemplo, carregue -o em http: //example/js/b.js
A cópia do código é a seguinte: requer ("./ c");
Em seguida, carregue http: //example/js/c.js.
Endereço base - Se o identificador de sequência de carregamento não for um caminho absoluto nem começar com "./", ele é abordado em relação a "base" na configuração global dos SEAJs.
Observe que, ao carregar módulos acima, você não precisa passar no nome do sufixo ".js" e o SEAJS adicionará automaticamente ".js". Mas os três casos a seguir não serão adicionados:
Ao carregar CSS, como:
A cópia do código é a seguinte: requer ("./ module1-tyle.css");
Quando o caminho contém "?", Como:
A cópia do código é a seguinte: requer (<a href = "http: //example/js/a.json? Cb = func"> http: //example/js/a.json? Cb = func </a> );
Quando o caminho termina com "#", como:
A cópia do código é a seguinte: requer ("http: //example/js/a.json#");
De acordo com diferentes cenários de aplicação, o SEAJS fornece três APIs para o carregamento de módulos, ou seja, Seajs.Use, requer e requer.async, que são introduzidos abaixo.
Seajs.Use
Seajs.use é usado principalmente para carregar o módulo de entrada. O módulo de entrada é equivalente à principal função do programa C e também é a raiz de toda a árvore de dependência do módulo. No pequeno exemplo do TinyApp acima, o init é o módulo de entrada. O uso de Seajs.Use é o seguinte:
A cópia do código é a seguinte:
// Modo único
SeaJs.Use ('./ A');
// Modo de retorno de chamada
Seajs.use ('./ a', função (a) {
a.run ();
});
// Modo Multi-Module
Seajs.Use (['./ a', './b'], função (a, b) {
a.run ();
b.run ();
});
Geralmente, o SEAJS.Use é usado apenas para carregar o módulo de entrada na página. Se houver apenas um módulo de entrada, você também pode omitir o Seajs.Use adicionando o atributo "Data-Main" à tag de script que apresenta Sea.js. Por exemplo, o index.html de tinyapp acima também pode ser alterado para o A seguir, o método de escrita:
A cópia do código é a seguinte:
<! Doctype html>
<html lang = "zh-cn">
<head>
<meta charset = "utf-8">
<title> tinyapp </title>
</head>
<Body>
<p> </p>
<script src = "./ Sea.js" data-main = "./ init"> </script>
</body>
</html>
Essa maneira de escrever tornará o HTML mais conciso.
exigir
requer é o método principal de carregamento do módulo dos SEAJs.
A cópia do código é a seguinte: var m = requer ('/path/to/module/arquivo');
Aqui está uma breve introdução ao mecanismo automático de carregamento dos SEAJs. Como mencionado acima, depois de usar o SEAJS, basta incluir o Sea.JS. Então, como outros arquivos JS carregam? O SEAJS baixará primeiro o módulo de entrada e depois usará expressões regulares para atender a todos os requisitos do código ao longo do módulo de entrada e depois baixar o arquivo JS correspondente de acordo com a identificação do caminho do arquivo no requisito e, em seguida, iterar o arquivo JS baixado. Todo o processo é semelhante à operação de travessia de um gráfico (porque pode haver dependências de ciclo cruzado, toda a estrutura de dados de dependência é um gráfico e não uma árvore).
Depois de entender o ponto acima, as seguintes regras serão fáceis de entender:
O identificador de caminho passado para exigir deve ser um literal de string, não uma expressão.
A cópia do código é a seguinte: requer ('módulo' + '1');
requer ('module'.tolowerCase ());
Isso fará com que o SEAJS não execute correspondências regulares corretas para baixar o arquivo JS correspondente.
requer.async
Como mencionado acima, o SEAJS gravará todos os arquivos JS necessários imediatamente através da análise estática quando a página HTML for aberta.
Copie o código da seguinte
// Código de retorno de chamada ...
});
Dessa forma, somente quando este módulo for usado, o arquivo JS correspondente será baixado, o que realiza o carregamento sob demanda do código JavaScript.
Configuração global dos SEAJs
O SEAJS fornece um método SEAJS.Config que pode configurar uma configuração global e receber um objeto de configuração que representa a configuração global. O método de uso específico é o seguinte:
Copie o código da seguinte forma: Seajs.config ({
base: 'caminho/para/jslib/',
Alias: {
'App': 'caminho/para/app/'
},
charset: 'utf-8',
Tempo limite: 20000,
Debug: false
});
Onde a base representa o caminho do endereço base durante o endereçamento base. Por exemplo, a base está definida como http://example.com/js/3-party/, então:
A cópia do código é a seguinte: var $ = requer ('jQuery');
http://example.com/js/3-party/jquery.js será carregado.
Alias pode definir abreviação para caminhos comuns mais longos.
Charset representa o atributo charset da tag de script ao baixar JS.
O tempo limite indica o tempo máximo para baixar o arquivo, em milissegundos.
A depuração indica se funciona no modo de depuração.
Como o SEAJS trabalha com as bibliotecas JS existentes
Para usar uma biblioteca JS existente, como o jQuery com o SEAJS, apenas encapsule a biblioteca existente de acordo com as regras de definição do módulo do SEAJS. Por exemplo, a seguir é o método de encapsulamento para jQuery:
Copie o código da seguinte forma: define (function () {
// {{{{jQuery Código original inicia
/*!
* JQuery JavaScript Library v1.6.1
* http://jquery.com/
*
* Copyright 2011, John Resig
* Licensões duplas sob as licenças MIT ou GPL versão 2.
* http://jquery.org/license
*
* Inclui Sizzle.js
* http://sizzlejs.com/
* Copyright 2011, The Dojo Foundation
* Lançado nas licenças do MIT, BSD e GPL.
*
* Data: Qui 12 de maio 15:04:36 2011 -0400
*/
// ...
//}}} JQuery Código original termina
retornar $ .noconflict ();
});
Embalagem e implantação do projeto Seajs
O SEAJS originalmente integrou uma ferramenta de implantação embalada SM. A idéia principal do SPM é mesclar e comprimir o código de todos os módulos e, em seguida, mesclá -lo no módulo de entrada. . No entanto, como o SPM não foi lançado para a versão oficial, este artigo não pretende apresentá -lo em detalhes.
De fato, como as ferramentas de mesclagem e compressão JS usadas para cada projeto são diferentes, o SPM pode não ser completamente adequado para cada projeto. Depois de entender os princípios dos SEAJs, você pode escrever um script de mesclagem e embalagem que corresponda às características do seu projeto.