序文
SEAJSは、JavaScriptのモジュール開発およびロードメカニズムを実装できるCommonJS仕様に従うJavaScriptモジュールロードフレームワークです。 jQueryなどのJavaScriptフレームワークとは異なり、SEAJはカプセル化言語機能を拡張せず、モジュールによるモジュール化とロードのみを実装します。 SEAJSの主な目的は、JavaScript開発モジュラーとロードを簡単かつ喜んで、重いJavaScriptファイルとオブジェクト依存関係処理から無料のフロントエンドエンジニアにすることであり、コード自体のロジックに焦点を当てることができます。 Seajsは、jqueryのようなフレームワークと完全に統合できます。 SAIJを使用すると、JavaScriptコードの読みやすさと明確さを改善し、JavaScriptプログラミングで一般的な依存関係の混乱とコードエンタングルメントの問題を解決し、コードの書き込みとメンテナンスを促進します。
Seajsの著者は、TaobaoのフロントエンドエンジニアであるYu Boです。
Seajs自体は、開発のためのキス（シンプルで愚かな）の概念に従っているため、学習するプレッシャーはありません。 Seajsを学ぶ過程で、どこでもキスの原則の本質を感じることができます - 1つのことをして、1つのことをうまくやることができます。
この記事では、最初に例を使用して、SEAJを使用して従来のJavaScriptプログラミングとモジュラーJavaScriptプログラミングを直感的に比較し、SEAJの使用について詳しく説明し、最終的にSEAJに関連する情報を提供します。
従来のモードとSAIJSモジュール性
WebアプリケーションTinyAppを開発していると仮定し、TinyAppでjQueryフレームワークを使用することにしました。 TinyAppのホームページは、module2.jsとmodule3.js、およびModule3.jsに依存するmodule1.jsを使用します。
伝統的な開発
従来の開発方法を使用して、各JSファイルのコードは次のとおりです。
次のようにコードをコピーします：//module1.js
var module1 = {
実行：function（）{
return $ .merge（['module1']、$ .merge（module2.run（）、module3.run（）））;
}
}
//module2.js
var module2 = {
実行：function（）{
return ['module2'];
}
}
//module3.js
var module3 = {
実行：function（）{
return $ .merge（['module3']、module4.run（））;
}
}
//module4.js
var module4 = {
実行：function（）{
['module4']を返す;
}
}
この時点で、index.htmlはモジュール1.jsおよびそのすべての基礎となる依存関係を参照する必要があります（注文に注意してください）。
次のようにコードをコピーします：<！doctype html>
<html lang = "zh-cn">
<head>
<メタcharset = "utf-8">
<title> tinyApp </title>
<スクリプトsrc = "./ jquery-min.js"> </script>
<スクリプトsrc = "./ module4.js"> </script>
<スクリプトsrc = "./ module2.js"> </script>
<スクリプトsrc = "./ module3.js"> </script>
<スクリプトsrc = "./ module1.js"> </script>
</head>
<body>
<p> </p>
<スクリプト>
$（ '。コンテンツ'）。html（module1.run（））;
</script>
</body>
</html>
プロジェクトが進行するにつれて、JSファイルがますます増え、依存関係がますます複雑になり、HTMLのJSコードとスクリプトリストを維持するのが難しくなります。
SEAJSモジュラー開発
SEAJを使用して同じ機能を実装する方法を見てみましょう。
最初はindex.htmlです。
次のようにコードをコピーします：<！doctype html>
<html lang = "zh-cn">
<head>
<メタcharset = "utf-8">
<title> tinyApp </title>
</head>
<body>
<p> </p>
<スクリプトsrc = "./ sea.js"> </script>
<スクリプト>
seajs.use（ './ init'、function（init）{
init.initpage（）;
}）;
</script>
</body>
</html>
HTMLページは、すべての依存関係JSファイルを導入する必要があります。ページをレンダリングする場合も、必要に応じてJSがロードされます。
index.htmlこのモジュールのinitpageメソッドを使用して、ページの詳細を初期化します。
次のモジュラーJavaScriptの書き込みを見てみましょう。
次のようにコードをコピーします：//jquery.js
定義（function（require、exports、module）= {
//元のjquery.jsコード...
module.exports = $ .noconflict（true）;
}）;
//init.js
定義（function（require、exports、module）= {
var $ = require（ 'jquery'）;
var m1 = require（ 'module1'）;
exports.initpage = function（）{
$（ '。コンテンツ'）。html（m1.run（））;
}
}）;
//module1.js
定義（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
定義（function（require、exports、module）= {
exports.run = function（）{
return ['module2'];
}
}）;
//module3.js
定義（function（require、exports、module）= {
var $ = require（ 'jquery'）;
var m4 = require（ 'module4'）;
exports.run = function（）{
return $ .merge（['module3']、m4.run（））;
}
}）;
//module4.js
定義（function（require、exports、module）= {
exports.run = function（）{
['module4']を返す;
}
}）;
一見すると、この例が単純すぎると、SEAJSコードの利点が表示されるため、コードはより複雑に思われます。ただし、これからSEAJのいくつかの機能を見ることができます。
まず、HTMLページでは、スクリプトタグの長いリストを維持する必要はありません。sea.jsを紹介するだけです。
2つ目は、JSコードがモジュールとして編成されていることです。
この例を通じて、友人はSEAJの直感的な印象を持っているはずです。