Require.js implementiert das modulare Management-Tutorial von js-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Require.js implementiert das modulare Management-Tutorial von js

高洛峰

Mar 30, 2017 pm 04:42 PM

Was ist Require.js

Require.js ist ein AMD-Spezifikation Lightweight-jsModularisiertesManagementFramework, die neueste Version require.js 2.1 ist nur 14,88 KB nach der Komprimierung. Es kann den js-Code in Module unterteilen, um asynchrones oder dynamisches Laden zu erreichen. Außerdem können die Abhängigkeiten zwischen Modulen deutlich erkannt werden, wodurch die Codequalität, Leistung und Wartbarkeit verbessert werden. Der Autor von Require.js ist James Burke, der Gründer der AMD-Spezifikation.

Welche Vorteile Require.js bringen kann

Hier können wir ein einfaches Beispiel zur Veranschaulichung geben:

Normalerweise ist unsere Seitenstruktur wie folgt

<!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>

Der Code in a.js

alert("require");

Wenn Sie die Seite ausführen, müssen Sie beim Erscheinen der Warnung auf OK klicken, um den Inhalt von p anzuzeigen Wird synchron gerendert, blockiert das Rendern von js zwangsläufig das nachfolgende HTML-Rendering. Darüber hinaus ist die Einführung vieler JS-Dateien nicht schön, aber mit require.js kann ein modulares asynchrones Laden von JS erreicht werden.

So verwenden Sie Require.js

Besuchen Sie zunächst die offizielle Website von require.js, um die neueste Version herunterzuladen, und stellen Sie sie dann wie folgt auf der Seite vor:

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

data-main Attribut Kann nicht ignoriert werden. Die Datei, auf die data-main verweist, ist die Datei, in der sich der Hauptcode befindet. Die in main.js konfigurierten Skripte werden asynchron geladen main.js befindet sich standardmäßig im Root-Pfad.

require.js config

config-Methode wird zum Konfigurieren laufender Parameter verwendet. Stellen Sie zunächst die Parameter ein, siehe Beispiel unten:
Meine Projektdateistruktur ist wie folgt

Require.js implementiert das modulare Management-Tutorial von js

Die Hauptdatei 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;]
        }
    }
});

Die Konfigurationsmethode empfängt einen Parameter vom Typ Objekt . Im Folgenden wird die Rolle jedes Attributs erläutert.
baseUrl: Legen Sie den Root-Pfad fest. Wenn dieses Attribut nicht festgelegt ist, wird standardmäßig das Verzeichnis verwendet, in dem sich die Hauptdatei befindet. Legen Sie hier das JS-Verzeichnis als Root-Pfad fest.
Pfade: Legen Sie den Alias und den Pfad jedes Moduls fest. Beim Aufruf des Moduls muss ein Alias verwendet werden. Der Ressourcendateipfad kann ein lokaler Pfad oder ein externer Link sein, oder es können mehrere Pfade festgelegt werden. Der Pfad kann ein StringPfad oder ein Array sein, sofern vorhanden. Zwei Mindestens mehr Pfade müssen Arrays sein.
Nehmen Sie den JQ-Pfad als Beispiel, einen einzelnen Pfad „jquery“: [“lib/jquery-1.8.3.min“]
Mehrere Pfade „jquery“: [“http://apps.bdimg. com/ libs/jquery/1.8.3/jquery.min.js","lib/jquery-1.8.3.min"]: Wenn mehrere Pfade vorhanden sind, wird zuerst die Ressourcendatei des ersten Pfads abgerufen. Wenn die Das Laden des ersten Pfads schlägt fehl. Der zweite Pfad wird geladen (Hinweis: Wenn in meiner Praxis der erste Pfad CDN verwendet, kann der IE-Browser unter IE11 nicht geladen werden und es werden keine lokalen Ressourcen aufgerufen.) Der Grund ist unbekannt)
Shim: Nicht-AMD-Standardmodule können nicht direkt aufgerufen werden. Der Attributwert ist ein Objekt, das ich geschrieben habe Nicht AMD-Standard, daher muss der festgelegte Modulname und der Modulname, von dem es abhängt, festgelegt werden. Der Alias des Moduls muss in Pfaden definiert werden. deps wird verwendet, um die Abhängigkeiten dieses Moduls festzulegen. Das Popup-Plugin hängt von 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）！

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel