鸿蒙系统中的 JS 开发框架

今天鸿蒙终于发布了,开发者们也终于“沸腾”了。

源码托管在国内知名开源平台码云上,https://gitee.com/openharmony

我也第一时间下载了源码,研究了一个晚上,顺带写了一个 hello world 程序,还顺手给鸿蒙文档提了 2 个 PR。

当然我最感兴趣的就是鸿蒙的 JS 框架 ace_lite_jsfwk,从名字中可以看出来这是一个非常轻量级的框架,官方介绍说是“轻量级 JS 核心开发框架”。

当我看完源码后发现它确实轻。其核心代码只有 5 个 js 文件,大概也就 300-400 行代码吧。(没有单元测试)

  • runtime-core\src\core\index.js

  • runtime-core\src\observer\observer.js

  • runtime-core\src\observer\subject.js

  • runtime-core\src\observer\utils.js

  • runtime-core\src\profiler\index.js

从名字可以看出来,这些代码实现了一个观察者模式。也就是说,它实现了一个非常轻量级的 MVVM 模式。通过使用和 vue2 相似的属性劫持技术实现了响应式系统。这个应该是目前培训班的“三大自己实现”之一了吧。(自己实现 Promise,自己实现 vue,自己实现 react)

utils 里面定义了一个 Observer 栈,存放了观察者。subject 定义了被观察者。当我们观察某个对象时,也就是劫持这个对象属性的操作,还包括一些数组函数,比如 push、pop 等。这个文件应该是代码最多的,160 行。observer 的代码就更简单了,五六十行。

而当我们开发的时候,通过 Toolkit 将开发者编写的 HML、CSS 和 JS 文件编译打包成 JS Bundle,然后再将 JS Bundle 解析运行成C++ native UI 的 View 组件进行渲染。

“通过支持三方开发者使用声明式的 API 进行应用开发,以数据驱动视图变化,避免了大量的视图操作,大大降低了应用开发难度,提升开发者开发体验”。基本上就是一个小程序式的开发体验。

在 src\core\base\framework_min_js.h 文件中,这段编译好的 js 被编译到了 runtime 里面。编译完的 js 文件不到 3K,确实够轻量。

js runtime 没有使用 V8,也没有使用 jscore。而是选择了 JerryScript。JerryScript 是用于物联网的超轻量 JavaScript 引擎。它能够在内存少于 64 KB 的设备上执行 ECMAScript 5.1 源代码。这也是为什么在文档中说鸿蒙 JS 框架支持 ECMAScript 5.1 的原因。

从整体看这个 js 框架大概使用了 96% 的 C/C++ 代码,1.8% 的 JS 代码。在 htm 文件中写的组件会被编译为原生组件。而 app_style_manager.cpp 和同级的七八个文件则用来解析 css,最终生成原生布局。

虽然在 SDK 中有几个 weex 包,也发现了 react 的影子。但是在 C/C++ 代码中并没有看到 yoga 相关的内容(全局搜索没发现)。而 SDK 中的那些包仅仅是做 loader 用的,大概是为了在 webpack 打包时解析 htm 组件用的。将 htm 的 template 编译为 js 代码。

整体而言,比我预想的要好一些。

*转载原博客原址:https://blog.csdn.net/vCa54Lu0KV27w8ZZBd/article/details/108525325*

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/565848.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【OpenCV 例程200篇】73. 二维连续傅里叶变换

【OpenCV 例程200篇】73. 二维连续傅里叶变换 欢迎关注 『OpenCV 例程200篇』 系列,持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列,持续更新中 2.1 二维连续傅里叶变换 设 f(t,z)f(t,z)f(t,z) 是二维连续变量 t,zt, zt,z 的连续函数&#xff…

Vue 购物车案例

用Vue实现购物车。 程序详解: 页面要显示商品的基本信息(编号,名称,单价,购买数量,总价等) 1.增加和减少商品数量 2.商品金额会随数量变化 3.会自动计算总金额 4.对某一类商品进行移除操作 5.还…

Python入门基础篇(一)列表,详细实用,简单易懂!!!!

请仔细阅读哦!!! 文章目录前言一、Python列表的创建与删除1.赋值运算符直接创建列表2.创建空列表3.创建数值列表4.删除列表二、访问列表中的元素三、遍历列表中的元素1.直接使用for循环实现2.使用for循环和enumerate()函数实现四、列表元素的…

【OpenCV 例程200篇】74. 图像的抗混叠

【OpenCV 例程200篇】74. 图像的抗混叠 欢迎关注 『OpenCV 例程200篇』 系列,持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列,持续更新中 2.2 图像的混叠和重取样 由于无法对一个函数无限地取样,因此在数字图像中总是会出现混叠。 …

图片滚动显示

用H5实现图片滚动显示像跑马灯一样的效果。 程序详解&#xff1a; 图片滚动的开始和停止 鼠标的放上和移走事件 无限循环 每次滚动速度的快慢 效果演示&#xff08;图片自右向左滚动&#xff09; 代码演示 <!DOCTYPE html> <html><head><meta charset&…

【OpenCV 例程200篇】75. Numpy 实现图像傅里叶变换

【OpenCV 例程200篇】75. Numpy 实现图像傅里叶变换 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 2.3 二维离散傅里叶变换&#xff08;DFT&#xff09; 对于二维图像处理&#xff0c;通常使…

