zoukankan      html  css  js  c++  java
  • 快应用---注意点

    一、计算属性

            我们可以将同一函数定义为一个方法而不是一个计算属性,两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于他们的依赖进行缓存的,只要相关依赖发生改变时

    他们才会重新求值。这就意味着多次访问计算属性会立即返回之前的计算结果,而不必再次执行函数;

            相比之下,每当触发重新渲染时,调用方法将总会再次执行函数;

            我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性A,他需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于A。如果没有缓存,我们将不可避免额多次

    执行A的getter!如果你不希望有缓存,请用方法来替代;

    二、async

           使用async语法开发业务,代码以更整洁优雅的方式替代Callback 与 Promise

           1)如何配置async语法的babel编译支持

              当前应用平台本身仅支持ES5的语法,所以要支持他必须借助bebel之类的语法分析转换工具,同时要在代码中注入polyfill;

    那么开发者可以把@babel/runtime/regenerator注入到app.ux中,因为这个文件是所有页面脚本执行前都会执行的;

                //脚本:regenerator.js

               //注意:仅用于注入类库函数,不允许存储页面组件等数据

               const injectRef = Object.getPrototypeOf(global)||global;

               //注入regeneratorRuntime

               injectRef.regeneratorRuntime = require('@babel/runtime/regenerator');

               //如果使用hap-toolkit版本低于0.0.38(babel版本低于7),则按下面的方式引入 injectRef.regeneratorRuntime = require('babel-runtime/regenerator')

       在app.ux中引入这个脚本文件,就可以注入对async的支持(在项目编译后的build/app.js中搜索regeneratorRuntime即可发现注入成功);

      

            2)使用async ,await语法

                 onReady(){

                        this.testAsync();

                  }

                  testAsync(){

                         async function bar(){

                               return 'bar';

                          }

                          async function foo(){

                                 const ret1 = await bar();

                                 console.info('PAGE:foo:',ret1);

                          }

                         foo();

                   }

               3)在native接口中使用async------ 该方法仅支持platformVersion 1010+ 的异步接口

                    例如:

                    <script>

                           import fetch from '@system.fetch'

                           export default {

                                     async onReady(){

                                            try {

                                                  const response = await fetch.fetch({ url:''});

                                                  console.info('fetch成功code:', response.data.code);

                                                  console.info('fetch成功data:', response.data.data);

                                                  console.info('fetch成功headers:', JSON.stringify(response.data.headers));   

                                             }catch(err){

                                                   console.info('fetch失败code':err.code);

                                                   console.info('fetch失败data':err.data);

                                              }

                                     }

                            }

                    </script>

               3) Native接口返回callback

                    对于platformVersion低于1010的设备,以及非异步回调的方法,要想以async的方式使用native接口,需要对native接口进行改造,从返回callback方式到返回Promise方式,同时定义async方法返回。

                  例如:

                      import nativeFetch from '@system.fetch';

                      const natives = {

                           async fetch(options){

                                  const p1 = new Promise((resolve,reject)=>{

                                        options.success = function(data,code){

                                              resolve({ data, code })

                                        }

                                        options.fail = function(data,code){

                                               reject( {data,code} );

                                        }

                                        nativeFetch.fetch(options);

                                  })

                                  return p1

                           }

                      }

                      export { natives }

                   改造fetch接口,暴露natives变量到app对象上;

                   调用async版本的fetch接口的示例代码如下:

                   <script>

                         export default {

                               onReady(){

                                     this.testMockNatives()

                               }

                               async testMockNatives(){

                                       const { natives }  =  this.$app.$def;

                                       const ret1 = await natives.fetch({

                                              url:''

                                        })

                                        console.info('fetch结果:',JSON.stringify(ret1));

                               }

                         }

                   </script>

  • 相关阅读:
    Vue技巧小结(持续更新)
    Vue+Webpack常见问题(持续更新)
    webpack模块定义和使用的模式
    vue-cli笔记
    新浪微博怎么知道你没登录
    jquery页面水印插件,支持多行水印、行错开
    浏览器并发连接数(未完成)
    HTTP1.0 、1.1
    你总说时间很少
    看小说的这些年
  • 原文地址:https://www.cnblogs.com/sunqq/p/11212404.html
Copyright © 2011-2022 走看看