鴻蒙OS 輕量級(jí)JS開(kāi)發(fā)核心

JS應(yīng)用開(kāi)發(fā)框架杰刽,提供了一套跨平臺(tái)的類(lèi)web應(yīng)用開(kāi)發(fā)框架菠发,通過(guò)Toolkit將開(kāi)發(fā)者編寫(xiě)的HML、CSS和JS 文件編譯打包成JS Bundle贺嫂,解析運(yùn)行JS Bundle滓鸠,生成native UI View組件樹(shù)并進(jìn)行渲染顯示。通過(guò)支持三方開(kāi)發(fā)者使用聲明式的API進(jìn)行應(yīng)用開(kāi)發(fā)第喳,以數(shù)據(jù)驅(qū)動(dòng)視圖變化糜俗,避免大量的視圖操作,大大降低應(yīng)用開(kāi)發(fā)難度曲饱,提升開(kāi)發(fā)者開(kāi)發(fā)體驗(yàn)悠抹。

JS應(yīng)用框架模塊組成如下圖所示:

目錄

JS應(yīng)用開(kāi)發(fā)框架源代碼在/foundation/ace下,目錄結(jié)構(gòu)如下圖所示:

/foundation/ace├── frameworks # 框架代碼│? └── lite│? ? ? ├── examples # 示例代碼目錄│? ? ? ├── include # 對(duì)外暴露頭文件存放目錄│? ? ? ├── packages # 框架JS實(shí)現(xiàn)存放目錄│? ? ? ├── src # 源代碼存放目錄│? ? ? ├── targets # 各目標(biāo)設(shè)備配置文件存放目錄│? ? ? └── tools # 工具代碼存放目錄├── interfaces # 對(duì)外接口存放目錄│? └── innerkits # 對(duì)內(nèi)部子系統(tǒng)暴露的頭文件存放目錄│? ? ? └── builtin # JS應(yīng)用框架對(duì)外暴露JS三方module API接口存放目錄

約束

語(yǔ)言版本:

C++11版本或以上

JavaScript ES5.1

框架運(yùn)行內(nèi)存通常分為如下組成部分:

JS引擎運(yùn)行時(shí)內(nèi)存:可調(diào)扩淀,取決于具體設(shè)備應(yīng)用復(fù)雜度楔敌,通常建議64K~512K

框架本身native內(nèi)存:在百K級(jí)的內(nèi)存設(shè)備上,建議預(yù)分配一個(gè)與native UI共用的內(nèi)存池驻谆,用于native內(nèi)存的管理

框架針對(duì)不同的芯片平臺(tái)和底層OS能力卵凑,規(guī)格有所區(qū)別:

Cortex-M RAM/ROM

JS引擎內(nèi)存池: 建議大于48K

RAM:建議與native UI共用內(nèi)存池,大于80K

ROM: > 300K (包含JS應(yīng)用框架旺韭,以及native UI和JS引擎等強(qiáng)相關(guān)子系統(tǒng))

Cortex-A RAM/ROM

JS引擎內(nèi)存池: 建議大于128K

RAM:建議大于512K

ROM:> 2M (包含JS應(yīng)用框架氛谜,以及native UI和JS引擎等強(qiáng)相關(guān)子系統(tǒng))

使用targets

JS應(yīng)用框架實(shí)現(xiàn)主要包含兩部分:

native部分:使用C++進(jìn)行編寫(xiě),是框架主體實(shí)現(xiàn)区端;

JavaScript部分:提供JS應(yīng)用框架對(duì)用戶(hù)JS文件的運(yùn)行時(shí)支持值漫,并通過(guò)向引擎暴露一些全局方法和對(duì)象,支撐JS運(yùn)行時(shí)與native框架之間的交互织盼。

JS應(yīng)用框架通過(guò)一些特性宏來(lái)定制不同平臺(tái)上參與編譯的功能代碼杨何,該部分特性宏定義在 foundation/ace/frameworks/lite/targets 目錄下頭文件內(nèi),目錄結(jié)構(gòu)如下:

