首页 > 上网技巧 > 电脑小技巧 > 微信小程序开发实战使用Underscore.js

微信小程序开发实战使用Underscore.js

时间:2018-02-28 09:56 作者:QQ地带 我要评论

Underscore.js 是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象。Underscore 提供了100多个函数,包括常用的:map、filter、invoke — 当然还有更多专业的辅助函数,如:函数绑定、JavaScript 模板功能、创建快速索引、强类型相等测试等等。 微信小程序无法直接使用require( 'underscore.js' )进行调用。
 
微信小程序模块化机制
微信小程序运行环境支持CommoJS模块化,通过module.exports暴露对象,通过require来获取对象。
 
微信小程序Quick Start 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))
      })
    })
  }
})
原因分析
Underscore CommonJs模块导出代码如下:
 
// Export the Underscore object for **Node.js**, with
// backwards-compatibility for the old `require()` API. If we're in
// the browser, add `_` as a global object.
if (typeof exports !== 'undefined') {
  if (typeof module !== 'undefined' && module.exports) {
     exports = module.exports = _;
  }
  exports._ = _;
} else {
  root._ = _;
}
exports、module必须都有定义,才能导出。通过测试,微信小程序运行环境exports、module并没有定义
 
//index.js
 
//获取应用实例
var app = getApp();
 
Page({ 
 
  onLoad: function () {
    console.log('onLoad');
    var that = this;
 
    console.log('typeof exports: ' + typeof exports);    
    console.log('typeof module: ' + typeof exports); 
 
    var MyClass = function() {
 
    }
 
    module.exports = MyClass;
 
    console.log('typeof module.exports: ' + typeof module.exports);   
  }
})
 
 
解决方法
修改Underscore代码,注释原有模块导出语句,使用module.exports = _ 强制导出
 
    /*
    // Export the Underscore object for **Node.js**, with
    // backwards-compatibility for the old `require()` API. If we're in
    // the browser, add `_` as a global object.
    if (typeof exports !== 'undefined') {
      if (typeof module !== 'undefined' && module.exports) {
        exports = module.exports = _;
      }
      exports._ = _;
    } else {
      root._ = _;
    }
    */
 
    module.exports = _;
    /*
    // AMD registration happens at the end for compatibility with AMD loaders
    // that may not enforce next-turn semantics on modules. Even though general
    // practice for AMD registration is to be anonymous, underscore registers
    // as a named module because, like jQuery, it is a base library that is
    // popular enough to be bundled in a third party lib, but not be part of
    // an AMD load request. Those cases could generate an error when an
    // anonymous define() is called outside of a loader request.
    if (typeof define === 'function' && define.amd) {
      define('underscore', [], function() {
        return _;
      });
    }
    */
使用Underscore.js
//index.js
 
var _ = require( '../../libs/underscore/underscore.modified.js' );
 
//获取应用实例
var app = getApp();
 
 
Page( {
 
    onLoad: function() {
        //console.log('onLoad');
        var that = this;
 
        var lines = [];
 
        lines.push( "_.map([1, 2, 3], function(num){ return num * 3; });" );
        lines.push( _.map( [ 1, 2, 3 ], function( num ) { return num * 3; }) );
 
        lines.push( "var sum = _.reduce([1, 2, 3], function(memo, num){ return memo + num; }, 0);" );
        lines.push( _.reduce( [ 1, 2, 3 ], function( memo, num ) { return memo + num; }, 0 ) );
 
        lines.push( "var even = _.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });" );
        lines.push( _.find( [ 1, 2, 3, 4, 5, 6 ], function( num ) { return num % 2 == 0; }) );
 
        lines.push( "_.sortBy([1, 2, 3, 4, 5, 6], function(num){ return Math.sin(num); });" );
        lines.push( _.sortBy( [ 1, 2, 3, 4, 5, 6 ], function( num ) { return Math.sin( num ); }) );
 
        lines.push( "_.indexOf([1, 2, 3], 2);" );
        lines.push( _.indexOf([1, 2, 3], 2) );
 
        this.setData( {
            text: lines.join( '\n' )
        })
    }
})

标签: 微信小程序
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告