Taro多端开发权威指南:小程序、H5与App高效开发实战
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

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官方文档中关于书写规范部分的内容。