0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看威廉希尔官方网站 视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

基于鸿蒙的JS框架ace_lite_jsfwk开发

鸿蒙系统HarmonyOS 来源:CSDN博主 作者:迷渡 2021-02-26 10:54 次阅读

鸿蒙的发布了,让开发者们“沸腾”。

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

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

编辑:hfy

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • JS
    JS
    +关注

    关注

    0

    文章

    78

    浏览量

    18088
  • 鸿蒙系统
    +关注

    关注

    183

    文章

    2634

    浏览量

    66267
收藏 人收藏

    评论

    相关推荐

    鸿蒙跨端实践-JS虚拟机架构实现

    类似的框架,我们需要自行实现以确保核心基础能力的完整。 鸿蒙虚拟机的开发经历了从最初 ArkTs2V8 到 JSVM + Roma新架构方案 。在此过程中,我们实现了完整的鸿蒙版的“J
    的头像 发表于 09-30 14:42 2370次阅读
    <b class='flag-5'>鸿蒙</b>跨端实践-<b class='flag-5'>JS</b>虚拟机架构实现

    鸿蒙ACE开发框架总结

    ACE_Engine 框架是 OpenHarmony 的 UI 开发框架,提供开发者在进行应用 UI
    的头像 发表于 01-09 10:05 2352次阅读

    【HarmonyOS HiSpark AI Camera试用连载 】鸿蒙JS UI介绍

    )和智能穿戴(Wearable)应用开发,针对轻量级智能穿戴(Lite Wearable)请参考轻量级智能穿戴开发。声明式编程JS UI框架
    发表于 01-11 20:10

    鸿蒙开发AI应用(八)JS框架访问内核层

    + CSS + HTML的威廉希尔官方网站 上进行,相关内容可以回顾用鸿蒙开发AI应用(五)UI篇。JS应用开发框架原理在第六篇里,我们已经体验了一下使
    发表于 02-06 19:36

    JS应用开发框架组件

    :https://gitee.com/openharmony/docs/blob/master/zh-cn/readme/JS应用开发框架.md相关仓ace_engine_lite
    发表于 04-23 18:05

    openharmony ACE开发框架详解

      ACE(Ability Cross-platform Environment)开发框架ACE框架的轻量实现。它可以提供一套跨平台的类w
    发表于 04-07 14:52

    鸿蒙应用开发JS UI框架如何实现高德地图的访问?

    鸿蒙应用,现在分为Java UI框架和Ark UI框架,其中JS UI开发框架Ark UI
    发表于 04-28 11:44

    一文总结ACE代码框架

    一、前言ACE_Engine框架是OpenAtom OpenHarmony(简称“OpenHarmony”)的UI开发框架,为开发者提供在进
    发表于 01-10 11:09

    ACE代码框架总结

    一.ACE_Engine框架概述:ACE_Engine框架是OpenHarmony 的UI开发框架
    发表于 03-22 09:11

    AMBA 4 ACEACE Lite协议校验器用户指南

    本书是为系统设计者、系统集成商和验证工程师编写的,他们希望确认设计符合相关AMBA4协议。这可以是ACEACE Lite
    发表于 08-10 07:01

    鸿蒙系统中JS框架的逐行分析

    其实是由 C++ 来承担的。JavaScript 代码只是其中的 ViewModel 层。 鸿蒙 JS 框架是零依赖的,只在开发打包过程中
    的头像 发表于 10-21 14:37 1990次阅读

    使用鸿蒙JS框架写出来的JS代码长什么样

    鸿蒙 JS 框架是零依赖的,只在开发打包过程中使用到了一些 npm 包。打包完之的代码是没有依赖任何 npm 包的。
    的头像 发表于 03-26 15:46 2296次阅读

    单线程也能开发异步任务?ACE JS框架到底是如何做到的

    ,用JS语言开发是否会导致硬件资源无法充分利用的情况呢? 本文给大家介绍“ACE JS的单线程异步机制”就是解决这个问题的。然而,说到 “单线程”与“异步”,大家可能会比较疑惑,因为单
    的头像 发表于 08-13 17:16 2014次阅读
    单线程也能<b class='flag-5'>开发</b>异步任务?<b class='flag-5'>ACE</b> <b class='flag-5'>JS</b><b class='flag-5'>框架</b>到底是如何做到的

    OpenHarmony ACE 代码框架总结

    一:ACE_Engine框架概述: ACE_Engine框架是OpenHarmony 的UI开发框架
    的头像 发表于 12-30 19:05 1162次阅读

    一文总结 ACE 代码框架

    田可辉 鸿湖万联高级威廉希尔官方网站 专家 鸿湖万联产品推荐官 一、前言 ACE_Engine框架是OpenAtom OpenHarmony(简称“OpenHarmony”)的UI开发框架,为
    的头像 发表于 01-11 03:30 1780次阅读