JavaScriptModulspezifikation

Im Gegensatz zu einigen traditionelleren Programmiersprachen, JavaScript (ECMA-262-Version), ist die Modularisierung in jeder gro?en Anwendung üblich. unterstützt noch keine native Modularisierung.

Die Javascript-Community hat gro?e Anstrengungen unternommen, um den Effekt von ?Modulen“ in der vorhandenen Betriebsumgebung zu erzielen. Es gibt zwei Haupttypen beliebter JavaScript-Modulspezifikationen: CommonJS, AMD, UMD, CMD usw.

CommonJS

Die CommonJS-Spezifikation ist eine serverseitige Javascript-Modulspezifikation .

Das Modulsystem von Node.js wird unter Bezugnahme auf die CommonJS-Spezifikation implementiert. NPM folgt auch den von commonJS definierten Paketspezifikationen und bildet so ein vollst?ndiges ?kosystem.

Von CommonJS definierte Module sind unterteilt in: {Modulreferenz (erforderlich)} {Moduldefinition (Exporte)} {Modulidentifikation (Modul)}. require() wird zum Einführen externer Module verwendet. Das Exportobjekt wird zum Exportieren von Methoden oder Variablen des aktuellen Moduls verwendet. Der einzige Exportport repr?sentiert das Modul selbst.

CommonJS-Spezifikation wiki.commonjs.org/wiki...

function MathClass() {
}
MathClass.PI = 3.14;
MathClass.E = 2.72;
MathClass.prototype.add = function(a, b) { return a+b;
}; module.exports = MathClass;

var MathClass = require('./mathCommonJS.js');
Page( {
    onLoad: function() { console.log( "PI: " +MathClass.PI ); var mathClass = new MathClass(); console.log( "3 + 4: " +mathClass.add(3, 4) );
    }
});

AMD

AMD ist ?Asynchronous Module Definition“ Die Abkürzung ?asynchrone Moduldefinition“ bedeutet ?asynchrone Moduldefinition“ und ist eine Front-End-Modulspezifikation.

RequireJS implementiert die AMD-Spezifikation.

Die AMD-Spezifikation definiert eine freie Variable oder eine globale Variablendefinitionsfunktion.

define( id?, dependencies?, factory );

• id ist ein String-Typ, der die Modul-ID darstellt und ein optionaler Parameter ist. Wenn nicht vorhanden, sollte die Modul-ID standardm??ig die ID des angeforderten Skripts im Loader sein. Falls vorhanden, muss der Modulbezeichner ein Top-Level- oder ein absoluter Bezeichner sein.

• Abh?ngigkeiten sind ein Array-Literal, von dem das aktuelle Modul abh?ngt und das durch das vom Modul definierte Modul identifiziert wird.

• Factory ist eine Funktion oder ein Objekt, das instanziiert werden muss.

AMD-Spezifikation github.com/amdjs/amdj...

define('mathAMD', [], function( i ) { function MathClass() {
    }
    MathClass.PI = 3.14;
    MathClass.E = 2.72;
    MathClass.prototype.add = function( a, b ) { return a + b;
    }; return MathClass;
});

define( [ "mathAMD" ], function( require, exports, MathClass ) {
    Page( {
        onLoad: function() { console.log( "PI: " + MathClass.PI ); var mathClass = new MathClass(); console.log( "3 + 4: " + mathClass.add( 3, 4 ) );
        }
    });

});

UMD

CommonJS Das Modul wird nach dem Server-Side-First-Prinzip entwickelt und l?dt Module synchron. Für seine Module ist keine Verpackung erforderlich, es werden jedoch nur Module vom Typ Objekt (Objekts) unterstützt. AMD entwickelt nach dem Browser-First-Prinzip und l?dt Module asynchron. Sein Modul unterstützt verschiedene Arten von Modulen wie Objekte, Funktionen, Konstruktoren, Strings, JSON usw. und ist daher im Browser sehr flexibel. Dies zwingt die Leute dazu, ein anderes, allgemeineres Format zu entwickeln, UMD (Universal Module Definition), in der Hoffnung, eine Front-End- und plattformübergreifende L?sung bereitzustellen.

(function (root, factory) { if (typeof define === 'function' && define.amd) {       
        define(['jquery'], factory);
    } else if (typeof exports === 'object') { module.exports = factory(require('jquery'));
    } else {       
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) { function myFunc(){}; return myFunc;
}));

Die Implementierung von UMD ist sehr einfach. Stellen Sie zun?chst fest, ob AMD unterstützt wird (ob eine Definition vorhanden ist), und verwenden Sie, falls vorhanden, die AMD-Methode, um das Modul zu laden. Stellen Sie dann fest, ob das Node.js-Modulformat unterstützt wird (ob Exporte vorhanden sind), verwenden Sie das Node.js-Modulformat. Wenn die ersten beiden nicht vorhanden sind, wird das Modul der Welt (Fenster oder global) ausgesetzt.

( function( global, factory ) { if( typeof define === 'function' && define.amd ) {
        define( factory );
    } else if( typeof exports === 'object' ) { module.exports = factory();
    } else {
        root.returnExports = factory();
    }
    
} ( this, function() { function MathClass() {
    }
    MathClass.PI = 3.14;
    MathClass.E = 2.72;
    MathClass.prototype.add = function( a, b ) { return a + b;
    }; return MathClass;
}) );

var MathClass = require( './mathUMD.js' );
Page( {
    onLoad: function() { console.log( "PI: " + MathClass.PI ); var mathClass = new MathClass(); console.log( "3 + 4: " + mathClass.add( 3, 4 ) );
    }
});

