微信小程序开发实战——使用第三方库Immutable.js

zwb7926 8年前
   <p><a href="/misc/goto?guid=4959660193525766484" rel="nofollow,noindex">Immutable</a> 是 非死book 开发的不可变数据集合。不可变数据一旦创建就不能被修改,是的应用开发更简单,允许使用函数式编程技术,比如惰性评估。Immutable JS 提供一个惰性Sequence,允许高效的队列方法链,类似 map 和 filter ,不用创建中间代表。immutable 通过惰性队列和哈希映射提供 Sequence, Range, Repeat, Map, OrderedMap, Set 和一个稀疏 Vector。</p>    <p>微信小程序无法直接使用require( 'immutable.js' )进行调用,需要对下载的Immutable代码进行修改,才能使用。</p>    <h2><strong>原因分析</strong></h2>    <p>Immutable使用了UMD模块化规范</p>    <pre>  <code class="language-javascript">(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;    ....    }));</code></pre>    <p>UMD的实现很简单,先判断是否支持Node.js(CommonJS)模块规范,存在则使用Node.js(CommonJS)方式加载模块。再判断是否支持AMD,存在则使用AMD方式加载模块。前两个都不存在,则将模块公开到全局。</p>    <p>exports、module必须都有定义,才能以CommonJS加载模块。通过测试,微信小程序运行环境exports、module并没有定义。</p>    <h2><strong>解决方法</strong></h2>    <p>修改Immutable代码,注释原有模块导出语句,使用module.exports = factory() 强制导出</p>    <pre>  <code class="language-javascript">(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() {</code></pre>    <h2><strong>使用Immutable.js</strong></h2>    <pre>  <code class="language-javascript">//index.js    var Immutable = require( '../../libs/immutable/immutable.modified.js' );    //获取应用实例  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' )          })      }  })</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/21d774a338186d38fea10b1371b0dc85.png"></p>    <p> </p>    <p>来自:https://segmentfault.com/a/1190000007016139</p>    <p> </p>