首页 > 语言 > 关键词 > 编程语言最新资讯 > 正文

初学者应该了解的编程陷阱:javascript篇

2012-12-04 11:38 · 稿源: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个

元素,然后再添加到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中:

// javascriptreturn foo.toString() !== “” ? true : false;

// php

return (something()) ? true : false;

但是条件比较永远返回true或者false,所以你没有必要清楚的添加返回值。以下代码即可:

// javascriptreturn foo.toString() !== “”;

// php

return something();

希望大家能够理解并且了解如何避免代码书写中的问题,如果你有其它的例子,请与我们分享!

来源:初学者应该了解的编程陷阱:javascript篇

  • 相关推荐
  • 大家在看
  • 报告:JavaScript为最常用整体编程语言 Python超过Java

    在过去的 12 个月中,Python在使用的编程语言列表中已经超过了Java,它也是被研究最多的语言。报告称,在过去的 12 个月里,30%的受访者开始或继续学习Python,甚至比去年还要多。

  • 编程语言最新排名:Java最受欢迎、JS用户最多

    IDE工具开发商JetBrains基于2万名开发者,对编程语言的最新情况进行了统计描摹。就受欢迎程度而言,Java高居第一位,但在使用人数上,JavaScript则名列榜首。欢迎程度的统计方法是,让参与的

  • 风变编程:两会丁磊提议将编程纳入考试,编程学习是否已是大势所趋?

    最近,关于编程教育是否纳入教学的讨论再次在网络上发酵,引发了全民大讨论。在5月21日举行的第十三届全国人民代表大会第三次会议上,全国政协委员、网易CEO丁磊在《关于稳步推动编程教育纳入我国基础教学体系,着力培养数字化人才的提案》中建议:加快区域试点,形成从高中向小学、从东部向全国的推广格局;创新教学模式,形成中国特色的少儿编程课程体系;教企共建少儿编程学习资源库,提供实践平台;将少儿编程纳入学业水平考试

  • Java已被超越?Python当道,风变编程带你化身编程高手

    在程序员中,一直流传着“Python除了不会生孩子,什么都会”的传说。作为人工智能时代最重要的脚本语言之一,Python现在已经逐步占领统计学、机器学习、爬虫、图形处理、软件和游戏开发、人工智能等多个领域,且都有突出表现。可以说,在众多编程语言中,python如今已经杀出重围,从容超越Java和Javascript,化身程序员必备的编程利器之一。目前,国内外许多公司都已使用Python,如:YouTube、豆瓣、知乎、Google、百度、腾讯、美?

  • Serverless架构的前世今生

    一、Serverless简介云计算的不断发展,涌现出很多改变传统IT架构和运维方式的新技术,而以虚拟机、容器、微服务为代表的技术更是在各个层面不断提升云服务的技术能力,它们将应用和环境中很多通用能力变成了一种服务。但无论这些技术应用在哪里,帮助企业“降本增效”是技术变革永恒的主题。Serverless架构的出现,带来了跨越式的变革。Serverless下主机管理、操作系统管理、基础软件的部署运维、资源分配和扩缩容能力全部由云厂?

  • 玩转柚墨模板,创新思维创“视”界

    不会吧,不会吧,不会真的有人还随手套用“撞衫”模板吧? 随着互联网的高速发展,Office无纸化办公已成为职场人们的主要选择,任务汇报、简报演示,如何在同一场景下脱颖而出、抓人眼球是职场达人们亟待解决的问题。各类模板网站平台如雨后春笋般冒出,竞争碰撞出更多灵感的火花,多样模板带来极致视觉体验的同时,也让大家对模板的创新指数愈发挑剔。 这其中,以办公软件为核心的基础软件产品开发和服务提供商永中软件旗下的柚墨

  • 读懂生命的“语言” 有孚专有云为基因行业提速

    基因图谱被称为"上帝用以创造生命的语言"。世界各国的科学家们都在倾尽全力读懂“生命的语言”,破解每一个未知基因的奥秘。读懂“生命的语言”,对于提高公众健康水平,降低沉重的医疗费用具有非常重要的意义。读懂生命的"语言",实现科学的价值基因技术听起来很神秘,但其实早已经在多个领域中得到应用。例如基因测序技术能够用于疾病的预防、疾病的诊断、指导个体化用药,还能够帮助病毒基因研究所研发病毒诊断试剂,监控病毒疫

  • 飞猪组织架构调整,庄卓然任飞猪总裁

    近日阿里旗下的飞猪平台进行组织架构调整,本次调整就包括原飞猪总裁赵颖将不再担任该职务,接任者为阿里巴巴集团副总裁、阿里文娱CTO兼优酷COO庄卓然。

  • 飞猪回应组织架构调整:系集团内正常轮岗

    飞猪近日进行了一轮组织架构调整,其中阿里巴巴集团资深副总裁、蚂蚁金服国际事业群总裁赵颖(芷雪)不再兼任飞猪总裁,未来将专注于蚂蚁金服国际业务;阿里巴巴集团副总裁、阿里文娱CTO兼优酷COO庄卓然(南天)接任飞猪总裁。对于该组织架构调整,飞猪方面回应称,系集团内部正常轮岗。

  • 飞猪回应“组织架构调整”:集团内部正常轮岗

    今日,针对“组织架构调整”的报道,飞猪回应称,系集团内部正常轮岗。此前,有媒体报道称,飞猪已进行一轮组织架构调整,其中包括飞猪总裁由阿里巴巴集团副总裁、阿里文娱CTO兼优酷COO庄卓然(花名:南天)接任;阿里巴巴集团资深副总裁、蚂蚁金服国际事业群总裁赵颖(花名:芷雪)不再兼任飞猪总裁,未来将专注于蚂蚁金服国际业务。

  • 包装出来的「国标」等级考试,编程猫们收割了谁?

    ​一位一线儿童编程教育工作者称,细数市场十余种等级标准与考试,鱼龙混杂、质量参差不齐,一些感觉不是在推进青少年编程教育,而是在抢占编程教育市场制高点。

  • 极客晨星讲解:火爆的少儿编程有着怎样的发展史?

    未来的世界是人工智能的时代,这个已经成为了不争的事实。而国内近几年来对少儿编程的关注也说明了不少家长也希望孩子能够学习少儿编程,从而适应未来的人工智能。那么少儿编程到底是什么发展起来的呢?国内少儿编程培训的现状又是什么样的?下面极客晨星就为您来详细讲解一下。2000 年以色列编程兴起; 2012 年日本改课推广编程; 2013 年奥巴马呼吁全国学编程; 2014 年英国把编程纳入必修课; 2015 年美国政府出资 40 亿强化中小学?

  • 用算法寻找肿瘤的分子弱点,代码真的能治愈癌症?

    ruxolitinib试验是哥伦比亚大学系统生物学家Andrea Califano历时十年的追求的产物。通过复杂的计算,他对催化癌细胞的分子网络进行建模,并精确定位到转录因子蛋白作为关键因子,从而控制细胞内许多基因表达。

  • Python取代Excel?风变编程带你了解如何更好地学Python!

    当前最简单、最流行的编程语言是什么?是Python。最近,谷歌公布的编程语言流行指数显示,Python目前仍然是全球范围内最受欢迎的技术语言。而得益于简洁、易读、易维护等特点,Python可广泛运用于数据分析、人工智能、爬虫、运维、测试、图像识别、机器学习等领域,在日常数据分析方面,甚至已有“Python取代Excel”的说法。那么,Python是否真的有这么牛?接下来,风变编程就带你了解一波。“Python已经取代了Excel”今年3月,日?

  • 大牛Jim Keller离职 Intel CPU架构将由印度裔高管Raja主导

    今天早上,加入Intel公司不过2年多时间的Jim Keller突然宣布离职,理由是多陪陪家人,辞职将立即生效。在这个CPU大牛离职之后,Intel的团队实际上有一次大规模人员变动,目前主导Intel GPU业务的

  • 苹果Mac弃用英特尔芯片,将引入自研ARM架构芯片

    苹果2020年开发者大会(WWDC)在北京时间凌晨1点正式召开,在本次发布会上苹果公布了一项轰动的消息,即苹果未来将会引入自研的ARM架构芯片,逐步取代现在使用的英特尔芯片,苹果Mac弃用英特尔芯片无疑是对后者巨大的打击。

  • 苹果Mac弃用英特尔芯片 全面引入自研ARM架构芯片

    在苹果开发者大会上,除了发布iOS14 之外,还有一个重磅的点就是苹果电脑要更换处理器了。在发布会上,苹果表示,未来的Mac电脑将不再使用英特尔芯片,而是全面引入自研的ARM架构芯片。

  • 享学课堂Java进阶架构班三期6月开营

    疫情过后,网课的热度依旧没有褪去。虽然刚刚过完“金三银四”程序员面试跳槽的旺季,但是还是有很多程序员继续选择学习深造,提高技术水平,为下一个面试跳槽周期“金九银十”做准备。据享学课堂官方提供的数据,在 2020 年第一季度Java类目下新增VIP学员超过 1000 人,Java课堂VIP总人数已经超过 6000 人。为提高教学服务,保证每位学员得到高质量的学习效果,本月开始享学课堂Java进阶架构班三期正式开营。享学课堂Java进阶架构

  • 滴滴网约车架构调整,付强:提供有口皆碑的服务

    6月18日,滴滴网约车平台公司发布组织和人事任命内部公告,将司机服务部中的司机组织化等团队,转移到大区管理中心。

  • exands连续被海底捞点赞,基础架构为餐企降本增效

    有人说海底捞的成功来自于独特的企业文化,感动员工,让员工去感动客人。其实海底捞跟供应商之间的关系也是一样的,以诚意相互成就,一起成长。今年 5 月,exands(兴容信息)被海底捞评选为 2019 年度优秀合作伙伴。exands是海底捞国内所有门店的信息化基础架构运营商,已连续两年荣获该奖。年初,餐饮行业经历了全面洗牌,一些中小商家因歇业、现金困境而被迫关门倒闭,大型连锁企业通过各种方式来减少支出,思考转型升级,借助?

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议