Require.jsの利用方法の共有

小云云
リリース: 2018-01-02 16:07:00
オリジナル
1547 人が閲覧しました

この記事では主にRequire.jsの使い方(まとめ)をベースにした記事をお届けします。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

1. require.js を使用する理由

まず第一に、ページが複数の js ファイルを読み込むと、ブラウザは Web ページのレンダリングを停止します。は js ファイル間の依存関係であるため、読み込み順序を厳密に保証する必要があります。依存関係が複雑になると、コードの記述とメンテナンスが困難になります。

require.js は次の 2 つの問題を解決します:

1. Web ページの応答が失われるのを避けるために、js ファイルの非同期読み込みを実装します。
2. コードの作成とメンテナンスを容易にするために、モジュール間の依存関係を管理します。

2. require.js をロードする

最初のステップは、公式 Web サイトから最新バージョンをダウンロードして、ロードするページに直接配置することです

<script src="js/require.js"></script>
ログイン後にコピー

このファイルをロードすると、Web ページが応答を失う可能性があります。 Web ページが応答しなくなるのを避けるために、このファイルを非同期でロードする必要があることを示すために、このように

<script src="js/require.js" defer async="true" ></script>
ログイン後にコピー

async 属性を記述することもできます。 IE はこの属性をサポートしておらず、defer のみをサポートしているため、defer とも記述されます。

require.js をロードした後、次のステップは独自のコードをロードすることです。これはメインモジュールと呼ばれます。ファイルが main.js と呼ばれる場合は、次のように記述できます。 3. メインモジュールの書き方

メインモジュールがjQueryに依存する場合は、次のように記述できます

<script src="js/require.js" data-main="js/main"></script>  .js后缀可以省略
ログイン後にコピー

4. require.config()メソッド

require(['jquery'], function ($){ 
   alert($); 
});
ログイン後にコピー

上記のコードは、3つのモジュールのファイル名を与えます。パスのデフォルトは、main.js と同じディレクトリ (js サブディレクトリ) です。これらのモジュールが js/lib ディレクトリなどの他のディレクトリにある場合、モジュールを記述する方法は 2 つあります。

• 1つはパスを一つずつ指定する方法

require.config({ 
  paths: { 
    "jquery": "jquery.min", 
    "underscore": "underscore.min", 
    "backbone": "backbone.min"
  } 
});
ログイン後にコピー

• もう1つはベースディレクトリ(baseUrl)を直接変更する方法です。

require.config({ 
  paths: { 
    "jquery": "lib/jquery.min", 
    "underscore": "lib/underscore.min", 
    "backbone": "lib/backbone.min"
  } 
});
ログイン後にコピー

• モジュールが別のホスト上にある場合は、

require.config({ 
  baseUrl: "js/lib", 
  paths: { 
    "jquery": "jquery.min", 
    "underscor: "underscore.min", 
    "backbone": "backbone.min" 
  } 
});
ログイン後にコピー

のように URL を直接指定することもできます。 5. AMD モジュールの書き方

require.js require.js でロードされるモジュールは AMD 仕様を採用しています。つまり、モジュールは AMD の規定に従って作成する必要があります。

具体的には、モジュールは特定のdefine()関数を使用して定義する必要があります。モジュールが他のモジュールに依存していない場合は、define() 関数で直接定義できます。

require.config({ 
  paths: { 
    "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
  } 
});
ログイン後にコピー

ロード方法は次のとおりです:
// math.js 
define(function (){ 
  var add = function (x,y){ 
    return x+y; 
  }; 
  return { 
    add: add 
  }; 
});
ログイン後にコピー

このモジュールが他のモジュールにも依存している場合、define() 関数の最初のパラメータはモジュールの依存関係を示す配列でなければなりません。

 // main.js 
require(['math'], function (math){ 
  alert(math.add(1,1)); 
});
ログイン後にコピー

require() 関数が上記のモジュールをロードすると、myLib.js ファイルが最初にロードされます。

6. 非標準モジュールの読み込み(shimの使い方)

define(['myLib'], function(myLib){ 
  function foo(){ 
    myLib.doSomething(); 
  } 
  return {  //返回模块中的函数 
    foo : foo 
  }; 
});
ログイン後にコピー
// app.js 
 function sayHello(name){ 
  alert('Hi '+name); 
}
ログイン後にコピー

関数をエクスポートするということはJavaScriptクラスを取得することになります

しかし、my.jsに関数をたくさん書くと統合するのが少し面倒です1 つの関数にまとめて直接エクスポートしたいですか?方法は次のとおりです:

// main.js 
require.config({ 
  shim: { 
    'app': { //这个键名为要载入的目标文件的文件名,不能随便命名。 
      exports: 'sayHello' //exports的值为my.js提供的 对外接口的名称 
    } 
  } 
}); 
 
require(['app'], function(sayHello) { 
 alert(sayHello()) 
})
ログイン後にコピー
// app.js 
function sayHi(name){ 
 alert('Hi '+name); 
} 
function sayHello(name){ 
 alert('Hiello '+name); 
}
ログイン後にコピー

shim

// main.js 
  require.config({ 
    shim: { 
      app: { 
        init: function() { //这里使用init将2个接口返回 
          return { 
            sayHi: sayHi, 
            sayHello: sayHello 
          } 
        } 
      } 
    } 
  }); 
 
  require(['app'], function(a) { 
    a.sayHi('zhangsan'); 
    a.sayHello('lisi'); 
  });
ログイン後にコピー

の秩序あるインポート: 関連推奨事項:


JavaScriptでの高度なモジュラーrequire.jsの具体的な使用方法の共有例

高度なモジュラーrequireの具体的な使用法。 JavaScriptでjsを使う方法を詳しく解説

Require.jsの使い方まとめ

以上がRequire.jsの利用方法の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート