web前端编码规范
简要介绍
本文通过参考百度腾讯等前端编码规范（链接建文末），得出个人习惯的编码规范。个人编码规范采用在不影响可读性的情况下能省就省，尽量简洁，不需要就直接去掉。
最佳原则不管是个人编码规范还是团队编码规范，一旦规范制定完毕就应该坚持使用，保持前后规范一致。
笔记通过MarkDown写成，对应的GitHub地址为：https://github.com/xys2015/mdnote
命名规则
项目名称，目录名称，一律采用小写方式，以下划线分割。例如：my_project_name
常见命名推荐：img、js、css、src、dep
通用规范
- 缩进4个空格。
- 分号不能省略。
- UTF-8编码。
- 换行符使用
LF。 - 在文件结尾处，保留一个空行。
HTML编码规范
规范速览
- 缩进使用4个空格。
- 属性值使用双引号。
- 属性名必须使用小写字母。
- id、class命名全小写用中划线做分隔符。
- 不要在自动闭合标签结尾处使用斜杠。
- 文件编码使用UTF-8。
- DOCTYPE这样写
<!DOCTYPE html>。 - charset这样写
<meta charset="UTF-8">。 - 引用CSS和JS时不用指明
type属性。 - 布尔类型的属性，建议不添加属性值。
- JS标签引入放在
</body>上面。 - 同一页面，应避免使用相同的
name与id。 - 对HTML5中规定允许省略的闭合标签，不允许省略闭合标签。
Note: 可以通过配置编辑器，使Tab键相当于4个空格
代码示例
<!DOCTYPE html>
<html>
<head>
<charset="UTF-8">
<title>Page title</title>
<link rel="stylesheet" href="page.css">
</head>
<body>
<img src="images/company_logo.png" alt="Company">
<h1 class="hello-world">Hello, world!</h1>
<input type="checkbox" value="1" checked>
<script src="esl.js"></script>
</body>
</html>
CSS编码规范
规范速览
- 缩进4个空格。
- 分号不能省略。
- UTF-8编码。
- 使用双引号。
- 选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确。
- 属性书写顺序：布局方式、位置，尺寸、文本相关、视觉效果。
- 当一个
rule包含多个selector时，每个选择器声明必须独占一行。 url()函数中的路径不加引号。- 长度为
0时须省略单位。 font-family属性中的字体族名称应使用字体的英文Family Name，其中如有空格，须放置在引号中。- 关于空格、缩进规范，参考下面的代码示例。
代码示例
/* 11. 空格、换行 */
.selector {
margin: 0;
padding: 0;
}
font-family: Arial, sans-serif;
/* 6. 属性书写顺序 */
.sidebar {
/* formatting model: positioning schemes / offsets / z-indexes / display / ... */
position: absolute;
top: 50px;
left: 0;
overflow-x: hidden;
/* box model: sizes / margins / paddings / borders / ... */
width: 200px;
padding: 5px;
border: 1px solid #ddd;
/* typographic: font / aligns / text styles / ... */
font-size: 14px;
line-height: 20px;
/* visual: colors / shadows / gradients / ... */
background: #f5f5f5;
color: #333;
-webkit-transition: color 1s;
-moz-transition: color 1s;
transition: color 1s;
}
/* 7. 分组选择换行 */
.post,
.page,
.comment {
line-height: 1.5;
}
/* 8. */
body {
background: url(bg.png);
}
/* 10.
宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft YaHei
*/
h1 {
font-family: "Microsoft YaHei";
}
JavaScript编码规范
规范速览
- 缩进4个空格。
- 分号不能省略。
- 空格、换行（见代码示例）。
- 优先使用单引号。
- 变量、函数、参数命名采用驼峰法。构造函数大写第一个字母。常量全大写，下划线连接。
- 每个
var只能声明一个变量。 - 函数（见代码示例）。
- 数组、对象最后不要有逗号。
代码示例
// 1缩进 3空格、换行 7函数 8数组
switch (variable) {
case '1':
// do...
break;
case '2':
// do...
break;
default:
// do...
}
var a = !arr.length;
a++;
a = b + c;
if (condition) {
// some statements;
} else {
// some statements;
}
while (condition) {
}
function funcName() {
}
(function() {
// do something
})();
var obj = {
a: 1,
b: 2,
c: 3
};
var func = function () {
};
funcName();
callFunc(a, b);
if (user.isAuthenticated()
&& user.isInRole('admin')
&& user.hasAuthority('add-admin')
|| user.hasAuthority('delete-admin')
) {
// Code
}
var task = (function () {
// Code
return result;
})();
// 4. 引号
var str = '我是一个字符串';
var html = '<div class="cls">拼接HTML可以省去双引号转义</div>';
// 5. 命名
var loadingModules = {}; // 变量
var HTML_ENTITY = {}; // 常量
function stringFormat(source) {
} // 函数
function hear(theBells) {
} // 参数
function TextNode(options) {
} // 类
参考链接
百度前端编码规范：https://github.com/ecomfe/spec
网易编码规范：http://nec.netease.com/
web前端编码规范的更多相关文章
- Web前端编码规范[转]
先插入一条广告,博主新开了一家淘宝店,经营自己纯手工做的发饰,新店开业,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!店名: 小鱼尼莫手工饰品店经营: 发饰.头花.发夹.耳环等(手工制作)网店: ...
- HTML编码规范 - (WEB前端命名规范)
HTML编码规范 (一)命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wr ...
- WEB前端开发规范
WEB前端开发规范 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档.本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本 ...
- 前端编码规范（2）—— HTML 规范
HTML 规范 文档类型 推荐使用 HTML5 的文档类型申明: <!DOCTYPE html>. (建议使用 text/html 格式的 HTML.避免使用 XHTML.XHTML 以及 ...
- WEB前端开发规范文档（转）
http://codeguide.bootcss.com/ 编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范上面的文档 再结合下面的规范: 无论是从技术角度还是开发视角,对于web前端开发 ...
- Web 前端代码规范
Web 前端代码规范 最后更新时间:2017-06-25 原始文章链接:https://github.com/bxm0927/web-code-standards 此项目用于记录规范的.高可维护性的前 ...
- 网站开发进阶(三十八)Web前端开发规范文档你需要知道的事
Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...
- Web前端开发规范文档你需要知道的事
Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进 ...
- WEB前端开发规范文档[转]
为新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的. 本文档由本人编写, 部分意见来源于网络, 以此感谢, ...
随机推荐
- 【转】【Mysql学习】之Mac上用终端使用mySQL
收藏了几篇文章,以供查阅: 在此感谢: m0_38017925:<Mac上用终端使用mySQL> xiamu03:<在MacOS上使用终端操作数据库>
- CSS Transform / Transition / Animation 属性的区别
back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...
- 开发人员需知的Web缓存知识(转)
什么是Web缓存,为什么要使用它? 缓存的类型: 浏览器缓存: 代理服务器缓存: 网关缓存: Web缓存无害吗?为什么要鼓励缓存? Web缓存如何工作 如何控制缓存和不缓存: HTML Meta标签 ...
- 【vijos】1746 小D的旅行（dijkstra）
https://vijos.org/p/1746 这题就是水题.裸的跑完每个点的最短路后直接可以暴力出解.. 这题贴出来是因为我改了下我的dijkstra的模板...(其实是原来一直写错了233 注意 ...
- 学习笔记：Vue+Node+Mongodb 构建简单商城系统（二）
前面几个月工作有点忙,导致构建简单商城系统的计划搁置近三个月.现在终于有时间重新回过头来继续本计划.本篇主要记录自己在阿里云服务器上搭建node运行环境的整个过程,以及对其中遇到的一些问题的思考. 一 ...
- 【python】字符串编码问题
参考:http://blog.csdn.net/tingsking18/article/details/4033645 python内部的字符串是以unicode来编码 decode函数用来将其他编码 ...
- uva414 - Machined Surfaces
uva414 - Machined Surfaces /* 水题,值得一提的是,getline使用时注意不能让它多吃回车键,处理方法可以用getchar. */ #include <iostre ...
- 一次Tomcat6.0.33版本号与6.0.44版本号差异所引发的问题
前序(公司应用为Web应用, 部署serverLinux + Nginx + Tomcat ) 一天收到公司报警邮件,显示个别机器方法调用严重超时,寻常都是在100ms以内响应的方法,突然某段时间响应 ...
- [Junit] 测试方法执行顺序
Junit 4.11里增加了指定测试方法执行顺序的特性测试类的执行顺序可通过对测试类添加注解 “@FixMethodOrder(value)” 来指定,其中value 为执行顺序三种执行顺序可供选择: ...
- 【BZOJ2738】矩阵乘法 整体二分
[BZOJ2738]矩阵乘法 Description 给你一个N*N的矩阵,不用算矩阵乘法,但是每次询问一个子矩形的第K小数. Input 第一行两个数N,Q,表示矩阵大小和询问组数: 接下来N行N列 ...