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

2019-11-20 08:52:23

字體：大中小

供稿：網(wǎng)友

前言

Immutable JS 提供一個(gè)惰性 Sequence，允許高效的隊(duì)列方法鏈，類(lèi)似 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.jsvar 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' ) }) }})