鸿蒙系统中JavaScript框架的案例分析

这篇文章给大家分享的是有关鸿蒙系统中JavaScript框架的案例分析的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

我在前文中曾经介绍过鸿蒙的JavaScript框架,这几天终于把JS仓库编译通过了,期间踩了不少坑,也给鸿蒙贡献了几个公关。今天我们就来逐行分析鸿蒙系统中的JS框架。

文中的所有代码都基于鸿蒙的当前最新版(版本为677 ed06提交日期为2020-09-10)。

鸿蒙系统使用JavaScript开发GUI是一种类似于微信小程序,轻应用的模式。而这个MVVM模式中,V其实是由c++来承担的.JavaScript代码只是其中的ViewModel层。

鸿蒙JS框架是零依赖的,只在开发打包过程中使用到了一些npm包。打包完之的代码是没有依赖任何npm包的。我们先看一下使用鸿蒙JS框架写出来的JS代码到底长什么样。

出口默认{
　　数据(){返回{数:1};
　　},
　　增加(){
　　+ + this.count;
　　},
　　减少(){
　　——this.count;
　　},
　　}复制代码

如果我不告诉你这是鸿蒙,你甚至会以为它是vue或小程序。如果单独把JS拿出来使用(脱离鸿蒙系统),代码是这样:

 const vm=new ViewModel ({
　　数据(){返回{数:1};
　　},
　　增加(){
　　+ + this.count;
　　},
　　减少(){
　　——this.count;
　　},
　　});console.log (vm.count);//1 vm.increase (); console.log (vm.count);//2 vm.decrease (); console.log (vm.count);//1复制代码

仓库中的所有JS代码实现了一个<强>响应式系统强,充当了MVVM中的ViewModel。

下面我们逐行分析。

src目录中一共有4个目录,总计8个文件。其中一个是单元测试。还有1个性能分析。再除去2个索引。js文件,有用的文件一共是4个。也是本文分析的重点。

从& # 39;进口{ViewModel}。/核心# 39;;出口默认视图模型;复制代码

出口{观察者}& # 39;。/观察者# 39;;出口{主题}& # 39;。/话题# 39;;复制代码

出口const ObserverStack={栈:[],
　　推动(观察者){this.stack.push(观察者);
　　},
　　pop(){返回this.stack.pop ();
　　},
　　前(){返回this.stack [this.stack。长度- 1];
　　}
　　};复制代码

出口const defineProp=(目标、关键值)=比;{Object.defineProperty(目标、关键,{可列举的:假的,价值});
　　};复制代码
鸿蒙系统中JavaScript框架的案例分析