前端编码规范之JavaScript
上次浅谈了下关于CSS的编码规范,大部分童鞋持赞同意见,仍存在一些童鞋不太理解这些规范的意义。
如果是个人或者小作坊开发,其实这些所谓的编码规范也没啥意思,因为大家写好的代码直接就给扔到网上去了,很少有打包、压缩、校检等过程,别人来修改你代码的情况也比较少。但是,对于一定规模的团队来说,这些东西还是挺有必要的!一个是保持代码的整洁美观,同时良好的代码编写格式和注释方式可以让后来者很快地了解你代码的大概思路,提高开发效率。
那么这次,继续抛砖引玉,说说Javascript一些需要引起注意的地方(这些东西也是团队开发的时候大家集思广益总结出来的)。
不规范写法举例
1. 句尾没有分号
var isHotel = json.type == "hotel" ? true : false
2. 变量命名各种各样
var is_hotel; var isHotel; var ishotel;
3. if 缩写
if (isHotel)console.log(true) elseconsole.log(false)
4. 使用 eval
var json = eval(jsonText);
5. 变量未定义到处都是
function() {var isHotel = 'true';.......var html = isHotel ? '<p>hotel</p>' : ""; }
6. 超长函数
function() {var isHotel = 'true';//....... 此处省略500行return false; }
7. ..........
书写不规范的代码让我们难以维护,有时候也让我们头疼。
(禁止)、(必须)等字眼,在这里只是表示强调,未严格要求。
前端规范之JavaScript
1. tab键用(必须)用四个空格代替
这个原因已经在前端编码规范之CSS说过了,不再赘述。
2. 每句代码后(必须)加";"
这个是要引起注意的,比如:
a = b // 赋值 (function(){//.... })() // 自执行函数
未加分号,结果被解析成
a = b(function(){//...})() //将b()()返回的结果赋值给a
这是截然不同的两个结果,所以对于这个问题必须引起重视!!!
3. 变量、常量、类的命名按(必须)以下规则执行:
1) 变量:必须
采用骆驼峰
的命名且首字母小写
// 正确的命名var isHotel,isHotelBeijing,isHotelBeijingHandian;// 不推荐的命名var is_Hotel,ishotelbeijing,IsHotelBeiJing;
2) 常量:必须
采用全大写的命名,且单词以_
分割,常量通常用于ajax请求url,和一些不会改变的数据
// 正确的命名var HOTEL_GET_URL = 'http://map.baidu.com/detail',PLACE_TYPE = 'hotel';
3) 类:必须
采用骆驼峰
的命名且首字母大写,如:
// 正确的写法var FooAndToo = function(name) {this.name = name;}
4. 空格的使用
1)if
中的空格,先上例子
//正确的写法if (isOk) {console.log("ok");}//不推荐的写法if(isOk){console.log("ok");}
()
中的判断条件前后都(必须)
加空格()
里的判断前后(禁止)
加空格,如:正确的写法:if (isOk)
;不推荐的写法:if ( isOk )
2)switch
中的空格, 先上例子
//正确的写法switch(name) {case "hotel":console.log(name);break;case "moive":console.log(name);break;default:// code }//不推荐的写法switch (name) { // switch 后不应该有空格, 正确的写法: switch(name) { // codecase "hotel":console.log(name);break; // break; 应该和console.log对齐case "movie": // 每个case之前需要有换行 console.log(name);break; // break; 应该和console.log对齐default:// code}
3)for
中的空格,先上例子
// 正确的写法var names = ["hotel", "movie"],i, len;for (i=0, len=names.length; i < len; i++) {// code }// 不推荐的写法var names = ["hotel", "movie"],i, len;for(i = 0, len = names.length;i < len;i++) { // for后应该有空格,每个`;`号后需要有空格,变量的赋值不应该有空格// code}
for
后(必须)
加空格- 每个
;
后(必须)
加空格 ()
中禁止
用var
声明变量; 且变量的赋值=
前后(禁止)
加空格
4)function
中的空格, 先上例子
// 正确的写法function call(name) {}var cell = function () {};// 不推荐的写法var call = function(name){ // code}
- 参数的反括号后(
必须)
加空格 function
后(必须)
加空格
5)var
中空格及定义,先上例子
// 一个推荐的var写法组function(res) {var code = 1 + 1,json = JSON.parse(res),type, html;// code}
- 声明变量
=
前后(必须)
添加空格 - 每个变量的赋值声明以
,
结束后(必须)
换行进行下一个变量赋值声明 (推荐)
将所有不需要进行赋值的变量声明放置最后一行,且变量之间不需要换行(推荐)
当一组变量声明完成后,空一行后编写其余代码
5. 在同一个函数内部,局部变量的声明必须
置于顶端
因为即使放到中间,js解析器也会提升至顶部(hosting)
// 正确的书写var clear = function(el) {var id = el.id,name = el.getAttribute("data-name");.........return true;}// 不推荐的书写var clear = function(el) {var id = el.id;......var name = el.getAttribute("data-name");.........return true;}
推荐阅读:JavaScript-Scoping-and-Hoisting
6. 块内函数必须
用局部变量声明
// 错误的写法var call = function(name) {if (name == "hotel") {function foo() {console.log("hotel foo");}}foo && foo();}// 推荐的写法var call = function(name) {var foo;if (name == "hotel") {foo = function() {console.log("hotel foo");}}foo && foo();}
引起的bug:第一种写法foo
的声明被提前了; 调用call
时:第一种写法会调用foo
函数,第二种写法不会调用foo
函数
注:不同浏览器解析不同,具体请移步汤姆大叔深入解析Javascript函数篇
7. (禁止)
使用eval,采取$.parseJSON
三个原因:
- 有注入风险,尤其是ajax返回数据
- 不方便debug
- 效率低,eval是一个执行效率很低的函数
建议:
使用new Function来代替eval的使用,最好就别用。
8. 除了三目运算,if
,else
等(禁止)
简写
// 正确的书写if (true) {alert(name);}console.log(name);// 不推荐的书写if (true)alert(name);console.log(name);// 不推荐的书写if (true)alert(name);console.log(name)
9. (推荐)
在需要以{}
闭合的代码段前增加换行,如:for
if
// 没有换行,小的代码段无法区分if (wl && wl.length) {for (i = 0, l = wl.length; i < l; ++i) {p = wl[i];type = Y.Lang.type(r[p]);if (s.hasOwnProperty(p)) {if (merge && type == 'object') {Y.mix(r[p], s[p]);} else if (ov || !(p in r)) {r[p] = s[p];}}}}// 有了换行,逻辑清楚多了if (wl && wl.length) {for (i = 0, l = wl.length; i < l; ++i) {p = wl[i];type = Y.Lang.type(r[p]);if (s.hasOwnProperty(p)) {// 处理merge逻辑if (merge && type == 'object') {Y.mix(r[p], s[p]);} else if (ov || !(p in r)) {r[p] = s[p];}}}}
换行可以是空行,也可以是注释
10. (推荐)
使用Function
进行类的定义,(不推荐)
继承,如需继承采用成熟的类库实现继承
// 类的实现function Person(name) {this.name = name;}Person.prototype.sayName = function() {alert(this.name);};var me = new Person("Nicholas");// 将this放到局部变量selffunction Persion(name, sex) {var self = this;self.name = name;self.sex = sex;}
平时咱们写代码,基本都是小程序,真心用不上什么继承,而且继承并不是JS的擅长的语言特性,尽量少用。如果非要使用的话,注意一点:
function A(){//... } function B(){//... } B.prototype = new A(); B.prototype.constructor = B; //原则上,记得把这句话加上
继承从原则上来讲,别改变他的构造函数,否则这个继承就显得很别扭了~
11. (推荐)
使用局部变量缓存反复查找的对象(包括但不限于全局变量、dom查询结果、作用域链较深的对象)
// 缓存对象var getComment = function() {var dom = $("#common-container"), // 缓存domappendTo = $.appendTo, // 缓存全局变量data = this.json.data; // 缓存作用域链较深的对象 }
12. 当需要缓存this
时必须使用self
变量进行缓存
// 缓存thisfunction Row(name) {var self = this;self.name = name;$(".row").click(function() {self.getName();});}
self是一个保留字,不过用它也没关系。在这里,看个人爱好吧,可以用_this, that, me等这些词,都行,但是团队开发的时候统一下比较好。
13. (不推荐)
超长函数, 当函数超过100行,就要想想是否能将函数拆为两个或多个函数
14. 等你来填坑~
小结
规范是死的,罗列这些东西,目的是为了让程序猿们对这些东西引起注意,平时写代码的时候注意格式,不仅仅方便了自己,也让其他阅读者看得舒服。
可能还有一些点没有涉及到,如果你有好的建议,请提出来,我们一起打造一个良好的前端生态环境!
本文转自Barret Lee博客园博客,原文链接:http://www.cnblogs.com/hustskyking/p/javascript-spec.html,如需转载请自行联系原作者
前端编码规范之JavaScript相关推荐
- 前端编码规范,个人感觉bootstrap总结的不错,拿出来给大家分享
前端编码规范,个人感觉bootstrap总结的不错,拿出来给大家分享 http://codeguide.bootcss.com/#html-doctype HTML 语法 HTML5 doctype ...
- 《规范》前端编码规范
概述 本规范旨在为前端程序的开发者提供规范化最新的指导,可用于程序员个人编译环境以及研发团队集成环境等场合的代码规范化检查: 不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的: ...
- 【规范】前端编码规范——css 规范
编码 在 css 首行设置文件编码为 UTF-8. @charset "UTF-8"; class 命名 class 名称应当尽可能短,并且意义明确.使用有意义的名称,使用有组织的 ...
- 前端开发规范:JavaScript 规范
JavaScript 风格指南 变量 变量声明 标准变量统一使用小驼峰,如 userInfo,activeIndex 常量全大写,用下划线连接,如 BASE_URL,DOMAIN 构造函数,大写第一个 ...
- 【规范】前端编码规范——jquery 规范
使用单引号 不推荐 $("div").html("<img src='1.jpg'>"); 推荐 $('div').html('<img sr ...
- Bootstrap HTML 编码规范之JavaScript生成的标签
JavaScript生成的标签 通过 JavaScript 生成的标签让内容变得不易查找.编辑,并且降低性能.能避免时尽量避免. 关于作者 歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HT ...
- 自己整理的前端编码规范,各位码友们想到了其它的可以留言补充
一,命名规则 1.清晰表达意图,用英文,不用或少用缩写,避免拼音 2.避免造成误导,如定义一个整数 let array=1,容易产生误解 3.变量格式遵守小驼峰规则 如let userName = ' ...
- JavaScript => JavaScript编码规范指南
JavaScript 编码规范指南 以下文档大多来自: Google JavaScript 编码规范指南 Idiomatic 风格 对于未提及的事项可以参考airbnb的JS编码规范 airbnb/j ...
- web项目开发 之 前端规范 --- HTML编码规范
此文严格按照W3C规范和部分实际项目可读性,浏览器加载,性能等众多属性权衡,做出平时前端编码规范文 档.供广大web工作者参考并实施,对维护和项目扩展升级都能省时省力. 转载请注明出处,JS前端实用开 ...
最新文章
- js字符串截取函数substr substring slice使用对比
- 开源任务调度平台elastic-job-lite源码解析
- Nacos自定义共享 Data Id 配置
- 【解决问题】centOS 7 设置固定IP,无法上外网
- 在Mac中关闭应用通知的两种方法
- java集合之Stack栈基础
- word2vec字向量_Anything2Vec:将Reddit映射到向量空间
- EXCLE调用REFPROP操作以及问题
- 品质体系及标准大集合(偏向软件)
- Java微服务面试题及答案2022,微服务面试题2022
- WEBMAX官方帮助手册 惊艳登场
- python Pytesseract 动态验证码图片识别
- 利用Email包实现邮件的群收发功能
- Excel如何批量查询手机号码归属地
- 005:魔兽世界之一:备战
- Dynamics CRM 客户端程序开发:常用工具介绍之Dynamics XRM Tools
- [转]程序员收集整理的PHP资源大全,包含各种类库及框架等
- 如何优化物联网边缘设备的能源使用
- 共模电感模型matlab,混成式共模电感的原理及功能讲解?
- 在win7系统中用U盘安装Ubuntu16.04
热门文章
- UISearchController的使用
- cocostudio 在VS模拟器中加载资源显示混乱问题
- Javascript面向对象二
- MFC UI库知多少
- Netty工作笔记0067---Netty编解码机制简述
- STM32工作笔记0075---UCOSIII任务管理(下)
- Android学习笔记---20_采用ContentProvider对外共享数据, UriMatcher类使用介绍 ,ContentUris类使用介绍,使用ContentResolver操作Conte
- 数据归一化的作用--在svm 训练的时候特别有用
- 错误org.hibernate.InvalidMappingException: Unable to read XML解决方法
- Unable to resolve target 'android-7'