JavaScript のモジュール性_JavaScript スキルを理解する-jsチュートリアル-php.cn

JavaScript のモジュール性_JavaScript スキルを理解する

WBOY

リリース： 2016-05-16 15:07:40

オリジナル

1135 人が閲覧しました

モジュール化は、プログラミングの一般的なベストプラクティスです。プログラムのモジュール化により、他人のコードを利用したり、使いたい機能に使いたいモジュールを読み込むことが容易になり、コードの利用効率が向上し、開発速度が向上します。

モジュールは構成要素のようなもので、さまざまな機能やスタイルを備えたプログラムを構築できます。積み木にはどのような特徴があるのでしょうか？小さくてシンプル。同様に、プログラム内のモジュールもこれを実行し、作成した関数が一度に 1 つのジョブのみを完了するようにする必要があります。これにより、他の開発者は各ステップを理解するためにすべてのコードを参照する必要がなく、コードを簡単にデバッグおよび変更できます。コードのブロックはどのような機能を実行しますか?このように小さくてシンプルであることによってのみ、普遍的な機能を実現できます。

1.JavaScriptのモジュール化方法
1. 関数のカプセル化
JavaScript のスコープは関数に基づいているため、関数をモジュールとして使用できます。

function fn1(){
  //code
}

function fn2(){
  //code
}

ログイン後にコピー

欠点: グローバル変数を「汚染する」ため、変数名が他のモジュールと競合しないという保証はありません

2. オブジェクト

var myModule1 = {
  fn1: function(){
    //code
  },
  fn2: function(){
    //code
  }
}

ログイン後にコピー

欠点: すべてのモジュールメンバーが公開され、内部状態が外部によって上書きされる可能性があります

即時自己実行機能 - 推奨

var myModule = (function(){
  function fn1(){
    //code
  },
  function fn2(){
    //code
  },
  return {
    fn1: fn1,
    fn2: fn2
  };
})();

ログイン後にコピー

2. 小さくてシンプル
小さくて単純なことについて、例を見てみましょう。たとえば、新しいリンクを作成し、タイプ「mailto」ハイパーリンクのクラスを追加する関数を作成したいと思います。これを行うことができます:

function addLink(text, url, parentElement) {
  var newLink = document.createElement('a');//创建a标签
  newLink.setAttribute('href', url);//为a标签设置href属性
  newLink.appendChild(document.createTextNode(text));//为a标签添加文本
  if(url.indexOf("mailto:")==-1){
    newLink.className = 'mail';
  }
  parentElement.appendChild(newLink);//将a标签添加到页面
}

ログイン後にコピー

このように書くと機能するかもしれませんが、他の機能を追加することができない場合があるため、この機能は適用されません。したがって、機能が特殊化されるほど、それをさまざまな状況に適用することが難しくなります。
ここでの関数の記述方法はモジュール性の要件を満たしていません。つまり、1 つの関数は 1 つのことしか実行しません。関数を調整しましょう:

function createLink(text,url) {
  var newLink = document.createElement('a');
  newLink.setAttribute('href', url);
  newLink.appendChild(document.createTextNode(text));
  return newLink;
}

ログイン後にコピー

ここでの createLink 関数は、ページに追加する a タグを作成して返す (小さくてシンプル) という 1 つのことだけを行うので、ハイパーリンクを作成する必要があるときはいつでもそのような関数を呼び出すことができます。

3. CommonJS
結局のところ、ブラウザ環境では、モジュールの不足は大きな問題ではありません。Web プログラムの複雑さは制限されていますが、サーバー側では、オペレーティングシステムや他のアプリケーションと対話するためのモジュールが必要です。そうしないとプログラミングができなくなります。全然可能です。 JavaScript は長年にわたり Web 上で開発されてきましたが、最初に普及したモジュラー仕様はサーバーサイド JavaScript アプリケーションによってもたらされ、CommonJS 仕様は NodeJS に引き継がれ、JavaScript モジュラープログラミングが正式に登場しました。
node.jsのモジュール体系はCommonJS仕様に従って実装されています。 CommonJS には、モジュールをロードするためのグローバルメソッド require() があります。
ロードモジュール:

var math = require('math');
呼び出し元モジュール:

math.add(2,3)
CommonJS 仕様には大きな制限があるため、ブラウザ環境には適用できません。上記の例では、math.js がロードされた後に math.add(2, 3) の 2 行目を実行する必要があります。モジュールはすべてサーバー側に配置されるため、待ち時間はネットワークの速度によって異なります。

CommonJS 仕様はサーバー側に適用されます。サーバー側では、すべてのモジュールがローカルハードディスクに保存され、同期してロードできるためです。待機時間はハードディスクの読み取り時間です

。

4. モジュールはどのように定義してロードする必要がありますか?
AMD
非同期モジュール定義非同期モジュール定義、主な代表: require.js
目的:
(1) Web ページが応答しなくなることを避けるために、js ファイルの非同期読み込みを実装します。 (2) モジュール間の依存関係を管理して、コードの作成とメンテナンスを容易にします。

1. モジュールを定義します

define(["./cart", "./inventory"], function(cart, inventory) {
  //通过[]引入依赖
  return {
    color: "blue",
    size: "large",
    addToCart: function() {
      inventory.decrement(this);
      cart.add(this);
    }
  }
}
);

ログイン後にコピー

2. モジュールをロードします

require( ["some/module", "my/module", "a.js", "b.js"],
function(someModule,  myModule) {
  //This function will be called when all the dependencies
  //listed above are loaded. Note that this function could
  //be called before the page is loaded.
  //This callback is optional.
}
 );

ログイン後にコピー

CMD
共通モジュール定義共通モジュール定義、CMD仕様は国内で開発されています。主な代表者: sea.js

1. モジュールを定義します

define(function(require, exports, module) {
 // 通过 require 引入依赖
 var $ = require('jquery');
 var Spinning = require('./spinning');
 // 通过 exports 对外提供接口
 exports.doSomething = ...
 // 或者通过 module.exports 提供整个接口
 module.exports = ...
});

ログイン後にコピー

2. モジュールをロードします

seajs.use("../static/hello/src/main")
違い:

依存モジュールの場合、AMD が先行して実行され、CMD が遅延して実行されます。ただし、RequireJS 2.0からは実行を遅延させることもできるように変更されました(記述方法によって処理方法が異なります)。 CMD では、できるだけ怠惰にすることをお勧めします。

CMD は近くの依存関係を促進しますが、AMD は前面の依存関係を促進します。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。