鸿蒙系统中的 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 代码。

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈鸿蒙 JavaScript GUI 技术栈

    作者:doodlewind 链接:https://juejin.im/post/6872154561574862855 众所周知,刚刚开源的「鸿蒙 2.0」以 JavaScript 作为 IoT 应用开发的框架语言.这标志着继 SpaceX 上天之后,JavaScript 再一次蹭到了新闻联播级的热点.这么好的机会,只拿来阴阳怪气实在太可惜了.作为科普,这篇文章不会拿着放大镜找出代码中的槽点来吹毛求疵,而是希望通俗地讲清楚它所支持的 GUI 到底是怎么一回事.只要对计算机基础有个大概的了解,应该

  • 浅析鸿蒙开发app支持JavaScript?上手HelloWorld,体验究竟香不香

    第一步:下载开发工具 Tips:小插曲 前面原本还想考虑下是否要去看鸿蒙os源代码,读点东西,然后上某乎装一手,但是看到了它码云上的开源仓库,我-一个截图,你们自己品吧 我只想说作为一个前端coder,打扰了,太难了 正式篇 要体验它的app开发那第一步肯定是打开它的官网下载它的ide啦,点击鸿蒙官网,它的界面是这样的: 哈哈,还是挺漂亮的,有逼格,我都想模仿一波了. 接下来我们来下载它的开发工具看看,点击HUAWEI DevEco Studio进入下载页面: 乍一看还以为是idea,哈哈哈,后

  • 逐行分析鸿蒙系统的 JavaScript 框架(推荐)

    我在前文中曾经介绍过鸿蒙的 Javascript 框架,这几天终于把 JS 仓库编译通过了,期间踩了不少坑,也给鸿蒙贡献了几个 PR.今天我们就来逐行分析鸿蒙系统中的 JS 框架. 文中的所有代码都基于鸿蒙的当前最新版(版本为 677ed06,提交日期为 2020-09-10). 鸿蒙系统使用 JavaScript 开发 GUI 是一种类似于微信小程序.轻应用的模式.而这个 MVVM 模式中,V 其实是由 C++ 来承担的.JavaScript 代码只是其中的 ViewModel 层. 鸿蒙 J

  • 鸿蒙系统中的 JS 开发框架

    今天鸿蒙终于发布了,开发者们也终于"沸腾"了. 源码托管在国内知名开源平台码云上,https://gitee.com/openharmony 我也第一时间下载了源码,研究了一个晚上,顺带写了一个 hello world 程序,还顺手给鸿蒙文档提了 2 个 PR. 当然我最感兴趣的就是鸿蒙的 JS 框架 ace_lite_jsfwk,从名字中可以看出来这是一个非常轻量级的框架,官方介绍说是"轻量级 JS 核心开发框架". 当我看完源码后发现它确实轻.其核心代码只有 5

  • Centos7 中 Node.js安装简单方法

    最近,我一直对学习Node.js比较感兴趣.下面是小编给大家带来的Centos7 中 Node.js安装简单方法,在此记录一下,方便自己也方便大家,一起看看吧! 安装node.js 登陆Centos 终端登录 $ ssh root@192.168.0.23 IP可以是局域网内或者公网IP. 下载node 根据你的系统,在官网找到 https://nodejs.org/en/download/ 你需要下载的版本.比如我选择的 Linux Binaries (x86/x64) 64bit ,点击右键

  • windows系统下node.js环境配置与安装教程图文详解(详细版)

    windows系统下node.js环境配置与安装教程图文详解(详细版)

    国内目前关注最高,维护最好的一个关于nodejs的网站应该是http://www.cnodejs.org/ windows系统下简单nodejs环境配置. 第一步:下载安装文件 下载地址:官网https://nodejs.org/en/download/ 这里用的是 第二步:安装nodejs 下载完成之后,双击 node-v6.9.1-x64.msi,开始安装nodejs,默认是安装在C:\Program Files\nodejs下面 第三步:安装相关环境 打开C:\Program Files\

  • 解决linux系统中运行node进程却无法杀死进程的问题

    下面先给大家介绍下linux系统中运行node进程无法杀死进程,具体内容如下所示: events.js:72 throw er; // Unhandled 'error' event ^ Error: listen EADDRINUSE at errnoException (net.js:901:11) at Server._listen2 (net.js:1039:14) at listen (net.js:1061:10) at Server.listen (net.js:1127:5) a

  • Windows系统下Node.js安装以及环境配置的完美教程

    Windows系统下Node.js安装以及环境配置的完美教程

    目录 一.安装环境 二.安装Node.js步骤 三.前期准备 1.Node.js简介 2.下载Node.js 四.开始安装 五.环境配置 六.测试 本人安装路径实况 总结 一.安装环境 1.本机系统:Windows 10 Pro(64位) (楼主win7,完美通过) 2.Node.js:v6.9.2LTS(64位) (楼主版本2018-11-01下载的最新版本) 二.安装Node.js步骤 1.下载对应你系统的Node.js版本:https://nodejs.org/en/download/ 2

  • JavaScript 全面解析各种浏览器网页中的JS 执行顺序

    我们知道javaScript是一种解释型语言,他的执行是自上而下,但是各个浏览器对于至上而下的理解是有细微差别的,而代码的上下游也就是程序流又对于程序正确至关重要,所以我觉得有必要深入理解多个js块儿的执行顺序. 首先得知道有多少方法能把javaScript加入到页面中呢?常见下述的前2种,其实还有更多. 1.页面中直接引入外部js文件:<script src="my.js"></script> 2.页面中直接写如js片段<script>alert(

  • VB的32位程序在64位系统中出现文件和注册表自动转向的解决方法

    通常用VB 写的程序在32位系统上可以正常的运行,但到了64位系统中虽然可以运行但是无法修改OEM信息.经过查找原因可以发现,当我们在访问文件夹"SYSTEM32"的时候系统会自动转向到文件夹"SYSWOW64"下,当我们在访问某些注册表键值的时候,和文件转向类似,系统也会自动地把程序的访问转向到Wow6432Node下面. 先来谈谈文件系统的转向,查找了一些资料,并没有VB相关的资料,但是可以查到2个相关函数:Wow64DisableWow64FsRedirect

  • PowerShell因为在此系统中禁止执行脚本的解决方法

    PowerShell因为在此系统中禁止执行脚本的解决方法

    在Powershell直接脚本时会出现: 无法加载文件 ******.ps1,因为在此系统中禁止执行脚本.有关详细信息,请参阅 "get-help about_signing". 所在位置 行:1 字符: 17 + E:\Test\test.ps1 <<<< + CategoryInfo : NotSpecified: (:) [], PSSecurityException + FullyQualifiedErrorId : RuntimeException p

  • Linux系统中掩耳盗铃的sudo配置

    今天在这里讨论Linux系统中一个非常滑稽的系统配置失误,就是sudo,为什么说是滑稽的配置呢,就是因为如果配置不当的话,普通用户非常容易就可以提权到root用户,而且没有一点技术含量,系统管理员自己以为已经做好了权限管理,其实如果配置不当,权限漏洞已经出现. 很多公司Linux系统都会用到sudo来配置普通用户可以执行的超级用户权限,一是为了系统管理员更安全的操作系统,二是可以为研发人员提供可控的权限范围,下面就看一下我们在系统中常见的sudo配置文件. 复制代码 代码如下: admin AL

随机推荐