Prefácio
O SEAJS é uma estrutura de carregamento do módulo JavaScript que segue a especificação Commonjs, que pode implementar o mecanismo modular de desenvolvimento e carregamento do JavaScript. Ao contrário das estruturas JavaScript, como o jQuery, o SEAJS não estende os recursos da linguagem de encapsulamento, mas implementa apenas modularização e carga por módulo. O principal objetivo do SEAJS é tornar o desenvolvimento de JavaScript modular e carregar de maneira fácil e feliz, engenheiros de front-end gratuitos do arquivo pesado JavaScript e processamento de dependência de objetos e pode se concentrar na lógica do próprio código. O SEAJS pode ser perfeitamente integrado com estruturas como o jQuery. O uso do SEAJS pode melhorar a legibilidade e a clareza do código JavaScript, resolver os problemas de confusão de dependência e emaranhamento de código que são comuns na programação de JavaScript e facilitar a escrita e manutenção do código.
O autor de Seajs é Yu Bo, um engenheiro de front-end Taobao.
O próprio Seajs segue o conceito de beijo (mantenha-o simples, estúpido) para o desenvolvimento. No processo de aprender Seajs, você pode sentir a essência do princípio do beijo em todos os lugares - faça apenas uma coisa e faça uma coisa bem.
Este artigo primeiro usa um exemplo para comparar intuitivamente a programação tradicional de JavaScript e a programação modular JavaScript usando o SEAJS e, em seguida, discute os métodos de uso dos SEAJs em detalhes e, finalmente, fornece algumas informações relacionadas aos SEAJs.
Modo tradicional vs modularidade Seajs
Suponha que agora estamos desenvolvendo um aplicativo da web tinyapp e decidimos usar a estrutura jQuery em TinyApp. A página inicial do TinyApp usará o Module1.js, que depende do Module2.js e Module3.js e Module3.js.
Desenvolvimento tradicional
Usando os métodos tradicionais de desenvolvimento, o código de cada arquivo JS é o seguinte:
Copie o código da seguinte forma: //module1.js
var módulo1 = {
Run: function () {
retornar $ .merge (['módulo1'], $ .merge (module2.run (), module3.run ()));
}
}
//module2.js
var módulo 2 = {
Run: function () {
retornar ['módulo2'];
}
}
//module3.js
var módulo3 = {
Run: function () {
retornar $ .merge (['módulo3'], module4.run ());
}
}
//module4.js
var módulo4 = {
Run: function () {
retornar ['módulo4'];
}
}
No momento, o index.html precisa fazer referência ao módulo1.js e todas as suas dependências subjacentes (observe o pedido):
Copie o código da seguinte forma: <! Doctype html>
<html lang = "zh-cn">
<head>
<meta charset = "utf-8">
<title> tinyapp </title>
<script src = "./ jQuery-min.js"> </script>
<script src = "./ Module4.js"> </sCript>
<script src = "./ Module2.js"> </sCript>
<script src = "./ Module3.js"> </sCript>
<script src = "./ Module1.js"> </sCript>
</head>
<Body>
<p> </p>
<Cript>
$ ('. Content'). html (módulo1.run ());
</script>
</body>
</html>
À medida que o projeto progride, haverá cada vez mais arquivos e dependências JS se tornarão cada vez mais complexos, dificultando a manutenção do código JS e do script no HTML.
Desenvolvimento modular do SEAJS
Vamos dar uma olhada em como implementar a mesma funcionalidade usando o SEAJS.
Primeiro é index.html:
Copie o código da seguinte forma: <! Doctype html>
<html lang = "zh-cn">
<head>
<meta charset = "utf-8">
<title> tinyapp </title>
</head>
<Body>
<p> </p>
<script src = "./ Sea.js"> </script>
<Cript>
Seajs.use ('./ init', function (init) {
init.initpage ();
});
</script>
</body>
</html>
Você pode ver que a página HTML não precisa mais introduzir todos os arquivos JS de dependências, mas apresenta apenas um Sea.js. Ao renderizar a página.
Index.html carrega o módulo Init e usa o método InitPage deste módulo para inicializar os dados da página.
Vamos dar uma olhada na seguinte redação modular de javascript:
Copie o código da seguinte forma: //jquery.js
define (função (requer, exporta, módulo) = {
// O código JQuery.js original ...
module.exports = $ .noconflict (true);
});
//init.js
define (função (requer, exporta, módulo) = {
var $ = requer ('jQuery');
var m1 = requer ('módulo1');
exports.initpage = function () {
$ ('. Content'). html (m1.run ());
}
});
//module1.js
define (função (requer, exporta, módulo) = {
var $ = requer ('jQuery');
var m2 = requer ('módulo2');
var m3 = requer ('módulo3');
exports.run = function () {
retornar $ .merge (['módulo1'], $ .merge (m2.run (), m3.run ()));
}
});
//module2.js
define (função (requer, exporta, módulo) = {
exports.run = function () {
retornar ['módulo2'];
}
});
//module3.js
define (função (requer, exporta, módulo) = {
var $ = requer ('jQuery');
var m4 = requer ('módulo4');
exports.run = function () {
retornar $ .merge (['módulo3'], m4.run ());
}
});
//module4.js
define (função (requer, exporta, módulo) = {
exports.run = function () {
retornar ['módulo4'];
}
});
À primeira vista, o código parece ser mais complicado, porque este exemplo é muito simples. No entanto, a partir disso ainda podemos ver alguns recursos do SEAJS:
Primeiro, a página HTML não precisa manter uma longa lista de tags de script, basta apresentar um Sea.js.
A segunda é que o código JS é organizado como módulos.
Através deste exemplo, os amigos devem ter uma impressão intuitiva dos Seajs.