ホームページ  >  記事  >  ウェブフロントエンド  >  Require.jsの使い方まとめ

Require.jsの使い方まとめ

一个新手
一个新手オリジナル
2017-10-26 09:48:271734ブラウズ

1. require.js を使用する理由 2 番目に、js ファイル間に依存関係があるため、読み込み順序を厳密に保証する必要があります。依存関係が複雑になると、コードの記述とメンテナンスが困難になります。

Require.js は次の 2 つの問題を解決するものです:

Web ページの応答損失を回避するための js ファイルの非同期読み込みを実現します
  1. 間の管理モジュールの依存関係。それを作るコードの作成と保守が容易になります。
  2. 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 とも記述されます。


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

<script src="js/require.js" data-main="js/main"></script>    .js后缀可以省略

3. メインモジュールの書き方


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

 require([&#39;jquery&#39;], 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([&#39;math&#39;], function (math){
  alert(math.add(1,1));
});
このモジュールが他のモジュールにも依存している場合、define()関数の最初のパラメータはモジュールの依存関係を示す配列でなければなりません。

 define([&#39;myLib&#39;], function(myLib){
  function foo(){
    myLib.doSomething();
  }
  return {     //返回模块中的函数
    foo : foo
  };
});

     当require()函数加载上面这个模块的时候,就会先加载myLib.js文件。

六、加载非规范的模块(shim的使用方式)

 //  app.js
 function sayHello(name){
  alert(&#39;Hi &#39;+name);
}
 //  main.js
require.config({
  shim: {
    &#39;app&#39;: { //这个键名为要载入的目标文件的文件名,不能随便命名。
      exports: &#39;sayHello&#39; //exports的值为my.js提供的 对外接口的名称
    }
  }
});

require([&#39;app&#39;], function(sayHello) {
    alert(sayHello())  
})

      导出一个函数,意味着我们得到了一个javaScript类

      但是如果在my.js中写了很多function,整合成一个function有点麻烦,想直接导出?方法如下:

 // app.js
function sayHi(name){
    alert(&#39;Hi &#39;+name);
}
function sayHello(name){
    alert(&#39;Hiello  &#39;+name);
}
// main.js  
  require.config({
    shim: {
      app: {
        init: function() { //这里使用init将2个接口返回
          return {
            sayHi: sayHi,
            sayHello: sayHello
          }
        }
      }
    }
  });

  require([&#39;app&#39;], function(a) {
    a.sayHi(&#39;zhangsan&#39;);
    a.sayHello(&#39;lisi&#39;);
  });

     shim的有序导入

   require.config({  

    shim: {  
      &#39;jquery.ui.core&#39;: [&#39;jquery&#39;],  //表示在jquery导入之后导入
      &#39;jquery.ui.widget&#39;: [&#39;jquery&#39;],  
      &#39;jquery.ui.mouse&#39;: [&#39;jquery&#39;],  
      &#39;jquery.ui.slider&#39;:[&#39;jquery&#39;]
     },  
    paths : {    
       jquery : &#39;jquery-2.1.1/jquery&#39;,    
       domReady : &#39;require-2.1.11/domReady&#39;,    
       &#39;jquery.ui.core&#39; : &#39;jquery-ui-1.10.4/development-bundle/ui/jquery.ui.core&#39;,    
       &#39;jquery.ui.widget&#39; : &#39;jquery-ui-1.10.4/development-bundle/ui/jquery.ui.widget&#39;,    
       &#39;jquery.ui.mouse&#39; : &#39;jquery-ui-1.10.4/development-bundle/ui/jquery.ui.mouse&#39;,    
       &#39;jquery.ui.slider&#39; : &#39;jquery-ui-1.10.4/development-bundle/ui/jquery.ui.slider&#39; 
        }
  });    
 
  require([&#39;jquery&#39;, &#39;domReady&#39;,&#39;jquery.ui.core&#39;,&#39;jquery.ui.widget&#39;,&#39;jquery.ui.mouse&#39;,&#39;jquery.ui.slider&#39;],    function($) {            
      $("#slider" ).slider({              
       value:0,           
       min: 0,           
       max: 4,           
       step: 1,           
       slide: function( event, ui ) {}     
        });    
   }

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。