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

约定不等于承诺〃 2024-04-24 14:43 119阅读 0赞

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

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

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

![d431ee8e16d74e779cadc00d9d4ebe06.png][]

（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.在任意的页面之中使用封装的函数 ####

![79c6b76638324e3887a1c77689636101.png][]![136bb09bfeb94c808d4e082f66cc64dc.png][]

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.总结 ####

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

[d431ee8e16d74e779cadc00d9d4ebe06.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/a634e09bc0d647adb3c37cb9e671cc4d.png
[79c6b76638324e3887a1c77689636101.png]: https://img-blog.csdnimg.cn/79c6b76638324e3887a1c77689636101.png
[136bb09bfeb94c808d4e082f66cc64dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/ae1436d3b6f3431888a4552a11b3601b.png
[c64cacee3d8a4186b9bb0a1169e555fe.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/bed72f4476eb49c38604ac350a42cf47.jpeg