ホームページ > 記事 > ウェブフロントエンド > RequireJS とその使用方法の簡単な紹介

RequireJS とその使用方法の簡単な紹介

高洛峰オリジナル: 2016-12-09 15:37:351098ブラウズ

RequireJS の概要

RequireJS は JavaScript モジュールローダーです。ブラウザで使用するのに最適です。 RequireJS を使用してモジュール式スクリプトを読み込むと、コードの読み込み速度と品質が向上します。

互換性

RequireJS とその使用方法の簡単な紹介

利点

Webページの応答損失を回避するためにjsファイルの非同期ロードを実現

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

すぐに始めましょう

ステップ1

はじめにrequire.js

require() は配列です。依存関係が 1 つしかない場合でも、配列を使用して定義する必要があります

2 番目のパラメーターは、モジュール間の依存関係を解決するために使用できるコールバック関数 (callback) です。

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="require.js"></script>
    <script type="text/javascript">
      require(["js/a"], function(){
        alert("load finished");
      });
    </script>
  </head>
  <body>
   body
  </body>
</html>

ステップ2

require.configを使用してモジュールの読み込み場所を設定します

固定の場所が比較的長い場合は、baseUrl: "js"を使用でき、jsを記述する必要はありませんpaths

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="require.js"></script>
    <script type="text/javascript">
      require.config({
        paths : {
          "jquery" : ["http://vs.thsi.cn/js/jquery-1.7.2.min", "js/jquery"],
          "a" : "js/a"       
        }
      });
 
      require(["jquery", "a"], function(){
        alert("load finished");
      });
    </script>
  </head>
  <body>
   body
  </body>
</html>

ステップ3

ステップ2で繰り返し登場するrequire.configの設定です。各ページに設定を追加するとダメになります。requirejsには「マスターデータ」という機能があります

作成します。 main .js ステップ 2 の require.config を main.js に入れます

<script data-main="js/main" src="js/require.js"></script>

ステップ 4

require を通じてロードされたモジュールは通常、AMD 仕様に準拠する必要があります。つまり、define を使用してモジュールを宣言しますが、場合によっては、非 AMD 標準 JS をロードする必要がある場合、この時点では別の関数を使用する必要があります: shim

require.config({
  shim: {
    "underscore" : {
      exports : "_";
    },
    "jquery.form" : ["jquery"]
  }
});
require(["jquery", "jquery.form"], function($){
  $(function(){
    $("#form").ajaxSubmit({...});
  })
});

声明：

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

前の記事：Javascriptで動的にクラスを追加する実装方法次の記事：Javascriptで動的にクラスを追加する実装方法

続きを見る

RequireJS とその使用方法の簡単な紹介

関連記事