没有合适的资源?快使用搜索试试~ 我知道了~
前端vue,html,js开发规范,前端vue,html,js开发规范
需积分: 5 3 下载量 101 浏览量
2023-09-19
15:18:37
上传
评论
收藏 397KB PDF 举报
温馨提示


试读
27页
前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开发规范,前端vue,html,js开
资源推荐
资源详情
资源评论




















阿里前端开发规范
目录
前端代码规范
.....................................................................................................................................
3
一. 编程规约
...................................................................................................................................
3
(一) 命名规范
.............................................................................................................................
3
1.1.1 项目命名
............................................................................................................................
3
1.1.2 目录命名
............................................................................................................................
3
1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名
........................................................................
4
1.1.4 命名严谨性
........................................................................................................................
4
(二) HTML 规范 (Vue Template 同样适用)
.......................................................................
4
1.2.1 HTML 类型
........................................................................................................................
4
1.2.2 缩进
...................................................................................................................................
5
1.2.3 分块注释
...........................................................................................................................
5
1.2.4 语义化标签
.......................................................................................................................
5
1.2.5 引号
...................................................................................................................................
5
(三) CSS 规范
..............................................................................................................................
6
1.3.1 命名
...................................................................................................................................
6
1.3.2 选择器
...............................................................................................................................
6
1.3.3 尽量使用缩写属性
...........................................................................................................
7
1.3.4 每个选择器及属性独占一行
...........................................................................................
7
1.3.5 省略 0 后面的单位
...........................................................................................................
8
1.3.6 避免使用 ID 选择器及全局标签选择器防止污染全局样式
.........................................
8
(四) LESS 规范
............................................................................................................................
9
1.4.1 代码组织
...........................................................................................................................
9
1.4.2 避免嵌套层级过多
...........................................................................................................
9
(五) Javascript 规范
..................................................................................................................
10
1.5.1 命名
.................................................................................................................................
10
1.5.2 代码格式
.........................................................................................................................
12
1.5.3 字符串
.............................................................................................................................
12
1.5.4 对象声明
.........................................................................................................................
13
1.5.5 使用 ES6+
.......................................................................................................................
13
1.5.6 括号
.................................................................................................................................
13
1.5.7 undefined 判断
...............................................................................................................
14
1.5.8 条件判断和循环最多三层
.............................................................................................
14
1.5.9 this 的转换命名
...........................................................................................................
14
1.5.10 慎用 console.log
..........................................................................................................
14
二、 Vue 项目规范
.........................................................................................................................
14
(一) Vue 编码基础
...................................................................................................................
14
2.1.1. 组件规范
........................................................................................................................
15
2.1.2. 模板中使用简单的表达式
............................................................................................
19
2.1.3 指令都使用缩写形式
.....................................................................................................
19

2.1.4 标签顺序保持一致
.........................................................................................................
20
2.1.5 必须为 v-for 设置键值 key
.........................................................................................
20
2.1.6 v-show 与 v-if 选择
.......................................................................................................
20
2.1.7 script 标签内部结构顺序
...............................................................................................
20
2.1.8 Vue Router 规范
..............................................................................................................
20
(二) Vue 项目目录规范
...........................................................................................................
23
2.2.1 基础
.................................................................................................................................
23
2.2.2 使用 Vue-cli 脚手架
......................................................................................................
23
2.2.3 目录说明
.........................................................................................................................
23
2.2.4 注释说明
.........................................................................................................................
27
2.2.5 其他
.................................................................................................................................
27

