Introduction à SeaJS dans la série de didacticiels d'introduction à SeaJS (1)_Seajs

Avant-propos
SeaJS est un framework de chargement de modules JavaScript qui suit la spécification CommonJS et peut réaliser un développement modulaire et un mécanisme de chargement de JavaScript. Contrairement aux frameworks JavaScript tels que jQuery, SeaJS n'étend pas les fonctionnalités du langage encapsulé, mais implémente uniquement la modularisation JavaScript et le chargement de modules. L'objectif principal de SeaJS est de rendre le développement JavaScript modulaire et facile à charger, libérant ainsi les ingénieurs front-end du traitement lourd des fichiers JavaScript et des dépendances d'objets, afin qu'ils puissent se concentrer sur la logique du code lui-même. SeaJS peut être parfaitement intégré à des frameworks tels que jQuery. L'utilisation de SeaJS peut améliorer la lisibilité et la clarté du code JavaScript, résoudre des problèmes courants tels que la confusion des dépendances et l'enchevêtrement du code dans la programmation JavaScript actuelle, et faciliter l'écriture et la maintenance du code.
L'auteur de SeaJS est l'ingénieur front-end de Taobao, Yu Bo.
SeaJS lui-même est développé selon le concept KISS (Keep It Simple, Stupid). Il n'a qu'une API à un chiffre, il n'y a donc aucune pression pour apprendre. Dans le processus d'apprentissage de SeaJS, vous pouvez ressentir l'essence du principe KISS partout : ne faites qu'une chose et faites bien une chose.
Cet article compare d'abord visuellement la programmation JavaScript traditionnelle et la programmation JavaScript modulaire utilisant SeaJS à travers un exemple, puis discute en détail de l'utilisation de SeaJS et donne enfin quelques informations relatives à SeaJS.

Mode traditionnel vs modularité SeaJS
Supposons que nous développions maintenant une application Web TinyApp et que nous décidions d'utiliser le framework jQuery dans TinyApp. La page d'accueil de TinyApp utilisera module1.js, module1.js dépend de module2.js et module3.js, et module3.js dépend de module4.js.
Développement traditionnel
En utilisant les méthodes de développement traditionnelles, le code de chaque fichier js est le suivant :

Copier le code Le code est le suivant :

//module1.js
var module1 = {
run: function() {
return $.merge(['module1' ], $.merge( module2.run(), module3.run()));
>

//module2.js
var module2 = {
exécuter : function() {
                                               merge(['module3'], module4.run());
}
}

//module4.js
var module4 = {
run: function() {
           return ['module4'];


Copier le code


Le code est le suivant :

  ; /head> 

  <script></div>   $('.content').html(module1 . run());<div class="codebody" id="code91210"> </script>



Au fur et à mesure que le projet avance, il y aura de plus en plus de fichiers js. deviendra également de plus en plus complexe, rendant la liste de scripts en code js et html souvent difficile à maintenir.

Développement modulaire SeaJS

Voyons comment utiliser SeaJS pour obtenir la même fonction.
Le premier est index.html :




Copiez le code


Le code est le suivant :

<;title>TinyApp

 

 



Vous pouvez voir que la page html non n'a plus besoin d'introduire tous les fichiers js dépendants, mais seulement d'introduire un sea.js, sea.js gérera toutes les dépendances et chargera les fichiers js correspondants. La stratégie de chargement peut choisir de charger tous les fichiers js en même temps lors du rendu de la page, ou de les charger. à la demande (charger la réponse js uniquement lorsqu'elle est utilisée). L'utilisation spécifique des stratégies de chargement est discutée ci-dessous.
index.html charge le module init et utilise la méthode initPage de ce module pour initialiser les données de la page. Les détails du code ne seront pas abordés ici.
Regardons comment JavaScript est écrit après la modularisation :




Copiez le code

Le code est le suivant :

// jquery.js

define(function(require, exports, module) = { //Code jquery.js original... module.exports = $.noConflict(true) ;});

//init.js

define(function(require, exports, module) = {
var $ = require('jquery' );
var m1 = require('module1');

exports.initPage = function() {
$('.content').html(m1.run()); 🎜> }
});

//module1.js
define(function(require, exports, module) = {
var $ = require('jquery');
var m2 = require( 'module2');
var m3 = require('module3');

exports.run = function() {
return $.merge(['module1' ], $.merge( m2.run(), m3.run())); 
 }
});

//module2.js
define(function(require, exports, module) = {
exports.run = function() {
return ['module2'];
}
});

//module3.js
define(function(require, exports, module) = {
var $ = require('jquery');
var m4 = require('module4');

exports.run = function () {
return $.merge(['module3'], m4.run());

//module4.js
define( function(require, exports, module) = {
exports.run = function() {
return ['module4'];
}
});

À première vue , le code semble changer. C'est compliqué car cet exemple est trop simple. S'il s'agit d'un gros projet, les avantages du code SeaJS apparaîtront. Cependant, nous pouvons encore avoir un aperçu de certaines fonctionnalités de SeaJS à partir d'ici :
Premièrement, la page HTML n'a plus besoin de maintenir une longue liste de balises de script, il suffit d'introduire un sea.js.
Deuxièmement, le code js est organisé en modules. Chaque module présente ses modules dépendants via require, et le code est clair et clair.
Grâce à cet exemple, les amis devraient avoir une impression intuitive de SeaJS. L'article suivant traite de l'utilisation de SeaJS en détail.