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 が誕生しました。

CommonJS

この仕様では 3 つのグローバル変数が定義されています。

• require，exports，module

  require
は、 module

• exports
外部公開モジュールのインターフェイスは任意のタイプにできます

• module
はモジュールそのものです オブジェクト

が require で導入されると、取得されるのはこのモジュールによって公開されるインターフェイス (

exports

) Node.js は、

Node.js

内部サポートとは異なり、ブラウザ側で CommonJS 仕様: <pre class='brush:php;toolbar:false;'>var foo = require(&quot;foo&quot;); var out = foo.sayName(); module.exports = out;</pre> を使用します。 CommonJS、モジュール化する方法は CMD と AMD の 2 つの方法があり、主な代表は seajs と

requirejs

、両方とも定義します。 グローバル関数定義はモジュールの作成に使用されます: <pre class='brush:php;toolbar:false;'>//CMD define(function (require, exports, module) { var foo = require(&quot;foo&quot;); var out = foo.sayName(); module.exports = out; }); //AMD define([&quot;foo&quot;], function (foo) { var out = foo.sayName(); return out; });</pre> CMD が CommonJS のスタイルを完全に保持していることがわかります。 そして、AMD は、モジュール性を実現するために、依存関係の注入と関数の戻りのより簡潔な方法を使用します。 スタイルの違いは別として、この 2 つの最大の違いは依存モジュールをロードする方法です。CMD は遅延ロードであり、依存関係は require の場合にのみロードされます。 また、

AMD

はプリロードであり、モジュールを定義するときにすべての依存関係を事前にロードします。 seajs (CMD) 環境と requirejs (AMD) 環境の両方に導入できるようにモジュールを実装する必要があります。 Node.js(CommonJS) で使用でき、モジュール性のない環境で

script

タグを使用してグローバルにインポートすることもできます。

最初にモジュールを作成します<pre class='brush:php;toolbar:false;'>var factory = function () { var moduleName = {}; return moduleName; };</pre>もちろん

return

出力は任意の値、オブジェクト、クラスなどにすることができます。最初に満足する Node.js または ES6 の場合、グローバル変数 module と

exports

を使用して、<pre class='brush:php;toolbar:false;'>var factory = function () { var moduleName = {}; return moduleName; }; if (typeof module !== &quot;undefined&quot; &amp;&amp; typeof exports === &quot;object&quot;) { 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=&#39;moduleName.js&#39;></script>

[終了]

#推奨学習:

JavaScript 上級チュートリアル #

以上がJS を使用して一般的なモジュールを作成する方法を段階的に説明します (詳細なコードの説明)。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。