聲明：本文CSDN作者原創(chuàng)投稿文章，未經(jīng)許可禁止任何形式的轉(zhuǎn)載。
　　編者：本文來(lái)自攜程框架研發(fā)部高級(jí)經(jīng)理魏曉軍在第二期【攜程技術(shù)微分享】上的分享，以下為整理后的文字實(shí)錄。關(guān)注攜程技術(shù)中心微信公號(hào)ctriptech，可獲知更多微分享課程信息。
　　責(zé)編：錢(qián)曙光，關(guān)注架構(gòu)和算法領(lǐng)域，尋求報(bào)道或者投稿請(qǐng)發(fā)郵件qianshg@csdn.net，另有「CSDN 高級(jí)架構(gòu)師群」，內(nèi)有諸多知名互聯(lián)網(wǎng)公司的大牛架構(gòu)師，歡迎架構(gòu)師加微信qshuguang2008申請(qǐng)入群，備注姓名+公司+職位。
　　因?yàn)橹С钟?a href='http://m.makelele.cn/v/tag/852/' target='_blank' class='arckwlink_none'>java開(kāi)發(fā)原生應(yīng)用，React Native一推出就受到不少公司熱捧，各家都躍躍欲試。但有一個(gè)痛點(diǎn)是， 在移動(dòng)端，我們是否有必要開(kāi)發(fā)多套程序：iOS、Android和H5？本次將通過(guò)對(duì)Moles框架的分享，介紹攜程在React Native方面的實(shí)戰(zhàn)干貨，希望給大家一些靈感和啟發(fā)。
　　本次分享的內(nèi)容包括三個(gè)方面：
　　Moles框架在React Native和我們主App的集成中起到了什么作用？Moles框架是如何打通Android、iOS、H5、SEO，讓我們一套代碼跑在多個(gè)平臺(tái)上Moles框架的組成以及原理是怎樣的？
　　這些內(nèi)容將通過(guò)以下幾個(gè)部分的講解來(lái)一一給大家進(jìn)行解答：
　　React Native的現(xiàn)狀Moles 框架的出現(xiàn)Moles 框架的組成Moles 框架的功能Moles 框架的原理簡(jiǎn)析Moles 框架的使用Moles 框架的案例開(kāi)源計(jì)劃。
　　一、React Native的現(xiàn)狀
　　React Native是2015年3月份Facebook開(kāi)源的一個(gè)Native上的一個(gè)框架。那么為什么它現(xiàn)在會(huì)這么火呢。
　　我們先來(lái)看看它有什么優(yōu)點(diǎn)：
　　首先，對(duì)于做前端的我來(lái)說(shuō)，最吸引的就是可以用java來(lái)開(kāi)發(fā)Native應(yīng)用了。之前java只可以開(kāi)發(fā)瀏覽器上的一些功能，隨著Node.js的出現(xiàn)，又讓java走向了服務(wù)端，現(xiàn)在React Native的出現(xiàn)又讓java走向了Native端。如果要用現(xiàn)在一個(gè)時(shí)髦的詞來(lái)形容java的話(huà)，我覺(jué)得“全?！闭娴牟粸檫^(guò)。
　　其次，React Native是Facebook將ReactJS的思想移植到Native端。所以React Native就擁有了RectJS的很多特性，如：組件化思想、Virtual Dom技術(shù)以及JSX與Flexbox組合完成的布局等等，同時(shí)React Native又引入了熱更新機(jī)制、CssLayout機(jī)制，讓開(kāi)發(fā)人員尤其是Native開(kāi)發(fā)人員眼前一亮。
　　有優(yōu)點(diǎn)也有缺點(diǎn)，我們?cè)賮?lái)看看它的不足：
　　我們知道React Native先出了iOS版本，然后出了Android版本。兩個(gè)版本之間存在很多的差異性，甚至有好多組件都會(huì)帶有平臺(tái)的后綴，這使得開(kāi)發(fā)人員必須要為這兩個(gè)平臺(tái)寫(xiě)不同的代碼。
　　此外，對(duì)于公司來(lái)說(shuō)，在移動(dòng)上的投入，不僅有Native還會(huì)有H5，而在H5上React Native并沒(méi)有考慮。從MVC框架的角度來(lái)看，React Native只做了View這一層，那么Controller、Model、Router還需要做。從App的完整性來(lái)看，只學(xué)會(huì)React Native并不能開(kāi)發(fā)一個(gè)健全的App。它的更新策略、Hybrid API的提供，配套的UI組件、監(jiān)控機(jī)制等等這些都沒(méi)有。
　　二、Moles 框架的出現(xiàn)
　　伴隨著React Native項(xiàng)目的開(kāi)發(fā)，逐漸的Moles框架就形成了。
　　mole ［m??l］ 小鼴鼠，是種鑿洞能力非常強(qiáng)的嚙齒類(lèi)動(dòng)物。把框架稱(chēng)為之為Moles，也是寄希望我們的框架能像mole一樣，能夠打洞，能夠打通Android、iOS、H5、SEO這幾個(gè)平臺(tái)。當(dāng)然一個(gè)mole的能力是有限的，所以我們?nèi)∑鋸?fù)數(shù)形式Moles。
　　如果說(shuō) 當(dāng)前移動(dòng)端的三大痛點(diǎn)是：性能、動(dòng)態(tài)性、多端適配的話(huà)。那么我認(rèn)為React Native解決了性能、動(dòng)態(tài)性，而我們Moles則解決了多端適配的問(wèn)題。
　　Moles的目標(biāo)是要盡可能的做到在H5端開(kāi)發(fā)的內(nèi)容可以直接運(yùn)行在Native上，在Native端開(kāi)發(fā)的內(nèi)容也可以直接運(yùn)行在H5上。
　　三、Moles 框架的組成
　　該框架主要由三部分組成：
　　- moles-web
　　該部分主要是為H5服務(wù)，是將React Native在A(yíng)ndroid、iOS中沒(méi)有差異化的Components、APIs提取出來(lái)，單獨(dú)封裝成一個(gè)Library供H5端來(lái)使用。這樣做的好處是，這個(gè)Library只在H5上會(huì)是使用到，在Native是不需要的，以減少框架在Native的體積。
　　- moles-cui
　　該部分主要是是將React Native在A(yíng)ndroid、iOS中有差異化的Components、APIs提取出來(lái)，并且添加一些公司定制化的組件進(jìn)去，包括：UI組件、監(jiān)控組件、采集組件、路由組件等等。moles-cui可以說(shuō)是Moles框架的核心部分，它不但Native開(kāi)發(fā)需要使用，在H5上的開(kāi)發(fā)也需要使用。
　　- moles-cli
　　該部分主要包括Moles項(xiàng)目的初始化、編譯、打包等功能。