首页 > 语言 > 关键词 > JavaScript开发最新资讯 > 正文

JavaScript开发规范要求

2012-11-30 17:10 · 稿源:问道者博客

作为一名开发人员(WEB前端JavaScript开发),不规范的开发不仅使日后代码维护变的困难,同时也不利于团队的合作,通常还会带来代码安全以及执行效率上的问题。本人在开发工作中就曾与不按规范来开发的同事合作过,与他合作就不能用“愉快”来形容了。现在本人撰写此文的目的除了与大家分享一点点经验外,更多的是希望对未来的合作伙伴能够起到一定的借鉴作用。当然,如果我说的有不科学的地方还希望各路前辈多多指教。下面分条目列出各种规范要求,这些要求都是针对同事编码毛病提出来的,好些行业约定的其它规范可能不会再提及。

1、保证代码压缩后不出错

对于大型的JavaScript项目,一般会在产品发布时对项目包含的所有JavaScript文件进行压缩处理,比如可以利用Google Closure Compiler Service对代码进行压缩,新版jQuery已改用这一工具对代码进行压缩,这一般会去掉开发时写的注释,除去所有空格和换行,甚至可以把原来较长的变量名替换成短且无意义的变量名,这样做的目的是加快文件的下载速度,同时也减小网站访问带来的额外数据流量,另外在代码保护上也起到了一点点作用,至少压缩后的代码即使被还原还是没那么容易一下读懂的。要想代码能正确通过压缩,一般要求语句都要以分号正常结束,大括号也要严格结束等,具体还要看压缩工具的要求。所以如果一开始没有按标准来做,等压缩出错后再回去找错误那是浪费时间。

2、保证代码能通过特定IDE的自动格式化功能

