微信小程序開發(fā)實(shí)戰(zhàn)——模塊化

CoffeX 發(fā)布于2019-08-20 11:21 / 2943人閱讀

摘要：以微信小程序調(diào)試時代碼為例兼容兼容微信小程序運(yùn)行的代碼與模塊規(guī)范基本符合。使用第三方模塊微信小程序運(yùn)行環(huán)境沒有定義，無法通過導(dǎo)入模塊，需要對第三方模塊強(qiáng)制導(dǎo)出后才能正常導(dǎo)入。

JavaScript模塊規(guī)范

在任何一個大型應(yīng)用中模塊化是很常見的，與一些更傳統(tǒng)的編程語言不同的是，JavaScript （ECMA-262版本）還不支持原生的模塊化。

Javascript社區(qū)做了很多努力，在現(xiàn)有的運(yùn)行環(huán)境中，實(shí)現(xiàn)"模塊"的效果。通行的JavaScript模塊規(guī)范主要有兩種：CommonJS、AMD、UMD、CMD等

CommonJS

CommonJS規(guī)范是服務(wù)器端Javascript模塊規(guī)范。

Node.js的模塊系統(tǒng)，就是參照CommonJS規(guī)范實(shí)現(xiàn)的。NPM也遵循了commonJS定義的包規(guī)范，從而形成了一套完整的生態(tài)系統(tǒng)。

CommonJS定義的模塊分為:{模塊引用(require)} {模塊定義(exports)} {模塊標(biāo)識(module)}。require()用來引入外部模塊；exports對象用于導(dǎo)出當(dāng)前模塊的方法或變量，唯一的導(dǎo)出口；module對象就代表模塊本身。

CommonJS規(guī)范 http://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是"Asynchronous Module Definition"的縮寫，意思是"異步模塊定義"，是前端模塊規(guī)范。

RequireJS就是實(shí)現(xiàn)了AMD規(guī)范的呢。

AMD規(guī)范定義了一個自由變量或者說是全局變量 define 的函數(shù)。

define( id?, dependencies?, factory );

id 為字符串類型，表示了模塊標(biāo)識，為可選參數(shù)。若不存在則模塊標(biāo)識應(yīng)該默認(rèn)定義為在加載器中被請求腳本的標(biāo)識。如果存在，那么模塊標(biāo)識必須為頂層的或者一個絕對的標(biāo)識。

dependencies ，是一個當(dāng)前模塊依賴的，已被模塊定義的模塊標(biāo)識的數(shù)組字面量。

factory，是一個需要進(jìn)行實(shí)例化的函數(shù)或者一個對象。

AMD規(guī)范 https://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 module以服務(wù)器端為第一的原則發(fā)展，選擇同步加載模塊。它的模塊是無需包裝的,但它僅支持對象類型（objects）模塊。AMD以瀏覽器為第一（browser-first）的原則發(fā)展，選擇異步加載模塊。它的模塊支持對象、函數(shù)、構(gòu)造器、字符串、JSON等各種類型的模塊,因此在瀏覽器中它非常靈活。這迫使人們想出另一種更通用格式 UMD(Universal Module Definition)，希望提供一個前后端跨平臺的解決方案。

(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;
}));

UMD的實(shí)現(xiàn)很簡單，先判斷是否支持AMD（define是否存在），存在則使用AMD方式加載模塊。再判斷是否支持Node.js模塊格式（exports是否存在），存在則使用Node.js模塊格式。前兩個都不存在，則將模塊公開到全局（window或global）。

( 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ī)范是國內(nèi)發(fā)展出來的，就像AMD有個requireJS，CMD有個瀏覽器的實(shí)現(xiàn)SeaJS，SeaJS要解決的問題和requireJS一樣，只不過在模塊定義方式和模塊加載（可以說運(yùn)行、解析）時機(jī)上有所不同。

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

define(id?, deps?, factory)

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

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

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

exports 是一個對象，用來向外提供模塊接口

module 是一個對象，上面存儲了與當(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;
})

ECMAScript 6模塊系統(tǒng)

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

ES6的模塊提供了2個新的語法，分別是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);

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

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

模塊開發(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)行時會自動轉(zhuǎn)換為前端模塊規(guī)范。

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

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沒有定義，無法通過require導(dǎo)入模塊，需要對第三方模塊強(qiáng)制導(dǎo)出后才能正常導(dǎo)入。

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

其他

完整代碼 https://github.com/guyoung/Gy...

GPU云服務(wù)器云服務(wù)器微信小程序開發(fā) 微信小程序開發(fā)語言微信小程序開發(fā)免費(fèi) 微信小程序開發(fā)步驟

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80523.html

發(fā)表評論

登陸后可評論

0條評論

CoffeX

男|高級講師

我要關(guān)注我要私信

TA的文章

新智能硬件創(chuàng)新沙龍&大賽

閱讀 1895·2021-11-17 09:33
華納云(hncloud)，美國云服務(wù)器測評，CN2+OpenStack云平臺，默認(rèn)送10G DDOS

閱讀 6489·2021-10-12 10:20
怎么連接云主機(jī)-云主機(jī)怎么使用？

閱讀 2310·2021-09-22 15:50
主機(jī)帶寬怎么選-選購新睿云云主機(jī)帶寬怎么選？

閱讀 1798·2021-09-22 15:10
英偉達(dá)：已完成對高清地圖創(chuàng)企 DeepMap 的收購

閱讀 631·2021-09-10 10:51
基于STM32f103c8t6和L292N驅(qū)動設(shè)計(jì)避障小車（核心函數(shù)的建立為自己所寫）

閱讀 636·2021-09-10 10:50
DMIT，LAX.Pro系列VPS進(jìn)行免費(fèi)的流量升級，加量不加價，SHAREv2由1.0T升級為1.

閱讀 3059·2021-08-11 11:19
小程序瀑布流效果，解決左右兩邊高度差距過大的問題

閱讀 1788·2019-08-30 15:55

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

微信小程序開發(fā)實(shí)戰(zhàn)——模塊化

相關(guān)文章

**微信小程序開發(fā)實(shí)戰(zhàn)——使用Immutable.js**

**微信小程序開發(fā)實(shí)戰(zhàn)——微信小程序開發(fā)者工具0.10.101100**

**微信小程序開發(fā)實(shí)戰(zhàn)——使用Underscore.js**

**微信小程序開發(fā)實(shí)戰(zhàn)——使用UUID、Base64、Chance等**

發(fā)表評論

0條評論

CoffeX

男|高級講師

TA的文章

新智能硬件創(chuàng)新沙龍&大賽

華納云(hncloud)，美國云服務(wù)器測評，CN2+OpenStack云平臺，默認(rèn)送10G DDOS

怎么連接云主機(jī)-云主機(jī)怎么使用？

主機(jī)帶寬怎么選-選購新睿云云主機(jī)帶寬怎么選？

英偉達(dá)：已完成對高清地圖創(chuàng)企 DeepMap 的收購

基于STM32f103c8t6和L292N驅(qū)動設(shè)計(jì)避障小車（核心函數(shù)的建立為自己所寫）

DMIT，LAX.Pro系列VPS進(jìn)行免費(fèi)的流量升級，加量不加價，SHAREv2由1.0T升級為1.

小程序瀑布流效果，解決左右兩邊高度差距過大的問題

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

微信小程序開發(fā)實(shí)戰(zhàn)——模塊化

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！