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


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


1.4.3 組件及JSX書寫規范
· 使用兩個空格進行縮進,不要混合使用空格與制表符作為縮進。
· JSX屬性均使用單引號。
· 多個屬性,多行書寫,每個屬性占用一行,標簽結束另起一行。
· 當標簽沒有子元素時,始終使用自閉合標簽。
· 終始在自閉合標簽前面添加一個空格。
· 屬性名稱始終使用駝峰式命名法。
· 用括號包裹多行JSX標簽。
· Taro組件中包含類靜態屬性、類屬性、生命周期等類成員,其書寫順序最好遵循以下約定(順序從上至下):
?static靜態方法
?constructor
?componentWillMount
?componentDidMount
?componentWillReceiveProps
?shouldComponentUpdate
?componentWillUpdate
?componentDidUpdate
?componentWillUnmount
?事件處理,如handleClick
?render
以上規范約定只是官方建議,開發者在具體使用過程中可根據公司團隊或社區提供的規范來制定約束,由于內容較多且屬于基本知識,因此這里只進行簡單介紹。如果想查看學習書寫規范的相關內容,可參閱Taro官方文檔中關于書寫規范部分的內容。