Modulare Entwicklung von require.js

Dieses Mal werde ich Ihnen die modulare Entwicklung von require.js vorstellen. Was sind die Vorsichtsmaßnahmen für die modulare Entwicklung von require.js? sehen. .

1. Require.js und AMD

Require.js: Es ist ein sehr kleines JavaScript Das Modullade-Framework ist einer der besten Implementierer der AMD-Spezifikationen.

AMD (Asynchronous Module Definition): Die Asynchronous Module Definition Specification (AMD) legt Regeln für die Definition von Modulen fest, damit Module und Modulabhängigkeiten asynchron geladen werden können. Dies steht im Einklang mit dem asynchronen Laden von Modulen durch den Browser (das synchrone Laden von Modulen durch den Browser führt zu Problemen wie Leistung, Benutzerfreundlichkeit, Debugging und domänenübergreifendem Zugriff).

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

2. Verwendung von Require.js

1. Verzeichnisstruktur

Im Beispiel wird ein Plug-in zur Konvertierung von chinesischem Pinyin verwendet (GitHub-Adresse: https://github.com/sxei/pinyinjs/). Dieses Plug-in ist sehr nützlich, aber aufgrund der polyphonen Zeichen im Chinesischen kommt häufig unkonventionelles Pinyin vor, wie zum Beispiel (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. Einführung require.js

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

3. Modul montieren

　[1] Teilweises Laden

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

　[2] Globales Laden

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

Beim Laden Auf diese Weise ist das Stammverzeichnis standardmäßig „/scripts/plus“ und der Parameter baseUrl kann das Stammverzeichnis zurücksetzen.

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

Sie können auch gleichzeitig auf Remote-Dateien oder lokale Dateien verweisen. Wenn das Laden der Remote-Datei fehlschlägt, wird die lokale Datei geladen.

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

Module, die über require geladen werden, müssen im Allgemeinen den AMD-Spezifikationen entsprechen, d Sie müssen eine andere Funktion verwenden: defineshim.

shim wird auch direkt mit „Pad“ übersetzt, was eigentlich diese Bedeutung hat:

Eine besteht darin, Modulabhängigkeiten zu konfigurieren: Beispielsweise muss das Pinyin-Plug-in pinyinUtil.js auf ein Wörterbuch angewiesen sein, um normal konvertiert zu werden.

 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 }

Sie können sich auch auf CSS-Dateien verlassen

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

Die andere Möglichkeit besteht darin, die Ausgabe des Nicht-AMD-Moduls zu laden und das Nicht-Standard-AMD-Modul in ein verwendbares Modul zu „auffüllen“. .

// 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. Verwendung erforderlich

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

Ich glaube, das haben Sie Lesen Sie diesen Artikel. Sie beherrschen die Fallmethode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Welche Klassendefinitionskomponenten gibt es in React?

So erstellen Sie eine native Zwischenablage im Navigator .Clipboard-Browser

Das obige ist der detaillierte Inhalt vonModulare Entwicklung von require.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!