Require.jsの利用方法の共有

この記事では主に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 サイトの他の関連記事を参照してください。