UDN-企业互联网技术人气社区

板块导航

浏览  : 555
回复  : 9

[原生js] 微信小程序开发实战——使用Immutable.js

[复制链接]
独领风骚的头像 楼主
  Immutable 是 Facebook 开发的不可变数据集合。不可变数据一旦创建就不能被修改,是的应用开发更简单,允许使用函数式编程技术,比如惰性评估。Immutable JS 提供一个惰性 Sequence,允许高效的队列方法链,类似 map 和 filter ,不用创建中间代表。immutable 通过惰性队列和哈希映射提供 Sequence, Range, Repeat, Map, OrderedMap, Set 和一个稀疏 Vector。

  微信小程序无法直接使用require( 'immutable.js' )进行调用,需要对下载的Immutable代码进行修改,才能使用。

  原因分析

  Immutable使用了UMD模块化规范
  1. (function (global, factory) {
  2.   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  3.   typeof define === 'function' && define.amd ? define(factory) :
  4.   (global.Immutable = factory());
  5. }(this, function () { 'use strict';var SLICE$0 = Array.prototype.slice;

  6. ....

  7. }));
复制代码

  UMD的实现很简单,先判断是否支持Node.js(CommonJS)模块规范,存在则使用Node.js(CommonJS)方式加载模块。再判断是否支持AMD,存在则使用AMD方式加载模块。前两个都不存在,则将模块公开到全局。

  exports、module必须都有定义,才能以CommonJS加载模块。通过测试,微信小程序运行环境exports、module并没有定义。

  解决方法

  修改Immutable代码,注释原有模块导出语句,使用module.exports = factory() 强制导出
  1. (function(global, factory) {
  2.     /*
  3.     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  4.     typeof define === 'function' && define.amd ? define(factory) :
  5.     (global.Immutable = factory());
  6.     */

  7.     module.exports = factory();

  8. }(this, function() {
复制代码

  使用Immutable.js
  1. //index.js

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

  3. //获取应用实例
  4. var app = getApp();

  5. Page( {

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

  9.         var lines = [];

  10.         lines.push( "var map1 = Immutable.Map({a:1, b:2, c:3});" );
  11.         var map1 = Immutable.Map({a:1, b:2, c:3});
  12.         lines.push( "var map2 = map1.set('b', 50);" );
  13.         var map2 = map1.set('b', 50);
  14.         lines.push( "map1.get('b');" );
  15.         lines.push(map1.get('b'));
  16.         lines.push( "map2.get('b');" );
  17.         lines.push(map2.get('b'));      

  18.         this.setData( {
  19.             text: lines.join( '\n' )
  20.         })
  21.     }
  22. })
复制代码

1.png

  其他

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

相关帖子

发表于 2016-10-6 09:22:38 | 显示全部楼层
前排支持下
使用道具 举报

回复

发表于 2016-10-6 09:22:39 | 显示全部楼层
我完全是被标题<<微信小程序开发实战——使用Immutable.js>>吸引过来的
使用道具 举报

回复

发表于 2017-8-1 15:31:06 | 显示全部楼层

楼主分享得很棒棒哦~小程序的开发目前市面上成熟的外包开发团队还是比较稀少的.有兴趣的朋友可以联系我们上海迅傲股份,QQ1041373364.
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部