您好,欢迎访问三七文档
当前位置:首页 > 办公文档 > 求职简历 > 如何写出优美的 javascript 代码
如何写出优美的JavaScript代码?【长天之云的回答(72票)】:我觉得写好代码和作文章差不多,无外乎:工整、优雅、拒绝重复、惜字如金。几个小建议:态度对代码有感情,每一行都应该尽心尽力,并且还要有把所有代码扔垃圾篓之后再重写两遍的冲动——一旦有了这种冲动之后,什么都挡不住你,连吃喝拉撒时,问题都会浮现到你脑子里,你就会不由自主地解决它们……能对自己的代码提出怀疑本身就是一件了不起的事!加油!少写代码提前设计能有助于少写代码,增强全局感。而代码写得少还能防止失控——感觉不对时就应该停下来,腾出时间来思考,为什么会偏离最先的想法。所有符号各就各位第一眼的就是空格太少,我推荐三个工具:可以给你的代码格式化,记得用diff工具对照一下,格式化前后的区别;SublimeLinter可以动态地在编写时给出JSHint提示(出错行高亮);Grunt可以在文件变更时给出JSHint检验(声音以及桌面通知);一旦把lint校验做为提交代码的必要过程,排版就会有本质的提高。遵行惯用法注释符号`//`后应该空一格;防止变量提升,应先声明后使用(JSHint会提醒出`_height`存在变量提升以及定义后未使用的错误);不应该使用硬编码,并且重复几次(ID后缀名可以定义到常量里,用大写字母);不应该有两个配置属性,含义不明(this.opts和this._options);若两次以上引用同一对象的属性,应该定义到局部变量再引用(varoptions=this._options);不应该同时使用两种属性命名风格(colModel和table_body);局部变量名应该尽可能短,而方法名应该尽可能完整(不应该同时即有fromatTpl又有parseTemplate);局部变量名不需要用下划线开头,仅对象私有属性和私有方法有此必要;变量名不需要带类型属性(_thdoms叫ths就好);使用JavaScript时,for循环基本可以避免(比如jQuery有$.each,$.map,$.filter,$.grep等等高阶函数可用);jQuery对象名习惯以$开头,以便区分DOM对象;jQuery查询应尽量使用context(如this.$table=$('table',this.$element));jQueryDOM操作和原生DOM操作不应该混用(已经使用jQuery的情况,就应该坚持使用jQuery来操作DOM,避免丑陋的原生操作);DOM元素构造出来,也不应该再到文档中查询一遍了(图上的构造太复杂,一眼真看不懂);CodeReview把程序写正确还只是跨出了第一步。把代码交给你的同事和朋友review,这是学习经验、共同提高最快的办法。【haochong的回答(23票)】:去github研究那些大牛的代码是怎么写的人生苦短,试试coffee【Dion的回答(9票)】:代码风格及排版虽然任何一种语言没有规定的风格约定,但也总有一些不成文且喜闻乐见的习俗。以你的代码为例,给一下几个风格上的建议:每个function之间多一空行,是的,除去注释外再多一空行;适当加空格,比如if和后面的括号之间的空格、小括号和花括号之间的空格、冒号和function之间的空格等等;风格上保持一致,你的代码里面有的地方+号和运算数之间有空格,有的则没有;少用下划线开头的变量命名;一段代码里,var语句可以合并在一起;暂时不会再修改的function或object,先用编辑器折叠起来,看上去也会整洁很多;黑色背景的Editor风格不错,不过关键字、注释、运算符等颜色上可以再调整,主要是为了防止审美疲劳,换个色调换个心情;使用成熟的JavaScript库如果没看错的话,你可能是使用了jQuery吧(至少也有一个类似Sizzle或更简单的解析器,证据在倒数第十行左右)。所以,就尽可能避免使用原生的JavaScriptDOM操作。jQuery的$符号,以CSSSelector风格统一取代了各种getElement(s)ByXxx的接口,并且扩展性非常强,是很多设计模式思想的综合运用。当然原生DOM也有自己的优势(主要是执行效率),但是大部分时候,在开发效率、代码质量、执行效率的tradeoff中,jQuery还是最佳选择。此外也推荐下JavaScriptMVC库、jQueryUI库等等。代码整理构思清楚,再写代码,你已经做到了。但是,谁能保证代码是一成不变、一劳永逸的呢?所以,「重构」的时候,除非是时间紧迫,永远不要松懈代码质量。【高原的回答(7票)】:每个人心目中对代码美的偏好是不同的,有的人觉得浏览器运行效率最高的代码是最优美的,有的人觉的用最少的字符写出来的代码最优美,还有人觉得有大量注释的代码美,还有觉得易读懂的代码才美,甚至有人觉得用语言特性hack出来的代码最拉风......关于“什么样的js代码才是好的代码”,这个问题我持续思考了两年,最后,个人比较偏好认为优美的好代码最重要应该是:易懂易维护写代码的时候我不停的拷问自己:写的这行代码一年后的我能一眼就看明白吗?一年后的我看到这段代码能知道写的是什么,解决思路是怎样的吗?一年后的我对整篇代码的组织架构能清晰明了不?如果这三个问题的有一个答案不太明确,那么就不遗余力的重写........一段好的代码,应该在只读过一至两遍就能明白代码大体是在干嘛,思路是怎样的,如果看完后有一种“层次清晰、一气呵成”的感觉,那么这段代码就应该是优美的了.....一时兴起把lz的一段代码按我的理解改写了一下,各位随意拍砖,不甚感激.....其实不用太在乎短引用的,多写点啰嗦点都不要紧,能被顺畅阅读就行...个人觉得写代码跟写作文有点像,一件事一件事叙述完后空一行分段落,用词要准确不能有歧义,_getTmpl估计应该是个html的字符串我改成了tmplTableBody,谁的什么。然后_parseTemplateToElement把什么做什么与谁.......好的文章都是一个字一个词,一句句反复改出来的,每段代码也不会是一次就能写到最好的,也是一个变量名一个函数名,一行一行重构出来的.........另外觉得时不时读读别人的文章,会有很多的启发,而且坚定地认为一种语言如果无法写好,换任何一种也会是一样滴...........【悠悠的回答(2票)】:我也比较年轻,和问者一样。说一下我的看法,可能可以帮助到你。首先,代码可读性不强归根到底是规划问题,这就涉及到架构层面了。一个架构好的产品,当你要新增功能或者改BUG时,你无需思考和查找,就知道你要改和加的代码放在哪里如果没有特别多的架构经验,系统又比较庞大,可以参考MVC的架构模型,可以参考CMD的思想做模块依赖管理。当然,对于本问,上面都是废话------分割线-------下面讲这个代码本身1,一个函数体内的变量声明应该只是用一个var,并且写在首行,如:vara....varb....要改成vara,b..........2,保持框架习惯的一致性楼主貌似有使用$的选择器,按id选择使用了$('#‘+id),那么,按标签名选择也应该使用它$(tagName),而不是写getElementsByTagName3,对各个非取值器方法使用链式调用在设计时,对于非取值器方法,应该返回this本身,方便链式调用诸如这样:this.method1().method2().method3().....就可以避免这样的代码:this.method1()this.method2()this.method3()4,使用导入和到处的思想及闭包管理私有方法,而不是使用_开头使用一个匿名函数作为闭包,导入和导出的示例;(function(w,f,b,e){code...e.abc=...//abc将被导出到外部的export})(window,foo,bar,export)//导入的外部变量写在这里5,要干活了,先写这么多,欢迎讨论,共同进步【左昊诚的回答(1票)】:在逻辑上不同的块之间多加空行,程序一下子看起来就明了很多【思扬的回答(0票)】:说些术的东西。对比提问者与他人代码区别后发现,代码只有2层缩进,除去外层function,只有一层(我因为缩进多所以只用2个空格,而图中居然是4个)。所以关键在于架构而不是风格(虽然空格也是问题,但把图中代码加上空格可能还是会觉得不会太好看)。可以尝试多使用闭包,怎么复杂怎么来,就能写出优雅的代码了。申明,不是说胡乱使用闭包之类是正确的,只是一个必经的过程。【dexbol的回答(3票)】:废话不多说了,风格上的问题直接参考:足以。【TooBug的回答(1票)】:大道理大家讲了很多,我讲一下这块代码的具体问题吧。第一,代码中逻辑没有分块,没有空行,没有注释,看起来很累,建议对代码进行分块,比如将变量集中在头部定义,然后处理一些赋值,最后执行一些其它的函数。具体到这个例子,有很多不恰当的地方,比如可以先var_height;然后在条件分支中进行赋值,比如在一堆赋值语句中间夹杂了一个parseTemplate。第二,“_”用得太多,this._var这个可以理解,因为要区分是否私有变量,但是var_height这个完全没有必要加,加得太多反而看着很累,而且也没有任何区分的意义。第三,没有将常用的变量缓存,这里最应该缓存的是this._options,要不然看起来很乱,而且缓存起来对性能也是有好处的。第四,对象的规划(命名)不清晰,比如this._options和this.opts什么关系?我反正是看不明白。第五,代码风格不统一,比如访问对象,之前都是this._options.height,为什么后面出来一个this._options.data['head']?用this._options.data.head不是更清晰么?第六,函数内变量名混乱(和第四点很像),比如第二个函数中id和_id什么关系?为什么不用aaaId和bbbId?cre又是什么,难道是createElement缩写?变量尽量起有意义的,可区分的名字。第七,函数名称表义不明,命名不符合大部分规范约定。第一眼看到_isHaveTable,我第一反应是,这应该是类似returntrue或者returnfalse之类的吧。结果一看,这么长,难道返回在后面?又往后看了一眼,这根本就没有返回啊!那为什么要用_isHaveTable啊?_is开头的函数明明白白就应该返回一个true或者false啊。【王宇鹏的回答(1票)】:最近做了一个比较复杂的电商购物车,原来的版本很慢,由于购物车逻辑异常复杂,满减,满换购,满赠品,限时特价,删除后恢复,等等.我觉得这种复杂的东西不用流行的前端框架很难做好,使用jQuery插来插去一会就乱套了.强烈建议使用了backbone来做,而且只用到了model,view,不用router.使用model的好处就是理清数据模型,view的好处是可以把显示部分模块化,并且限制变量和事件的作用范围.并引入模板.把所有的提示信息都一次性放到模板里,而不是在js里面插来插去.并使用数据绑定插件,更改数据都是自动更新页面,而不需要jQuery再去操作.这样使用了backbone后想弄乱都不容易.backbone也有小问题,例如view必须有根节点,需要把页面拆分成模块,适合做复杂的应用,如果是表单,或文章内容页面没必要用backbone编辑器推荐webstorm,js各种库的提示,git集成,错误提示.太好用了===========20130601====最经在研究angularjs,如果backbone是1D,angular就是3DAngularjs思想是3D,就是Data-binding,Directive,DependencyInjection.其他框架只是2D,或1D.Backbone是解决mvc,为了更好的
本文标题:如何写出优美的 javascript 代码
链接地址:https://www.777doc.com/doc-3985632 .html