什么是大数据,大数据到底应该如何学?

文章目录 一、食用须知二、大数据的基本概念1. 什么是大数据2. 数据是如何采集的3. 大数据真的能预测吗 三、什么是大数据开发四、什么是大数据分析五、应如何学习大数据 一、食用须知 再更一篇技术杂谈类的文章。。。粉丝甲&#xff1a;所以这就是你拖更系列文章和视频的理由…

IDEA Servlet页面报错

IDEA和MyEclipise使用方法不同&#xff0c;在IDEA里新建Servlet的时候会报错。 错误如图所示 这是因为idea中没有导入servlet-api包造成的 解决办法如下&#xff1a; file –> project Structure 点击Libraries &#xff0c;然后绿色的号&#xff0c;找到自己tomact的部…

【OpenCV 例程200篇】76. OpenCV 实现图像傅里叶变换

【OpenCV 例程200篇】76. OpenCV 实现图像傅里叶变换 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 2.3 二维离散傅里叶变换&#xff08;DFT&#xff09; 对于二维图像处理&#xff0c;通常使…

Python入门基础篇(二)元组,更适合新手哦!!!

文章目录前言一、Python元组的创建与删除1.元组的创建2.元组的删除二、元组的访问与修改1.访问元组元素2.修改元组元素总结前言 元组&#xff08;tuple&#xff09;是Python中另一种重要的序列结构&#xff0c;它与列表&#xff08;list&#xff09;有着许多类似之处。但是元组…

IDEA 载入jQuery的方法

使用IDEA开发java web时&#xff0c;页面写入了jquery代码&#xff0c;但是可能因为未能添加该模块&#xff0c;所以并不能起到作用。 那么如何添加Jquery模块呢&#xff1f;&#xff1f;&#xff1f; 最简单的添加方法 1.在jsp中写入&#xff1a; <script src"htt…

【OpenCV 例程200篇】77. OpenCV 实现快速傅里叶变换

【OpenCV 完整例程】77. OpenCV 实现快速傅里叶变换 欢迎关注 『OpenCV 完整例程 100 篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 傅里叶变换在理论上需要 O(MN)2O(MN)^2O(MN)2 次运算&#xff0c;非常耗时&#xff1…

python入门基础篇(三)序列切片,列表、元组推导式

前面介绍了列表与元组&#xff0c;在这里补充一下关于列表、元组推导式&#xff0c;以及序列的切片。切片不仅仅用于列表元组&#xff0c;还可以用于字符串等等 文章目录一、序列切片二、列表推导式1.根据列表生成指定需求的列表2.生成指定范围的数值列表3.从列表中选择符合条件…

Vue商品添加到购物车

用Vue实现把商品添加到购物车然后计算购物车里商品总金额。 功能分析&#xff1a; 1.商品添加到购物车 2.购物车显示商品的名称数量价格 3.计算购物车商品的总金额 4.删除购物车商品 效果演示 原始样式 添加商品 增加商品数量 下面向大家展示一下实现的过程。 代码演示 …

【OpenCV 例程200篇】78. 频率域图像滤波基础

【OpenCV 例程200篇】78. 频率域图像滤波基础 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 3. 频率域低通滤波器 图像变换是对图像信息进行变换&#xff0c;使能量保持但重新分配&#xff0…

H5 Canvas下雨特效

模仿下雨的特效&#xff0c;雨点从空中随机飘落。 这个特效使用了H5的新特性Canvas。 效果演示 代码展示 body代码 <!DOCTYPE html> <html lang"en" > <head> <meta charset"UTF-8"> <title>H5 Canvas下雨特效</titl…

用Notepad++来编写第一个HTML网页程序,你也可以!!!

学习任何一门编程语言&#xff0c;我们都要迈出第一步&#xff0c;运行第一个代码.我还记得当第一次运行成功python的"hello word"时的激动&#xff0c;还有html时的开心&#xff0c;反正收获蛮大的。哈哈&#xff0c;还是进入正题吧^o^/ 1.打开notepad&#xff0c;点…

【OpenCV 例程200篇】79. 频率域图像滤波的基本步骤

【OpenCV 例程200篇】79. 频率域图像滤波的基本步骤 欢迎关注 『OpenCV 例程200篇』 系列&#xff0c;持续更新中 欢迎关注 『Python小白的OpenCV学习课』 系列&#xff0c;持续更新中 3. 频率域低通滤波器 空间域滤波器和频率域滤波器实际上是相互对应的&#xff0c;有些空间…

别踩白块小游戏

用H5新特性实现别踩白块小游戏。 功能分析&#xff1a; 1.游戏开始按钮 2.每点中一个记一分 3.分数达到二十弹出鼓励弹框 4.点击错误则游戏结束 效果演示 看了效果有没有急迫的心情呢&#xff1f; 代码演示 body内容 <body><h2>本次得分</h2><h2 id…

鸿蒙不是安卓也不是Linux

1.1 鸿蒙不是Linux&#xff0c;也不是安卓 很多人会混淆鸿蒙跟Linux的关系。 先举个例子&#xff0c;大家很熟悉的Windows里面含有内核&#xff0c;也含有UI系统&#xff0c;含有桌面程序&#xff0c;普通人可以直接使用Windows。但是Linux仅仅是一个内核(它提供进程管理、文…