网站备案流程图片快速搭建网站前端

当前位置： 首页 > news >正文

网站备案流程图片,快速搭建网站前端,wordpress充值会员,重要新闻事件目录 1、概述 2、StorageProp 2.1、观察变化和行为表现
3、StorageLink 3.1、观察变化和行为表现 4、从应用逻辑使用AppStorage和LocalStorage 5、从UI内部使用AppStorage和LocalStorage 6、不建议借助StorageLink的双向同步机制实现事件通知 6.1、推荐的事件通知方式…目录 1、概述 2、StorageProp 2.1、观察变化和行为表现  3、StorageLink 3.1、观察变化和行为表现 4、从应用逻辑使用AppStorage和LocalStorage 5、从UI内部使用AppStorage和LocalStorage 6、不建议借助StorageLink的双向同步机制实现事件通知 6.1、推荐的事件通知方式 AppStorage是应用全局的UI状态存储是和应用的进程绑定的由UI框架在应用程序启动时创建为应用程序UI状态属性提供中央存储。和AppStorage不同的是LocalStorage是页面级的通常应用于页面内的数据共享。而AppStorage是应用级的全局状态共享还相当于整个应用的“中枢”持久化数据PersistentStorage和环境变量Environment都是通过和AppStorage中转才可以和UI交互。 本文介绍AppStorage使用场景和相关的装饰器StorageProp和StorageLink。 1、概述 AppStorage是在应用启动的时候会被创建的单例。它的目的是为了提供应用状态数据的中心存储这些状态数据在应用级别都是可访问的。AppStorage将在应用运行过程保留其属性。属性通过唯一的键字符串值访问。 AppStorage可以和UI组件同步且可以在应用业务逻辑中被访问。 AppStorage中的属性可以被双向同步数据可以是存在于本地或远程设备上并具有不同的功能比如数据持久化详见PersistentStorage。这些数据是通过业务逻辑中实现与UI解耦如果希望这些数据在UI中使用需要用到StorageProp和StorageLink。 2、StorageProp 在上文中已经提到如果要建立AppStorage和自定义组件的联系需要使用StorageProp和StorageLink装饰器。使用StorageProp(key)/StorageLink(key)装饰组件内的变量key标识了AppStorage的属性。 当自定义组件初始化的时候StorageProp(key)/StorageLink(key)装饰的变量会通过给定的key绑定在AppStorage对应的属性完成初始化。本地初始化是必要的因为无法保证AppStorage一定存在给定的key这取决于应用逻辑是否在组件初始化之前在AppStorage实例中存入对应的属性。 StorageProp(key)是和AppStorage中key对应的属性建立单向数据同步我们允许本地改变的发生但是对于StorageProp本地的修改永远不会同步回AppStorage中相反如果AppStorage给定key的属性发生改变改变会被同步给StorageProp并覆盖掉本地的修改。 从AppStorage的对应属性到组件的状态变量。 组件本地的修改是允许的但是AppStorage中给定的属性一旦发生变化将覆盖本地的修改。 被装饰的变量的初始值必须指定如果AppStorage实例中不存在属性则作为初始化默认值并存入AppStorage中。 StorageProp不支持从父节点初始化只能AppStorage中key对应的属性初始化如果没有对应key的话将使用本地默认值初始化 2.1、观察变化和行为表现  观察变化 当装饰的数据类型为boolean、string、number类型时可以观察到数值的变化。当装饰的数据类型为class或者Object时可以观察到赋值和属性赋值的变化即Object.keys(observedObject)返回的所有属性。当装饰的对象是array时可以观察到数组添加、删除、更新数组单元的变化。 框架行为 当StorageProp(key)装饰的数值改变被观察到时修改不会被同步回AppStorage对应属性键值key的属性中。当前StorageProp(key)单向绑定的数据会被修改即仅限于当前组件的私有成员变量改变其他的绑定该key的数据不会同步改变。当StorageProp(key)装饰的数据本身是状态变量它的改变虽然不会同步回AppStorage中但是会引起所属的自定义组件的重新渲染。当AppStorage中key对应的属性发生改变时会同步给所有StorageProp(key)装饰的数据StorageProp(key)本地的修改将被覆盖。 3、StorageLink StorageLink(key)是和AppStorage中key对应的属性建立双向数据同步 本地修改发生该修改会被写回AppStorage中AppStorage中的修改发生后该修改会被同步到所有绑定AppStorage对应key的属性上包括单向StorageProp和通过Prop创建的单向绑定变量、双向StorageLink和通过Link创建的双向绑定变量变量和其他实例比如PersistentStorage。 StorageLink装饰的变量是双向同步的从AppStorage的对应属性到自定义组件从自定义组件到AppStorage对应属性。StorageLink被装饰变量的初始值必须指定如果AppStorage实例中不存在属性则作为初始化默认值并存入AppStorage中。 3.1、观察变化和行为表现 观察变化 当装饰的数据类型为boolean、string、number类型时可以观察到数值的变化。当装饰的数据类型为class或者Object时可以观察到赋值和属性赋值的变化即Object.keys(observedObject)返回的所有属性。当装饰的对象是array时可以观察到数组添加、删除、更新数组单元的变化。 框架行为 当StorageLink(key)装饰的数值改变被观察到时修改将被同步回AppStorage对应属性键值key的属性中。AppStorage中属性键值key对应的数据一旦改变属性键值key绑定的所有的数据包括双向StorageLink和单向StorageProp都将同步修改当StorageLink(key)装饰的数据本身是状态变量它的改变不仅仅会同步回AppStorage中还会引起所属的自定义组件的重新渲染。 4、从应用逻辑使用AppStorage和LocalStorage AppStorage是单例它的所有API都是静态的使用方法类似于LocalStorage对应的非静态方法。 AppStorage.SetOrCreate(PropA, 47);let storage: LocalStorage new LocalStorage({ PropA: 17 }); let propA: number AppStorage.Get(PropA) // propA in AppStorage 47, propA in LocalStorage 17 var link1: SubscribedAbstractPropertynumber AppStorage.Link(PropA); // link1.get() 47 var link2: SubscribedAbstractPropertynumber AppStorage.Link(PropA); // link2.get() 47 var prop: SubscribedAbstractPropertynumber AppStorage.Prop(PropA); // prop.get() 47link1.set(48); // two-way sync: link1.get() link2.get() prop.get() 48 prop.set(1); // one-way sync: prop.get() 1; but link1.get() link2.get() 48 link1.set(49); // two-way sync: link1.get() link2.get() prop.get() 49storage.get(PropA) // 17 storage.set(PropA, 101); storage.get(PropA) // 101AppStorage.Get(PropA) // 49 link1.get() // 49 link2.get() // 49 prop.get() // 49 5、从UI内部使用AppStorage和LocalStorage StorageLink变量装饰器与AppStorage配合使用正如LocalStorageLink与LocalStorage配合使用一样。此装饰器使用AppStorage中的属性创建双向数据同步。 AppStorage.SetOrCreate(PropA, 47); let appStorage new LocalStorage({ PropA: 48 });/*** 从UI内部使用AppStorage和LocalStorage/ Entry(appStorage) Component struct AppStorageDemo1Page {StorageLink(PropA) storeLink: number 1;LocalStorageLink(PropA) localStoreLink: number 1;build() {Column({ space: 20 }) {Text(From AppStorage \({this.storeLink}).onClick(() this.storeLink 1)Text(From LocalStorage \){this.localStoreLink}).onClick(() {this.localStoreLink 1;})}.margin({top: 48})} } 运行结果如下 6、不建议借助StorageLink的双向同步机制实现事件通知 不建议开发者使用StorageLink和AppStorage的双向同步的机制来实现事件通知AppStorage是和UI相关的数据存储改变会带来UI的刷新相对于一般的事件通知UI刷新的成本较大。 TapImage中的点击事件会触发AppStorage中tapIndex对应属性的改变。因为StorageLink是双向同步修改会同步回AppStorage中所以所有绑定AppStorage的tapIndex自定义组件都会被通知UI刷新。UI刷新带来的成本是巨大的因此不建议开发者使用此方式来实现基本的事件通知功能。 class ViewData {title: string;uri: Resource;color: Color Color.Black;constructor(title: string, uri: Resource) {this.title title;this.uri uri} }/** 事件通知的反例* 不建议借助StorageLink的双向同步机制实现事件通知/ Entry Component struct AppStorageDemo2Page {dataList: ArrayViewData [new ViewData(flower, \(r(app.media.icon)),new ViewData(OMG, \)r(app.media.icon)),new ViewData(OMG, $r(app.media.icon))]scroller: Scroller new Scroller()build() {Column() {Grid(this.scroller) {ForEach(this.dataList, (item: ViewData, index?: number) {GridItem() {TapImage({uri: item.uri,index: index})}.aspectRatio(1)}, (item: ViewData, index?: number) {return JSON.stringify(item) index;})}.columnsTemplate(1fr 1fr)}} }/** TapImage中的点击事件会触发AppStorage中tapIndex对应属性的改变。* 因为StorageLink是双向同步修改会同步回AppStorage中所以* 所有绑定AppStorage的tapIndex自定义组件都会被通知UI刷新。* UI刷新带来的成本是巨大的因此不建议开发者使用此方式来实现基本的事件通知功能。/ Component export struct TapImage {StorageLink(tapIndex) Watch(onTapIndexChange) tapIndex: number -1;State tapColor: Color Color.Black;private index: number 0;private uri: Resource {id: 0,type: 0,moduleName: ,bundleName: };// 判断是否被选中onTapIndexChange() {if (this.tapIndex 0 this.index this.tapIndex) {console.info(tapindex: \({this.tapIndex}, index: \){this.index}, red)this.tapColor Color.Red;} else {console.info(tapindex: \({this.tapIndex}, index: \){this.index}, black)this.tapColor Color.Black;}}build() {Column() {Image(this.uri).objectFit(ImageFit.Cover).onClick(() {this.tapIndex this.index;}).border({ width: 5, style: BorderStyle.Dotted, color: this.tapColor })}} } 6.1、推荐的事件通知方式 可以使用emit订阅某个事件并接收事件回调可以减少开销增强代码的可读性。 import emitter from ohos.events.emitter;let Demo3NextID: number 0;class Demo2ViewData {title: string;uri: Resource;color: Color Color.Black;id: number;constructor(title: string, uri: Resource) {this.title title;this.uri urithis.id Demo3NextID;} }/** 基于事件的方式触发UI更新(推荐)*/ Entry Component struct AppStorageDemo3Page {dataList: ArrayDemo2ViewData [new Demo2ViewData(flower, \(r(app.media.icon)),new Demo2ViewData(OMG, \)r(app.media.icon)),new Demo2ViewData(OMG, \(r(app.media.icon))]scroller: Scroller new Scroller()private preIndex: number -1build() {Column() {Grid(this.scroller) {ForEach(this.dataList, (item: Demo2ViewData) {GridItem() {Demo2TapImage({uri: item.uri,index: item.id})}.aspectRatio(1).onClick(() {if (this.preIndex item.id) {return}let innerEvent: emitter.InnerEvent { eventId: item.id }// 选中态黑变红let eventData: emitter.EventData {data: {colorTag: 1}}emitter.emit(innerEvent, eventData)if (this.preIndex ! -1) {console.info(preIndex: \){this.preIndex}, index: ${item.id}, black)let innerEvent: emitter.InnerEvent { eventId: this.preIndex }// 取消选中态红变黑let eventData: emitter.EventData {data: {colorTag: 0}}emitter.emit(innerEvent, eventData)}this.preIndex item.id})}, (item: Demo2ViewData) JSON.stringify(item))}.columnsTemplate(1fr 1fr)}} }Componentstruct Demo2TapImage {State tapColor: Color Color.Black;private index: number 0;private uri: Resource {id: 0,type: 0,moduleName: ,bundleName: };onTapIndexChange(colorTag: emitter.EventData) {if (colorTag.data ! null) {this.tapColor colorTag.data.colorTag ? Color.Red : Color.Black}}aboutToAppear() {//定义事件IDlet innerEvent: emitter.InnerEvent { eventId: this.index }//注册事件emitter.on(innerEvent, data {this.onTapIndexChange(data)})}build() {Column() {Image(this.uri).objectFit(ImageFit.Cover).border({ width: 5, style: BorderStyle.Dotted, color: this.tapColor })}} } 运行结果如下 当用户点击其中一个图标时会展示不同颜色的边框同时取消上一个选择的图标的红色边框 该推荐demo使用基于事件的通知方式触发事件通知减少UI刷新通知的方式所带来的性能开销。