JavaScript モジュール開発のための SeaJS_javascript スキル-jsチュートリアル-php.cn

はじめに

SeaJS は、CommonJS 仕様に準拠した JavaScript モジュール読み込みフレームワークであり、JavaScript のモジュール開発と読み込み機構を実現できます。 SeaJS を使用すると、JavaScript コードの読みやすさと明瞭さが向上し、現在の JavaScript プログラミングにおける依存関係の混乱やコードのもつれなどの一般的な問題が解決され、コードの作成とメンテナンスが容易になります。

SeaJS 自体は KISS (Keep it Simple, Stupid) のコンセプトに従って開発されており、その後のバージョン更新もこの方向に進むことが求められています。

SeaJS の使用方法

ダウンロードとインストールについてはここでは詳しく説明しませんので、分からない場合は公式サイトを確認してください。

基本的な開発原則
•すべてはモジュールです: SeaJS のモジュールの概念はオブジェクト指向のクラスに似ています。モジュールはデータとメソッドを持つことができ、データとメソッドはパブリックまたはプライベートとして定義でき、パブリックデータとメソッドは他のユーザーから呼び出すことができます。モジュール。

•各モジュールは別個の js ファイルで定義する必要があります。つまり、1 つのモジュールが 1 つのモジュールに対応します。

モジュールの定義と作成

モジュール定義関数define

SeaJS の定義関数を使用してモジュールを定義します。定義では 3 つのパラメータを受け取ることができます:

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

ログイン後にコピー

定義で受け取れるパラメータはモジュールID、依存モジュール配列、ファクトリ関数です。

•パラメータが 1 つしかない場合は、それを Factory に割り当てます

•パラメータが 2 つある場合、2 番目のパラメータは Factory に割り当てられ、最初のパラメータは配列の場合は deps に割り当てられ、それ以外の場合は id
に割り当てられます。

•パラメータが 3 つの場合は、個別に値を割り当てます

ただし、SeaJS 公式 Web サイトの例を含め、define が使用されるほぼすべての場所では、次のコードのようなファクトリ関数のみが渡されます。

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

ログイン後にコピー

個人的にはSeaJS公式サンプルの規格に従い、パラメータdefineでモジュールを定義することを推奨します。では、ids と deps はどうなるでしょうか?

id はモジュールの識別文字列です。define にパラメータが 1 つしかない場合、デフォルトで id にはこの js ファイルの絶対パスが割り当てられます。定義を使用して example.com の a.js ファイルにモジュールを定義する場合、このモジュールの ID には値 http://example.com/a.js が割り当てられることをお勧めします。特別な必要がない場合は渡さないでください。通常、deps を渡す必要はありません。使用する必要があるモジュールは、require でロードできます。

ファクトリー機能ファクトリー分析

ファクトリー関数はモジュールの本体であり焦点です。その 3 つのパラメータは次のとおりです:

•require: 依存モジュールを記録するために使用されるモジュール読み込み関数
•エクスポート: インターフェイスポイント、インターフェイスポイント上で定義されたデータ、またはメソッドが外部呼び出しに公開されます
•モジュール: モジュールのメタデータ

これら 3 つのパラメータは、必要に応じて表示および指定できます。

モジュールは、次のようにモジュールのメタ情報を格納するオブジェクトです:
•module.id: モジュールID
•module.dependency: このモジュールが依存するすべてのモジュールの ID のリストを格納する配列。
•module.exports:exports
と同じオブジェクトを指します。

モジュールを作成する 3 つのモード

1 つ目はエクスポートベースのモードです:

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

ログイン後にコピー

上記は比較的「本格的な」モジュール定義モードです。パブリックデータとメソッドをエクスポートに添付することに加えて、オブジェクト表現モジュールを直接返すこともできます。たとえば、次のコードには上記のコードと同じ機能があります。

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

ログイン後にコピー

モジュール定義に他のコードがなく、オブジェクトのみを返す場合は、次のように簡略化することもできます:

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

ログイン後にコピー

3 番目の記述方法は、純粋な JSON データを定義するモジュールに非常に適しています。

さまざまなアプリケーションシナリオに応じて、SeaJS はモジュールをロードするための 3 つの API、つまり seajs.use、require、require.async を提供します。

seajs.use

seajs.use は主にエントリーモジュールをロードするために使用されます。エントリモジュールはC言語のmain関数に相当し、モジュール依存関係ツリー全体のルートでもあります。 seajs.use

の使用法は次のとおりです:

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

ログイン後にコピー

マルチモジュールの使い方は KISSY のモジュールロード方法と似ています。これが 1 人で書かれたのも不思議ではありません。

通常、seajs.use はページ上のエントリモジュールをロードするためにのみ使用されます。SeaJS はエントリモジュールに沿ってすべての依存モジュールを解析してロードします。エントリモジュールが 1 つしかない場合は、seajs を導入するスクリプトタグに「data-main」属性を追加することで、seajs.use を省略することもできます。たとえば、次のように記述します。

<!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 は、seajs のメインモジュールロードメソッドです。モジュール内で他のモジュールが必要な場合、通常、require を使用してロードします。

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