初学者应该了解的编程陷阱:javascript篇
为什么80%的码农都做不了架构师?>>>
日期:2012-12-4 来源:GBin1.com
对于初学编程语言的朋友来说,经常会犯一些比较“经典”的错误。在这一系列文章中,我们将介绍如何让初学编程的朋友避免一些基本的错误,并且了解如何正确的编程和开发代码。
这一篇文章中,我们介绍5个javascript代码开发中需要注意的问题和技巧。
冗余的DOM操作
DOM操作众所周知是比较重量级的。有效的限制交互可以大大的帮助你提高你的代码的性能。看看下面这段代码:
// anti-pattern for (var i = 0; i < 100; i++){ var li = $("<li>").html("This is list item #" + (i+1));$("#someUL").append(li);
}
这段代码循环修改DOM100次,但是创建了100个jQuery对象。更好的方式是使用document片段,或者创建一个String来包含100个<li/>元素,然后再添加到DOM中去。这里你只需要执行一次DOM操作。
优化后的代码:
var liststring = ""; for (var i = 100; i > 0; i--){liststring += "<li>This is list item #" + (99- i);
}
document.getElementById("someUL").innerHTML(liststring);
以上代码只调用了一次DOM操作,但是大量使用了字符串的连接操作。除了使用字符串连接,我们可以使用数组来显示。
var liststring = "<li>" var lis = []; for (var i = 100; i > 0; i--){lis.push("This is list item #" + (99- i));
}
liststring += lis.join("</li><li>") + "</li>";
document.getElementById("someUL").innerHTML(liststring);
当创建大量的字符串时,保存每一个字符串到数组里,然后调用join()方法来连接。在javascript中,这是不使用模板类库和框架外的最高效的字符串连接操作方式。
在线调试
变量和方法名不一致
这可能不是一个性能问题,但是对于编程来说非常重要,特别是当你需要维护别人的代码。看看如下例子:
var foo = "bar"; var plant = "green"; var car = "red";
如果你再添加一个变量叫“something”可能就不是那么合适了,你应该保持命名的一致。这也就是为什么在一些编程语言中,我们使用大写变量名来代表常量。
对于方法来说,我们也需要保持一致,如下:
function subtractFive(number){ return number - 5;
}
如果你有一个以上的减5方法,那么你如果定义加5方法的话,应该使用如下命名方式:
function addFive(number){ return number + 5;
}
有时候如果你定义一个返回方法,那么一般使用getXXX(),如果你只是执行操作不返回,那么最好使用doXXX()方法名。
构造器方法最好使用类似其它语言的命名方式,首字母大写,如下:
function Gbin1(color){ this.color = color;
}
不管怎么,你都应该尽量的让你的命名更加富有意义,能够给别人更多的信息。
在for..in循环中使用 hasOwnProperty 方法
在javascript中数组是不关联的。而对象来说是hashtable类型的。你可以使用for ... in循环来迭代对象属性。如下:
for (var prop in someObject) {alert(someObject[prop]); // alert's value of property }
但是问题在于,以上代码会循环proptype chain中的所有的属性,有时候这样会出错,你可能只想使用实际存在的属性。使用hasOwnProperty方法可以帮助你解决这个问题。
for (var prop in someObject) { if (someObject.hasOwnProperty(prop)) {alert(someObject[prop]); // alert's value of property }
}
这个方法可以帮助你得到实际存在的属性值。
比较boolean值
比较boolean值非常浪费计算时间。看看下面这个例子:
if (foo == true) { // do something for true } else { // do something for false }
注意上面的==true条件,这个非常没有必要因为foo本身就是boolean值。如果比较,应该使用如下代码:
if (foo) { // do something for true } else { // do something for false }
或者测试foo为false,如下:
if (!foo) { // do something for true } else { // do something for false }
事件绑定
事件在javascript中是非常的复杂的话题。以往我们使用行内oncick事件的时代已经过去了。。
我们应该使用事件bubbling或者delegation。
举个例子,如果我们需要让一组图片展示到lightbox window里。那么下面这段代码你绝对不应该使用。
这里我们使用jQuery作为例子。
HTML:
<div id="grid-container"> <a href="someimage.jpg"><img src="someimage-thumb.jpg"></a> <a href="someimage.jpg"><img src="someimage-thumb.jpg"></a> <a href="someimage.jpg"><img src="someimage-thumb.jpg"></a> ... </div>
Javascript(不推荐的写法):
$('a').on('click', function() {callLightbox(this);
});
这样书写会导致绑定事件到每一个链接元素,最好绑定到指定的图片容器,如下:
$("#grid-container").on("click", "a", function(event) {callLightbox(event.target);
});
在线调试
避免冗余的比较
在javascript和PHP中:
// javascript return foo.toString() !== "" ? true : false; // php return (something()) ? true : false;
但是条件比较永远返回true或者false,所以你没有必要清楚的添加返回值。以下代码即可:
// javascript return foo.toString() !== ""; // php return something();
希望大家能够理解并且了解如何避免代码书写中的问题,如果你有其它的例子,请与我们分享!
来源:初学者应该了解的编程陷阱:javascript篇
转载于:https://my.oschina.net/gbin1/blog/94059
初学者应该了解的编程陷阱:javascript篇相关推荐
- 看看这篇拯救发际线的干货吧--警惕 Go 编程陷阱
在2019年08月17日举办的 Gopher Meetup(深圳站)活动上,来自 Bindo Labs 公司的李雄飞进行了 <Go 编程陷阱>的演讲.李雄飞,Bindo Labs 后端技术 ...
- Verilog与SystemVerilog编程陷阱:怎样避免101个常犯的编码错误
这篇是计算机类的优质预售推荐>>>><Verilog与SystemVerilog编程陷阱:怎样避免101个常犯的编码错误> 编辑推荐 纠错式学习,从"陷阱 ...
- 前端代码标准最佳实践:javascript篇
2019独角兽企业重金招聘Python工程师标准>>> 前言 最近一直重构项目的前端代码,也参考了各种前端代码的最佳实践,目的是让前端的HTML,CSS,Javacript代码更符合 ...
- 个人知识整理(javascript篇初识)
个人知识整理(javascript篇初识(简介 书写方式 注释)) 一个小前端~突然想写点什么-算是梳理一下自己的知识吧 Javscript 简介 浏览器本身并不会执行JS代码,而是通过内置 Java ...
- 前端面试题-JavaScript篇
web前端面试题 JavaScript篇 1.JavaScript的数据类型都有哪些(8条)? ES5中有6种:Number.String.Boolean.Undefined.Null.Object ...
- 2022前端大厂面试题之JavaScript篇(1)
系列文章: 2022前端大厂面试题之JavaScript篇(1) 2022前端大厂面试题之JavaScript篇(2) 2022前端大厂面试题之JavaScript篇(3) 2022前端大厂高频面试题 ...
- 函数式编程在JavaScript下应用实践
点击此处阅读原文:函数式编程在JavaScript下应用实践 函数式编程在JavaScript下应用实践 文章目录 函数式编程在JavaScript下应用实践 前言 从一个实际需求说起 一把梭实现 C ...
- 基础,算法,编程的1000+篇文章总结
基础,算法,编程的1000+篇文章总结 本文收集和总结了有关基础,算法,编程的1000+篇文章,由于篇幅有限只能总结近期的内容,想了解更多内容可以访问:http://www.ai2news.com/, ...
- 前端面试大全(JavaScript篇——面试利器值得拥有!)
目录 面试系列 内容介绍 1.介绍js的基本数据类型. 2.介绍js有哪些内置对象? 3.说几条写JavaScript的基本规范?, 4.JavaScript原型,原型链? 有什么特点? 一.关系 二 ...
最新文章
- C++返回栈上的数组(局部变量)问题探索
- fotify php审计,代码安全审计(二)Fortify介绍及使用教程
- 【荐】牛逼的WPF动画库:XamlFlair
- C#.NET学习笔记2---C#.第一个C#程序
- Memcahce和Redis比较
- 跨境电商和独立站哪个好?
- 剑指offer之连续子数组的最大和
- python模拟浏览器下载文件_模拟浏览器下载文件?
- Code First Migrations更新数据库结构的具体步骤
- linux 网络编程与 windows 网络编程
- RTI_DDS自定义插件开发 5 专属区域(_xxEA)
- Java复习 day_01
- eleme后台的el-form表单分为左右两边放数据 :inline=true
- ORB_SLAM2运行TUM数据和实时数据
- 使用for循环打印星星
- 华东师范大学计算机学院和软件学院,华东师大撤销计算机科学与软件工程等学院建制,成立信息学部...
- CentOS禁止Ping方法
- 【GIS前沿】科学家绘制全球140多万个湖泊和水库的水下地形图
- 记面陌陌科技计算机视觉算法工程师被刷经历(附面试过程中被问倒的一些算法题分析)
- 低调收藏,5大免费资源网站!网友:够用一辈子啦
热门文章
- python实现随机森林、逻辑回归和朴素贝叶斯的新闻文本分类
- Linux下KVM的图形界面管理工具(virt-manager)(桌面版)
- Tomcat虚拟路径
- python 苹果李子橙_Python模块知识6:OS、SYS模块
- mysql多列索引不全用,MySQL多列索引的生效规则
- 数据结构树的基本操作_《数据结构》树的基本操作.doc
- 3d相册 html 代码_HTML5 3D立体图片相册
- java 银联支付反馈,微信支付/支付宝支付/银联支付,对比加总结(Java服务端)
- php 签名开发,BOS签名算法的PHP demo
- kodi教程_KODI清理缓存插件安装设置教程