小程序的奇技淫巧之 computed 计算属性

标签:程序,奇技,奇技淫巧,淫巧,计算,属性 发布时间:2019年02月28日 点击2

小程序的出身,基于安全和管控的考虑,使用了双线程的设计,同时对于 DOM 操作、动态创建 DOM 这些都隔离了。在写代码的时候,模版语法不支撑函数计算等,computed 的方法就显得十分紧张了。

自定义组件


小程序的自定义组件涉及功能许多道路中央护栏,这篇只针对computed睁开来讲。

computed比较适合较复杂逻辑的计算,同时在小程序无法在模板里使用methods如许的场景下,计算属性的需求就更强烈了。

behaviors

自定义组件中,提供了behaviors的使用和定义。

从官方文档我们能看到:

behaviors是用于组件间代码共享的特征,类似于一些编程语言中的“mixins”或“traits”。
每个behavior可以包含一组属性、数据、生命周期函数和方法,组件引用它时,它的属性、数据和方法会被合并到组件中,生命周期函数也会在对合时机被调用。每个组件可以引用多个behavior

简单来说,我们能通过behaviors来重构Component的能力。

假如说,我们能“混入”Component,其实基本许多能力都能实现啦。其实我们本身封装一层的MyComponent也能达到肯定的结果,但是如许的拓展性会变得很糟。

通过behaviors的体例,每个组件可以按需引入本身必要的behavior啦。

computed 实现

我们来梳理下这里的逻辑,我们必要一个computed能力,必要处理的重要是:setData的时候,根据computed来计算哪些数据必要处理。

所以我们要做的是:

  1. 记下来必要computed的变量。
  2. 在每次setData之前,看看是否包含到必要computed的变量,匹配到了就进行computed处理。
  3. 使用处理后的数据,进行setData

官方已经提供了计算属性实现的behavior浙江人事考试,大家也可以尽情翻看实现的源码,和使用这种拓展能力。

Page 的超集


hack 实现 Page computed 能力

想必大家都会有迷惑,Component里支撑behaviors,但是Page依然写起来很不方便呀。虽然所有的Page最终也能通过Component来实现,但是如许是否必要多包装一层呢?

答案是不用。

使用 Component 构造器构造页面

ComponentPage的超集,因此可以使用Component构造器构造页面。

同样的,我们来看看官方文档:

事实上,小程序的页面也可以视为自定义组件。因而,页面也可以使用Component构造器构造,拥有与通俗组件一样的定义段与实例方法。但此时要求对应json文件中包含usingComponents定义段。

也就是说,我们如许的页面:

123456789101112131415
Page({  data: {    logs: []  },  onLoad(query) {    // 如访问页面`/pages/index/index?paramA=123&paramB=xyz`百度排名,假如声明有属性(`properties`)`paramA`或`paramB`,则它们会被赋值为`123`或`xyz`    query.paramA // 页面参数 paramA 的值    query.paramA // 页面参数 paramB 的值    this.setData({      logs: (wx.getStorageSync("logs")  []).map((log: number) => {        return formatTime(new Date(log));      })    });  }});

可以这么写:

123
{  "usingComponents": {}}
12345678910111213141516171819202122
Component({  // 组件的属性可以用于接收页面的参数  properties: {    paramA: Number,    paramB: String,  },  data: {    logs: []  },  methods: {    onLoad() {      // 如访问页面`/pages/index/index?paramA=123&paramB=xyz`,假如声明有属性(`properties`)`paramA`或`paramB`,则它们会被赋值为`123`或`xyz`      this.data.paramA // 页面参数 paramA 的值      this.data.paramB // 页面参数 paramB 的值      this.setData({        logs: (wx.getStorageSync("logs")  []).map((log: number) => {          return formatTime(new Date(log));        })      });    }  }});

如许,我们就能兴奋地使用behaviors啦。

12345678910111213141516171819202122232425262728
const computedBehavior = require("miniprogram-computed");Component({  behaviors: [computedBehavior],  data: {    logs: []  },  computed: {    logsAfterComputed() {      // 计算属性同样挂在 data 上,每当进行 setData 的时候会重新计算      // 比如此字段可以通过 this.data.b 获取到      return this.data.logs.map(x => {        return {          log: x,          logAfterCompute: x + "logAfterCompute"        };      });    }  },  methods: {    onLoad() {      this.setData({        logs: (wx.getStorageSync("logs")  []).map((log: number) => {          return formatTime(new Date(log));        })      });    }  }});

使用Component构造器构造页面,必要细致:

  1. 组件的属性可以用于接收页面的参数,如访问页面/pages/index/index?paramA=123&paramB=xyz,假如声明有属性(properties)paramAparamB新疆人事考试信息网,则它们会被赋值为123xyz。(可参考官方代码示例)
  2. 页面的生命周期方法(即on开头的方法,如上面的onLoad),应写在methods定义段中。

如许,你就能兴奋地在代码里面使用computed计算属性啦~

更多的,也可以参考本人的wxapp-typescript-demo中的log page,后续也会持续更新方便好用的能力 demo。

参考

  • Component构造器
  • behaviors

结束语


小程序提供的能力其实挺多的,但是许多时候因为文档许多、查找不方便,会导致我们有些很好用的功能没有发现,然后苦逼地一边吐槽一边悲壮地撸代码。
官方提供的目前只有computed,大家可以看看,是不是还可以做watch之类的能力呢?

查看Github有更多内容噢:https://github3564/godbasin

手机网站建设