微信小程序使用第三方库Underscore.js步骤详解

 更新时间:2016年09月27日 10:56:22   投稿:daisy  
大家都知道Underscore.js是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象。那么这篇文章我们就来学习下微信小程序如何使用第三方库Underscore.js,有需要的可以参考学习。

前言

Underscore.js是一个很精干的库,压缩后只有4KB。Underscore 提供了100多个函数,包括常用的:map、filter、invoke — 当然还有更多专业的辅助函数,如:函数绑定、JavaScript 模板功能、创建快速索引、强类型相等测试等等。弥补了标准库的不足,大大方便了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' )
 })
 }
})

总结

以上就是微信小程序使用第三方库Underscore.js的全部内容,希望对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

相关文章

  • 将函数的实际参数转换成数组的方法

    将函数的实际参数转换成数组的方法

    实际参数在函数中我们可以使用 arguments 对象获得 (注:形参可通过 arguments.callee 获得),虽然 arguments 对象与数组形似,但仍不是真正意义上的数组。
    2010-01-01
  • js两种拼接字符串的简单方法(必看)

    js两种拼接字符串的简单方法(必看)

    下面小编就为大家带来一篇js两种拼接字符串的简单方法(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 非常优秀的JS图片轮播插件Swiper的用法

    非常优秀的JS图片轮播插件Swiper的用法

    最近在一个微信公众号中用到了swiper图片轮播插件。接下来为大家介绍插件的用法,需要的朋友可以参考下
    2017-01-01
  • js回调函数原理与用法案例分析

    js回调函数原理与用法案例分析

    这篇文章主要介绍了js回调函数原理与用法,结合具体案例形式分析了js回调函数基本概念、原理、使用方法及操作注意事项,需要的朋友可以参考下
    2020-03-03
  • Chrome调试折腾记之JS断点调试技巧

    Chrome调试折腾记之JS断点调试技巧

    这篇文章主要介绍了Chrome调试折腾记之JS断点调试技巧,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 微信小程序 slot踩坑的解决

    微信小程序 slot踩坑的解决

    这篇文章主要介绍了微信小程序 slot踩坑的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • js算法实例之字母大小写转换

    js算法实例之字母大小写转换

    实现javascript 英文首字母大写有多种方法,下面这篇文章主要给大家介绍了关于js算法实例之字母大小写转换的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • JS 实现百度搜索功能

    JS 实现百度搜索功能

    这篇文章给大家介绍了js实现百度搜索功能,代码分为html部分和css折叠样式部分,具体实现代码大家参考下本文
    2018-02-02
  • JavaScript实现点击复制功能具体代码(JS访问剪贴板相关)

    JavaScript实现点击复制功能具体代码(JS访问剪贴板相关)

    这篇文章主要给大家介绍了关于JavaScript实现点击复制功能(JS访问剪贴板相关)的相关资料,复制功能指的是将一个文本或者图片等资源从一个位置通过复制的方式再次拷贝到另一个位置,需要的朋友可以参考下
    2023-10-10
  • JavaScript省市级联下拉菜单实例

    JavaScript省市级联下拉菜单实例

    这篇文章主要为大家详细介绍了JavaScript省市级联下拉菜单实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02

最新评论