- Taro多端開(kāi)發(fā)權(quán)威指南:小程序、H5與App高效開(kāi)發(fā)實(shí)戰(zhàn)
- 李佩忠編著
- 837字
- 2021-05-19 18:01:15
1.4 規(guī)范約定
我們提到Taro和React并沒(méi)有直接聯(lián)系,Taro支持JSX等語(yǔ)法規(guī)范得益于Nerv框架,而Nerv與React支持的語(yǔ)法特性略有偏差,因此開(kāi)發(fā)之前我們約法三章,以規(guī)避一些開(kāi)發(fā)過(guò)程中可能遇到的問(wèn)題。
1.4.1 項(xiàng)目組織
項(xiàng)目組織有很多方案,以下所列建議為最佳實(shí)踐方案。
1.文件組織
所有項(xiàng)目的源碼都放在項(xiàng)目的根目錄src下,項(xiàng)目所需的最基本文件包括入口文件和頁(yè)面文件。
· 入口文件為app.js。
· 頁(yè)面文件建議放置在src/pages目錄下。
一個(gè)可靠的Taro項(xiàng)目可以按照如下方式進(jìn)行組織:


2.文件命名與文件后綴名
(1)在Taro項(xiàng)目中,普通JavaScript或TypeScript文件以小寫(xiě)字母命名,多個(gè)單詞之間以下畫(huà)線(xiàn)連接,如util.js、util_helper.js。
(2)在Taro項(xiàng)目中,組件文件命名遵循Pascal命名法,如ReservationCard.jsx。
(3)在Taro項(xiàng)目中,普通JavaScript或TypeScript文件以.js或者.ts為文件后綴名。
(4)在Taro項(xiàng)目中,組件以.jsx或者.tsx為文件后綴名。這不是強(qiáng)制約束,只是作為一個(gè)實(shí)踐的建議。如果你希望組件以.js或者.ts為文件后綴名,也依然可行。
1.4.2 JavaScript/TypeScript書(shū)寫(xiě)規(guī)范
關(guān)于JavaScript/TypeScript書(shū)寫(xiě)規(guī)范,可以使用Eslint做代碼規(guī)范檢查。在項(xiàng)目創(chuàng)建時(shí),Taro就已經(jīng)創(chuàng)建了.eslintrc文件并安裝了Eslint,你在開(kāi)發(fā)過(guò)程中遵循提示即可。若Taro創(chuàng)建的.eslintrc文件中定義的規(guī)范不能完全滿(mǎn)足你的需求,你也可以查閱Eslint配置文檔,根據(jù)團(tuán)隊(duì)制定的規(guī)范,配置規(guī)范約定。以下是.eslintrc配置片段:


1.4.3 組件及JSX書(shū)寫(xiě)規(guī)范
· 使用兩個(gè)空格進(jìn)行縮進(jìn),不要混合使用空格與制表符作為縮進(jìn)。
· JSX屬性均使用單引號(hào)。
· 多個(gè)屬性,多行書(shū)寫(xiě),每個(gè)屬性占用一行,標(biāo)簽結(jié)束另起一行。
· 當(dāng)標(biāo)簽沒(méi)有子元素時(shí),始終使用自閉合標(biāo)簽。
· 終始在自閉合標(biāo)簽前面添加一個(gè)空格。
· 屬性名稱(chēng)始終使用駝峰式命名法。
· 用括號(hào)包裹多行JSX標(biāo)簽。
· Taro組件中包含類(lèi)靜態(tài)屬性、類(lèi)屬性、生命周期等類(lèi)成員,其書(shū)寫(xiě)順序最好遵循以下約定(順序從上至下):
?static靜態(tài)方法
?constructor
?componentWillMount
?componentDidMount
?componentWillReceiveProps
?shouldComponentUpdate
?componentWillUpdate
?componentDidUpdate
?componentWillUnmount
?事件處理,如handleClick
?render
以上規(guī)范約定只是官方建議,開(kāi)發(fā)者在具體使用過(guò)程中可根據(jù)公司團(tuán)隊(duì)或社區(qū)提供的規(guī)范來(lái)制定約束,由于內(nèi)容較多且屬于基本知識(shí),因此這里只進(jìn)行簡(jiǎn)單介紹。如果想查看學(xué)習(xí)書(shū)寫(xiě)規(guī)范的相關(guān)內(nèi)容,可參閱Taro官方文檔中關(guān)于書(shū)寫(xiě)規(guī)范部分的內(nèi)容。
- 高效變換器設(shè)計(jì)與應(yīng)用電路
- Hands-On MQTT Programming with Python
- Serverless架構(gòu):無(wú)服務(wù)器應(yīng)用與AWS Lambda
- Android移動(dòng)應(yīng)用開(kāi)發(fā)基礎(chǔ)教程(微課版)
- 數(shù)字電路與系統(tǒng)
- 怎樣用萬(wàn)用表檢測(cè)電子元器件
- 高速數(shù)字電路設(shè)計(jì)入門(mén)
- 精通Android 5 多媒體開(kāi)發(fā)
- 平板電視機(jī)故障檢修實(shí)例
- 天地一體化信息網(wǎng)絡(luò)架構(gòu)與技術(shù)
- 智能光網(wǎng)絡(luò)運(yùn)行維護(hù)管理
- 成像雷達(dá)并行仿真優(yōu)化技術(shù)
- 5G XR技術(shù)與應(yīng)用
- WCDMA網(wǎng)絡(luò)測(cè)試與優(yōu)化教程
- 愛(ài)上單片機(jī)(第3版)