/foundation/ace/frameworks/lite/targets├── default/│? └── acelite_config.h├── linux/ # linux環(huán)境配置文件目錄│? └── acelite_config.h├── liteos_a/ # LiteOS A核環(huán)境配置文件目錄│? └── acelite_config.h├── liteos_m/ # LiteOS M核環(huán)境配置文件目錄│? └── acelite_config.h├── platform_adapter.cpp├── platform_adapter.h└── simulator/ # 模擬器環(huán)境配置文件目錄? ? └── win/? ? ? ? └── acelite_config.h*

在編譯不同的平臺(tái)目標(biāo)時(shí)沥邻,需要使用對(duì)應(yīng)平臺(tái)目錄下的acelite_config.h頭文件危虱,這可以通過(guò)配置編譯時(shí)的搜索路徑來(lái)進(jìn)行,以下以ninja和cmake構(gòu)建工具為例進(jìn)行示例:

ninja:

? if (ohos_kernel_type == "liteos_a" || ohos_kernel_type== "liteos_m" ||? ? ? ohos_kernel_type == "liteos_riscv") { // 通過(guò)目標(biāo)內(nèi)核平臺(tái)選擇不同的頭文件搜索路徑? ? include_dirs += [ "targets/liteos-a" ]? } else if (ohos_kernel_type == "linux") {? ? include_dirs += [ "targets/linux" ]? }

cmake:

......set(ACE_LITE_CONFIG_PATH "${CMAKE_CURRENT_SOURCE_DIR}/targets/simulator/win") # 模擬器編譯搜索路徑使用targets/simulator/winset(JSFWK_INCLUDE_PATH "${CMAKE_CURRENT_SOURCE_DIR}/include")set(JSFWK_SOURCE_PATH "${CMAKE_CURRENT_SOURCE_DIR}/src/core")set(UIKIT_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../ui")set(THIRTY_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../../../third_party")set(JSFWK_SIMULATOR_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../tools/simulator")set(JS_API_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../../api/emui_band/MoltenCore/application/framework/ace/api")set(JSFWK_SIMULATOR_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../tools/simulator")set(AAFWK_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../../../aafwk")# header filesinclude_directories(? ? ${ACE_LITE_CONFIG_PATH}? ? ${JSFWK_INCLUDE_PATH}/async? ? ${JSFWK_INCLUDE_PATH}/base? ? ${JSFWK_INCLUDE_PATH}/context? ? ${JSFWK_INCLUDE_PATH}/jsi? ? ${JSFWK_SOURCE_PATH}? ? ......

acelite_config.h主要用于對(duì)應(yīng)平臺(tái)的特性宏開(kāi)關(guān)唐全,也可用來(lái)進(jìn)行一些屏蔽平臺(tái)差異的定義埃跷。如不同平臺(tái)由于使用的文件系統(tǒng)不一致蕊玷,可能存在一些固定目錄路徑名不一樣的情況,這些有區(qū)別的常量可以放在這里進(jìn)行定義弥雹,如下:

liteos-a/acelite_config.h

#define JS_FRAMEWORK_PATH "http://system/ace/bin/"

simulator/win/acelite_config.h

#define JS_FRAMEWORK_PATH "..\\..\\..\\jsfwk\\packages\\runtime-core\\build"

使用runtime-core

為了實(shí)現(xiàn)單向數(shù)據(jù)綁定機(jī)制垃帅,JS應(yīng)用框架使用JavaScript語(yǔ)言實(shí)現(xiàn)了一套簡(jiǎn)單的數(shù)據(jù)劫持框架,稱(chēng)之為runtime-core剪勿,目錄結(jié)構(gòu)如下所示:

/foundation/ace/frameworks/lite/packages└── runtime-core? ? ├── .babelrc # babel配置文件? ? ├── .editorconfig # IDE配置文件? ? ├── .eslintignore # ESLint配置文件贸诚,可以設(shè)置不進(jìn)行ESLint掃描的目錄或文件? ? ├── .eslintrc.js # ESLint配置文件,可以配置掃描規(guī)則? ? ├── .gitignore? ? ├── package.json # NPM包管理文件? ? ├── package-lock.json # NPM依賴(lài)版本鎖定文件? ? ├── .prettierrc # 代碼格式化規(guī)則配置文件? ? ├── scripts # 編譯腳本存放目錄? ? │? ├── build.js # 編譯腳本? ? │? └── configs.js # Rollup配置文件? ? ├── .size-snapshot.json? ? └── src # 源代碼? ? ? ? ├── core # ViewModel核心實(shí)現(xiàn)目錄? ? ? ? │? └── index.js? ? ? ? ├── index.js? ? ? ? ├── observer # 數(shù)據(jù)劫持部分代碼實(shí)現(xiàn)目錄? ? ? ? │? ├── index.js? ? ? ? │? ├── observer.js? ? ? ? │? ├── subject.js? ? ? ? │? └── utils.js? ? ? ? ├── profiler # profiler目錄? ? ? ? │? └── index.js? ? ? ? └── __test__ # 測(cè)試用例目錄? ? ? ? ? ? └── index.test.js

支持的NPM 命令有:

npm run build

JS應(yīng)用框架所集成的JS引擎僅支持ES5.1語(yǔ)法厕吉,runtime-core源代碼是使用ES6語(yǔ)法書(shū)寫(xiě)的酱固。因此選擇使用rollup做為打包工具,配合babel實(shí)現(xiàn)對(duì)語(yǔ)法進(jìn)行降級(jí)處理头朱。命令行中執(zhí)行npm run build运悲,會(huì)在build目錄下輸出打包結(jié)果,輸出結(jié)果如下所示:

build/├── framework-dev.js // 開(kāi)發(fā)環(huán)境使用的框架代碼(未壓縮混淆)├── framework-dev.min.js // 開(kāi)發(fā)環(huán)境使用的框架代碼(已壓縮混淆)├── framework.js // 生產(chǎn)環(huán)境使用的框架代碼(未壓縮混淆)└── framework.min.js // 生產(chǎn)環(huán)境使用的框架代碼(已壓縮混淆)

npm run test

runtime-core使用jest進(jìn)行單元測(cè)試髓窜,在命令行中執(zhí)行npm run test即可觸發(fā)扇苞。

涉及倉(cāng)

ace_lite_jsfwk

ace_interfaces_innerkits_builtin

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市寄纵,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌脖苏,老刑警劉巖程拭,帶你破解...
    沈念sama閱讀 217,277評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異棍潘,居然都是意外死亡恃鞋,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門(mén)亦歉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)恤浪,“玉大人,你說(shuō)我怎么就攤上這事肴楷∷桑” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,624評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵赛蔫,是天一觀的道長(zhǎng)砂客。 經(jīng)常有香客問(wèn)我,道長(zhǎng)呵恢,這世上最難降的妖魔是什么鞠值? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,356評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮渗钉,結(jié)果婚禮上彤恶,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好声离,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,402評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布芒炼。 她就那樣靜靜地躺著,像睡著了一般抵恋。 火紅的嫁衣襯著肌膚如雪焕议。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,292評(píng)論 1 301
  • 那天弧关,我揣著相機(jī)與錄音盅安,去河邊找鬼。 笑死世囊,一個(gè)胖子當(dāng)著我的面吹牛别瞭,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播株憾,決...
    沈念sama閱讀 40,135評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼蝙寨,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了嗤瞎?” 一聲冷哼從身側(cè)響起墙歪,我...
    開(kāi)封第一講書(shū)人閱讀 38,992評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎贝奇,沒(méi)想到半個(gè)月后虹菲,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,429評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡掉瞳,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,636評(píng)論 3 334
  • 正文 我和宋清朗相戀三年毕源,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片陕习。...
    茶點(diǎn)故事閱讀 39,785評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡霎褐,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出该镣,到底是詐尸還是另有隱情冻璃,我是刑警寧澤,帶...
    沈念sama閱讀 35,492評(píng)論 5 345
  • 正文 年R本政府宣布拌牲,位于F島的核電站俱饿,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏塌忽。R本人自食惡果不足惜拍埠,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,092評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望土居。 院中可真熱鬧枣购,春花似錦嬉探、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,723評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至分瘾,卻和暖如春胎围,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背德召。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,858評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工白魂, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人上岗。 一個(gè)月前我還...
    沈念sama閱讀 47,891評(píng)論 2 370
  • 正文 我出身青樓福荸,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親肴掷。 傳聞我的和親對(duì)象是個(gè)殘疾皇子敬锐,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,713評(píng)論 2 354