SeaJS入門チュートリアルシリーズ(1)_Seajs

はじめに
SeaJS は、CommonJS 仕様に準拠し、JavaScript のモジュール開発と読み込み機構を実現できる JavaScript モジュール読み込みフレームワークです。 jQuery などの JavaScript フレームワークとは異なり、SeaJS はカプセル化された言語機能を拡張せず、JavaScript のモジュール化とモジュールの読み込みのみを実装します。 SeaJS の主な目的は、JavaScript 開発をモジュール化して読み込みを容易にし、フロントエンド エンジニアを JavaScript ファイルやオブジェクトの依存関係の重い処理から解放し、コード自体のロジックに集中できるようにすることです。 SeaJS は、jQuery などのフレームワークと完全に統合できます。 SeaJS を使用すると、JavaScript コードの読みやすさと明瞭さが向上し、現在の JavaScript プログラミングにおける依存関係の混乱やコードのもつれなどの一般的な問題が解決され、コードの作成とメンテナンスが容易になります。
SeaJS の作者は、淘宝網のフロントエンド エンジニア Yu Bo です。
SeaJS 自体は KISS (Keep It Simple, Stupid) の概念に従って開発されており、API は 1 桁のみなので、学習する必要はありません。 SeaJS を学習する過程で、KISS 原則の本質を随所で感じることができます。つまり、1 つのことだけを行い、1 つのことをうまくやるということです。
この記事では、まず、例を通じて従来の JavaScript プログラミングと SeaJS を使用したモジュラー JavaScript プログラミングを視覚的に比較し、次に SeaJS の使用法について詳しく説明し、最後に SeaJS に関連する情報をいくつか示します。

従来のモードと SeaJS モジュラー
現在、Web アプリケーション TinyApp を開発しており、TinyApp で jQuery フレームワークを使用することに決めたとします。 TinyApp のホームページは module1.js を使用し、module1.js は module2.js と module3.js に依存し、module3.js は module4.js に依存します。
従来の開発
従来の開発方法を使用した各 js ファイルのコードは次のとおりです:

コードをコピー コードは次のとおりです:

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

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

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


コードをコピー


コードは次のとおりです:

; /head>

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



プロジェクトが進行するにつれて、依存関係がどんどん増えていきます。また、ますます複雑になり、js コードや html のスクリプト リストの保守が困難になることがよくあります。

SeaJS モジュール開発

SeaJS を使用して同じ機能を実現する方法を見てみましょう。
最初は、index.html です:




コードをコピーします

コードは次のとおりです:
< ;title>TinyApp

<スクリプトソース=" ./sea.js"> });




HTML ページがすべての依存する js ファイルを導入する必要がありますが、sea.js を導入するだけで、sea.js はすべての依存関係を処理し、対応する js ファイルをロードします。読み込み戦略では、ページのレンダリング時にすべての js ファイルを一度にロードするか、ロードするかを選択できます。オンデマンド (使用時にのみ応答 js をロードします) ロード戦略の具体的な使用法については以下で説明します。
index.html は init モジュールをロードし、このモジュールの initPage メソッドを使用してページ データを初期化します。コードの詳細についてはここでは説明しません。
モジュール化後に JavaScript がどのように記述されるかを見てみましょう:




コードをコピーします

コードは次のとおりです:

// jquery.js

define(function(require, exports, module) = { //元の jquery.js コード... 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,エクスポート、モジュール) = {
エクスポート.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'];
}
});

概要この例は単純すぎるため、コードが複雑になっているようです。大規模なプロジェクトの場合、SeaJS コードの利点が明らかになります。ただし、ここから SeaJS のいくつかの機能を垣間見ることができます:
まず、HTML ページはスクリプト タグの長いリストを維持する必要がなくなり、sea.js を導入するだけで済みます。
2 番目に、js コードはモジュールで構成されており、各モジュールは require を通じて依存モジュールを導入しており、コードは明確です。
この例を通して、友人は SeaJS について直感的な印象を持つはずです。次の記事で SeaJS の使用法について詳しく説明します。