一般较为完善的开发工具(比如Aptana Studio)都有代码“自动格式”化功能,这一功能帮助实现统一换行、缩进、空格等代码编排,你可以设置自己喜欢的格式标准,比如左大括号{是否另起一行。达到这个要求的目的在于方便你的开发团队成员拿你代码的一个副本用IDE自动格式化成他喜欢或熟悉的风格进行阅读。你同事需要阅读你的代码,可能是因为你写的是通用方法,他在其它模块开发过程中也要使用到,阅读你的代码能最深入了解方法调用和实现的细节,这是简单API文档不能达到的效果。

3、使用标准的文档注释

这一要求算是最基本的,这有利于在方法调用处看到方法的具体传参提示,也可以利用配套文档工具生成html或其它格式的开发文档供其他团队成员阅读,你可以尝试使用jsdoc-toolkit。如果你自动生成的API是出自一个开放平台,就像facebook.com应用,那么你的文档是给天下所有开发者看的。另外编写完整注释,也更方便团队成员阅读你的代码,通过你的参数描述,团队成员可以很容易知道你编写的方法传参与实现细节。当然也方便日后代码维护,这样即使再大的项目,过了很长时间后,回去改点东西也就不至于自己都忘记了当时自己写的代码是怎么一回事了。

4、使用规范有意义的变量名

使用规范有意义的变量名可以提高代码的可读性,作为大项目开发成员,自己写的代码不仅仅要让别人容易看懂。开发大项目,其实每个人写的代码量可能都比较大,规范命名,日后自己看回自己的代码也显的清晰易懂,比如日后系统升级或新增功能,修改起代码来也轻松多了。如果到头发现自己当初写的代码现在看不太懂了,那还真是天大的笑话了。

当然,使用有意义的变量名也尽量使用标准的命名,比如像这里:var me = this也许没有var self = this好,因为self是Python中的关键字,在Python中self就是通常语言this的用法。再看下面一个例子,加s显然比没有加来的科学些,这样可以知道这个变量名存的是复数,可能是数组等:

var li = document.getElementsByTagName('li')

var lis = document.getElementsByTagName('li')

5、不使用生偏语法

JavaScript作为一门动态脚本语言,灵活性既是优点也是缺点,众所周知,动态语言不同层次开发人员对实现同样一个功能写出来的代码在规范或语法上会存在较大的差别。不管怎么样,规范编码少搞怪,不把简单问题复杂化,不违反代码易读性原则才是大家应该做的。

比如这语句:typeof(b) == 'string' && alert(b)应该改为:if (typeof(b) == 'string') alert(b),像前面那种用法,利用了&&运算符解析机制:如果检测到&&前语句返回false就不再检测后面语句,在代码优化方面也有提到把最可能出现的情况首先判断,像这种写法如果条件少还好,如果条件较多而且语句也长,那代码可读性就相当差。

又比如:+function(a){var p = a;}( 'a')应该改为:(function(a){var p = a;})( 'a'),其实function前面的+号与包含function的()括号作用是一样的,都是起运算优先作用,后者是常见且容易看明白的防止变量污染的做法,比如好些流行JavaScript框架就是采用后面这种方式。

再说个降低代码可读性的例子,如:function getPostionTxt(type){return type == 2 ? "野外" : (type == 3 ? "商城" : (type == 4 ? "副本" : null));}应该改成:function getPostionTxt(type){var typeData={"2":"野外","3":"商城","4":"副本"};if (typeData[type]) return typeData[type]; else return null;}。如果type是从0开始不间断的整数,那么直接使用数组还更简单,这种结果看起来就清晰多了,看到前面那种多层三元表达式嵌套头不晕吗。

6、不在语句非赋值地方出生中文

语句中不应该出现中文我想一般人都知道,虽然这样做不影响程序运行,但是显然有背行业标准要求,当然我们也不是在使用“易语言”做开发。关于这一个问题,我本来不想把它拿出来说的,但我确实遇到有人这样做的,也不知道是不是因为他的英语实在太烂了,至少还可以用拼音吧,另外寻求翻译工具帮忙也不错的选择。我举例如下,像以下写法出现在教学中倒还可以理解:

this.user['名字'] = '张三' 或者 this.user.名字 = '张三'

7、明确定义函数固定数量的参数

固定数量参数的函数内部不使用arguments去获取参数,因为这样,你定义的方法如果包含较多的脚本,就不能一眼看到这个方法接受些什么参数以及参数的个数是多少。比如像下面:

var $ = function(){return document.getElementById(arguments[0]);}应该改成:var $ = function(elemID){return document.getElementById(elemID);}

8、不必热衷动态事件绑定

虽然知道事件可以动态绑定,比如使用addEventListener或者使用jQuery的bind方法,也知道采用动态事件绑定可以让XHTML更干净,但是一般情况下我还是建议直接把事件写在DOM节点上,我认为这样可以使代码变得更容易维护,因为这样做,我们在查看源代码的时候就可以容易地知道什么Element绑定了什么方法,简单说这样更容易知道一个按钮或链接点击时调了什么方法脚本。

9、降低代码与XHTML的耦合性

不要过于依赖DOM的一些内容特征来调用不同的脚本代码,而应该定义不同功能的方法,然后在DOM上调用,这样不管DOM是按钮还是链接,方法的调用都是一样的,比如像下面的实现显然会存在问题:

function myBtnClick(obj)

{

if (/确定/.test(obj.innerHTML)) 

alert('OK');

else if (/取消/.test(obj.innerHTML)) 

alert('Cancel');

else 

alert('Other');

}

<a herf="javascript:;" onclick="myBtnClick(this)">确定</a><a herf="javascript:;" onclick="myBtnClick(this)">取消</a>

上面例子其实在一个函数内处理了两件事情,应该分成两个函数,像上面的写法,如果把链接换成按钮,比如改成这样:<input type="button" onclick="myBtnClick(this)" value="确定" />,那么myBtnClick函数内部的obj.innerHTML就出问题了,因为此时应该obj.value才对,另外如果把按钮名称由中文改为英文也会出问题,所以这种做法问题太多了。

10、一个函数应该返回统一的数据类型

因为JavaScrip是弱类型的,在编写函数的时候有些人对于返回类型的处理显得比较随便,我觉得应该像强类型语言那样返回,看看下面的两个例子:

function getUserName(userID)

{

if (data[userID])

return data[userID];

else

return false;

}

应该改为:

function getUserName(userID)

{

if (data[userID])

return data[userID];

else

return "";

}

这个方法如果在C#中定义,我们知道它准备返回的数据类型应该是字符串,所以如果没有找到这个数据我们就应该返回空的字符串,而不是返回布尔值或其它不合适的类型。这并没有影响到函数将来的调用,因为返回的空字符串在逻辑判断上可被认作“非”,即与false一样,除非我们使用全等于“===”或typeof进行判断。

11、规范定义JSON对象,补全双引号

使用标准肯定是有好处的,那么为什么还是有人不使用标准呢?我想这可能是懒或习惯问题。也许还会有人跟我说,少写引号可以减轻文件体积,我认为这有道理但不是重点。对于服务器返回的JSON数据,使用标准结构可以利用Firefox浏览器的JSONView插件方便查看(像查看XML那样树形显示),另外你如果使用jQuery做开发,最新版本jQuery1.4+是对JSON格式有更高要求的,具体的可以自己查阅jQuery更新文档。比如:{name:"Tom"}或{'name':'Tom'}都应该改成{"name":"Tom"}。

12、不在文件中留下未来确定不再使用的代码片段

当代码调整或重构后,之前编写的不再使用的代码应该及时删除,如果认为这些代码还有一定利用价值可以把它们剪切到临时文件中。留在项目中不仅增加了文件体积,这对团队其它成员甚至自己都起到一定干扰作用,怕将来自己看回代码都搞不懂这方法是干什么的,是否有使用过。当然可以用文档注释标签@deprecated把这个方法标识为不推荐的。

13、不重复定义其他团队成员已经实现的方法

对于大型项目,一般会有部分开发成员实现一些通用方法,而另外一些开发成员则要去熟悉这些通用方法,然后在自己编写模块遇到有调用的需要就直接调用,而不是像有些开发者喜欢“单干”,根本不会阅读这些通用方法文档,在自己代码中又写了一遍实现,这不仅产生多余的代码量,当然也是会影响团队开发效率的,这是没有团队合作精神的表现,是重复造轮子的悲剧。

比如在通用类文件Common.js有定义function $(elemID){return document.getElementById(elemID)}那么就不应该在Mail.js中再次出现这一功能函数的重复定义,对于一些复杂的方法更应该如此。

14、调用合适的方法

当有几个方法都可以实现同类功能的时候,我们还是要根据场景选择使用最合适的方法。下面拿jQuery框架的两个AJAX方法来说明。如果确定服务器返回的数据是JSON应该直接使用$.getJSON,而不是使用$.get得到数据再用eval函数转成JSON对象。如果因为本次请求要传输大量的数据而不得以使用$.post也应该采用指定返回数据类型(设置dataType参数)的做法。如果使用$.getJSON,在代码中我们一眼能看出本次请求服务器返回的是JSON。

温馨提示:jQuery1.4后,如果服务器有设置数据输出的ContentType,比如ASP.NET C#设置 Response.ContentType = "application/json",那么$.get将与$.getJSON的使用没有什么区别。

15、使用合适的控件存储合适的数据

曾发现有人利用DIV来保存JSON数据,以待页面下载后将来使用,像这样:<div id="json">{ "name":"Tom"}</div>,显然这个DIV不是用来界面显示的,如果非要这样做,达到使用HTML文件进行数据缓存的作用,至少改成用隐藏域来存这数据更合理,比如改成:<input type="hidden" value=" { "name":"Tom"}" />。

其实也可以利用window对象来保存一些数据,像上面的例子,我们可以在AJAX请求页直接包含这样的脚本块:<script>window.userData = { "name":"Tom"};</script>,当在AJAX请求回调函数中执行完$( "#MyDiv ").html(data)后,在window上就马上有了这一变量。如果采用第一种方法,将不可避免eval(document.getElementById("UserData").innerHTML)。如果在window对象存放大量数据的话,这些数据不用时要及时手动清理它们,它们是要等浏览器刷新或重启后才会消失的,这就会增加内存开销。

16、永远不要忽略代码优化工作

代码最优化是每个程序员应该努力达到的目标,也应该成为程序员永远的追求。写代码的时候,不应该急着把功能实现出来,要想一下如何写代码,代码的执行效率才是较好的。

举个例子:假设有定义getElementById的快捷方法functoin $(elemID){return document.getElementById(elemID)},那么有人可能会写出这样的代码$("MyDiv").parentNode.removeChild($("MyDiv")),其实这里执行了两次getElementById DOM查找,如果改成这样将更好:var myDiv = $("MyDiv"); myDiv.parentNode.removeChild(myDiv)。还好getElementById的DOM查找算比较快,如果换成getElementsByTagName则更应该注重优化了。jQuery开发团队也有提醒大家要注意这方面的问题。

当然,代码优化技巧也是需要个人不断积累的。曾有朋友跟我说他写网站后台代码从来不用考虑优化的,因为他们网站用的是至强四核服务器,我觉得这是很可笑的。

17、会分析策划文档,能用面向对象方法进行接口定义和代码组织

这一能力对于每一个程序员来说都是非常重要的,这也是决定一个程序员水平高低的一个重要因素。能够把需求细化并抽象出不同的类,然后有条理地编写代码,使代码结构清晰,可读性高,代码易于维护,不至于太过程化而且杂乱无章,这样才算是一个优秀的程序员。

文章来源:问道者博客

  • 相关推荐
  • 大家在看
  • 开发人员现可在Windows上构建和运行Swift代码项目

    苹果的Swift编程语言本周正式登陆Windows,现在可以从开源项目下载Swift工具链图片。

  • Chrome Web Store支付系统停用 谷歌推荐开发者尽快迁移

    Chrome Web Store 支付系统现已被谷歌放弃,并将会在未来几个月内关闭。对于目前仍使用该支付系统的开发者,谷歌已为其提供了多种替代支付方案,并推荐近期内迁移到其他支付系统中。

  • Ohayoo举办开发者大会,将投入一亿开发者生态专项基金

    近两年,休闲游戏爆发力十足,释放出新的增长潜力。移动数据监测平台Adjust指出,从 2019 年Q4 到 2020 年Q1,中国休闲游戏用户时长增幅超300%;易观数据显示,中国休闲游戏用户月活跃用户规模已突破 4 亿。游戏开发者如何在市场蓝海中运筹帷幄,决胜千里? 9 月 21 日,Ohayoo开发者大会在上海成功举办,此次大会从游戏开发者痛点出发,聚焦移动游戏行业最后一波红利——“移动原生休闲游戏“赛道的发展,解读Ohayoo平台从研发立项?

  • OKEx早报:开发人员或在10月15日前完成以太坊2.0功能开发

    OKEx早报将在每日早间为您带来最新的行情,以及相关行业动态。帮助投资人在最短的时间内了解夜间的动态消息,更好的握把每日行情。行情速递9月27日讯,昨天BTC收涨,涨幅0.7%,尾盘在10700美元上方震荡。通过OKEx平台交易数据可以看出,今日早间行情相对企稳,BTC开盘报10720.9美元,短时下挫后缓慢上行,最高点触及10800美元,当前略有回落。截至发稿,BTC暂报10792.96美元。据OKEx交易大数据显示,BTC合约多空持仓人数比为0.78,

  • 关于鸿蒙 2.0,那些开发者不知道的一切

    鸿蒙操作系统在推出一年后,鸿蒙 2.0 操作系统如约而至。在 9 月 10 日的华为 HDC 大会上,华为正式开放鸿蒙 HarmonyOS 2.0 源码,并对业界展示了其在商用落地和生态构建的进展,业界开发者对鸿蒙操作系统的全局有了更加清晰的认知。

  • 阿里云HaaS 100开发板开箱试用体验:高性价比IoT应用开发神器

    9月18日,在2020云栖大会上,阿里云智能正式推出一款加速AIoT中小开发者创新的积木式平台HaaS(Hardware as a Service),该产品旨在帮助AIoT中小开发者聚焦业务,低门槛快速组装软硬件积木,实现

  • 房地产开发常见的招标采购策略

    房地产开发常见的招标采购策略在房地产开发中,招标采购一项非常重要的工作,在与建筑商签合同之前,你需要经过思考与规划,制定相应的招标采购策略。招标采购策略必须在项目早期阶段决定,这将有利于整个开发过程,并创建坚实的起点。简单来说,招标采购就是完成商品和服务购买的方法,而这个方法取决于你的环境、商业计划和总体目标。让我们深入了解房地产开发常见的招标采购策略。房地产开发有不同的招标采购策略。招标采购策略

  • 日本将在月球建燃料工厂:用来大规模开发月球

    【日本将在月球建燃料工厂】据日本《产经新闻》9月29日报道,日本计划在月球上建造燃料生产厂,用来大规模开发月球。日本宇宙航空研究开发机构计划于本世纪30年代中期在月球表面建设燃料工厂,以力争实现大范围月球探测的目标。

  • 华为推出新版AI开发平台 云与计算开发者数量达180万,增长超70倍

    在华为全联接 2020 上,华为云业务总裁郑叶来透露,截至目前,华为云与计算领域开发者数量已达 180 万,而在 2016 年时,这一数字仅为2. 5 万,增长超过 70 倍。

  • 微信支付开发“微信支付月月刷”小程序

    日前,微信支付团队上线了一款名为“微信支付月月刷”的小程序。据该小程序提供的介绍信息可知,“微信支付月月刷”是一款为用户提供精彩好礼和优惠的小程序,

  • 从逃离到成为游戏开发,40岁了我才学会编程

    尽管我早在小学的时候就电脑玩得如鱼得水,似乎注定要进入 IT 行业,但后来却经历了屡次失败。今年,当我步入四十不惑时,我终于学会了编程。也许我的经历会让你明白:只要你想开始,就永远不会晚。有时候,你只需要找到适合自己的语言。

  • NVIDIA,联想和微软开发超融合混合云

    随着应用程序性能要求和法规遵从性问题(有时需要将数据存储在本地以减少距离和延迟问题),公司一直面临着一个持续的困境。通常,标准私有云提供的灵活性和/或需求容量较小。微软公司(NASDAQ:MSFT)、联想(Lenovo)和英伟达公司(NVIDIA Corporation)已经开发了一种超融合混合云,允许在企业的数据中心内使用Azure云服务。联想的ThickAgile SX、微软的Azure Stack Hub和NVIDIA的Mellanox networking,公司/组织可以使用一个交

  • 宁德时代曾毓群:已开发出不起火只冒烟的电池 年底量产

    9月29日消息,在中国海南召开的2020世界新能源汽车大会上,宁德时代董事长曾毓群发表演讲时透露,已开发出可以做到不起火只冒烟的电池,会在年底在一些车型量产。曾毓群表示,国标要求电池5分

  • 飞桨开发者图鉴 | 故事,要从一场失恋说起…

    从输出第一行程序代码“Hello World”开始,或许每个开发者的心中就种下了一颗“改变世界”的梦想种子。每个人想象中世界的模样并不相同,但是在飞桨开发者社区有一群开发者,他们理想中的世界充满了爱与美好。作为开发者,他们将技术转化为公益力量,在环境改善、医疗卫生、野生动物保护等领域发光发热。今天我们要讲的,就是几个关于善意的开发者故事。“失去了爱情”,却因代码收获了友谊张弘基和曹志浩相识于飞桨社区的一个野?

  • 华为HMS生态新沃土与开发者一起点燃HMS之火

    华为HMS生态在全球范围内高速增长,现在已经跃居全球第三大移动应用生态。全面开放的华为HMS生态,就是华为为全球开发者提供的新沃土,全球的开发者都可以加入HMS生态,与华为一起点燃HMS之火,闪耀满天繁星。壹观察功能介绍 《壹观察》创始人为国内知名科技媒体人宿艺,原搜狐科技通信主编,原阿里巴巴互联网汽车项目整合营销负责人。长期关注智能硬件、通信、新零售、人工智能、智联网汽车、智能家居领域的深度报道,现担任多家?

  • 长投学堂与上海财大达成战略合作共同开发财商课程

    培育孩子学习琴棋书画,可你是否会想过从小培养孩子树立正确的金钱观念?近日,上海财经大学与长投学堂签署战略合作协议,双方将在标准化课程输出、教研体系强化升级、学术交流人才培训等多个领域展开深度合作,共同推进面向学龄前儿童及成人群体财商教育的完善。据悉,此次双方将联手推出国内领先的亲子财商课程,探索未来教育的新模式和新方法。 长投学堂创始人兼CEO杨乐在接受记者采访中表示,近几年国民生活水平大幅提升,却有

  • 除了iPhone12,你关注到这些开发者/推广人需要关注的事了吗?

    ​北京时间 10 月 14 日凌晨 1 点,苹果今年的第二场秋季新品发布会正式拉开帷幕。从发布会的内容来看,苹果今年的保密工作做的比较放松,所发布的产品与此前网上盛传的预测信息基本一致,iPhone12 成为了本次发布会的绝对主角。接下来就用几个关键词带你迅速了解本次发布会重点信息~

  • 亚马逊终止其第一款大型电子游戏Crucible的开发

    10 月 11 日消息,日前,亚马逊旗下游戏工作室Relentless Studios开发的免费网游《Crucible》正式宣布将于 11 月 9 日关闭,有效寿命仅为两个月。

  • 【必看】微擎应用模块二次开发文档和初级教程手册

    01.微擎的应用模块文件夹是addons,所有微擎应用模块都在这个文件夹里面。02.运行环境推荐PHP版本5. 6 以上,mysql5.6,操作系统最好是Linux(centos)。03.微擎允许对外公开访问的文件,就三个,分别是根目录api.php(微信开发者URL地址),/web/index.php(电脑端),/app/index.php(手机端)。04.微擎的数据库等配置信息,放置在:/data/config.php文件中。05.在微擎的manifest.xml配置文件中,direct的属性值要设置为0,比如?

  • Alphabet开发了一款“植物漫游车” 帮助研究农作物生长

    Alphabet的 X实验室已经揭开了其最新moonshot项目,该公司称之为 Mineral 的计算农业项目。项目负责人Elliott Grant称,该项目的侧重于食大规模可持续粮生产和农业,重点是“基于人工智能、模拟、传感器、机器人等方面的突破,开发和测试一系列软件和硬件原型”。

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签