前端代码规范

标签： 前端 代码 规范 | 发表时间：2014-09-21 17:47 | 作者：2008winstar
出处：http://www.iteye.com

Web 前端代码规范

 

必须

1 结构、样式、行为三层分离；

2 采用统一的缩进（两个或四个空格/Tab）；

3 嵌套标签应当缩进一次，必须合理嵌套；

4 HTML页面必须包含文档类型声明，采用HTML5文档类型声明；

 

<!doctype html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
</head>
<body>
	
</body>
</html>

  

5 CSS样式全部采用外链的方式在<head>标签中引入；禁用行内样式，复用已有的样式规则；

6 所有标签和属性名称必须小写，标签的属性值全部使用双引号，不采用属性简写方式；

 

<input type="checkbox" checked="checked">

  

7 JavaScript脚本在body结束标签（</body>）前引入（除了影响页面初始化加载显示的JavaScript脚本需放在<head>头部标签里面，其余的都放在</body>标签前）。

8 JavaScript中声明数组和对象采用字面量的方式声明；

9 避免全局变量；采用局部变量；

10 不用HTML5废弃的标签，如<font>，<s>，<center>，……

 

建议

1 不用在自闭合标签的尾部添加斜线

不用：<br/>，

采用：<br>

2 引入CSS文件时，如果type的值为text/css，则不需要指定type属性

  不用：<link rel=“stylesheet” type=“text/css” href=“style.css”>

              <style type=“text/css”></style>

  采用：<link rel=“stylesheet” href=“style.css”>

              <style></style>

3 引入JavaScript脚本时，如果type的值为text/javascript，则不需要指定type属性；

不用：<script type=“text/javascript” src=“script.js”></script>

            <script type=“text/javascript”></script>

采用：<script src=“script.js”></script>

            <script></script>

4 JavaScript脚本中字符串统一使用单引号；

5 JavaScript代码每条语句结束必须以分号结束；

6 JavaScript变量的声明采用单var形式；

7 使用class与样式关联；使用id与行为关联；样式与行为解耦。

8 建议class的命名采用带横线的形式，如 “btn-primary”，id的命名采用驼峰式，如“addBtn”。



已有 0 人发表留言，猛击->> 这里<<-参与讨论


ITeye推荐



相关 [前端 代码 规范] 推荐：

前端代码规范

- - Web前端 - ITeye博客
1 结构、样式、行为三层分离；. 2 采用统一的缩进（两个或四个空格/Tab）；. 3 嵌套标签应当缩进一次，必须合理嵌套；. 4 HTML页面必须包含文档类型声明，采用HTML5文档类型声明；. 5 CSS样式全部采用外链的方式在标签中引入；禁用行内样式，复用已有的样式规则；. 6 所有标签和属性名称必须小写，标签的属性值全部使用双引号，不采用属性简写方式；.

中小型前端团队代码规范工程化最佳实践 - ESLint

- - SegmentFault 最新的文章
一千个程序员，就有一千种代码风格. 在前端开发中，有几个至今还在争论的代码风格差异：. 这几个代码风格差异在协同开发中经常会被互相吐槽，甚至不能忍受. 除此之外，由于 JavaScript 的灵活性，往往一段代码能有多种写法，这时候也会导致协同时差异. 并且，有一些写法可能会导致不易发现的 bug，或者这些写法的性能不好，开发时也应该避免.

前端CSS规范整理

- - 标点符
1、文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解：. 所有的CSS分为两大类：通用类和业务类. 通用的CSS文件，放在如下目录中：. 基本样式库 /css/core. 通用UI元素样式库 /css/lib. JS组件相关样式库 /css/ui. 业务类的CSS是指和具体产品相关的文件，放在如下目录中：.

android 编程代码规范

- - CSDN博客推荐文章
                学习android开发已经有很长时间了，但是有时代码却很少用规范的模式进行书写，下面就简要的总结了自己学习的代码规范. 一、关于一些常量值资源的书写规范. 颜色值有RGB和透明信息Alpha组成，以#开头， 形式有 #RGB                        #ARGB                        #RRGGBB                    #AARRGGBB.

java代码开发规范

- - BlogJava_首页
格式规范：                                                                      .       1、TAB空格的数量. 编辑器上的TAB空格数量统一取值为4.       2、换行， 每行120字符.       3、if语句的嵌套层数3层以内   .

几个 Swift 代码规范

- - SegmentFault 最新的文章
作者：Erica Sadun， 原文链接，原文日期：2015-11-17. 译者： mmoaay；校对： lfb_CD；定稿： shanks. 我们需要经常带着新问题来重新审视一下以前的代码规范. Kevin 提供的一套规范：“如果尾部的闭包参数是函数式的就用圆括号. myCollection.map({blah}).filter({blah}).etc myCollection.forEach {} // 或者 dispatch_after(when, queue) {}.

前端安全编码规范

- - SegmentFault 最新的文章
随着互联网高速的发展，信息安全已经成为企业重点关注焦点之一，而前端又是引发安全问题的高危据点，所以，作为一个前端开发人员，需要了解前端的安全问题，以及如何去预防、修复安全漏洞. 下面就以前端可能受到的攻击方式为起点，讲解web中可能存在的安全漏洞以及如何去检测这些安全漏洞，如何去防范潜在的恶意攻击.

网易邮箱前端Javascript编码规范：基础规范

- - 博客 - 伯乐在线
在多年开发邮箱webmail过程中，网易邮箱前端团队积累了不少心得体会，我们开发了很多基础js库，实现了大量前端效果组件，开发了成熟的opoa框架以及api组件，在此向大家做一些分享. 今天想先和大家聊聊javascript的编码规范. 总所周知，javascript是一种语法极其灵活的语言. javascript在设计之初就只是用来为HTML添加动态效果的.

代码规范的那些事儿

- - BlogJava-首页技术区
作为一个苦逼的程序员，因为种种原因经常需要阅读别人写的代码. 您是否有因代码杂乱冗余而心生厌恶，您是否有过因代码晦涩难懂而抓狂，您是因代码低级的逻辑错误而愤概，您是否因代码结构不合常规而需要到处查找，您是否因看到几百甚至上千行代码的方法而望洋兴叹，您是否因代码缺少注释而猜测以及花很多时间去理清楚前后逻辑.

优秀的 HTML 和 CSS 代码规范

- - SHTION官方网站
HTML 和 CSS 代码规范究竟是怎么样的. 做网站时， HTML 和 CSS 代码有什么要求. HTML 和 CSS 代码的写法是否影响网站的SEO. 写好  HTML 和 CSS 代码需要注意些什么. 一般大型WEB站点开发设计人员，要求使用者具有一定的 HTML、CSS基础知识，对原代码具有较强的控制能力.