前端规范整理( 四 ) _前端

圆括号
当 JSX 标签超过一行时使用圆括号包裹，eslint: react/wrap-multilines
// badrender () {return <MyComponent className='long body' foo='bar'><MyChild /></MyComponent>}// goodrender () {return (<MyComponent className='long body' foo='bar'><MyChild /></MyComponent>)}// good, when single linerender () {const body = <div>hello</div>return <MyComponent>{body}</MyComponent>}标签
没有子元素的标签请自闭合，eslint: react/self-closing-comp
// bad <Foo className='stuff'></Foo> // good <Foo className='stuff' />如果组件包含多行属性，在新的一行闭合标签，eslint:react/jsx-closing-bracket-location
// bad <Foobar='bar'baz='baz' />// good <Foobar='bar'baz='baz' />vue规范参考官网：https://cn.vuejs.org/v2/style-guide/index.html
组件名为多个单词（必要）
组件名应该始终是多个单词的，根组件 App 以及 <transition>、<component> 之类的 Vue 内置组件除外。
这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。
组件数据（必要）
组件的 data 必须是一个函数。
当在组件中使用 data property 的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数。
// In a .vue file export default {data () {return {foo: 'bar'}} } // 在一个 Vue 的根实例上直接使用对象是可以的// 因为只存在一个这样的实例。new Vue({data: {foo: 'bar'} })Prop 定义（必要）
Prop 定义应该尽量详细。
为 v-for 设置键值（必要）
永远不要把 v-if 和 v-for 同时用在同一个元素上一般我们在两种常见的情况下会倾向于这样做：

为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive") 。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。
为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers") 。这种情形下，请将 v-if 移动至容器元素上 (比如 ul、ol) 。

私有 property 名（必要）
使用模块作用域保持不允许外部访问的函数的私有性。如果无法做到这一点，就始终为插件、混入等不考虑作为对外公共 API 的自定义私有 property 使用 $_ 前缀。并附带一个命名空间以回避和其它作者的冲突 (比如 $_yourPluginName_)

文章插图

组件文件–强烈推荐
只要有能够拼接文件的构建系统，就把每个组件单独分成文件。
当你需要编辑一个组件或查阅一个组件的用法时，可以更快速的找到它。

文章插图

单文件组件文件的大小写
单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case) 。

文章插图

基础组件名
应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V 。

文章插图

单例组件名
只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。

文章插图

紧密耦合的组件名强烈推荐
和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
如果一个组件只在某个父组件的场景下有意义，这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起。

文章插图

模板中的组件名大小写
若组件名大写，vscode编辑器可以高亮提醒，所以商量决定组件使用大写命名方便查阅
对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。由于 HTML 是大小写不敏感的，在 DOM 模板中必须仍使用 kebab-case