首页 > 其他分享> 文章详细

代码风格规范

2022-01-10 15:02:31 阅读：130 来源： 互联网

标签：文件 users 作用域代码规范单词风格组件 app

一、优先级a的规则：必要的（规避错误）

1.组件名为多个单词：

　　组件名应该始终是多个单词的，跟组件app以及<component>之类的vue内置组件除外，这样做可以避免跟现有的以及未来的html元素相冲突，因为所有的html元素都是当单词

　　好例子：app.component("todo-item"，{

})

2.prop定义：

prop定义应尽量详细，在你提交的代码中，prop的定义应该尽量详细，至少需要指定其类型。

反例：

props:['status']

好例子：

props:{

status:String


}
//更好的例子
props:{

    status:{

    type:string,
    required:true,
    validator:value=>{
    return [
"syncing","synved"
].includes(value)
}
    
}

}

3.为v-for设置key值

总是用key配合v-for在组件上总是必须用key配合v-for，以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为。比如动画中的对象固化

4.避免v-if和v-for一起使用

永远不要把v-if和v-for同时用在同一个元素上。

一般我们在两种情况下会倾向于这样做：

为了过滤一个列表中的项目（比如 v-for="user in users" v-if="user.isActive"）.在这种情况下，请将users替换成为一个计算属性(比如 activeUsers),让其返回过滤后的列表。

　　为了避免渲染本改被隐藏的列表(比如 v-for="user in users" v-if="shouldShiwUsers").这种情况下请将v-if移动至容器元素上<ul v-if="shouldShowUsers">

5.为组件样式设置作用域

对于应用来说，顶级app组件和布局组件的样式可以是全局的，但是其他所有组件都应该是有作用域的。

这条规则之和单文件组件有关，你不一定要使用scoped。使用作用域也可以通过cssModules,那是一个基于class的类似bem的策略

不管怎样，对于组件库，我们应该更倾向于选用基于class的策略而不是scopd。这让腹泻内部样式更容易：使用了人类可理解的class名称且没有太高的选择器优先级，而且不太会导致冲突

好的例子：

<!-- 使用 `scoped` attribute -->
<style scoped>
<!-- 使用 CSS modules -->
<style module>
<template>
  <button class="c-Button c-Button--close">×</button>
</template>

<!-- 使用 BEM 约定 -->
<style>
.c-Button {
  border: none;
  border-radius: 2px;
}

.c-Button--close {
  background-color: red;
}
</style

6.私有property名称

使用模块作用域保持不允许外部访问的函数的私用行。如果无法做到这一点，就始终为插件，混入等不考虑作为对外公共api的自定义私有property前缀。并附带一个命名空间一回避和其他作者的冲突

二、优先级b的规则：强烈推荐（增强代码的可读性）

1、组件文件：只要有能够拼接文件的构建系统就把每个组件单独分成文件。

　当你需要编辑一个组件或查询一个组件的用法时，可以快速的找到他

2.单文件组件文件的大小写

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

3.基础组件名称

应用特定样式和约定的基础组件（也就是展示的、无逻辑的或者无状态的组件）应该全部以一个特顶的前缀开头，比如base、app、v

标签：文件,users,作用域,代码,规范,单词,风格,组件,app
来源： https://www.cnblogs.com/qiaozhiming123/p/15784440.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

代码风格规范