SEAJSは、Yuboが開発したモジュールロードフレームワークであり、CommonJS仕様に従って、JavaScriptモジュールおよびCSSモジュールスタイルを簡単かつ喜んでロードするために使用できます。 Seajsは非常に小さいです。これは、圧縮後のボリュームとGZIPがわずか4kで、インターフェイスとメソッドも非常に小さいためです。 SEAJには、モジュールの定義とモジュールの読み込みと依存関係の2つのコアがあります。 Seajsは非常に強力です。 SEAJは、JavaScriptモジュールおよびCSSモジュールスタイルをロードできます。 SEAJは、モジュールを使用するときに、依存する他のモジュールをスクリプト実行環境にロードすることを保証します。 Yu Boは、Seajsが問題の読み込みを心配することなく、コードを書くことの楽しみを楽しむことができると述べました。 JSおよびCSSの参照が非常に多いのですか？当社のWebサイトのホームページで39のCSSおよびJS参照を数えました。それが想像することができます：
1.メンテナンスを助長しない、フロントエンドとバックエンドは同じです
2。HTTP要求が多すぎます。もちろん、これはマージで解決できますが、バックエンドが直接マージされていない場合、人件費は非常に高くなります。バックエンドがマージして維持されたとしても、そのような長い文字列は間違いなくそれを見るでしょう。
SEAJを使用すると、これらの問題を非常にうまく解決できます。
モジュールの定義
モジュールの定義はより簡単です。たとえば、sayhelloモジュールを定義し、sayhello.jsドキュメントを作成します。
コードコピーは次のとおりです。
定義（関数（要求、エクスポート、モジュール）{
exports.sayhello = function（eleid、text）{
document.getElementById（eleid）.innerhtml = text;
};
}）;
まず、エクスポートパラメーターを見てみましょう。エクスポートパラメーターは、モジュールAPIを提供するために使用されます。つまり、このエクスポートの他のモジュールは、Sayhelloメソッドにアクセスできます。
モジュールの読み込みの使用
たとえば、私たちのページにはID「out」がある要素があり、「hello seajs！」を出力したいと思います。
次に、最初にsea.jsを紹介できます
次に、Sayhelloモジュールを使用します。
コードコピーは次のとおりです。
seajs.use（ "sayhello/sayhello"、function（Say）{
say.sayhello（ "out"、 "Hello Seajs！"）;
}）;
ここで使用は、モジュールを使用する方法です。
最初のパラメーターはモジュール表現です。これは、sea.jsに対する相対パスで表されます。 Sayshello.jsの後の「.js」接尾辞は省略できます。もちろん、このモジュールを識別する方法はたくさんあります。詳細については、公式説明を確認してください：http：//seajs.com/docs/zh-cn/module-identifier.html
最初のパラメーターはコールバック関数です。 say.sayhello（）は、sayhelloモジュールのexports.sayhelloメソッドを呼び出します。もちろん、このコールバック関数には発言パラメーターがあります。
モジュールの依存関係
モジュールが定義されているときに、モジュールの依存関係が実際に存在する必要があります。たとえば、上記のSayhelloモジュールを書き直します。要素の取得、設定スタイルなど、そのようなDOMモジュールなどのいくつかの方法など、次のようにDOM.JSを書き込むなど、一般的なDOMモジュールが既にあるとします
コードコピーは次のとおりです。
定義（関数（要求、エクスポート、モジュール）{
var dom = {
/**
*要素のID属性、パラメーターは文字列、または複数の文字列を介してDOMオブジェクトを取得します
* @id getbyid
* @method getByid
* @param {string} id id属性
* @return {htmlelement |オブジェクト} IDを使用したHTMLELEMENT、またはnullが見つからない場合はnull。
*/
getByid：function（）{
var els = [];
for（var i = 0; i <arguments.length; i ++）{
var el = arguments [i];
if（typeof el == "string"）{
el = document.getElementById（el）;
}
if（arguments.length == 1）{
Elを返します。
}
els.push（el）;
}
ELを返します。
}、
/**
*オブジェクトを取得し、オブジェクトまたは文字列を渡すことができます。文字列が渡された場合、オブジェクトはdocument.getElementById（）の形式で取得されます
* @id get
* @param {string} el html要素
* @return {object} htmLelementオブジェクト。
*/
get：function（el）{
if（el＆amp; amp;＆amp; amp;（el.tagname || el.item））{
Elを返します。
}
this.getbyid（el）;
}
};
domを返す;
}）;
その後、Sayhelloモジュールはこのように書くことができます。元のデモページに影響を与えないために、新しいSayhelloaモジュールを設定しました。このようなsayhelloa.jsを書くことができます：
コードコピーは次のとおりです。
定義（関数（要求、エクスポート、モジュール）{
var dom = require（ "dom/dom"）;
require（ "sayhelloa/sayhello.css"）;
exports.sayhello = function（eleid、text）{
dom.get（eleid）.innerhtml = text;
};
}）;
要件関数は、モジュールの依存関係を確立するために使用されます。たとえば、DOMモジュールのGETメソッドが使用されるため、上記のSayhelloaモジュールはDOMモジュールに依存します。
var dom = require（ "dom/dom"）ここでは、この文は適用されたDOMモジュールをDOMに割り当てることに注意してください。 require（ "sayhelloa/sayhello.css"）は、sayhello.css CSSモジュールまたはファイルを直接適用します。これは、ページ上のCSSファイルを参照します。
私は最近、Seajsに問題を抱えています。私がそれでトラブルを起こすほど、私はそれが好きです。 Yu Boに感謝します！ Seajsに感謝します！もちろん、このような簡単な例でこれを行う必要はないと思うかもしれません。実際、JSファイルが少ない小規模プロジェクトがモジュールの利点について気持ちがいいが、JSファイルまたは中程度のプロジェクトの数にはより多くのモジュール式利点が反映されている場合。