资讯专栏INFORMATION COLUMN

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

Bowman_han / 1152人阅读

摘要:是一个工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何内置对象。微信小程序无法直接使用进行调用。通过测试,微信小程序运行环境并没有定义获取应用实例解决方法修改代码,注释原有模块导出语句,使用强制导出使用获取应用实例其他完整代码

Underscore.js 是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象。Underscore 提供了100多个函数,包括常用的:map、filter、invoke — 当然还有更多专业的辅助函数,如:函数绑定、JavaScript 模板功能、创建快速索引、强类型相等测试等等。 微信小程序无法直接使用require( "underscore.js" )进行调用。

微信小程序模块化机制

微信小程序运行环境支持CommoJS模块化,通过module.exports暴露对象,通过require来获取对象。

微信小程序Quick Start utils/util.js

</>复制代码

  1. function formatTime(date) {
  2. var year = date.getFullYear()
  3. var month = date.getMonth() + 1
  4. var day = date.getDate()
  5. var hour = date.getHours()
  6. var minute = date.getMinutes()
  7. var second = date.getSeconds();
  8. return [year, month, day].map(formatNumber).join("/") + " " + [hour, minute, second].map(formatNumber).join(":")
  9. }
  10. function formatNumber(n) {
  11. n = n.toString()
  12. return n[1] ? n : "0" + n
  13. }
  14. module.exports = {
  15. formatTime: formatTime
  16. }

pages/log/log.js

</>复制代码

  1. var util = require("../../utils/util.js")
  2. Page({
  3. data: {
  4. logs: []
  5. },
  6. onLoad: function () {
  7. this.setData({
  8. logs: (wx.getStorageSync("logs") || []).map(function (log) {
  9. return util.formatTime(new Date(log))
  10. })
  11. })
  12. }
  13. })
原因分析

Underscore CommonJs模块导出代码如下:

</>复制代码

  1. // Export the Underscore object for **Node.js**, with
  2. // backwards-compatibility for the old `require()` API. If we"re in
  3. // the browser, add `_` as a global object.
  4. if (typeof exports !== "undefined") {
  5. if (typeof module !== "undefined" && module.exports) {
  6. exports = module.exports = _;
  7. }
  8. exports._ = _;
  9. } else {
  10. root._ = _;
  11. }

exports、module必须都有定义,才能导出。通过测试,微信小程序运行环境exports、module并没有定义

</>复制代码

  1. //index.js
  2. //获取应用实例
  3. var app = getApp();
  4. Page({
  5. onLoad: function () {
  6. console.log("onLoad");
  7. var that = this;
  8. console.log("typeof exports: " + typeof exports);
  9. console.log("typeof module: " + typeof exports);
  10. var MyClass = function() {
  11. }
  12. module.exports = MyClass;
  13. console.log("typeof module.exports: " + typeof module.exports);
  14. }
  15. })

解决方法

修改Underscore代码,注释原有模块导出语句,使用module.exports = _ 强制导出

</>复制代码

  1. /*
  2. // Export the Underscore object for **Node.js**, with
  3. // backwards-compatibility for the old `require()` API. If we"re in
  4. // the browser, add `_` as a global object.
  5. if (typeof exports !== "undefined") {
  6. if (typeof module !== "undefined" && module.exports) {
  7. exports = module.exports = _;
  8. }
  9. exports._ = _;
  10. } else {
  11. root._ = _;
  12. }
  13. */
  14. module.exports = _;

</>复制代码

  1. /*
  2. // AMD registration happens at the end for compatibility with AMD loaders
  3. // that may not enforce next-turn semantics on modules. Even though general
  4. // practice for AMD registration is to be anonymous, underscore registers
  5. // as a named module because, like jQuery, it is a base library that is
  6. // popular enough to be bundled in a third party lib, but not be part of
  7. // an AMD load request. Those cases could generate an error when an
  8. // anonymous define() is called outside of a loader request.
  9. if (typeof define === "function" && define.amd) {
  10. define("underscore", [], function() {
  11. return _;
  12. });
  13. }
  14. */
使用Underscore.js

</>复制代码

  1. //index.js
  2. var _ = require( "../../libs/underscore/underscore.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( "_.map([1, 2, 3], function(num){ return num * 3; });" );
  11. lines.push( _.map( [ 1, 2, 3 ], function( num ) { return num * 3; }) );
  12. lines.push( "var sum = _.reduce([1, 2, 3], function(memo, num){ return memo + num; }, 0);" );
  13. lines.push( _.reduce( [ 1, 2, 3 ], function( memo, num ) { return memo + num; }, 0 ) );
  14. lines.push( "var even = _.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });" );
  15. lines.push( _.find( [ 1, 2, 3, 4, 5, 6 ], function( num ) { return num % 2 == 0; }) );
  16. lines.push( "_.sortBy([1, 2, 3, 4, 5, 6], function(num){ return Math.sin(num); });" );
  17. lines.push( _.sortBy( [ 1, 2, 3, 4, 5, 6 ], function( num ) { return Math.sin( num ); }) );
  18. lines.push( "_.indexOf([1, 2, 3], 2);" );
  19. lines.push( _.indexOf([1, 2, 3], 2) );
  20. this.setData( {
  21. text: lines.join( "
  22. " )
  23. })
  24. }
  25. })

其他

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/80501.html

相关文章

  • 微信小程开发实战——模块化

    摘要:以微信小程序调试时代码为例兼容兼容微信小程序运行的代码与模块规范基本符合。使用第三方模块微信小程序运行环境没有定义,无法通过导入模块,需要对第三方模块强制导出后才能正常导入。 JavaScript模块规范 在任何一个大型应用中模块化是很常见的,与一些更传统的编程语言不同的是,JavaScript (ECMA-262版本)还不支持原生的模块化。 Javascript社区做了很多努力,在现...

    CoffeX 评论0 收藏0
  • 全球首发,微信小程开发实战视频教程发布

    摘要:昨日月,腾讯终于发布了没有,无需申请也可以进行微信小程序开发的视频教程了,我在在第一时间尝试并发布了这个小视频教程,入门足够了各位免费拿去,慢慢享用链接密码也可以添加微信小程序开发者交流群,只欢迎对微信小程序开发有兴趣的朋友,其他勿加,感谢 昨日(9月23),腾讯终于发布了没有APPid,无需申请也可以进行微信小程序开发的视频教程了,我在在第一时间尝试并发布了这7个小视频教程,入门足够...

    mushang 评论0 收藏0
  • 前端资源系列(3)-微信小程开发资源汇总

    摘要:微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序 微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者...

    paney129 评论0 收藏0

发表评论

0条评论

Bowman_han

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<