鸿蒙系统中的 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 原型模式实现OOP的再研究
Apr 09 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
原生js实现trigger方法示例代码
May 22 Javascript
js实现删除json中指定的元素
Sep 22 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
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
php判断当前操作系统类型
2015/10/28 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
js 深拷贝函数
2008/12/04 Javascript
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
JavaScript 布尔操作符解析  && || !
2012/08/10 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
JsRender for object语法简介
2014/10/31 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
Python多线程学习资料
2012/12/19 Python
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
使用Python对MySQL数据操作
2017/04/06 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
Python中无限循环需要什么条件
2020/05/27 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
大专生简历的自我评价
2013/11/26 职场文书
离婚协议书的范本
2015/01/27 职场文书
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL
sql字段解析器的实现示例
2021/06/23 SQL Server
我的收音机情缘
2022/04/05 无线电
德劲DE1105机评
2022/04/05 无线电