Require.js は js モジュラー管理チュートリアルを実装します-jsチュートリアル-php.cn

Require.js は js モジュラー管理チュートリアルを実装します

高洛峰

リリース： 2017-03-30 16:42:45

オリジナル

1178 人が閲覧しました

Require.jsとは

Require.jsはAMD標準の軽量jsモジュール化管理フレームワークです。require.js 2.1.11の最新バージョンは、圧縮後わずか14.88Kです。 1 つのモジュールは非同期または動的にロードでき、モジュール間の依存関係が明確に確認できるため、コードの品質、パフォーマンス、保守性が向上します。 Require.js の作成者は、AMD 仕様の創設者である James Burke です。

Require.js はどのようなメリットをもたらしますか?

以下に簡単な例を示します:

通常、ページの構造は次のとおりです

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>require</title>
   <script src="js/a.js"></script>
   <script src="js/b.js"></script>
   <script src="js/c.js"></script>
   <script src="js/d.js"></script>
   <script src="js/e.js"></script>
   <script src="js/f.js"></script>
   <script src="js/g.js"></script>
</head>
<body>
<p>require</p>
</body>
</html>

ログイン後にコピー

a.js のコード

alert("require");

ログイン後にコピー

ページを実行するときに、次のことができます。 find アラートがポップアップ表示されたら、「OK」をクリックして p のコンテンツを表示する必要があります。ページの js は同期的にレンダリングされるため、js のレンダリングは必然的に後続の html レンダリングをブロックします。さらに、大量の js ファイルを導入するのは美しくありませんが、require.js を使用すると、モジュール化された js の非同期読み込みを実現できます。

Require.jsの使い方

まず、require.jsの公式Webサイトにアクセスして最新バージョンをダウンロードし、次のようにページに導入します:

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

ログイン後にコピー

data-mainAttributeは無視できません。 data-main が指すファイルはメインコードが配置されているファイルであり、main.js で構成されたスクリプトは非同期でロードされ、main.js が配置されているディレクトリはデフォルトのルートパスになります。

require.js config

config メソッドは、実行パラメータを設定するために使用されます。まずパラメータを設定します。以下の例を参照してください。
私のプロジェクトファイルの構造は次のとおりです

Require.js は js モジュラー管理チュートリアルを実装します

メインファイル main.js

require.config({
    baseUrl: "js",
    paths: {
        "jquery": ["lib/jquery-1.8.3.min"],
        "popup": ["lib/popup"],
        "moduleA": ["app/moduleA"],
        "moduleB": ["appmoduleB"]
    },
    shim: {
        &#39;popup&#39;: {
            deps: [&#39;jquery&#39;]
        }
    }
});

ログイン後にコピー

config メソッドは object パラメータを受け取ります。以下では、各属性の役割について説明します。。
baseUrl: ルートパスを設定します。この属性が設定されていない場合、デフォルトでメインファイルが配置されているディレクトリになります。ここでは、JS ディレクトリをルートパスとして設定します。
paths: 各モジュールのエイリアスとパスを設定します。モジュールを呼び出す際にはエイリアスを使用する必要があります。リソースファイルのパスは、ローカルパス、外部リンク、または複数のパスを設定できます。パスは stringpath または array にすることができます。パスが 2 つ以上ある場合は、配列にする必要があります。。
JQ パスを例に挙げます。単一パス "jquery": ["lib/jquery-1.8.3.min"]
複数パス "jquery": ["http://apps.bdimg.com/libs/ jquery/ 1.8.3/jquery.min.js","lib/jquery-1.8.3.min"]、パスが複数ある場合は、最初のパスのリソースファイルが最初に取得されます。最初のパスの取得に失敗した場合は、 path (注: 私の実践では、最初のパスが CDN を使用すると、IE11 より下の IE ブラウザはロードに失敗し、ローカルリソースは呼び出されません。理由は不明です)
shim : 非 AMD 標準モジュールを直接呼び出すことはできません。この属性は、非 AMD 標準モジュールを設定するために使用されます。私が作成したポップアッププラグインは、AMD 標準ではないため、設定する必要があります。設定されたモジュール名とそれが依存するモジュール名は、パス内のモジュールによって定義されたエイリアスである必要があります。 deps は、このモジュールの依存関係を設定するために使用されます。ポップアッププラグインは JQ

