如何编写出优美的js代码.docxVIP

济宁网站建设/整理 本文地址：/webhtml/584.html 如何编写出优美的JavaScript代码？ 态度 态度决定一切对代码要有感情，每一行都应该尽心尽力，并且还要有把那些扔垃圾篓的代码再重写两遍的冲动——一旦有了这种冲动之后，什么都挡不住你，连吃喝拉撒时，问题都会浮现到你脑子里，你就会不由自主地解决它们……能对自己的代码提出怀疑本身就是一件了不起的事!加油! 少写代码 　　提前设计能有助于少写代码，增强全局感。而代码写得少还能防止失控——感觉不对时就应该停下来，腾出时间来思考，为什么会偏离最先的想法。所有符号各就各位。第一眼就是空格太少，下面推荐三个工具给大家： 　　Beautify JavaScript or HTML可以给你的代码格式化，记得用diff工具对照一下，格式化前后的区别; 　　SublimeLinter可以动态地在编写时给出JSHint提示(出错行高亮); 　　Grunt可以在文件变更时给出SHint检验(声音以及桌面通知); 一旦把lint校验做为提交代码的必要过程，排版就会有本质的提高。 遵行惯用法 　　注释符号‘//’后应该空一格; 　　防止变量提升，应先声明后使用(JSHint会提醒出‘_height’存在变量提升以及定义后未使用的错误); 　　不应该使用硬编码，并且重复几次(ID后缀名可以定义到常量里，用大写字母); 　　不应该有两个配置属性，含义不明(this.opts和this._options); 　　若两次以上引用同一对象的属性，应该定义到局部变量再引用(var options = this._options); 　　不应该同时使用两种属性命名风格(colModel和table_body); 　　局部变量名应该尽可能短，而方法名应该尽可能完整(不应该同时即有fromatTpl又有parseTemplate); 　　局部变量名不需要用下划线开头，仅对象私有属性和私有方法有此必要; 　　变量名不需要带类型属性(_thdoms叫ths就好); 　　使用JavaScript时，for循环基本可以避免(比如jQuery有$.each, $.map，$.filter, $.grep等等高阶函数可用); 　　jQuery对象名习惯以$开头，以便区分DOM对象; 　　jQuery查询应尽量使用ontext(如 this.$table = $(table, this.$element) ); 　　jQuery DOM操作和原生DOM操作不应该混用(已经使用jQuery的情况，就应该坚持使用jQuery来??作DOM，避免丑陋的原生操作); DOM元素构造出来，也不应该再到文档中查询一遍了(图上的构造太复杂，一眼真看不懂); 代码复查 　　把程序写正确还只是跨出了第一步。把代码交给你的同事和朋友复查，这是学习经验、共同提高 最快的办法。 代码风格及排版 　　虽然任何一种语言都没有任何约定的风格，但也总有一些不成文且喜闻乐见的习俗。以你的代码为例，给以下几个风格上的建议： 　　每个function之间多一空行，是的，除去注释外再多一空行; 　　适当加空格，比如if和后面的括号之间的空格、小括号和花括号之间的空格、冒号和function之间的空格等等; 　　风格上保持一致，你的代码里面有的地方+号和运算数之间有空格，有的则没有; 　　少用下划线开头的变量命名; 　　一段代码里，var语句可以合并在一起; 　　暂时不会再修改的function或object，先用编辑器折叠起来，看上去也会整洁很多; 黑色背景的Editor风格不错，不过关键字、注释、运算符等颜色上可以再调整，主要是为了防止审美疲劳，换个色调换个心情; 使用成熟的JavaScript库 　　如果没看错的话，你可能是使用了jQuery吧(至少也有一个类似Sizzle或更简单的解析器，证据在倒数第十行左右)。所以，就尽可能避免使用原生的JavaScript DOM操作。 　　jQuery的$符号，以CSS Selector风格统一取代了各种getElement(s)ByXxx的接口，并且扩展性非常强，是很多设计模式思想的综合运用。 当然原生DOM也有自己的优势(主要是执行效率)，但是大部分时候，在开发效率、代码质量、执行效率的tradeoff中，jQuery还是最佳选择。此外也推荐下JavaScript MVC库、jQuery UI库等等。 代码整理 　　构思清楚，再写代码，你已经做到了。 　　但是，谁能保证代码是一成不变、一劳永逸的呢？ 　　所以，「重构」的时候，除非是时间紧迫，永远不要松懈代码质量。 　　Web前端爱好者TooBug对楼主的代码也进行了详细的点评，并且也给出了一些非常有意义的指导： 　　代码中逻辑没有分块、没有空行、没有注释、看