Compétences SeaJS_javascript pour le développement modulaire JavaScript

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. 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.

SeaJS lui-même est développé selon le concept KISS (Keep it Simple, Stupid), et les mises à jour de versions ultérieures réclament également d'aller dans cette direction.

Comment utiliser SeaJS

Je n'entrerai pas ici dans les détails du téléchargement et de l'installation. Si vous ne comprenez pas, veuillez consulter le site officiel.

Principes de développement de base
•Tout est un module : le concept de modules dans SeaJS est quelque peu similaire aux classes orientées objet : les modules peuvent avoir des données et des méthodes, les données et les méthodes peuvent être définies comme publiques ou privées, et les données et méthodes publiques peuvent être appelées par d'autres. modules.

•Chaque module doit être défini dans un fichier js séparé, c'est-à-dire qu'un correspond à un module.

Définition et rédaction des modules

Fonction de définition de module définir

Utilisez la fonction de définition dans SeaJS pour définir un module. définir peut recevoir trois paramètres :

/**
* Defines a module.
* @param {string=} id The module id.
* @param {Array.|string=} deps The module dependencies.
* @param {function()|Object} factory The module factory function.
*/
fn.define = function(id, deps, factory) {
  //code of function…
}

Les paramètres qui peuvent être définis sont l'ID du module, le tableau de modules dépendants et la fonction d'usine.

•S'il n'y a qu'un seul paramètre, attribuez-le à l'usine

•S'il y a deux paramètres, le deuxième est assigné à factory, le premier est assigné à deps s'il s'agit d'un tableau, sinon il est assigné à id

•S'il y a trois paramètres, attribuez des valeurs séparément

Cependant, presque tous les endroits où définir est utilisé, y compris l'exemple du site officiel de SeaJS, n'y transmettent qu'une fonction d'usine, similaire au code suivant :

define(function(require,exports,module){
  //code of the module
}) 

Personnellement, il est recommandé de suivre le standard de l'exemple officiel SeaJS et de définir le module avec un paramètre définir. Alors, qu’arrivera-t-il aux identifiants et aux dépôts ?

id est la chaîne d'identification d'un module lorsque définir n'a qu'un seul paramètre, id se verra attribuer par défaut le chemin absolu de ce fichier js. Si définir est utilisé pour définir un module dans le fichier a.js sous exemple.com, l'ID de ce module se verra attribuer la valeur http://example.com/a.js C'est recommandé. ne pas le transmettre s'il n'y a pas de besoin particulier d'identification. Généralement, deps n'a pas besoin d'être transmis. Les modules qui doivent être utilisés peuvent être chargés avec require.

Analyse d'usine de fonction d'usine

  La fonction d'usine est le corps principal et l'objectif du module. Ses trois paramètres sont :

•require : fonction de chargement de module, utilisée pour enregistrer les modules dépendants
•Exportations : Le point d'interface, les données ou les méthodes définies dessus seront exposés aux appels externes
•Module : métadonnées du module

Ces trois paramètres peuvent être affichés et spécifiés selon les besoins.

Module est un objet qui stocke les méta-informations du module, comme suit :
•module.id : identifiant du module
•module.dependencies : un tableau qui stocke une liste des ID de tous les modules dont dépend ce module.
•module.exports : pointe vers le même objet que exports

Trois modes d'écriture des modules

Le premier est le mode basé sur les exportations :

define(function(require,exports,module){
  var a=require('a');
  var b=require('b'); //引入模块
  var data1=1; //私有数据
  var fun1=function(){//私有方法
    return a.run(data1);
  }
  exports.data2=2; //公有数据
  exports.fun2=function(){
    return 'hello';
  }
})

Ce qui précède est un modèle de définition de module relativement "authentique". En plus d'attacher des données et des méthodes publiques aux exportations, vous pouvez également renvoyer directement un module de représentation d'objet. Par exemple, le code suivant a la même fonction que le code ci-dessus :
.

define(function(require){
  var a=require('a');
  var b=require('b'); //引入模块
  var data1=1;
  var fun1=function(){
    return a.run(data1);
  }
  return{
    data2:2,
    fun2:function(){
      return 'hello';
    }
  }
})

Si la définition du module n'a pas d'autre code et renvoie uniquement un objet, elle peut également être simplifiée comme suit :

define({
  data2:2,
    fun2:function(){
      return 'hello';
    }
  }) 

