微信小程序——封装公共函数的方法

 封装函数就是将重复使用多次的函数进行“包装”让其可以通过一个固定的写法,被其他的页面所引用,其主要的作用就是防止代码的冗余的情况发生,在写代码的过程中会出现一个代码片段被多个页面多次引用,从而造成了代码的重复率高的问题,那么就需要用到封装公共函数了........

封装函数不需要wxss、wxml、.json文件只需要一个ts或者js文件即可(这里使用的是ts)

1.单独建立一个ts文件在utils之中

 (ts相比于js会存在更多的规范问题,当然这也致使ts更好理解和更加利与维护,但是整体上相差不多在此处。)

2.开始在创建的ts或js文件中写你需要的逻辑代码(这里提醒一点,封装的函数应该要具备通性,不能倾向于某一个页面的使用,根据传入的值的不用可以做到不同的效果,满足多方面需求)

//formObj需要做改变的缓存的名字
//needObjName需要在formObj缓存中加入或改变的对象
//value需要在needObjName中变化或加入的值
function mySetStorage(formObj: string, needObjName: string, value: any) {
  if (wx.getStorageSync(formObj) == null || wx.getStorageSync(formObj) == undefined || wx.getStorageSync(formObj) == "") {
    let obj = {}
    obj[needObjName] = value
    wx.setStorageSync(formObj, obj);
  } else {
    let arr = wx.getStorageSync(formObj);
    arr[needObjName] = value;
    wx.setStorageSync(formObj, arr);
  }
}
// 将下面的变量暴露出来
// 只有暴露出来的变量外部才能引用
// model.exports一般是放在ts文件的最后面, 以防止变量未定义时, 就向外面暴露
module.exports = {
  //变量名   : 将方法赋值到变量上面去使用
  mySetStorage: mySetStorage
}

此函数的作用是改变缓存里面对象的值的方法(要是没有此对象就添加此对象)

  1. 首先拿到其他页面传递的缓存名字,需要在该缓存名中存入的对象以及向此对象中要传递的值。
  2. 在本地缓存中先查看是否存在此缓存,若不存在则创建此缓存,并且将对象名和值放进去。
  3. 若存在此缓存,则直接将测缓存拿出来,然后将对象名直接拿上去,在ts中使用添加对象的方法时,不管之前也没有此对象名,都会存上,要是之前存在此对象名,则会被直接覆盖成新的值。
  4. 此处有一点提醒,由于needObjName是需要拿到的一个string类型的名字,所以在添加时要用【】包括,来确保拿到了传递进来的名字,不能使用.needObjName,这样会致使添加的对象名字就是needObjName,而不是你想添加的名字。

3.在任意的页面之中使用封装的函数

var utils = require('../../../../utils/addCache');      
utils.mySetStorage('widget-classSchedule', 'dailySchedule', this.data.classInfo)
utils.mySetStorage('widget-classSchedule', 'time', this.data.time)

此处先使用一个utils来承接住封装的函数,然后通过utils来使用封装函数,此时的utils可以直接理解为封装函数中抛出的部分,我们可以直接通过utils来调用抛出的函数方法

4.总结

总体来说此方法并不难,各位可以直接尝试一下封装属于自己的公共函数,做出属于自己的工具类,期待和各位一起进步呀!

猜你喜欢

转载自blog.csdn.net/wct040923/article/details/129817680