に依存します。

define(name,deps,callback)函数

单从语义就应该猜到这个函数用来定于模块，下面解释define函数，若看不懂别着急，后面会举例。
在require.js源码中可以看到有这么一行代码define = function (name, deps, callback) {} ，可知define接收三个参数
name:为可选参数，该模块的标识，字符串类型，通俗来讲就是给该模块取的名称，可自定义，但不能与其他模块名称相同，如果该参数未选，那么该模块的名称为该文件在paths中定义的别名
deps:当前模块的依赖，数组类型，为已定义的模块名称，若不存在依赖该参数可不填
callback：是一个函数或者对象,为函数时，当依赖的模块加载完成后该回调函数将被调用，依赖关系会以参数的形式注入到该函数上，参数与依赖的模块一一对应，（注：如果定义的模块想被其他模块引用需返回一个对象）。

通过define定义模块的方式可分为以下两类。

1. 无依赖模块
也就是说该模块无需依赖其他模块，可以直接定义，如下：

define({
    fnMethod: function() {
        return ("这是一个无依赖模块")
    }
});

ログイン後にコピー

该模块只传了一个对象类型的callback，也等价于

define(function() {
    return {
        fnMethod: function () {
            return ("这是一个无依赖模块")
        }
    }
});

ログイン後にコピー

该模块则传了一个函数类型的callback，模块定义了一个函数fnMethod,返回一个字符串值，实际上返回值也可以是其他类型，第二种方法只是将函数做为对象返回，建议采用第二种方法来定义无依赖模块。

2. 有依赖模块
定义有依赖模块格式需要稍作改变，格式如下：

 //假如moduleA模块返回了一个属性name,值为“老宋”,<p class="text">老马</p>

 define(["jquery","moduleA"],function($, mA) {    //参数和依赖的模块需一一对应
        return {
            fnMethod: function () {    
                return ($.text(".text") + mA.name);
            }
        }
    });

ログイン後にコピー

该例子表明当前模块依赖于jquery和moduleA,返回一个结果“老马老宋”。沿用上面的例子再举一个完整的例子：

 define("module",["jquery","moduleA"],function($, mA) {    //参数和依赖的模块需一一对应
        return {
            fnMethod: function () {    //fnMethod即提供给外部调用的接口
                return ($(".text").text() + mA.name);
            }
        }
 });

ログイン後にコピー

这里定义了一个名为module的模块，并且它依赖于jquery和moduleA模块。

当依赖的模块很多的时候再像下面这样写感觉是不是很挫？

define("module", ["jquery", "moduleA", "moduleB", "moduleC", "moduleD", "moduleE", "moduleF"], function ($, mA, mB, mC, mD, mE, mF) {
    return {
        fnMethod: function () {
            return ($(".text").text() + mA.name);
        }
    }
});

ログイン後にコピー

require.js2.0版本之后提供了一种更好的写法。

   define("module", function (require) {    //将“require”本身做为一个依赖注入到模块
    var $ = require("jquery"),
        mA = require("moduleA"),
        mB = require("moduleB"),
        mC = require("moduleC"),
        mD = require("moduleD"),
        mE = require("moduleE"),
        mF = require("moduleF");
    
    return {
        fnMethod: function () {
            return ($(".text").text() + mA.name);
        }
    }
});

ログイン後にコピー

以上就是Require.js实现js模块化管理教程的内容，更多相关内容请关注PHP中文网（www.php.cn）！