鸿蒙系统中的 JS 开发框架


Posted in Javascript onSeptember 18, 2020

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

源码托管在国内知名开源平台码云上,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)

鸿蒙系统中的 JS 开发框架

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

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

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

鸿蒙系统中的 JS 开发框架

在 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 代码。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Firefox window.close()的使用注意事项
Apr 11 Javascript
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
jQuery操作select下拉框的text值和value值的方法
May 31 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
怎么引入(调用)一个JS文件
May 26 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
Vue框架之goods组件开发详解
Jan 25 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 #Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 #Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 #Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 #Javascript
vue项目实现多语言切换的思路
Sep 17 #Javascript
vue实现放大镜效果
Sep 17 #Javascript
JavaScript封装单向链表的示例代码
Sep 17 #Javascript
You might like
script标签属性type与language使用选择
2012/12/02 Javascript
表格单元格交错着色实现思路及代码
2013/04/01 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
轮播图组件js代码
2016/08/08 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
python爬虫 正则表达式解析
2019/09/28 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
python 实现表情识别
2020/11/21 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
this关键字的含义
2015/04/08 面试题
邀请书格式范文
2015/02/02 职场文书
校运会宣传稿大全
2015/07/23 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
MySQL8.0的WITH查询详情
2021/08/30 MySQL
python基础之类方法和静态方法
2021/10/24 Python