5 种JavaScript编码规范
转载 & & 投稿：mrr
编码规范就是指导如何编写和组织代码的一系列标准，下面通过本文给大家带来了5 种JavaScript编码规范，需要的朋友参考下
什么是编码规范
编码规范就是指导如何编写和组织代码的一系列标准。通过阅读这些编码规范，你可以知道在各个公司里代码是如何编写的。
我们为什么需要编码规范
一个主要的原因是：每个人写代码的方式都是不同的。我可能喜欢这么写，而你喜欢用另一种方法写。如果我们只处理自己的代码，这样并没有什么问题。但如果有成千上万的程序员同时在一个代码库上面工作呢？如果没有规范，事情很快会变得一团糟。代码规范可以让新人迅速的熟悉相关的代码，并且也能写出让其他程序员简单易懂的代码。
Airbnb JavaScript Style Guide
号称是“最合理的编写 JavaScript 代码的方式”。
Airbnb 的这个代码规范可能是互联网最流行的 JavaScript 代码规范了，它在 Github 上足有 6 万 star，几乎覆盖了 JavaScript 的每一项特性。
Google JavaScript Style Guide
只有遵守了这里的规则，一个 JavaScript 源文件才能被称为“Google Style”。很霸气，我行我素，同时也被不少公司沿用。
Idiomatic JavaScript Style Guide
符合语言习惯的 JavaScript 代码规范。
不管有多少人参与，不管是否在同一个代码库，所有的 JavaScript 代码风格都必须像同一个人写的。
另一个很强势的同时也很流行的 JavaScript 编码规范。它的野心也很大，不止想规范 JavaScript，其它语言也都想管起来。
地球上所有的代码都像同一个人写的？想想让人觉得不寒而栗啊……
JavaScript Standard Style Guide
一个功能强大的 JavaScript 代码规范，自带 linter 和自动代码纠正，无需配置，自动格式化代码。可以在编码早期就发现代码中的低级错误。这个代码规范被很多知名公司所采用，比如 NPM、GitHub、mongoDB 等。
（这个 Github 地址霸气到不行。）
jQuery JavaScript Style Guide
jQuery 是多少人入门前端的好帮手啊，可惜如今只剩回忆了。它们的这个规范算是很早期的一个代码规范了，主要是针对它们的代码以及早期 JavaScript 版本进行规定。
以上所述是小编给大家介绍的5 种JavaScript编码规范，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
标签：至少1个，最多5个
这篇文章定义了 HTML 和 CSS 的格式和代码规范，旨在提高代码质量和协作效率。
通用样式规范
省略图片、样式、脚本以及其他媒体文件 URL 的协议部分（），除非文件在两种协议下都不可用。这种方案称为 protocol-relative URL，好处是无论你是使用 HTTPS 还是 HTTP 访问页面，浏览器都会以相同的协议请求页面中的资源，同时可以节省一部分字节。
&!-- Not recommended --&
&script src="https://www.google.com/js/gweb/analytics/autotrack.js"&&/script&
&!-- Recommended --&
&script src="//www.google.com/js/gweb/analytics/autotrack.js"&&/script&
/* Not recommended */
.example {
background: url("https://www.google.com/images/example");
/* Recommended */
.example {
background: url("//www.google.com/images/example");
通用格式规范
一次缩进2个空格，不要使用 tab 或者混合 tab 和空格的缩进。
&li&Fantastic
.example {
以下都应该用小写：HTML 元素名称，属性，属性值（除非 text/CDATA），CSS 选择器，属性，属性值。
&!-- Not recommended --&
&A HREF="/"&Home&/A&
&!-- Recommended --&
&img src="google.png" alt="Google"&
/* Not recommended */
color: #E5E5E5;
/* Recommended */
color: #e5e5e5;
结尾空格不仅多余，而且在比较代码时会更麻烦。
&!-- Not recommended --&
&!-- Recommended --&
&p&Yes please.
通用元规范
在 HTML 中通过 &meta charset=”utf-8″& 指定编码方式，CSS 中不需要指定，因为默认是 UTF-8。
使用注释来解释代码：包含的模块，功能以及优点。
用 TODO 来标记待办事项，而不是用一些其他的标记，像 @@。
&!-- TODO: remove optional tags --&
&li&Apples&/li&
&li&Oranges&/li&
HTML 风格规范
HTML 文档应使用 HTML5 的文档类型：&!DOCTYPE html&。孤立标签无需封闭自身，` 不要写成 。`
HTML 正确性
尽可能使用正确的 HTML。
&!-- Not recommended --&
&title&Test&/title&
&article&This is only a test.
&!-- Recommended --&
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Test&/title&
&article&This is only a test.&/article&
根据使用场景选择正确的 HTML 元素（有时被错误的称为“标签”）。例如，使用 h1 元素创建标题，p 元素创建段落，a 元素创建链接等等。正确的使用 HTML 元素对于可访问性、可重用性以及编码效率都很重要。
&!-- Not recommended --&
&div onclick="goToRecommendations();"&All recommendations&/div&
&!-- Recommended --&
&a href="recommendations/"&All recommendations&/a&
多媒体元素降级
对于像图片、视频、canvas 动画等多媒体元素，确保提供其他可访问的内容。图片可以使用替代文本（alt），视频和音频可以使用文字版本。
&!-- Not recommended --&
&img src="spreadsheet.png"&
&!-- Recommended --&
&img src="spreadsheet.png" alt="Spreadsheet screenshot."&
标记、样式和脚本分离，确保相互耦合最小化。
如果团队中文件和编辑器使用同样的编码方式，就没必要使用实体引用，如 —， ”，?，除了一些在 HTML 中有特殊含义的字符（如 & 和 &）以及不可见的字符（如空格）。
&!-- Not recommended --&
The currency symbol for the Euro is “&”.
&!-- Recommended --&
The currency symbol for the Euro is “EUR”.
在引用样式表和脚本时，不要指定 type 属性，除非不是 CSS 或 JavaScript。因为 HTML5 中已经默认指定样式变的 type 是 text/css，脚本的type 是 text/javascript。
&!-- Not recommended --&
&link rel="stylesheet" href="//www.google.com/css/maia.css"
type="text/css"&
&!-- Recommended --&
&link rel="stylesheet" href="//www.google.com/css/maia.css"&
&!-- Not recommended --&
&script src="//www.google.com/js/gweb/analytics/autotrack.js"
type="text/javascript"&&/script&
&!-- Recommended --&
&script src="//www.google.com/js/gweb/analytics/autotrack.js"&&/script&
HTML 格式规范
属性值用双引号。
&!-- Not recommended --&
&a class='maia-button maia-button-secondary'&Sign in&/a&
&!-- Recommended --&
&a class="maia-button maia-button-secondary"&Sign in&/a&
CSS 风格规范
ID 和 Class 命名
使用有含义的 id 和 class 名称。
/* Not recommended: meaningless */
#yee-1901 {}
/* Not recommended: presentational */
.button-green {}
/* Recommended: specific */
#gallery {}
/* Recommended: generic */
ID 和 Class 命名风格
id 和 class 应该尽量简短，同时要容易理解。
/* Not recommended */
#navigation {}
/* Recommended */
.author {}
除非需要，否则不要在 id 或 class 前加元素名。
/* Not recommended */
ul#example {}
div.error {}
/* Recommended */
#example {}
尽量使用 CSS 中可以简写的属性 (如 font)，可以提高编码效率以及代码可读性。
/* Not recommended */
border-top-style:
font-family: palatino, georgia,
font-size: 100%;
line-height: 1.6;
padding-bottom: 2
padding-left: 1
padding-right: 1
padding-top: 0;
/* Recommended */
border-top: 0;
font: 100%/1.6 palatino, georgia,
padding: 0 1em 2
值为 0 时不用添加单位。
margin: 0;
padding: 0;
值在 -1 和 1 之间时，不需要加 0。
font-size: .8
16进制表示法
/* Not recommended */
/* Recommended */
使用带前缀的命名空间可以防止命名冲突，同时提高代码可维护性。
.adw-help {} /* AdWords */
#maia-note {} /* Maia */
ID 和 Class 命名分隔符
选择器中使用连字符可以提高可读性。
/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {}
/* Not recommended: uses underscore instead of hyphen */
.error_status {}
/* Recommended */
#video-id {}
.ads-sample {}
CSS 格式规范
按照属性首字母顺序书写 CSS 易于阅读和维护，排序时忽略带有浏览器前缀的属性。
background:
-moz-border-radius: 4
-webkit-border-radius: 4
border-radius: 4
text-align:
text-indent: 2
块级内容缩进
为了反映层级关系和提高可读性，块级内容都应缩进。
@media screen, projection {
background: #
color: #444;
每行 CSS 都应以分号结尾。
/* Not recommended */
height: 100px
/* Recommended */
height: 100
属性名结尾
属性名和值之间都应有一个空格。
/* Not recommended */
font-weight:
/* Recommended */
font-weight:
声明样式块的分隔
在选择器和 {} 之间用空格隔开。
/* Not recommended: missing space */
margin-top: 1
/* Not recommended: unnecessary line break */
margin-top: 1
/* Recommended */
margin-top: 1
选择器分隔
每个选择器都另起一行。
/* Not recommended */
a:focus, a:active {
position: top: 1
/* Recommended */
font-weight:
line-height: 1.2;
规则之间都用空行隔开。
background: #
width: 50%;
属性选择器和属性值用单引号，URI 的值不需要引号。
/* Not recommended */
@import url("//www.google.com/css/maia.css");
font-family: "open sans", arial, sans-
/* Recommended */
@import url(//www.google.com/css/maia.css);
font-family: 'open sans', arial, sans-
CSS 元规则
用注释把 CSS 分成各个部分。
/* Header */
#adw-header {}
/* Footer */
#adw-footer {}
/* Gallery */
.adw-gallery {}
坚持遵循代码规范。
写代码前先看看周围同事的代码，然后决定代码风格。
代码规范的意义在于提供一个参照物。这里提供了一份全局的规范，但是你也得参照公司内部的规范，否则阅读你代码的人会很痛苦。
1 收藏&&|&&5
你可能感兴趣的文章
1 收藏，59
4 收藏，2k
8 收藏，463
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。赞助商推荐()：
想学到点真东西？
如果你有1~3年前端开发经验，不妨
想高薪入职阿里？
想要免费一对一编程辅导？更好的工作机会
在100offer，提交一份个人资料，一周内即会有5-10家Top互联网公司主动向你发出邀请。100offer确保你的隐私万无一失，同时Consultant将为你全程提供专业服务。
最具价值web全栈课程
只做前端开发培训的好学校，专注于多方向全栈工程师培养。前端名师邵山欢亲自授课，课程涵盖HTML5、CSS3、Node.js、Angular、React诸多课程，免费视频广受学生好评。
跟牛人学前端
跟牛人学前端
妙味大前端自学宝典
妙味课堂2016年JavaScript课程大纲震撼升级、全栈来袭！
前端最新干货
前端最新干货
web在线直播课
潭州教育是中国较早的在线教育平台,教学内容涵盖网络营销,java,javascript,jquery,android,ios,mysql,围棋,刺绣,养殖,农业,手艺,网页设计,平面设计,影视后期,CAD建筑机械,网络营销,商战智慧,办公软件,三维设计,工业设计,淘宝摄影,英语,音乐,大学代理,Photoshop教程,
Max教程,Maya教程,CAD教程,会声会影教程,AI教程,淘宝开店,摄影教程,免费教程,素材下载等众多在线学习精品课程。经过10年的发展,潭州教育已经发展为中国规模较大的在线教育平台。
JavaScript 代码片段
精心挑选的有用的 JavaScript 代码片段，你可以在30秒或更短的时间内理解。
Parcel 中文文档
快速，零配置的 Web 应用程序打包器
您的位置： » 分类:
» 文章: 5个JavaScript编码规范-包括AirBnB, GitHub 和 Google
您可能感兴趣的文章
近期最热文章
- 7,107 - 7,066 - 5,602
关注WEB前端开发公众号