你需要知道的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 相关文章推荐
Knockout text绑定DOM的使用方法
Nov 15 Javascript
JQuery中DOM加载与事件执行实例分析
Jun 13 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
JavaScript异步操作中串行和并行
Nov 20 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
如何在PHP中进行身份认证
2006/10/09 PHP
一个MYSQL操作类
2006/11/16 PHP
php下目前为目最全的CURL中文说明
2010/08/01 PHP
php的array_multisort()使用方法介绍
2012/05/16 PHP
php中session退出登陆问题
2014/02/27 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
juqery 学习之四 筛选查找
2010/11/30 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
Python中文字符串截取问题
2015/06/15 Python
Python3使用requests发闪存的方法
2016/05/11 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
django富文本编辑器的实现示例
2019/04/10 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
python线程优先级队列知识点总结
2021/02/28 Python
高级Java程序员面试题
2016/06/23 面试题
机械工程师的岗位职责
2013/11/17 职场文书
医护人员英文求职信范文
2013/11/26 职场文书
运动会领导邀请函
2014/01/10 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
服务标语口号
2014/07/01 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书