Detaillierte Einführung in die UMD-Spezifikation in Javascript (mit Code)

Dieser Artikel bietet Ihnen eine detaillierte Einführung in die UMD-Spezifikation (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

1. UMD-Spezifikation

Adresse: https://github.com/umdjs/umd

Die UMD-Spezifikation ist die hässlichste unter allen Spezifikationen, es gibt keine! ! ! Dadurch scheint das Modul sowohl mit den AMD- als auch den CommonJs-Spezifikationen kompatibel zu sein. Es wird hauptsächlich von einigen Drittanbieterbibliotheken verwendet, die sowohl browserseitige als auch serverseitige Referenzen unterstützen müssen. UMD ist ein Produkt einer Ära, wenn verschiedene Umgebungen endlich die einheitlichen Spezifikationen der ES-Harmonie erkennen, wird es sich auch von der Bühne der Geschichte zurückziehen.

Die Struktur der UMD-Spezifikation ist auf den ersten Blick sehr kompliziert, vor allem weil man einige Grundkenntnisse in Javascript benötigt, um dieses Paradigma zu verstehen:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery', 'underscore'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS之类的
        module.exports = factory(require('jquery'), require('underscore'));
    } else {
        // 浏览器全局变量(root 即 window)
        root.returnExports = factory(root.jQuery, root._);
    }
}(this, function ($, _) {
    //    方法
    function a(){};    //    私有方法，因为它没被返回 (见下面)
    function b(){};    //    公共方法，因为被返回了
    function c(){};    //    公共方法，因为被返回了

    //    暴露公共方法
    return {
        b: b,
        c: c
    }
}));

2 Ableitung des Code-Paradigmas

2.1 Grundstruktur

Sehen wir uns zunächst die äußerste Struktur an:

(function (){}());

Es ist sehr einfach, es ist eine selbstausführende Funktion. Da es sich um einen modularen Standard handelt, bedeutet dies, dass diese selbstausführende Funktion letztendlich ein Modul exportieren kann. Aus Code-Sicht gibt es tatsächlich zwei gängige Implementierungsmethoden:

1. return gibt ein Modul zurück;

2. Die tatsächlichen Parameter werden in einem Objekt übergeben und die Dinge, die innerhalb der Funktion generiert werden und exportiert werden müssen, werden an die Eigenschaften dieses Objekts gehängt; >

Sie können sehen, dass es im Funktionskörper oben keine Return-Anweisung gibt, sodass wir vermuten können, dass UMD bei der Implementierung die zweite Methode übernimmt. Da UMD eine modulare Spezifikation ist, besteht seine Funktion darin, Module gemäß den Nutzungsanforderungen zu erstellen, was bedeutet, dass seine Verantwortung als Modulfabrik bezeichnet wird. Wir können eine Factory-Methode definieren, und wann immer diese Methode ausgeführt wird, ein Modul, also seine Grundstruktur wird wie folgt:

(function (factory){
    //假设没有使用任何模块化方案，那么将工厂函数执行后返回的内容直接挂载到全局
    window.Some_Attr = factory（）;
}(function(){
    //自定义模块主体的内容
    /*
        var a,b,c
        function a1(){}
        function b1(){}
        function c1(){}
        return {
           a:a1,
           b:b1
        }
     */
}))

Das heißt, wir passen eine anonyme Funktion an, übergeben sie dann als tatsächlichen Parameter an die selbstausführende Funktion und führen sie dann in der Funktion aus. Auf diese Factory-Methode wird formal zugegriffen Parameter innerhalb der Funktion (oder Sie werden mit der Callback-Funktion oder dem Callback besser vertraut sein) und es wird einfach an das globale Objekt gehängt, wodurch der grundlegende Modulexport abgeschlossen wird.

