這篇文章主要介紹了微信開(kāi)發(fā)之模塊化的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括營(yíng)口網(wǎng)站建設(shè)、營(yíng)口網(wǎng)站制作、營(yíng)口網(wǎng)頁(yè)制作以及營(yíng)口網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，營(yíng)口網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到營(yíng)口省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

JavaScript模塊規(guī)范

在任何一個(gè)大型應(yīng)用中模塊化是很常見(jiàn)的，與一些更傳統(tǒng)的編程語(yǔ)言不同的是，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)識(shí)(module)}。require()用來(lái)引入外部模塊；exports對(duì)象用于導(dǎo)出當(dāng)前模塊的方法或變量，唯一的導(dǎo)出口；module對(duì)象就代表模塊本身。

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

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

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

define( id?, dependencies?, factory );

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

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

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

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

(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)很簡(jiǎn)單，先判斷是否支持AMD（define是否存在），存在則使用AMD方式加載模塊。再判斷是否支持Node.js模塊格式（exports是否存在），存在則使用Node.js模塊格式。前兩個(gè)都不存在，則將模塊公開(kāi)到全局（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ī)范是國(guó)內(nèi)發(fā)展出來(lái)的，就像AMD有個(gè)requireJS，CMD有個(gè)瀏覽器的實(shí)現(xiàn)SeaJS，SeaJS要解 決的問(wèn)題和requireJS一樣，只不過(guò)在模塊定義方式和模塊加載（可以說(shuō)運(yùn)行、解析）時(shí)機(jī)上有所不同。

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

define(id?, deps?, factory)

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

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ī)制，通過(guò)module.exports暴露對(duì)象，通過(guò)require來(lái)獲取對(duì)象。

模塊開(kāi)發(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沒(méi)有定義，無(wú)法通過(guò)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);

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“微信開(kāi)發(fā)之模塊化的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

當(dāng)前題目：微信開(kāi)發(fā)之模塊化的示例分析
網(wǎng)頁(yè)地址：http://www.rwnh.cn/article14/jipdde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、響應(yīng)式網(wǎng)站、電子商務(wù)、移動(dòng)網(wǎng)站建設(shè)、品牌網(wǎng)站制作、軟件開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)