轻源码

  • QingYuanMa.com
  • 全球最大的互联网技术和资源下载平台
搜索
一起源码网 门户 微信小程序 查看主题

微信小程序操作数组时,下标不支持变量;module.exports和exports的区别 ... ...

发布者: wangi4831 | 发布时间: 2018-7-3 17:30| 查看数: 5839| 评论数: 1|帖子模式

一:操作数组时,下标不支持变量的解决办法

作者:Zuozuo ,来自授权地址 
微信小程序setData时

  1. etData({
  2. 'array[0].name':'xiaoming'
  3. })

但是在一般情况下,我们需要set的一个动态数组中的值,下标是随时变化的。

但是在set的时候必须说明【】下标是0-9的数字形式,而发送到服务器的时候却又是以字符串的形式发送。

因此,如果在其中使用变量,会被认为下标不是数字而报错不能正常运行。

如果使用如下的形式,又无法动态的改变前端的渲染数据。

  1. this.data.array[0].name='xiaoming'

解决方法如下。

  1. this.data.array[0].name='xiaoming'
  2. this.setData({
  3. array:this.data.array
  4. })

在改变该数组后,重新把该数组发送到前端进行渲染。

二:module.exports和exports的区别

 
微信小程序中module.exports与exports的用法可以查看下面官方提供的文档,使用起来还是比较简单方便的,但时对于这两者的区别解释的不是很明白。 
微信小程序官方文档--框架--逻辑层--模块化.png 
为了更好的理解 exports 和module.exports 的关系,我们先来补点 js 基础。示例:

  1. // index.js
  2. Page({
  3. onLoad: function(){
  4. var a = {name: '张三'};
  5. var b = a;
  6. console.log(a);
  7. console.log(b);
  8. b.name = '李四';
  9. console.log(a);
  10. console.log(b);
  11. var b = {name: '王五'};
  12. console.log(a);
  13. console.log(b);
  14. }
  15. })

运行 app.js 结果为:

  1. { name: '张三' }
  2. { name: '张三' }
  3. { name: '李四' }
  4. { name: '李四' }
  5. { name: '李四' }
  6. { name: '王五' }

解释一下: 
a 是一个对象,b 是对 a 的引用,即 a 和 b 指向同一个对象,即 a 和 b 指向同一块内存地址,所以前两个输出一样。 
当对 b 作修改时,即 a 和 b 指向同一块内存地址的内容发生了改变,所以 a 也会体现出来,所以第三四个输出一样。 
当对 b 完全覆盖时,b 就指向了一块新的内存地址(并没有对原先的内存块作修改),a 还是指向原来的内存块,即 a 和 b 不再指向同一块内存,也就是说此时 a 和 b 已毫无关系,所以最后两个输出不一样。

明白了上述例子后,我们进入正题。我们只需知道三点即可知道exports 和module.exports 的区别了:

exports 是指向的module.exports 的引用; 
module.exports 初始值为一个空对象{},所以exports 初始值也是{}; 
require() 返回的是module.exports 而不是exports。 
所以:我们通过

  1. var name = '张三';
  2. exports.name = name;
  3. exports.sayName = function() {
  4. console.log(name);
  5. }

给 exports 赋值其实是给module.exports 这个空对象添加了两个属性而已,上面的代码相当于:

  1. var name = '张三';
  2. module.exports.name = name;
  3. module.exports.sayName = function() {
  4. console.log(name);
  5. }

下面就在微信小程序中module.exports和exports的区别做出示例

  1. // common.js
  2. function sayHello(name) {
  3. console.log(`Hello ${name} !`);
  4. }
  5. function sayGoodbye(name) {
  6. console.log(`Goodbye ${name} !`);
  7. }
  8. // 第一种情况,module.exports初始值为空对象,两个函数使用module.exports或exports都一样效果
  9. module.exports.sayHello = sayHello;
  10. module.exports.sayGoodbye = sayGoodbye;
  11. exports.sayHello = sayHello;
  12. exports.sayGoodbye = sayGoodbye;
  13. // 第二种情况,module.exports初始值不为空对象,只能使用module.exports暴露接口,而不能使用exports暴露,会出现is not a function错误。
  14. module.exports = {name:1};// module.exports给一个初始值
  15. //以下两个正常使用
  16. module.exports.sayHello = sayHello;
  17. module.exports.sayGoodbye = sayGoodbye;
  18. //使用以下两个会报错误sayHello is not a function
  19. exports.sayHello = sayHello;
  20. exports.sayGoodbye = sayGoodbye;

综上所述,当module.exports 指向新的对象时,exports 断开了与 module.exports 的引用,module.exports 指向了新的内存块,而 exports 还是指向原来的内存块。 
因此,在不是很清楚两者关系的时候,请采用module.exports来暴露接口,而尽量不采用exports暴露接口。

最新评论

七七 发表于 2022-7-3 12:29
免费下歌的软件全免费

轻源码让程序更轻更快

QingYuanMa.com

工作时间 周一至周六 8:00-17:30

侵权处理

客服QQ点击咨询

关注抖音号

定期抽VIP

Copyright © 2016-2021 https://www.171739.xyz/ 滇ICP备13200218号

快速回复 返回顶部 返回列表