鸿蒙系统中的 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 相关文章推荐
js注意img图片的onerror事件的分析
Jan 01 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
js微信支付实现代码
Dec 22 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
jquery+css3实现会动的小圆圈效果
2016/01/27 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
Python的多态性实例分析
2015/07/07 Python
python生成IP段的方法
2015/07/07 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
Python生成词云的实现代码
2020/01/14 Python
Python列表解析操作实例总结
2020/02/26 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
大学毕业生自荐书怎么写?
2014/01/06 职场文书
活动总结怎么写
2014/04/28 职场文书
婚庆公司计划书
2014/09/15 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
学生检讨书如何写
2014/10/30 职场文书
调解书格式范本
2015/05/20 职场文书