CMD

CMD 即Common Module Definition通用模塊定義，CMD規(guī)范是國(guó)內(nèi)發(fā)展出來(lái)的，就像AMD有個(gè)requireJS，CMD有個(gè)瀏覽器的實(shí)現(xiàn)SeaJS，SeaJS要解 決的問題和requireJS一樣，只不過在模塊定義方式和模塊加載（可以說運(yùn)行、解析）時(shí)機(jī)上有所不同。

Sea.js 推崇一個(gè)模塊一個(gè)文件，遵循統(tǒng)一的寫法

define(id?, deps?, factory)

因?yàn)镃MD推崇一個(gè)文件一個(gè)模塊，所以經(jīng)常就用文件名作為模塊id,CMD推崇依賴就近，所以一般不在define的參數(shù)中寫依賴，在factory中寫。

factory是一個(gè)函數(shù)，有三個(gè)參數(shù)，function(require, exports, module)

• require 是一個(gè)方法，接受 模塊標(biāo)識(shí) 作為唯一參數(shù)，用來(lái)獲取其他模塊提供的接口

• exports 是一個(gè)對(duì)象，用來(lái)向外提供模塊接口

• module 是一個(gè)對(duì)象，上面存儲(chǔ)了與當(dāng)前模塊相關(guān)聯(lián)的一些屬性和方法

CMD模塊規(guī)范 https://github.com/cmdjs/spec...

define( "pages/module/mathCMD.js", function( require, exports, module ) { function MathClass() {
    }
    MathClass.PI = 3.14;
    MathClass.E = 2.72;
    MathClass.prototype.add = function( a, b ) { return a + b;
    }; module.exports = MathClass;
})

define( "pages/module/mathCMD.js", function( require, exports, module ) { function MathClass() {
    }
    MathClass.PI = 3.14;
    MathClass.E = 2.72;
    MathClass.prototype.add = function( a, b ) { return a + b;
    }; module.exports = MathClass;
})

微信小程序模塊化機(jī)制

微信小程序秉承了JavaScript模塊化的機(jī)制，通過module.exports暴露對(duì)象，通過require來(lái)獲取對(duì)象。

模塊開發(fā)

以微信小程序QuickStart為例，微信小程序模塊采用CommonJS規(guī)范

utils/util.js

function formatTime(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() var hour = date.getHours() var minute = date.getMinutes() var second = date.getSeconds(); return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
} function formatNumber(n) {
  n = n.toString() return n[1] ? n : '0' + n
} module.exports = {
  formatTime: formatTime
}

pages/log/log.js

var util = require('../../utils/util.js')
Page({
  data: {
    logs: []
  },
  onLoad: function () { this.setData({
      logs: (wx.getStorageSync('logs') || []).map(function (log) { return util.formatTime(new Date(log))
      })
    })
  }
})

模塊運(yùn)行

微信小程序還是要以前端程序方式在微信瀏覽器中運(yùn)行，由于CommonJS規(guī)范是服務(wù)器端模塊規(guī)范，微信小程序運(yùn)行時(shí)會(huì)自動(dòng)轉(zhuǎn)換為前端模塊規(guī)范。

以微信小程序QuickStart調(diào)試時(shí)代碼為例

utils/util.js

define("utils/util.js", function(require, module) { var window = { Math: Math }/*兼容babel*/ , location, document, navigator, self, localStorage, history, Caches; function formatTime(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() var hour = date.getHours() var minute = date.getMinutes() var second = date.getSeconds(); return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
    } function formatNumber(n) {
        n = n.toString() return n[1] ? n : '0' + n
    } module.exports = {
        formatTime: formatTime
    }
})

pages/log/log.js

define("pages/logs/logs.js", function(require, module) { var window = { Math: Math }/*兼容babel*/ , location, document, navigator, self, localStorage, history, Caches; var util = require('../../utils/util.js')
    Page({
        data: {
            logs: []
        },
        onLoad: function() { this.setData({
                logs: (wx.getStorageSync('logs') || []).map(function(log) { return util.formatTime(new Date(log))
                })
            })
        }
    })
}); require("pages/logs/logs.js")

微信小程序運(yùn)行的代碼與CMD模塊規(guī)范基本符合。

使用第三方模塊

微信小程序運(yùn)行環(huán)境exports、module沒有定義，無(wú)法通過require導(dǎo)入模塊，需要對(duì)第三方模塊強(qiáng)制導(dǎo)出后才能正常導(dǎo)入。

微信小程序使用Immutable.js segmentfault.com/a/11...

微信小程序使用Underscore.js segmentfault.com/a/11...

ECMAScript 6模塊系統(tǒng)

ECMAScript 6，模塊被作為重要組成部分加入其中。

ES6的模塊提供了2個(gè)新的語(yǔ)法，分別是export和import。

export 模塊導(dǎo)出

export let a = 1; export class A {}; export let b = () => {};

import 模塊導(dǎo)入

import {a} from './a'; console.log(a); import * as obj from './a'; console.log(obj.a);

微信小程序還沒實(shí)現(xiàn)ECMAScript 6。

【相關(guān)推薦】

1. 微信公眾號(hào)平臺(tái)源碼下載

2.?分享微信公眾號(hào)開發(fā)刷卡支付的實(shí)例教程

3.?微信開發(fā)之微信支付

4.?詳解微信小程序支付功能開發(fā)錯(cuò)誤總結(jié)

Das obige ist der detaillierte Inhalt vonDetaillierte Beispiele der Modularisierung in der WeChat-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!