你需要知道的10个最佳javascript开发实践小结


Posted in Javascript onApril 15, 2012

尽管很多的开发人员都乐于颂扬javascript,但是仍旧有人看到它的阴暗面。

使用很多javascript代码的web页面会加载很慢,过多的使用javascript使得网页丑陋和拖沓。很快如何有效地使用javascript成为一个非常火热的话题。

这里让我们列出10个最佳javascript实践,帮助你有效地使用javascript。

1. 尽可能的保持代码简洁
可能大家都听到过了N遍这个代码简洁问题了。作为一个开发人员你可能在你的代码开发过程中使用了很多次,但千万不要在js开发中忘记这点。

尽量在开发模式中添加注释和空格,这样保持代码的可读性
在发布到产品环境前请将空格和注释都删除,并且尽量缩写变量和方法名
使用第三方工具帮助你实现压缩javascript。
2. 思考后再修改prototypes
添加新的属性到对象prototype中是导致脚本出错的常见原因。

yourObject.prototype.anotherFunction = ‘Hello'; 
yourObject.prototype.anotherMethod = function () { … };

在上面代码中,所有的变量都会被影响,因为他们都继承于"yourObject"。这样的使用会导致意想不到的行为。所以建议在使用完后删除类似的修改。
yourObject.prototype.anotherFunction = ‘Hello'; 
yourObject.prototype.anotherMethod = function () { … }; 
test.anotherMethod(); 
delete yourObject.prototype.anotherFunction = ‘Hello'; 
delete yourObject.prototype.anotherMethod = function () { … };

3. Debug Javascript代码
即使最好的开发人员都会犯错。为了最大化的减少类似错误,请在你的debugger中运行你的代码,确认你没有遇到任何细微的错误

4. 避免Eval
你的JS在没有"eval"方法的时候也可以很好的工作。“eval”允许访问javascript编译器。如果一个字符串作为参数传递到"eval",那么它的结果可以被执行。

这会很大的降低代码的性能。尽量避免在产品环境中使用"eval"。

5. 最小化DOM访问
DOM是最复杂的API,会使得代码执行过程变慢。有时候web页面可能没有加载或者加载不完整。最好避免DOM。

6. 在使用javascript类库之前先学习javascript
互联网充斥着很多的javascript类库,很多程序员都往往使用js类库而不理解负面影响。强烈建议你在使用第三方类库之前学习基本的JS代码,否则,你就准备着倒霉吧。

7. 不要用"SetTimeOut"和"Setinterval"方法来作为"Eval"的备选
setTimeOut( "document.getID('value')", 3000);
在以上代码中 document.getID('value') 在"setTimeOut"方法中被作为字符串来处理。这类似于'eval'方法,在每个代码执行中来执行一个字符串,因此会降低性能,因此,建议在这些方法中传递一个方法。

setTimeOut(yourFunction, 3000);
8. []比"new Array();"更好
一个常犯的错误在于使用当需要数组的时候使用一个对象或者该使用对象的时候使用一个数组。但是使用原则很简单:

“当属性名称是小的连续整数,你应该使用数组。否则,使用一个对象” - Douglas Crockford, JavaScript: Good Parts的作者.

建议:
var a = ['1A','2B'];
避免:

var a = new Array();
a[0] = "1A";
a[1] = "2B";
9. 尽量不要多次使用var
在初始每一个变量的时候,程序员都习惯使用"var"关键字。相反,建议你使用逗号来避免多余的关键字,并且减少代码体积。 如下:

var variableOne = ‘string 1',
variableTwo = ‘string 2',
variableThree = ‘string 3';
10. 不要忽略分号 ";"
这往往是大家花费数个小时进行debug的原因之一。

我很确信你肯定也在其它的文章中阅读过以上相关的内容,但是大家可能往往都忽略了很多基本的规则。你是不是也曾经忽略过分号。是不是也遇到过eval关键字问题导致性能问题?希望大家能够喜欢,谢谢!

Javascript 相关文章推荐
扩展String功能方法
Sep 22 Javascript
js 代码优化点滴记录
Feb 19 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
微信小程序新闻网站详情页实例代码
Jan 10 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
javascript针对DOM的应用分析(四)
Apr 15 #Javascript
javascript针对DOM的应用分析(三)
Apr 15 #Javascript
javascript针对DOM的应用分析(二)
Apr 15 #Javascript
javascript针对DOM的应用实例(一)
Apr 15 #Javascript
JavaScript中的null和undefined解析
Apr 14 #Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 #Javascript
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 #Javascript
You might like
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
jQuery 页面 Mask实现代码
2010/01/09 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
js post提交调用方法
2014/02/12 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
Python显示进度条的方法
2014/09/20 Python
python比较两个列表是否相等的方法
2015/07/28 Python
Python创建字典的八种方式
2019/02/27 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
思想品德自我鉴定
2013/10/12 职场文书
劳动之星获奖感言
2014/02/01 职场文书
房地产营销策划方案
2014/02/08 职场文书
个人实习生的自我评价
2014/02/16 职场文书
学校课外活动总结
2014/05/08 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技
Redis 异步机制
2022/05/15 Redis