鸿蒙系统中的 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 相关文章推荐
javascript淡入淡出效果的实现思路
Mar 31 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 Javascript
JS数据类型判断的几种常用方法
Jul 07 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
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
OpenCV 模板匹配
2019/07/10 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
数据库什么时候应该被重组
2012/11/02 面试题
医学生实习自荐信
2013/10/01 职场文书
电大学习个人自我评价范文
2013/10/04 职场文书
实习评语大全
2014/04/26 职场文书
2014年工商所工作总结
2014/12/09 职场文书
会议欢迎词范文
2015/01/27 职场文书
公司酒会主持词
2015/07/02 职场文书
重阳节简报
2015/07/20 职场文书
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript