require.js のモジュール開発

今回はrequire.jsのモジュール開発についてご紹介します。

1. Require.js と AMD

Require.js

: これは非常に小さな

JavaScript モジュール読み込みフレームワークであり、AMD 仕様の最良の実装者の 1 つです。 AMD (

非同期モジュール定義): 非同期モジュール定義仕様 (AMD) は、モジュールとモジュール依存関係を非同期でロードできるようにモジュールを定義するためのルールを定めています。これは、ブラウザーのモジュールの非同期読み込みとまったく同じです (ブラウザーによるモジュールの同期読み込みは、パフォーマンス、使いやすさ、デバッグ、クロスドメイン アクセスなどの問題を引き起こします)。

// AMD规范// 第一个参数，id，是个字符串。它指的是定义中模块的名字，这个参数是可选的。如果没有提供该参数，模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数，模块名必须是“顶级”的和绝对的（不允许相对名字）。// 第二个参数，dependencies，是个定义中模块所依赖模块的数组。依赖模块必须根据模块的工厂方法优先级执行，并且执行的结果应该按照依赖数组中的位置顺序以参数的形式传入（定义中模块的）工厂方法中。// 第三个参数，factory，为模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。define(id?, dependencies?, factory);

2. Require.jsは

1.

ディレクトリ構造

例では、中国語ピンインを変換するプラグインを使用しています(GitHubアドレス: https://) github.com /sxei/pinyinjs/)、このプラグインは非常に使いやすいですが、中国語は多声文字であるため、(Jia Baoyu=> "gu bao yu") などの型破りなピンインが頻繁に表示されます

  ├─scripts
     │─plus
        ├─pinyin
        │ ├─dist
        │ │  ├─pinyin_dict_firstletter.js
        │ │  ├─pinyin_dict_notone.js
        │ │  ├─pinyin_dict_polyphone.js
        │ │  └─pinyin_dict_withtone.js
        │ └─pinyinUtil.js
        ├─jquery.js
        ├─plusMain.js
        ├─require.js
        └─test.js

2、r

equire.

jsを導入

<script src="/scripts/plus/require.js"></script>

3.モジュールをマウント

[1]部分読み込み

//test.jsdefine(function () {    return {
        add: function (a, b) {
            alert("传参没用上，哈哈");
        }
    }
});//页面代码$(function () {
    require(["/scripts/plus/test.js"], function (h) {
        h.add(1, 2);
    );
})

[ 2] グローバルローディング

//plusMain.jsrequire.config({
    paths: {        jquery: "jquery",
    }
});//页面引用<script src="/scripts/plus/require.js" data-main="/scripts/plus/plusMain" defer async="true></script>

このようにロードすると、デフォルトでは「/scripts/plus」がルートディレクトリになり、パラメータ

baseUrl

でルートディレクトリをリセットできます。

//效果相同require.config({
    baseUrl: "/scripts/plus",
    paths: {        jquery: "jquery"
    }
});

リモートファイルまたはローカルファイルを同時に参照することもできます。リモートファイルのロードに失敗した場合は、ローカルファイルがロードされます。

require.config({
    paths: {        jquery: ["http://libs.baidu.com/jquery/2.0.3/jquery", "jquery"],
    }
});

モジュールの宣言には

を使用しますが、AMD標準以外のjsをロードする必要がある場合があります。このとき、別の関数:

shimを使用する必要があります。

require加载的模块一般都需要符合AMD规范即使用define shimこれも分かりにくいですが、Shimは直訳すると「パッド」ですが、実際にはこの意味を持っています:

1つはモジュールの依存関係を設定するためです。たとえば、ピンイン プラグイン pinyinUtil.js は、通常の変換のために辞書に依存する必要があります。

 1 require.config({ 2     paths: { 3         jquery: "jquery", 4         pinyin_dict_firstletter: "pinyin/dict/pinyin_dict_firstletter", 5         pinyin_dict_withtone: "pinyin/dict/pinyin_dict_withtone", 6         pinyin: "pinyin/pinyinUtil" 7     }, 8     shim: { 9         pinyin: {10             deps: ["pinyin_dict_firstletter", "pinyin_dict_withtone"],// 依赖模块集合11         }12     }13 });14 15 //可以简写成16 shim: {17     pinyin: ["pinyin_dict_firstletter", "pinyin_dict_withtone"]18 }

css ファイルに依存することもできます

require.config({
    paths: {
        select2: "select2/select2.min"
    },
    shim: {
        select2: ["/scripts/plus/select2/select2.min.css"]
    },
});

もう 1 つは、非 AMD モジュールの出力をロードし、非標準の AMD モジュールを使用可能なモジュールに「パディング」することです。

// test.js(function () {    var NGY = {
        Hi: function() {
            alert("跨越过去之后");
        }
    }
    window.NGY = NGY;
})();//配置require.config({
    paths: {
        ngy: "test"
    },
    shim: {
        ngy: { exports: "NGY" }
    },
});//使用，不需要声明变量就可以直接使用require(["ngy"], function () {
    NGY.Hi();
});

4. require を使用します

require(["jquery", "pinyin"], function ($, pinyin) {
    $("span").html("谁最可爱?");    var dl = pinyin.getPinyin('当然是我');
});

さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 ！ 推奨読書:

React にはどのようなクラス定義コンポーネントがあるのか​​

navigator.clipboard ブラウザでネイティブ クリップボードを作成する方法

以上がrequire.js のモジュール開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。