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>

  • 相关阅读:
    HDU 2955 Robberies(01背包)
    HDU 2602 Bone Collector(01背包)
    HUST 1352 Repetitions of Substrings(字符串)
    HUST 1358 Uiwurerirexb jeqvad(模拟解密)
    HUST 1404 Hamming Distance(字符串)
    HDU 4520 小Q系列故事――最佳裁判(STL)
    HDU 2058 The sum problem(枚举)
    【破解】修改程序版权、添加弹窗
    HDU 1407 测试你是否和LTC水平一样高(枚举)
    HDU 1050 Moving Tables(贪心)
  • 原文地址:https://www.cnblogs.com/sunqq/p/11212404.html
Copyright © 2011-2022 走看看