ホームページ > 記事 > ウェブフロントエンド > Require.jsの使い方まとめ
1. require.js を使用する理由 2 番目に、js ファイル間に依存関係があるため、読み込み順序を厳密に保証する必要があります。依存関係が複雑になると、コードの記述とメンテナンスが困難になります。
Require.js は次の 2 つの問題を解決するものです:
Web ページの応答損失を回避するための js ファイルの非同期読み込みを実現します
間の管理モジュールの依存関係。それを作るコードの作成と保守が容易になります。
2. require.js の読み込み
最初のステップは、公式 Web サイトから最新バージョンをダウンロードし、ページに直接配置して読み込みます
<script src="js/require.js"></script>このファイルをロードすると、Web ページが応答しなくなった場合、ページの下部に配置してロードすることも、次のように記述することもできます
<script src="js/require.js" defer async="true" ></script>async 属性は、このファイルがWeb ページが応答しなくなることを避けるために、非同期でロードされます。 IE はこの属性をサポートしておらず、defer のみをサポートしているため、defer とも記述されます。
<script src="js/require.js" data-main="js/main"></script> .js后缀可以省略
3. メインモジュールの書き方
メインモジュールがjQueryに依存する場合は、次のように記述できます require(['jquery'], function ($){
alert($);
});
4. require.config( ) メソッド
require.config({ paths: { "jquery": "jquery.min", "underscore": "underscore.min", "backbone": "backbone.min" } });上記のコードは 3 つのモジュールのファイル名を与え、パスはデフォルトで main.js と同じディレクトリ (js サブディレクトリ) にあります。これらのモジュールが js/lib ディレクトリなどの他のディレクトリにある場合、モジュールを記述する方法は 2 つあります。
一つはパスを一つ一つ指定する方法
require.config({ paths: { "jquery": "lib/jquery.min", "underscore": "lib/underscore.min", "backbone": "lib/backbone.min" } });
もう一つはベースディレクトリ(baseUrl)を直接変更する方法です。
require.config({ baseUrl: "js/lib", paths: { "jquery": "jquery.min", "underscor: "underscore.min", "backbone": "backbone.min" } });
モジュールが別のホスト上にある場合は、
require.config({ paths: { "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min" } });
のように、その URL を直接指定することもできます。 5. AMD モジュールの書き方
モジュールrequire.js によって読み込まれます。AMD 仕様を採用しています。つまり、モジュールは AMD の規定に従って作成する必要があります。
具体的には、モジュールは特定のdefine()関数を使用して定義する必要があります。 モジュールが他のモジュールに依存しない場合は、define() 関数で直接定義できます。
// math.js define(function (){ var add = function (x,y){ return x+y; }; return { add: add }; });ロード方法は次のとおりです:
// main.js require(['math'], function (math){ alert(math.add(1,1)); });このモジュールが他のモジュールにも依存している場合、define()関数の最初のパラメータはモジュールの依存関係を示す配列でなければなりません。
define(['myLib'], function(myLib){ function foo(){ myLib.doSomething(); } return { //返回模块中的函数 foo : foo }; });
当require()函数加载上面这个模块的时候,就会先加载myLib.js文件。
六、加载非规范的模块(shim的使用方式)
// app.js function sayHello(name){ alert('Hi '+name); }
// main.js require.config({ shim: { 'app': { //这个键名为要载入的目标文件的文件名,不能随便命名。 exports: 'sayHello' //exports的值为my.js提供的 对外接口的名称 } } }); require(['app'], function(sayHello) { alert(sayHello()) })
导出一个函数,意味着我们得到了一个javaScript类
但是如果在my.js中写了很多function,整合成一个function有点麻烦,想直接导出?方法如下:
// app.js function sayHi(name){ alert('Hi '+name); } function sayHello(name){ alert('Hiello '+name); }
// 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'); });
shim的有序导入
require.config({ shim: { 'jquery.ui.core': ['jquery'], //表示在jquery导入之后导入 'jquery.ui.widget': ['jquery'], 'jquery.ui.mouse': ['jquery'], 'jquery.ui.slider':['jquery'] }, paths : { jquery : 'jquery-2.1.1/jquery', domReady : 'require-2.1.11/domReady', 'jquery.ui.core' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.core', 'jquery.ui.widget' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.widget', 'jquery.ui.mouse' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.mouse', 'jquery.ui.slider' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.slider' } }); require(['jquery', 'domReady','jquery.ui.core','jquery.ui.widget','jquery.ui.mouse','jquery.ui.slider'], function($) { $("#slider" ).slider({ value:0, min: 0, max: 4, step: 1, slide: function( event, ui ) {} }); }
以上がRequire.jsの使い方まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。