Vue前端抒写规范

命名规范

s:表示字符串。例如:sName,sHtml;
n:表示数字。例如:nPage,nTotal;
b:表示逻辑。例如:bChecked,bHasLogin;
a:表示数组。例如:aList,aGroup;
r:表示正则表达式。例如:rDomain,rEmail;
f:表示函数。例如:fGetHtml,fInit;
o:表示以上未涉及到的其他对象,例如:oButton,oDate;

1:作用域不大临时变量可以简写,比如:str,num,bol,obj,fun,arr。

2:循环变量可以简写,比如:i,j,k等。

标准变量采用驼峰式命名

ID在变量名中全大写

URL在变量名中全大写

Android在变量名中大写第一个字母

iOS在变量名中小写第一个,大写后两个字母

常量全大写,用下划线连接

构造函数,大写第一个字母

var thisIsMyName;

var goodID;

var reportURL;

var AndroidVersion;

var iOSVersion;

var MAX_COUNT = 10;

function Person(name) {
    this.name = name;
}

指令规范:

1.为v-for设置Key值。(不建议 用index 作为 key,和没写基本上没区别,因为不管你数组的顺序怎么颠倒,index 都是 0, 1, 2 这样排列,导致 Vue 会复用错误的旧子节点,做很多额外的工作)

2.规避v-if和v-for用在一起。或者增加一层

3.函数中统一使用_this=this来解决全局指向问题。

4.复用多用v-show少用v-if

路由

1.路由至少包含三个选项:path、name、component。path统一小写;name对应于组件中的name,大写开头驼峰;component组件驼峰。名称大写开头的组件

Template模板文件

1.相同的卡片布局,首先整合数据,尽量使用循环方式去增加,避免变更多处的问题。

2.标签语义化,避免清一色的div元素

3.DOM的层级数尽可能少,优化渲染速度。

4.样式class的命名:统一以小写字母开头,小写字母、下划线和数字组成。命名中尽量避免使用中文拼音,应该采用更简明有语义的英文单词进行组合。不建议使用驼峰法命名class属性。使用下划线的目的是为了和第三方库中的命名冲突。例如:xx_left,xx_line。

5.及时模块化

我们在实际进行组件抽离工作的时候,需要考虑到不要过度的组件化

在决定是否将代码分开时,无论是 Javascript 逻辑还是抽离为新的组件,都需要考虑以下几点:

是否有足够的页面结构/逻辑来保证它?

  • 代码重复(或可能重复)?

  • 它会减少需要书写的模板吗?

  • 性能会收到影响吗?

  • 是否会在测试代码的所有部分时遇到问题?

  • 是否有一个明确的理由?

  • 这些好处是否超过了成本?

css:

1.使用 scoped关键字,约束样式生效的范围。

2.避免使用标签选择器(效率低、损耗性能)。

其它注意事项

  1. 变量应该在最小的范围内定义,并尽可能的保持最少的活动时间。

  1. 不要在代码中重复使用相同意义的数字,用一个变量代替

  1. 对应的方法应该使用对应的动词,例如:get/set, add/remove, create/destroy, start/stop, insert/delete, begin/end。

  1. 校验时,先去校验公共库查找是否有对应校验,有则使用,没有则查看是否要多处使用,如果可复用,则进行抽离。公共函数,还是建议补全注释,让后面的人不需要重复造轮子。复杂的业务逻辑处理说明、特殊情况的代码处理说明,对于特殊用途的变量、存在临界值、使用了某种算法思路进行注释说明

  1. 文件夹小写,vue文件大写

猜你喜欢

转载自blog.csdn.net/weixin_52691965/article/details/128547107