La troisième façon d'écrire est très adaptée aux modules qui définissent des données JSON pures.

En fonction des différents scénarios d'application, SeaJS fournit trois API pour charger les modules, à savoir : seajs.use, require et require.async.

seajs.use

seajs.use est principalement utilisé pour charger des modules d'entrée. Le module d'entrée est équivalent à la fonction principale du langage C et est également la racine de l'ensemble de l'arborescence des dépendances du module. seajs.use
L'utilisation de est la suivante :

//第一模式
seajs.use('./a');
//回调模式
seajs.use('./a',function(a){
  a.run();
})
//多模块模式
seajs.use(['./a','./b'],function(a,b){
  a.run();
  b.run();
}) 

L'utilisation de multi-modules est similaire à la méthode de chargement de module dans KISSY. Il n'est pas étonnant qu'il ait été écrit par une seule personne !

Généralement, seajs.use n'est utilisé que pour charger le module d'entrée sur la page. SeaJS analysera tous les modules dépendants le long du module d'entrée et les chargera. S'il n'y a qu'un seul module d'entrée, vous pouvez également omettre seajs.use en ajoutant l'attribut "data-main" à la balise de script qui introduit seajs. Par exemple, il s'écrit comme suit :

.

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>TinyApp</title>
</head>
<body>
  <p class="content"></p>
  <script src="./sea.js" data-main="./init"></script>
</body>
</html> 
require

require est la méthode de chargement de module principale de seajs Lorsque d'autres modules sont nécessaires dans un module, require est généralement utilisé pour charger :

var m=require('./a'); 
require.async

上文说过seajs会在html页面打开时通过静态分析一次性记载所有需要的js文件，如果想要某个js文件在用时才加载，可以使用require.async。

 这样只有在用到这个模块时，对应的js文件才会被下载，也就实现了JavaScript代码的按需加载。

SeaJS的全局配置

seajs提供了一个seaj.configd的方法可以设置全局配置，接收一个表示全局配置的配置对象，具体方法如下：

seajs.config({
base:'path',
alias:{
  'app':'path/app/'
},
charset:'utf-8',
timeout:20000,
debug:false
})

其中，

 •base表示基址路径
 •alias可以对较长的常用路径设置缩写
 •charset表示下载js时script标签的charset属性。
 •timeout表示下载文件的最大时长，以毫秒为单位。

Seajs如何与现有的JS库配合使用

要将现有的JS库与seajs一起使用，只需根据seajs的模块定义规则对现有库进行一个封装。例如，下面是对jQuery的封装方法：

define(function(){
  /*
  此处为jquery源码
  */
  }) 

一个完整的例子：

 上文说了那么多，知识点比较分散，所以最后我打算用一个完整的SeaJS例子把这些知识点串起来，方便朋友们归纳回顾。这个例子包含如下文件：
 •index.html 主页面

 •sea.js
 •jquery.js
 •init.js init模块，入口模块，依赖data、jquery、style三个模块，又主页面载入
 •data.js data模块，纯json数据模块
 •style.css css样式表

html：
<!DOCTYPE HTML>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="content">
  <p class="author"></p>
  <p class="blog"><a href="#">Blog</a></p>
</div>
<script src="sea.js"></script>
<script>
    seajs.use('init');
</script>
</body>
</html> 
javascript:
//init.js
define(function(require, exports, module) {
  var $ = require('./jquery');
  var data = require('./data');
  var css = require('./style.css');
  $('.author').html(data.author);
  $('.blog').attr('href', data.blog);
});
//data.js
define({
  author: 'ZhangYang',
  blog: 'http://blog.codinglabs.org'
}); 
css:
.author{color:red;font-size:10pt;}
.blog{font-size:10pt;} 

请注意：

1.请讲jquery.js源码文件包含在seajs模块加载代码中；

2.在Sea.js < 2.3.0版本之前是可以加载css文件的，新版本中此功能移除，为了兼容考虑，加载css功能将作为一个插件存在。

使用方法

 •可以在sea.js标签后引入这个插件使用
 •也可以将插件代码混入sea.js当中
 •和seajs-style的区别 •seajs-css是使 Sea.js 能够加载一个css文件，和link标签一样
 •seajs-style是指提供一个seajs.importStyle方法用于加载一段 css 字符串

以上内容是小编给大家分享的JavaScript模块化开发之SeaJS，希望对大家学习javascript模块化开发有所帮助，谢谢大家一直以来对脚本之家网站的支持。！