• 简书网微信公众号二维码
您当前的位置: 首页 > 知识百科 > 微信小程序js脚本中的函数怎么优化?

微信小程序js脚本中的函数怎么优化?

时间:2023-07-01 14:05 阅读数:161 人阅读 分类:知识百科

  微信小程序js脚本中的函数怎么优化?在开发小程序时我们会使用回调函数,可随着回调函数的增加,以及异步处理的复杂*导致小程序代码越来越来难懂,那微信小程序js脚本中的函数怎么优化才能解决异步回调函数的可读*呢?据了解,使用Promise可以优化js函数处理的需求,具体情况如下:

  1、小程序传统的回调处理

  例如我们生成一个小程序,里面的app.js里面就自动带有一个getUserInfo的函数,这个是使用传统模式的回调函数。

  这种是通过 传入一个cb的回调函数进行处理,使用的时候为了安全*,还需要进一步判断其类型是否为函数:typeof cb == "function",这种处理还是相对比较易懂。

  但是,如果我们一段代码中,异步操作太多,又要保证这些异步操作是有顺序的执行,那我们的代码就看起来非常糟糕,就像这样的极端情况:

  如果我们改用Promise来处理,那么进行一层简单的包装即可。

  2、Promise的使用介绍

  Promise的使用相对比较简单,我们入门可以参考下相关介绍:阮一峰 promise入门,如果我们在JS函数里面引入它的话,那么需要包含对应的javascript组件

  我们可以在Github上下载对应的组件JS,引入小程序项目即可:es6-promise

  我们为了方便,在项目中创建一个辅助类utils.js,然后在其中引入Promise的脚本,如下所示。

  const Promise = require('./Promise')

  然后在APP.js里面,我们修改原来的getUserInfo函数如下

  我们看到,所有原先的函数,我们如果需要引入Promise处理的话,增加一层的函数体即可。

  这样我们调用的时候,使用then函数进行处理即可,类似下面的代码。

  getUserInfo().then(user => this.setData({userInfo:user})).catch(console.log);

  引入这个Promise后,我们为了进一步实现代码的重用,可以把一些常见的函数放到utils.js来,这样可以实现代码的重用。

  然后发布对应的接口,以供其他模块使用即可。

  封装好这些公用方法后,我们在页面里面进行调用即可,调用的代码如下所示(演示代码从地址里面获取数据,并绑定到界面上)

  而如果我们使用原来的函数,那么实现代码如下所示。

  如果对于复杂流程的函数处理,使用Promise来处理,会显得更加简洁易读。

  上面就是小编所介绍的微信小程序js脚本中的函数怎么优化?,现在你知道怎么实现微信小程序js脚本中的函数优化了吧,Promise优化微信小程序js脚本函数让小程序代码简单易懂。更多关于微信小程序内容请关注微小乔。

  

  微信小程序js调用函数,微信小程序data数据操作和函数调用

  微信小程序如何调用js文件的方法?

  微信小程序调用工具js文件中的函数