快捷導(dǎo)航

微信小程序使用第三方庫(kù)Immutable.js實(shí)例詳解

更新時(shí)間：2016年09月27日 10:42:31 投稿：daisy

Immutable 是 Facebook 開(kāi)發(fā)的不可變數(shù)據(jù)集合。不可變數(shù)據(jù)一旦創(chuàng)建就不能被修改，是的應(yīng)用開(kāi)發(fā)更簡(jiǎn)單，允許使用函數(shù)式編程技術(shù)，比如惰性評(píng)估。微信小程序無(wú)法直接使用Immutable.js，下面就來(lái)說(shuō)說(shuō)微信小程序如何使用第三方庫(kù)Immutable.js。

前言

Immutable JS 提供一個(gè)惰性 Sequence，允許高效的隊(duì)列方法鏈，類似 map 和 filter ，不用創(chuàng)建中間代表。immutable 通過(guò)惰性隊(duì)列和哈希映射提供 Sequence, Range, Repeat, Map, OrderedMap, Set 和一個(gè)稀疏 Vector。

微信小程序無(wú)法直接使用require( 'immutable.js' )進(jìn)行調(diào)用,需要對(duì)下載的Immutable代碼進(jìn)行修改,才能使用。

原因分析

Immutable使用了UMD模塊化規(guī)范

(function (global, factory) {
 typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
 typeof define === 'function' && define.amd ? define(factory) :
 (global.Immutable = factory());
}(this, function () { 'use strict';var SLICE$0 = Array.prototype.slice;

....

}));

UMD的實(shí)現(xiàn)很簡(jiǎn)單，先判斷是否支持Node.js（CommonJS）模塊規(guī)范，存在則使用Node.js（CommonJS）方式加載模塊。再判斷是否支持AMD，存在則使用AMD方式加載模塊。前兩個(gè)都不存在，則將模塊公開(kāi)到全局。

exports、module必須都有定義，才能以CommonJS加載模塊。通過(guò)測(cè)試，微信小程序運(yùn)行環(huán)境exports、module并沒(méi)有定義。

解決方法

修改Immutable代碼，注釋原有模塊導(dǎo)出語(yǔ)句，使用module.exports = factory() 強(qiáng)制導(dǎo)出

(function(global, factory) {
 /*
 typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
 typeof define === 'function' && define.amd ? define(factory) :
 (global.Immutable = factory());
 */

 module.exports = factory();

}(this, function() {

使用Immutable.js

//index.js

var Immutable = require( '../../libs/immutable/immutable.modified.js' );

//獲取應(yīng)用實(shí)例
var app = getApp();

Page( {

 onLoad: function() {
 //console.log('onLoad');
 var that = this;

 var lines = [];

 lines.push( "var map1 = Immutable.Map({a:1, b:2, c:3});" );
 var map1 = Immutable.Map({a:1, b:2, c:3});
 lines.push( "var map2 = map1.set('b', 50);" );
 var map2 = map1.set('b', 50);
 lines.push( "map1.get('b');" );
 lines.push(map1.get('b'));
 lines.push( "map2.get('b');" );
 lines.push(map2.get('b')); 

 this.setData( {
  text: lines.join( '\n' )
 })
 }
})