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)容。