前端代码规范
规范的目的是为了编写高质量的代码,让你的团队成员每天得心情都是愉悦的,大家在一起是快
乐的。
引自《阿里规约》的开头片段:
----
现代软件架构的复杂性需要协同开发完成,如何高效地协同呢?无规矩不成方圆,无规范难
以协同,比如,制订交通法规表面上是要限制行车权,实际上是保障公众的人身安全,试想如果
没有限速,没有红绿灯,谁还敢上路行驶。对软件来说,适当的规范和标准绝不是消灭代码内容
的创造性、优雅性,而是限制过度个性化,以一种普遍认可的统一方式一起做事,提升协作效率,
降低沟通成本。代码的字里行间流淌的是软件系统的血液,质量的提升是尽可能少踩坑,杜绝踩
重复的坑,切实提升系统稳定性,码出质量。
一.编程规约
(一) 命名规范
1.1.1 项目命名
全部采用小写方式,以中线分隔。
正例:mall-management-system
反例:mall_management-system / mallManagementSystem
1.1.2 目录命名
全部采用小写方式, 以中划线分隔,有复数结构时,要采用复数命名法, 缩写不用复数。
正例:
scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc
反例:
script / style / demo_scripts / demoStyles / imgs / docs
【特殊】
VUE
的项目中的
components
中的组件目录,使用
kebab-case
命名。
正例:
head-search / page-loading / authorized / notice-icon
反例:
HeadSearch / PageLoading
【特殊】
VUE
的项目中的除
components
组件目录外的所有目录也使用
kebab-case
命名。

正例:
page-one / shopping-car / user-management
反例:
ShoppingCar / UserManagement
1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名
全部采用小写方式, 以中划线分隔。
正例: render-dom.js / signup.css / index.html / company-logo.png
反例: renderDom.js / UserManagement.html
1.1.4 命名严谨性
代码中的命名严禁使用拼音与英文混合的方式,更不允许直接使用中文的方式。 说明:正确的
英文拼写和语法可以让阅读者易于理解,避免歧义。注意,即使纯拼音命名方式也要避免采用
正例:
henan / luoyang / rmb
等国际通用的名称,可视同英文
反例:
DaZhePromotion [
打折
] / getPingfenByName() [
评分
] / int
某变量
= 3
杜绝完全不规范的缩写,避免望文不知义:
反例:
AbstractClass “
缩写
”
命名成
AbsClass
;
condition “
缩写
”
命名成
condi
,此类随意缩写严重
降低了代码的可阅读性。
(二) HTML 规范 (Vue Template 同样适用)
1.2.1 HTML 类型
推荐使用
HTML5
的文档类型申明:
( 建 议 使 用
text/html
格 式 的
HTML
。 避 免 使 用
XHTML
。
XHTML
以 及 它 的 属 性 , 比 如
application/xhtml+xml
在浏览器中的应用支持与优化空间都十分有限)。
规定字符编码
IE
兼容模式
规定字符编码
doctype
大写
正例:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta charset="UTF-8" />
<title>Page title</title>
</head>
<body>
<img src="images/company-logo.png" alt="Company">
</body>
</html>
1.2.2 缩进
缩进使用 2 个空格(一个 tab);
嵌套的节点应该缩进。
1.2.3 分块注释
在每一个块状元素,列表元素和表格元素后,加上一对
HTML
注释。
1.2.4 语义化标签
HTML5 中新增很多语义化标签,所以优先使用语义化标签,避免一个页面都是 div 或者 p 标
签。
正例
<header></header>
<footer></footer>
反例
<div>
<p></p>
</div>
1.2.5 引号
使用双引号
(" ")
而不是单引号
(’ ')
。
正例:
<div class=”box”></div>
剩余26页未读,继续阅读
资源评论


DREAM-追梦
- 粉丝: 31
- 资源: 18
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源
- 【NetTopologySuite】最大内切圆
- stm32 pdo 发送和接收,实现同步接收,主机实现节点是否在线功能
- 基于vs2017的C#实现贪吃蛇游戏开发
- 基于Qt与MYSQL的图书管理系统.zip
- 数据结构课程设计,地铁公交换乘系统(demo),使用Qt QML.zip
- HCIA笔记1111111111
- stm32 canopen sdo主从机读写大于8字节传输 说明:移植CanFestival协议
- 数据库系统大作业:手机零售系统,技术栈:C++,Qt,SQL Server存储过程、触发器.zip
- 生日快乐祝福网页 HTML
- 最后一个版本,经测试可用 md5: 26569c63bf1ab7165655a58a8b964426
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈



安全验证
文档复制为VIP权益,开通VIP直接复制
