鴻蒙系統(tǒng)中的 JS 開(kāi)發(fā)框架
今天鴻蒙終于發(fā)布了,開(kāi)發(fā)者們也終于“沸騰”了。
源碼托管在國(guó)內(nèi)知名開(kāi)源平臺(tái)碼云上,https://gitee.com/openharmony
我也第一時(shí)間下載了源碼,研究了一個(gè)晚上,順帶寫(xiě)了一個(gè) hello world 程序,還順手給鴻蒙文檔提了 2 個(gè) PR。
當(dāng)然我最感興趣的就是鴻蒙的 JS 框架 ace_lite_jsfwk,從名字中可以看出來(lái)這是一個(gè)非常輕量級(jí)的框架,官方介紹說(shuō)是“輕量級(jí) JS 核心開(kāi)發(fā)框架”。
當(dāng)我看完源碼后發(fā)現(xiàn)它確實(shí)輕。其核心代碼只有 5 個(gè) js 文件,大概也就 300-400 行代碼吧。(沒(méi)有單元測(cè)試)
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
從名字可以看出來(lái),這些代碼實(shí)現(xiàn)了一個(gè)觀察者模式。也就是說(shuō),它實(shí)現(xiàn)了一個(gè)非常輕量級(jí)的 MVVM 模式。通過(guò)使用和 vue2 相似的屬性劫持技術(shù)實(shí)現(xiàn)了響應(yīng)式系統(tǒng)。這個(gè)應(yīng)該是目前培訓(xùn)班的“三大自己實(shí)現(xiàn)”之一了吧。(自己實(shí)現(xiàn) Promise,自己實(shí)現(xiàn) vue,自己實(shí)現(xiàn) react)
utils 里面定義了一個(gè) Observer 棧,存放了觀察者。subject 定義了被觀察者。當(dāng)我們觀察某個(gè)對(duì)象時(shí),也就是劫持這個(gè)對(duì)象屬性的操作,還包括一些數(shù)組函數(shù),比如 push、pop 等。這個(gè)文件應(yīng)該是代碼最多的,160 行。observer 的代碼就更簡(jiǎn)單了,五六十行。
而當(dāng)我們開(kāi)發(fā)的時(shí)候,通過(guò) Toolkit 將開(kāi)發(fā)者編寫(xiě)的 HML、CSS 和 JS 文件編譯打包成 JS Bundle,然后再將 JS Bundle 解析運(yùn)行成C++ native UI 的 View 組件進(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)”。基本上就是一個(gè)小程序式的開(kāi)發(fā)體驗(yàn)。
在 src\core\base\framework_min_js.h 文件中,這段編譯好的 js 被編譯到了 runtime 里面。編譯完的 js 文件不到 3K,確實(shí)夠輕量。
js runtime 沒(méi)有使用 V8,也沒(méi)有使用 jscore。而是選擇了 JerryScript。JerryScript 是用于物聯(lián)網(wǎng)的超輕量 JavaScript 引擎。它能夠在內(nèi)存少于 64 KB 的設(shè)備上執(zhí)行 ECMAScript 5.1 源代碼。這也是為什么在文檔中說(shuō)鴻蒙 JS 框架支持 ECMAScript 5.1 的原因。
從整體看這個(gè) js 框架大概使用了 96% 的 C/C++ 代碼,1.8% 的 JS 代碼。在 htm 文件中寫(xiě)的組件會(huì)被編譯為原生組件。而 app_style_manager.cpp 和同級(jí)的七八個(gè)文件則用來(lái)解析 css,最終生成原生布局。
雖然在 SDK 中有幾個(gè) weex 包,也發(fā)現(xiàn)了 react 的影子。但是在 C/C++ 代碼中并沒(méi)有看到 yoga 相關(guān)的內(nèi)容(全局搜索沒(méi)發(fā)現(xiàn))。而 SDK 中的那些包僅僅是做 loader 用的,大概是為了在 webpack 打包時(shí)解析 htm 組件用的。將 htm 的 template 編譯為 js 代碼。
整體而言,比我預(yù)想的要好一些。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
移動(dòng)設(shè)備手勢(shì)事件庫(kù)Touch.js使用詳解
這篇文章主要介紹了移動(dòng)設(shè)備手勢(shì)事件庫(kù)Touch.js的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08JS Loading功能的簡(jiǎn)單實(shí)現(xiàn)
這篇文章主要介紹了JS Loading功能的簡(jiǎn)單實(shí)現(xiàn)。這個(gè)功能原理是很簡(jiǎn)單的,就是一個(gè)DIV遮蓋當(dāng)前頁(yè)面,然后Loading就在遮蓋DIV層上展示出來(lái)2013-11-11js當(dāng)一個(gè)變量為函數(shù)時(shí) 應(yīng)該注意的一點(diǎn)細(xì)節(jié)小結(jié)
變量testFun為一個(gè)匿名函數(shù),匿名函數(shù)返回的一個(gè)testFun.init對(duì)象(也是一個(gè)匿名函數(shù))2011-12-12JavaScript EventEmitter 背后的秘密 完整版
在這里,我們的目標(biāo)創(chuàng)建屬于我們自己的 Event Emitter 去理解背后的秘密。所以,讓我們看一下下面的代碼是怎么工作的,需要的朋友可以參考下2018-03-03js實(shí)現(xiàn)簡(jiǎn)單省市區(qū)三級(jí)選擇聯(lián)級(jí)
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)單省市區(qū)三級(jí)選擇聯(lián)級(jí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04微信小程序報(bào)錯(cuò):does?not?have?a?method?"xxxx"?to?ha
這篇文章主要給大家介紹了關(guān)于微信小程序報(bào)錯(cuò):does?not?have?a?method?"xxxx"?to?handle?event?"tap"的解決方案,文中將解決的辦法介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01關(guān)于JavaScript回調(diào)函數(shù)的深入理解
由于函數(shù)是一等對(duì)象,我們可以把一個(gè)函數(shù)作為參數(shù)傳遞給另一個(gè)函數(shù),然后在那個(gè)函數(shù)內(nèi)執(zhí)行,至也可以被那個(gè)函數(shù)返回,然后再執(zhí)行,這篇文章主要給大家介紹了關(guān)于JavaScript回調(diào)函數(shù)的深入理解,需要的朋友可以參考下2021-06-06JavaScript 實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)彈窗DEMO附圖
做一個(gè)簡(jiǎn)單的設(shè)置網(wǎng)頁(yè),因?yàn)樾枰貑⒃O(shè)備功能,于是就想在上面加一個(gè)倒計(jì)時(shí)彈窗的界面,下面是具體的實(shí)現(xiàn),大家可以參考下2014-03-03