ホームページ > 記事 > ウェブフロントエンド > JS を使用して一般的なモジュールを作成する方法を段階的に説明します (詳細なコードの説明)。
前回の記事「JavaScriptにおけるタイムスタンプの操作方法を簡単に分析してみた(コード付き)」では、jsにおけるタイムスタンプの操作方法について学びました。次の記事では、JS を使用して一般的なモジュールを作成する方法を説明します。一緒にその方法を見てみましょう。
モジュール性の問題は最初から存在しませんでした。WWW
が最初に登場したとき、html
、JavaScript
、CSS
(JS
と CSS
は後に Netscape でブラウザに導入されました) は非常に単純な存在であり、Modular を必要としません。
モジュール化の需要はスケールの産物です。Web ページ
が Web アプリケーション
に進化すると、ブラウザによって処理されるロジックはますます複雑になり、表示スタイルやアニメーションはますます増えており、エンジニアリングに対する要求はますます高くなっています。そこでモジュール化の必要性が生まれました。モジュール化の重要性:
コンポーネントの再利用により、開発コストと保守コストが削減されます
コンポーネントは個別に開発され、分業と協力が促進されます
モジュール性は標準に従っており、依存関係の自動管理、コードの最適化、展開を容易にします
JavaScript
は長い間、単純なスクリプトと考えられてきました。言語、実際、状況はずっと前に変わっています。 ECMA-262 (ES6)
文書の最新バージョンでは、JavaScript
が一般的なプログラミング言語であることが強調されています。スクリプト言語ではなく。 shell
などのスクリプト言語は、複雑な機能を実行するために使用されるのではなく、一部の自動制御を実行するためにのみ使用され、モジュール化は必要ありません。複雑なシステムを構築するために使用される汎用プログラミング言語 (Java
など) には、通常、モジュール実装があります。
ES6
より前、JS
言語はモジュール式ではありませんでした。JS
をブラウザ内で実行するだけでなく、コードも管理できるようにする方法より効果的に? 、
そこで CommonJS
が誕生しました。
require,exports,module
が
require
で導入されると、取得されるのはこのモジュールによって公開されるインターフェイス (
) Node.js
は、
内部サポートとは異なり、ブラウザ側で CommonJS
仕様: <pre class="brush:php;toolbar:false">var foo = require("foo");
var out = foo.sayName();
module.exports = out;</pre>
を使用します。 CommonJS
、モジュール化する方法は CMD
と AMD
の 2 つの方法があり、主な代表は seajs
と
、両方とも定義します。 グローバル関数定義はモジュールの作成に使用されます: <pre class="brush:php;toolbar:false">//CMD
define(function (require, exports, module) {
var foo = require("foo");
var out = foo.sayName();
module.exports = out;
});
//AMD
define(["foo"], function (foo) {
var out = foo.sayName();
return out;
});</pre>
CMD
が CommonJS
のスタイルを完全に保持していることがわかります。
そして、AMD
は、モジュール性を実現するために、依存関係の注入と関数の戻りのより簡潔な方法を使用します。
スタイルの違いは別として、この 2 つの最大の違いは依存モジュールをロードする方法です。CMD
は遅延ロードであり、依存関係は require
の場合にのみロードされます。
また、
はプリロードであり、モジュールを定義するときにすべての依存関係を事前にロードします。
seajs (CMD)
環境と requirejs (AMD)
環境の両方に導入できるようにモジュールを実装する必要があります。 Node.js
(CommonJS)
で使用でき、モジュール性のない環境で
タグを使用してグローバルにインポートすることもできます。
最初にモジュールを作成します<pre class="brush:php;toolbar:false">var factory = function () {
var moduleName = {};
return moduleName;
};</pre>
もちろん
出力は任意の値、オブジェクト、クラスなどにすることができます。最初に満足する
Node.js
または ES6
の場合、グローバル変数 module
と
を使用して、<pre class="brush:php;toolbar:false">var factory = function () {
var moduleName = {};
return moduleName;
};
if (typeof module !== "undefined" && typeof exports === "object") {
module.exports = factory;
}</pre>
が ## のどこにあるかを判断できます。 #CMD と
AMD では、ファクトリ関数を提供し、モジュールを定義するために
define を渡す必要があります。上記のグローバル変数がなく、# がある場合##define
グローバル変数。AMD
または CMD
だと思います。factory
を define
に直接渡すことができます。
var factory = function () { var moduleName = {}; return moduleName; }; if (typeof module !== "undefined" && typeof exports === "object") { module.exports = factory; } else if (typeof define === "function" && (define.cmd || define.amd)) { define(factory); }
注 : CMD は実際にはリターン モジュール インターフェイスもサポートしているため、両方を互換的に使用できます。
次に、script
タグのグローバル インポートも行う必要があります。モジュールを window
に配置して、モジュールを使用できるようにします。 Node Global オブジェクトはブラウザ内で内部的に使用でき、
Node Global オブジェクトは .js
var global = typeof window !== "undefined" ? window : global;
すぐに実行されるクロージャ関数を使用して、汚染を避けるためにすべてのコードを含めますグローバル空間と
global オブジェクトはクロージャ関数に渡され、最終的には次のようになります: (function (global) { var factory = function () { var moduleName = {}; return moduleName; }; if (typeof module !== "undefined" && typeof exports === "object") { module.exports = factory; } else if (typeof define === "function" && (define.cmd || define.amd)) { define(factory); } else { global.factory = factory; } })(typeof window !== "undefined" ? window : global);注: クロージャの前のセミコロンは穴を埋めるためのものです。前のモジュールの場合、セミコロンが多すぎても問題ありませんが、少ない場合はステートメントが変わる可能性があります。
#その後、喜んで
//Node.js var myModule = require('moduleName') //Seajs define(function(require,exports,module){ var myModule = require('moduleName') }) // Browser global <script src='moduleName.js'></script>
[終了]
JavaScript 上級チュートリアル #
以上がJS を使用して一般的なモジュールを作成する方法を段階的に説明します (詳細なコードの説明)。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。