你需要知道的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 相关文章推荐
javascript对象之内置对象Math使用方法
Apr 16 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
node.js调用C++开发的模块实例
Jul 03 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
electron 安装,调试,打包的具体使用
Nov 06 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 Javascript
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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
深入PHP curl参数的详解
2013/06/17 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
php实现微信扫码支付
2017/03/26 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
web 页面分页打印的实现
2009/06/22 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
三星印度官网:Samsung印度
2019/08/03 全球购物
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
工程力学专业毕业生求职信
2013/10/06 职场文书
大专毕业生简历的自我评价
2013/10/20 职场文书
简历中个人自我评价范文
2013/12/26 职场文书
售后服务经理岗位职责范本
2014/02/22 职场文书
社区健康教育实施方案
2014/03/18 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
小学生节约用水倡议书
2019/08/12 职场文书
python基础之while循环语句的使用
2021/04/20 Python
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS