O SEAJS é uma estrutura de carregamento do módulo desenvolvida por Yubo que segue a especificação Commonjs, que pode ser usada para carregar de maneira fácil e feliz o module JavaScript e os estilos do módulo CSS. O SEAJS é muito pequeno, porque o volume após a compressão e o GZIP é de apenas 4K, e as interfaces e métodos também são muito pequenos. O SEAJS possui dois núcleos: definição do módulo e carregamento e dependências do módulo. Seajs é muito poderoso. O SEAJS pode carregar qualquer módulo JavaScript e estilo do módulo CSS. O SEAJS garantirá que, quando você usar um módulo, você carregue outros módulos dos quais depende no ambiente de execução do script. Yu Bo disse que o SEAJS pode permitir que você aproveite a diversão de escrever código sem se preocupar em carregar problemas. Você está cansado de tantas referências de JS e CSS? Contei as 39 referências de CSS e JS na página inicial do site da nossa empresa. O impacto pode ser imaginado:
1. Não é propício à manutenção, front-end e back-end são os mesmos
2. Existem muitas solicitações HTTP. Obviamente, isso pode ser resolvido através da mesclagem, mas se não houver back -end diretamente, o custo do trabalho será muito alto. Mesmo que o back -end funcione e o mantenha, uma corda longa definitivamente o olhará.
O uso do SEAJS pode resolver esses problemas muito bem.
Definição de módulo
Definir um módulo é mais simples. Por exemplo, definindo um módulo Sayhello e criando um documento Sayhello.js:
A cópia do código é a seguinte:
Definir (função (requer, exporta, módulo) {
exports.sayhello = função (eleid, texto) {
document.getElementById (eleid) .innerhtml = text;
};
});
Vamos primeiro olhar para o parâmetro de exportação. O parâmetro de exportação é usado para fornecer a API do módulo. Ou seja, outros módulos dessas exportações podem acessar o método Sayhello.
Uso de carga do módulo
Por exemplo, há um elemento em nossa página com ID "Out" e queremos produzir "Hello Seajs!",
Então podemos apresentar o Sea.js primeiro
Em seguida, use o módulo Sayhello:
A cópia do código é a seguinte:
Seajs.use ("Sayhello/Sayhello", função (digamos) {
Say.Sayhello ("Out", "Hello Seajs!");
});
Aqui o uso é o método de usar módulos:
O primeiro parâmetro é a representação do módulo, que é representada pelo caminho relativo em relação ao SEA.JS. O sufixo ".js" depois de dizer quehello.js pode ser omitido. Obviamente, existem muitos métodos para identificar este módulo. Para detalhes, verifique a descrição oficial: http://seajs.com/docs/zh-cn/module-identifier.html
O primeiro parâmetro é uma função de retorno de chamada. Say.Sayhello () chama o método de exportação.Sayhello do módulo Sayhello. Obviamente, existe um parâmetro a dizer nesta função de retorno de chamada.
Dependências do módulo
As dependências do módulo devem realmente existir quando os módulos são definidos. Por exemplo, reescreva o módulo Sayhello acima. Suponha que já tenhamos um módulo DOM geral, como alguns métodos, como obter elementos, estilos de configuração, etc., como um módulo DOM, escreva dom.js da seguinte maneira
A cópia do código é a seguinte:
Definir (função (requer, exporta, módulo) {
var dom = {
/**
* Obtenha o objeto DOM através do atributo ID do elemento, os parâmetros são strings ou várias strings
* @id getByid
* @method getByid
* @param {string} id o atributo ID
* @return {htmlelement | Objeto} o htmlelement com o ID, ou nulo, se nenhum encontrado.
*/
getById: function () {
var els = [];
for (var i = 0; i <argumentos.length; i ++) {
var el = argumentos [i];
if (typeof el == "string") {
el = document.getElementById (el);
}
if (argumentos.Length == 1) {
retornar el;
}
els.push (el);
}
retornar els;
},
/**
* Obtém o objeto, você pode passar em um objeto ou em uma string. Se a string for passada, o objeto será obtido na forma de document.getElementById ()
* @id Get
* @param {string} El Html Elemento
* @return {objeto} objeto htmlelement.
*/
Get: function (el) {
if (el & amp; amp; & amp; amp; (el.tagname || el.item)) {
retornar el;
}
retornar este.getById (el);
}
};
retornar dom;
});
Então o módulo Sayhello pode ser escrito assim. Para não afetar a página de demonstração original, defina um novo módulo Sayhelloa. Podemos escrever sayhelloa.js assim:
A cópia do código é a seguinte:
Definir (função (requer, exporta, módulo) {
var dom = requer ("dom/dom");
requer ("Sayhelloa/Sayhello.css");
exports.sayhello = função (eleid, texto) {
Dom.get (eleid) .innerhtml = text;
};
});
A função requer é usada para estabelecer as dependências do módulo. Por exemplo, o módulo SayHelloa acima depende do módulo DOM porque o método GET do módulo DOM é usado.
Observe que var domin requim ("dom/dom") aqui, esta frase atribui o módulo DOM aplicado ao DOM; requer ("Sayhelloa/sayhello.css") aplica diretamente o módulo ou arquivo sayhello.css css. Isso se referirá ao arquivo CSS na página.
Eu tenho dado problemas com o SEAJS nos últimos dias. Quanto mais eu fico com problemas, mais eu gosto. Obrigado Yu Bo! Obrigado Seajs! É claro que você pode pensar que não há necessidade de fazer isso com um exemplo tão simples. De fato, se pequenos projetos com menos arquivos JS se sentirem bem com vantagens modulares, mas mais vantagens modulares são refletidas no número de arquivos JS ou em projetos médios ou acima.