没有合适的资源?快使用搜索试试~ 我知道了~
首页中地数码前端编码规范:提升团队协作与代码质量
前端代码规范v1.0文档旨在为中地数码科技有限公司自然资源事业部的web前端开发人员提供统一的编码标准,确保代码的正确性、可读性和一致性。该规范主要关注以下几个方面: 1. 目标与原则: - 规范的目的在于提升团队协作效率,通过标准化的编码风格和约定,确保代码易于理解、可靠,同时增强程序的可维护性和一致性。 - 基本原则强调了代码的清晰易读性,提倡以人为中心的编程思想,只有在性能确实成为问题时才进行优化。 2. 适用范围: - 本规范适用于web前端开发人员在整个软件开发过程中,旨在提高代码质量和团队合作效率。 3. 命名规则: - 项目、目录、JS、CSS/SCSS、HTML文件的命名均采用小写,以下划线或复数形式表示,如`my_project_name`、`scripts`、`admin_person.js`等。 - HTML文件中,使用软tab缩进(4个空格),属性用双引号,属性名全小写并用中划线分隔,如`<li>`标签的闭合标签不需加斜线。 4. HTML规范: - 代码语法方面,要求使用标准的HTML5语法,如正确的缩进,嵌套元素时缩进递增,属性值使用双引号,避免在自动闭合标签后使用斜线,除非必要,应保留可选的闭合标签。 5. 示例: 提供了HTML文档的典型例子,如`<!DOCTYPE html>`、`<html>`、`<head>`、`<title>`等元素的使用,展示了规范下的良好格式。 遵循这个前端代码规范,可以有效提升代码质量,减少误解,加速代码审查和维护过程,对于团队整体技术栈的一致性和项目的成功实施至关重要。
资源详情
资源推荐
![](https://csdnimg.cn/release/download_crawler_static/12495937/bg9.jpg)
3.5 IE 兼容模式
用 <meta> 标签可以指定页面应该用什么版本的 IE 来渲染;不同 doctype 在不同浏
览器下会触发不同的渲染模式。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible"
content="IE=Edge">
</head>
...
</html>
3.6 引入 CSS、JS
根据 HTML5 规范, 通常在引入 CSS 和 JS 时不需要指明 type,因为 text/css
和 text/javascript 分别是他们的默认值。
<!—- 引入外部 CSS -->
<link rel="stylesheet" href="code_guide.css">
<!—- 页面样式 CSS -->
<style>
...
</style>
<!—- 引入外部 JS -->
<script src="code_guide.js"></script>
<!-- 页面 JS -->
<script>
...
</script>
![](https://csdnimg.cn/release/download_crawler_static/12495937/bga.jpg)
3.7 属性顺序
属性应该按照特定的顺序出现以保证易读性;
class /*class 是为高可复用组件设计的,所以应处在第一位*/
id /* id 更加具体且应该尽量少使用,所以将它放在第二位*/
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled
例如:
<a class="..." id="..." data-modal="toggle"
href="#">Example link</a>
<input class="form-control" type="text">
<img src="..." alt="...">
3.8 boolean 属性
boolean 属性指不需要声明取值的属性,XHTML 需要每个属性声明取值,但是
HTML5 并 不需要;
boolean
属性的存在表示取值为
true
,不存在则表示取值为
false
。
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
3.9 JS 生成标签
在 JS 文件中生成标签让内容变得更难查找,更难编辑,性能更差。应该尽量避免这
种情况的出现。
3.10 减少标签数量
在编写 HTML 代码时,需要尽量避免多余的父节点;很多时候,需要通过迭代和重构来
使 HTML 变得更少。
<!-- 反例 -->
<span class="avatar">
<img src="...">
</span>
<!-- 正确 -->
<img class="avatar" src="...">
![](https://csdnimg.cn/release/download_crawler_static/12495937/bgb.jpg)
3.11 实用高于完美
尽量遵循 HTML 标准和语义,但是不应该以浪费实用性作为代价。
任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。
4.
CSS、SCSS
规范
4.1 缩进
使用 soft tab(4 个空格)。
.element {
position: absolute;
top: 10px;
left: 10px;
border-radius: 10px;
width: 50px;
height: 50px;
}
4.2 分号
每个属性声明末尾都要加分号;避免文件压缩处理出错。
.element {
width: 20px;
height: 20px;
background-color: red;
}
4.3 空格
以下几种情况不需要空格:
属性名后
多个规则的分隔符','前
!important '!'后
属性值中'('后和')'前
行末不要有多余的空格
以下几种情况需要空格:
属性值前
选择器'>', '+', '~'前后
'{'前
!important '!'前
@els e 前后
属性值中的','后
剩余52页未读,继续阅读
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/default.jpg!1)
marissa21
- 粉丝: 1
- 资源: 2
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- Vue实现iOS原生Picker组件:详细解析与实现思路
- Arduino蓝牙小车:参数调试与功能控制
- 百度Java面试精华:200页精选资源涵盖核心知识点
- Swift使用CoreData填坑指南:CoreData在Swift 3.0的变化
- 微距离无线充电器创新设计及其实验探索
- MTK Android平台开发全攻略:44步详解流程
- RecyclerView全面解析:替代ListView的新选择
- Android开发:自动适配中英文键盘解决方案
- Android调用WebService接口教程
- Android开发:BitmapUtil图片处理全解析与实例
- Android多线程断点续传实现详解
- PCA算法在人脸识别会议签到系统中的应用
- EventBus 3.0:Android事件总线详解与实战应用
- Android FileUtil:全面解析文件操作实用技巧与实例
- RecyclerView添加头部和尾部实战教程
- Android实现微博滑动固定顶部栏实战与优化
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)