SeaJS_Javascript-Kenntnisse für die modulare JavaScript-Entwicklung

Vorwort

SeaJS ist ein JavaScript-Modullade-Framework, das der CommonJS-Spezifikation folgt und modulare Entwicklungs- und Lademechanismen von JavaScript realisieren kann. Die Verwendung von SeaJS kann die Lesbarkeit und Klarheit von JavaScript-Code verbessern, häufige Probleme wie Abhängigkeitsverwirrung und Codeverschränkung in der aktuellen JavaScript-Programmierung lösen und das Schreiben und Warten von Code erleichtern.

SeaJS selbst wurde nach dem KISS-Konzept (Keep it Simple, Stupid) entwickelt, und auch nachfolgende Versionsaktualisierungen fordern lautstark, sich in diese Richtung zu bewegen.

So verwenden Sie SeaJS

Ich werde hier nicht auf Details zum Herunterladen und Installieren eingehen. Wenn Sie es nicht verstehen, schauen Sie bitte auf der offiziellen Website nach.

Grundlegende Entwicklungsprinzipien
•Alles ist ein Modul: Das Konzept von Modulen in SeaJS ähnelt ein wenig dem von objektorientierten Klassen – Module können Daten und Methoden haben, Daten und Methoden können als öffentlich oder privat definiert werden und öffentliche Daten und Methoden können von anderen aufgerufen werden Module.

•Jedes Modul sollte in einer separaten js-Datei definiert werden, d. h. eines entspricht einem Modul.

Definition und Schreiben von Modulen

Moduldefinitionsfunktion define

Verwenden Sie die Funktion define in SeaJS, um ein Modul zu definieren. define kann drei Parameter erhalten:

/**
* 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…
}

Die Parameter, die den Empfang definieren, sind die Modul-ID, das abhängige Modul-Array und die Factory-Funktion.

•Wenn es nur einen Parameter gibt, weisen Sie ihn der Fabrik zu

•Wenn es zwei Parameter gibt, wird der zweite der Fabrik zugewiesen, der erste wird deps zugewiesen, wenn es sich um ein Array handelt, andernfalls wird er der ID zugewiesen

•Wenn es drei Parameter gibt, weisen Sie die Werte separat zu

Allerdings übergeben fast alle Orte, an denen define verwendet wird, einschließlich des Beispiels der offiziellen Website von SeaJS, nur eine Factory-Funktion, ähnlich dem folgenden Code:

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

Persönlich wird empfohlen, dem Standard des offiziellen SeaJS-Beispiels zu folgen und das Modul mit einer Parameterdefinition zu definieren. Was passiert also mit Ids und Deps?

id ist die Identifikationszeichenfolge eines Moduls. Wenn define nur einen Parameter hat, wird id standardmäßig der absolute Pfad dieser js-Datei zugewiesen. Wenn define zum Definieren eines Moduls in der a.js-Datei unter example.com verwendet wird, wird der ID dieses Moduls der Wert http://example.com/a.js zugewiesen Geben Sie es nicht weiter, wenn kein besonderer Ausweis erforderlich ist. Im Allgemeinen müssen Deps nicht übergeben werden. Die zu verwendenden Module können mit require geladen werden.

Fabrikfunktionsfabrikanalyse

  Die Fabrikfunktion ist der Hauptteil und Schwerpunkt des Moduls. Seine drei Parameter sind:

•erforderlich: Modulladefunktion, wird zum Aufzeichnen abhängiger Module verwendet
•Exporte: Schnittstellenpunkt, darauf definierte Daten oder Methoden werden externen Aufrufen ausgesetzt
•Modul: Modulmetadaten

Diese drei Parameter können bei Bedarf angezeigt und spezifiziert werden.

Modul ist ein Objekt, das die Metainformationen des Moduls wie folgt speichert:
•module.id: Modul-ID
•module.dependencies: ein Array, das eine Liste der IDs aller Module speichert, von denen dieses Modul abhängt.
•module.exports: zeigt auf dasselbe Objekt wie exports

Drei Modi zum Schreiben von Modulen

Der erste ist der exportbasierte Modus:

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';
  }
})

Das Obige ist ein relativ „authentisches“ Moduldefinitionsmuster. Zusätzlich zum Anhängen öffentlicher Daten und Methoden an Exporte können Sie auch direkt ein Objektdarstellungsmodul zurückgeben. Der folgende Code hat beispielsweise dieselbe Funktion wie der obige Code:

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';
    }
  }
})

Wenn die Moduldefinition keinen anderen Code hat und nur ein Objekt zurückgibt, kann sie auch wie folgt vereinfacht werden:

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

Die dritte Schreibweise eignet sich sehr gut für Module, die reine JSON-Daten definieren.

Je nach unterschiedlichen Anwendungsszenarien stellt SeaJS drei APIs zum Laden von Modulen bereit, nämlich: seajs.use, require und require.async.

seajs.use

seajs.use wird hauptsächlich zum Laden von Einstiegsmodulen verwendet. Das Einstiegsmodul entspricht der Hauptfunktion der C-Sprache und ist auch die Wurzel des gesamten Modulabhängigkeitsbaums. seajs.use
Die Verwendung von ist wie folgt:

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

Die Verwendung mehrerer Module ähnelt der Modullademethode in KISSY. Kein Wunder, dass sie von einer Person geschrieben wurde!

Im Allgemeinen wird seajs.use nur zum Laden des Einstiegsmoduls auf der Seite verwendet. SeaJS analysiert alle abhängigen Module entlang des Einstiegsmoduls und lädt sie. Wenn nur ein Eintragsmodul vorhanden ist, können Sie seajs.use auch weglassen, indem Sie dem Skript-Tag, das seajs einleitet, das Attribut „data-main“ hinzufügen. Es wird beispielsweise wie folgt geschrieben:

<!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 ist die Hauptmethode zum Laden von Modulen von Seajs. Wenn andere Module in einem Modul benötigt werden, wird im Allgemeinen zum Laden Folgendes verwendet:

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模块化开发有所帮助，谢谢大家一直以来对脚本之家网站的支持。！