JavaScriptモジュラープログラミングの詳細な説明-jsチュートリアル-php.cn

この記事ではJavaScriptのモジュラープログラミングについて詳しく解説しています

第1章 JavaScriptのモジュラープログラミング

(1): モジュールの書き方

独自の書き方
// モジュールとは、特定の機能を実現するためのメソッドの集合です。関数 (およびステータスを記録する変数 ) は単純にまとめられてモジュールになります
function m1(){
// ...
}
function m2() {

// 上記関数 m1() と m2() はモジュールを形成します; 使用するときに直接呼び出すだけです
// 欠点: 変数名が他のモジュールと競合しないという保証はありません。メンバー間には直接の関係はありません

2つ

オブジェクト記述メソッド

// 把模块写成一个对象,所有的模块成员都放到这个对象里面;
  var module = new Object({
    _count:0,
    m1:function(){
      // ...
    },
    m2:function(){
      // ...
    }
  });
// 上面的函数m1()和m2(),都封装在module对象里;使用时直接调用这个对象的属性;
  module.m1();
// 但是,这样的写法会暴露所有模块成员,内部状态可以被外部改写;
  module._count = 4;

ログイン後にコピー

3つの即時実行関数記述メソッド

  var module = (function(){
    var _count = 0;
    var m1 = function(){
      // ...
    };
    var m2 = function(){

    };
    return {
      m1:m1,
      m2:m2
    };
  })();
// 使用上面的写法,外部代码无法读取内部的_count变量;
  console.info(module._count); // undefined;
// 上面的写法就是JavaScript模块的基本写法;

ログイン後にコピー

4つのズームモード

りー

5 つの幅広い増幅モード

// 如果模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用"放大模式";
  var module = (function(mod){
    mod.m3 = function(){
      // ...
    };
    return mod;
  })(module);
// 上面的代码为module模块添加了一个新方法m3(),然后返回新的module模块;

ログイン後にコピー

6 つの入力グローバル変数

// 在浏览器环境中,模块的各个部分通常都是从网上获取的,有时无法知道哪个部分会先加载;
// 如果采用上一节的写法,第一个执行的部分有可能加载一个不存在的空对象,这时就要采用"宽放大模式";
  var module = (function(mod){
    // ...
    return mod;
  })(window.module || {});
// 与"放大模式"相比,"宽放大模式"就是"立即执行函数"的参数可以是空对象;

ログイン後にコピー

第 2 章 JavaScript モジュラープログラミング (2): AMD 仕様

1 つのモジュール仕様

// 現在、一般的な JavaScript モジュール仕様には、CommonJS と AMD の 2 つがあります。

2 つの CommonJS

//
node.js は、「JavaScript モジュラープログラミング」の正式な誕生を示します // ノード。 js のモジュールシステムは CommonJS 仕様を参照して実装されています。CommonJS には、モジュールをロードするために使用されるグローバルメソッド
require
() があります。 (2,3); // モジュールメソッドの呼び出し =>5;3 つのブラウザ環境
// 前のセクションのコードはブラウザで実行すると大きな問題が発生します;
var math = require ('math') ;

math.add(2,3);

// 問題: Math.add(2,3);
/ math.js が require('math') にロードされるまで待つ必要があります / したがって、ブラウザモジュールは "同期ロード」であり、「非同期ロード」のみを使用できます;==>AMD;

四AMD
AMD (Asyn
chr

onous Module Definition) 非同期モジュール定義;

// モジュールの非同期ロードを使用すると、モジュールは、その背後にあるステートメントの実行には影響しません。このモジュールに依存するすべてのステートメントは、
コールバック関数で定義されています。// このコールバック関数は、読み込みが完了するまで実行されません
/ / AMD も使用します。 require() ステートメントを使用してモジュールをロードしますが、次の 2 つのパラメータが必要です: require([module], callback); // module: は
配列
で、内部のメンバーはロードされるモジュールです
/ / callback; : はロード成功後のコールバック関数です;
require(['math'],function(math){ math.add(2,3); });
// math.add() と math モジュールは同期ではないため、ブラウザーはフリーズしません。したがって、AMD はブラウザー環境に適しています。複数の js ファイルを連続して使用します。
// 欠点:
// 1. ロードするファイルが増えると、Web ページの応答が遅くなります。
// 2.ファイル間に依存関係があるため、読み込み順序を厳密に保証する必要があります。依存関係が複雑な場合、コードの作成とメンテナンスが困難になります。
// そこで、require.js は次の 2 つの問題を解決します。

// 1 . Web ページでの応答の損失を避けるための js ファイル。

// 2. コードの作成とメンテナンスを容易にするためにモジュール間の依存関係を管理します。

require.js の 2 番目の読み込み
< ;script scr="js /require.js" defer async="true">
// async 属性は、Web ページが応答しなくなることを避けるために、このファイルを非同期で読み込む必要があることを示します。IE はこの属性をサポートしておらず、サポートしているのはdefer なので、 defer も書きます 2.
main
.js

// data; -main 属性の機能は、Web プログラムのメインモジュール => main.js を指定することです。このファイルは、require.js によって最初にロードされます

// require.js のデフォルトのファイルサフィックスは js であるため、 main.js は main と略されます;

を置くことができます

3 つの主要モジュール main.js の書き方
1. main.js が他のモジュールに依存していない場合は、JavaScript コードを直接記述できます;
// main.js
alert('Loading success!');
2. main .js がモジュールに依存している場合、AMD 仕様で定義されている require() 関数を使用する必要があります
// main.js
require(['moduleA','moduleB','moduleC'],function( moduleA,moduleB,moduleC ){
// ...
})
// require() 関数は 2 つのパラメータを受け取ります:
// パラメータ 1: 依存するモジュール、つまり、依存する 3 つのモジュールを示す配列メインモジュールは次のものに依存します。
// パラメータ 2: コールバック関数。以前に指定したすべてのモジュールが正常にロードされた後に呼び出され、ロードされたモジュールがパラメータとして関数に渡されます。 callback function;
// require() モジュールを非同期的にロードすると、ブラウザーは応答を失いません。指定されたコールバック関数は、前のモジュールが正常にロードされた後にのみ実行され、依存関係の問題が解決されます。 jquery','アンダースコア ','バックボーン'],function($,_,バックボーン){
カスタマイズ;
// require.config() はメインモジュール (main.js) の先頭に記述されます。 / パラメータはオブジェクトであり、このオブジェクトの paths 属性は各モジュールの読み込みパスを指定します。
// 設定以下の 3 つのモジュールのファイルはデフォルトで main.js と同じディレクトリにあります。
require.config( {

" パス:{

" backbone":"backbone.min"
backbone :"lib/jquery.min",
"underscore":"lib/underscore.min",
"backbone":"lib/backbone. min"
}
});
// またはベースディレクトリ (baseUrl ) を直接変更します
require.config({
BaseUrl:"js/lib",
paths:{
"jquery":"jquery.min",
"underscore":"underscore.min",

" backbone":"backbone. min"

" }
});

// モジュールが別のホスト上にある場合は、その URL を直接指定することもできます
が必要です。 config({
" paths:{
" jquery": "https://ajax.Googleapis.com/ajax/libs/jquery/1.7.2/jqury.min"
});
// Require.js 要件,各モジュールは個別の JS ファイルです。複数のモジュールが読み込まれると、複数の HTTP リクエストが発行され、Web ページの読み込み速度に影響します
// したがって、require.js は最適化を提供します。モジュールをデプロイした後、このツールを使用して複数のモジュールを 1 つのファイルにマージできます。

5 つの AMD モジュールを作成する方法

// require.js によってロードされるモジュールは AMD 仕様を採用します。つまり、モジュールは AMD の規制に従って作成する必要があります。
// 具体的には、モジュールの場合は、特定の define() 関数を使用して定義する必要があります。他のモジュールに依存せず、define () 関数で直接定義できます
// math.js で数学モジュールを定義します
/ math.js
define (function () {
var add = function (y) {
function(math){
alert(math.add(1,1));
});
// このモジュールが他のモジュールにも依存している場合、define() 関数の最初のパラメータは配列である必要があります。モジュールの依存関係;
// math.js
define(['myLib'],function(myLib){
function foo(){
myLib.doSomething();
foo:foo }
foo:foo
} ;
});
// require() 関数が上記のモジュールをロードするとき、myLib.js ファイルが最初にロードされます

6 つの非標準モジュールのロード

// ロードする前に非標準モジュールをロードします。 require() を使用する場合は、まず require.config() メソッドを使用してその特性の一部を定義する必要があります。 'backbone':{
deps:[ 'underscore','jquery'],
「Backbone」 shim属性あり互換性のないモジュールを構成するために特に使用されます。
// (1) モジュールの依存関係を示すために deps 配列を定義します。 (2) このモジュールの名前を示すためにエクスポート値 (出力変数名) を定義します。外部から呼び出されます。
例: jQuery プラグイン

shim:{

'jquery.scroll': {

deps: ['jquery'],

out out out off out の shim の shim out から shim- のときに使用します。外部から呼び出されます。

7 つの require.js プラグイン

1.domready: ページ DOM 構造のロード後にコールバック関数を実行できるようにします;
require(['domready!'],function(doc){
// DOM の準備ができたら呼び出されます ;
})
2.text と image: require.js がテキストファイルと画像ファイルをロードできるようにします;
define(['text!review.txt','image!cat.jpg' ],function(review,cat){
console.log(review);

document
.body.appendChild(cat);
});

以上がJavaScriptモジュラープログラミングの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。