資訊專欄INFORMATION COLUMN
摘要：起因一天在群里面朋友問(wèn)了一個(gè)這么一個(gè)問(wèn)題看了之后自己梳理了一遍，在此和大家分享一下，這個(gè)就要從客戶端開發(fā)的過(guò)程來(lái)講了原生開發(fā)在移動(dòng)互聯(lián)網(wǎng)剛興起的時(shí)候，最初的開發(fā)模式是通過(guò)或開發(fā)原生應(yīng)用，有一些網(wǎng)頁(yè)跳轉(zhuǎn)的處理，使用之后增加了，安卓使用的是這個(gè)
起因
一天在群里面朋友問(wèn)了一個(gè)這么一個(gè)問(wèn)題：
看了之后自己梳理了一遍，在此和大家分享一下，這個(gè)就要從客戶端開發(fā)的過(guò)程來(lái)講了；
原生開發(fā)在移動(dòng)互聯(lián)網(wǎng)剛興起的時(shí)候，最初的開發(fā)模式是通過(guò)swift或java開發(fā)原生應(yīng)用，有一些網(wǎng)頁(yè)跳轉(zhuǎn)的處理，ios使用UIWebView（ios8之后增加了WKWebView），安卓使用的是webview；這個(gè)時(shí)候業(yè)務(wù)模式還不是特別復(fù)雜，用戶也沒(méi)有那么多，迭代時(shí)間的的長(zhǎng)短也不是特別強(qiáng)烈。 隨著業(yè)務(wù)的發(fā)展，這種開發(fā)模式逐漸就出現(xiàn)了一下問(wèn)題
業(yè)務(wù)逐漸變得龐大，原生開發(fā)需要更多的人員
業(yè)務(wù)變得更加復(fù)雜，多端的功能開發(fā)完全是重復(fù)的
ios審核發(fā)版的時(shí)間限制，可能只是一個(gè)小的UI的修改，都需要重新發(fā)版
hybrid （native+H5）基于上面的這些困擾，出現(xiàn)了一類似PhoneGap、Ionic的hrbrid應(yīng)用，他們的作用是把h5開發(fā)好的頁(yè)面，通過(guò)打包封裝處理到webview里面，最后瀏覽操作的其實(shí)還是h5，只不過(guò)這個(gè)過(guò)程h5可以調(diào)取一下原生的功能，而這個(gè)h5調(diào)用原生功能實(shí)現(xiàn)的底層概念叫做jsbridge，或者說(shuō)jsbridge是native原生與h5通信實(shí)現(xiàn)的一個(gè)過(guò)程。而這PhoneGap、Ionic之類的應(yīng)用的核心就是它們實(shí)現(xiàn)了這么一個(gè)過(guò)程，并且把接口暴露出來(lái)，上層h5調(diào)用就好；
簡(jiǎn)單來(lái)說(shuō)，PhoneGap框架流程就以下三步：
1、js 通過(guò)prompt接口往anroid native 發(fā)送消息
2、android 本地?cái)r截WebChromeClient 對(duì)象的 onJsPrompt函數(shù)，截獲消息
3、android本地截獲到消息以后，通過(guò)Pluginmanager把消息分發(fā)到目的插件，同時(shí)通過(guò)jsMessageQueue收集需要返回給js的數(shù)據(jù)；
引用網(wǎng)上的一張圖，一起來(lái)看看PhoneGap底層框架類圖~~
但是這個(gè)模式在取決于WebView的解析渲染效率，在頭幾年硬件還不死特別硬的時(shí)候，h5的渲染及交互不是特別友好，會(huì)出現(xiàn)卡頓；
RN、weex （DSL）由于hybrid的開發(fā)成本一套多用和h5發(fā)版不需要審核的因素，facebook研究處理相應(yīng)模式的框架，把對(duì)于性能影響的渲染的步驟做了處理，不管是RN還是Weex，他們的開發(fā)語(yǔ)言都是js、html、css，只不過(guò)在編譯的時(shí)候，比如RN轉(zhuǎn)換成了相應(yīng)的Virtual DOM之后，在native的底層實(shí)現(xiàn)了一套把virtual DOM轉(zhuǎn)換成原生組件的機(jī)制，這個(gè)過(guò)程是把virtual DOM轉(zhuǎn)換成了類似JSON的語(yǔ)言形式，最后通過(guò)自己的解析模式給實(shí)現(xiàn)成native的組件，這個(gè)性能自然也就會(huì)好很多，但是這個(gè)實(shí)現(xiàn)類似的JSON，也可以叫做DSL，sql語(yǔ)句其實(shí)也會(huì)DSL，包括html也算是一套DSL語(yǔ)言。
而在ios里面有一個(gè)JavaScriptCore的框架，通過(guò)它就能實(shí)現(xiàn)JS和OC（通過(guò)它可以調(diào)用和渲染原生模塊）交互
架構(gòu)的模式還在不斷的演進(jìn)，比如最近又流行起來(lái)了hybrid的模式。上面的幾個(gè)問(wèn)題通過(guò)這篇文章也做了個(gè)大概的簡(jiǎn)述，更加深入的東西，還需要不斷學(xué)習(xí)；
歡迎關(guān)注玄說(shuō)前端公眾號(hào)，后續(xù)將推出系列文章《一個(gè)大型圖形化應(yīng)用0到1的過(guò)程》，此賬戶也將同步更新
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/98487.html
摘要：的語(yǔ)言的動(dòng)態(tài)性意味著我們可以使用以上種數(shù)據(jù)類型表示變換過(guò)渡動(dòng)畫實(shí)現(xiàn)案例前端掘金以下所有效果的實(shí)現(xiàn)方式均為個(gè)人見解，如有不對(duì)的地方還請(qǐng)一一指出。 讀 zepto 源碼之工具函數(shù) - 掘金Zepto 提供了豐富的工具函數(shù)，下面來(lái)一一解讀。 源碼版本 本文閱讀的源碼為 zepto1.2.0 $.extend $.extend 方法可以用來(lái)擴(kuò)展目標(biāo)對(duì)象的屬性。目標(biāo)對(duì)象的同名屬性會(huì)被源對(duì)象的屬性...
摘要：但是，從字體上來(lái)說(shuō)雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭(zhēng)，但是有一件事是確定的極大的提升了移動(dòng)端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看到 ...
摘要：但是，從字體上來(lái)說(shuō)雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭(zhēng)，但是有一件事是確定的極大的提升了移動(dòng)端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看到 ...
閱讀 2755·2023-04-25 15:22
閱讀 2883·2021-10-11 10:58
閱讀 1111·2021-08-30 09:48
閱讀 1910·2019-08-30 15:56
閱讀 1788·2019-08-30 15:53
閱讀 1168·2019-08-29 11:16
閱讀 1110·2019-08-23 18:34
閱讀 1704·2019-08-23 18:12