Manchmal hoffen wir auch, das Modul in einer nicht-globalen Umgebung zu mounten. Die dynamische Übergabe des Mount-Objekts kann dazu führen, dass der Code über grundlegende Kenntnisse verfügt Drei Attribute: parent, top und self, um das neue Window-Objekt zu verfolgen, das nach dem Einbetten von „iframe“ in die Seite eingeführt wird. Die einzelne Seite Window.self zeigt auf sich selbst und wird im Code oft dadurch identifiziert, ob sie das self-Attribut enthält . Globales Objekt, daher kann die Schreibmethode hier verbessert werden, um kompatibel zu sein:

(function(root,factory){
    root.Some_Attr = factory();
}(self !== undefined ? self : this, function(){
    
}));

2.2 Anpassung an AMD

Dann fügen wir zunächst die Anpassung der AMD-Spezifikation hinzu, Spezifikationsadresse: AMD-Spezifikation Github-Adresse :

/*
* AMD规范的模块定义格式是define(id?, dependencies?, factory),factory就是实际的模块内容
*/
(function (factory){
    //判断全局环境是否支持AMD标准
    if(typeof define === 'function' && define.amd){
        //定义一个AMD模块
        define([/*denpendencies*/],factory);
    }
}(function(/*formal parameters*/){
    //自定义模块主体的内容
    /*
        var a,b,c
        function a1(){}
        function b1(){}
        function c1(){}
        return {
           a:a1,
           b:b1
        }
     */
}))

2.3 Anpassen von CommonJs

Dann fügen wir zunächst die Standardanpassung von

hinzu:

/*
* CommonJs规范使用require('moduleName')的格式来引用模块，使用module.exports对象输出模块，所以只要把模块的输出内容挂载到module.exports上就完成了模块定义。
*/
(function (factory){
    //判断全局环境是否支持CommonJs标准
      if(typeof exports === 'object' && typeof define !== 'function'){
             module.exports = factory(/*require(moduleA), require(moduleB)*/);
      }
}(function(/*formal parameters*/){
    //自定义模块主体的内容
    /*
        var a,b,c
        function a1(){}
        function b1(){}
        function c1(){}
        return {
           a:a1,
           b:b1
        }
     */
}))

CommonJsNachdem wir die Anpassung zu

hinzugefügt haben, wird der Funktionskörper Der Inhalt zurückgegeben (normalerweise ein Objekt) wird auf

gemountet. Wenn Sie CommonJs-Code geschrieben haben, sind Sie damit vertraut. module.exportsnode.jsZerkleinern Sie die obigen Fragmente und Sie werden verstehen, wie

aussieht.

UMD3. Ein gezielteres UMD-Paradigma

UMD bietet auf seiner Github-Homepage ein gezielteres Paradigma, das für verschiedene Szenarien geeignet ist ( Die Adresse ist angegeben in Abschnitt 1).

Veröffentlichen Sie hier ein jqueryPlugin-Entwicklungsparadigma, das für die meisten Entwickler nützlich sein könnte. Wenn Sie die obige Analyse verstehen, sollte der folgende Code nicht schwer zu verstehen sein:

// Uses CommonJS, AMD or browser globals to create a jQuery plugin.
(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node/CommonJS
        module.exports = function( root, jQuery ) {
            if ( jQuery === undefined ) {
                // require('jQuery') returns a factory that requires window to
                // build a jQuery instance, we normalize how we use modules
                // that require this pattern but the window provided is a noop
                // if it's defined (how jquery works)
                if ( typeof window !== 'undefined' ) {
                    jQuery = require('jquery');
                }
                else {
                    jQuery = require('jquery')(root);
                }
            }
            factory(jQuery);
            return jQuery;
        };
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function ($) {
    $.fn.jqueryPlugin = function () { return true; };
}));

4 Entwicklung

Front-End-Modularisierung selbst ist ein etwas verwirrendes Thema. Der Autor selbst war zunächst verwirrt über require() und require.js, aber Modularisierung ist in der Front-End-Entwicklung sehr wichtig Um für den Rest Ihres Lebens nur Code auf einer Seite zu schreiben, müssen Sie diese Stufe bestehen. Interessierte Leser können in Abschnitten entsprechend den folgenden Grundkategorien lernen.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die UMD-Spezifikation in Javascript (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!