知识大全 20条常见的编码陷阱之JavaScript篇

Posted 2022-07-20 函数

篇首语：知识养成了思想,思想同时又在融化知识。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 20条常见的编码陷阱之JavaScript篇相关的知识，希望对你有一定的参考价值。

20条常见的编码陷阱之JavaScript篇 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

　　不管你现在的编程技能有多么的高超曾经你也是个亦步亦趋不断的学习的初学者在编程这条曲折的道路上我想你肯定犯过一些低级的错误遇见过一些普通的编码陷阱

　　 不必要的DOM操作

　　例如下面这段代码

　　// anti pattern

　　for （var i = ; i < ; i++）

　　var li = $（ <li> ）（ This is list item # + （i+ ））

　　$（ #someUL ） append（li）

　　这段代码对DOM进行了次修改并且创建了个不必要的jQuery对象正确的做法是使用一个文档片段或者创建一个字符串把个<li>元素赋给该字符串然后附加到HTML中这样就只需运行DOM一次代码如下

　　var liststring = ;

　　for （var i = ; i > ; i ）

　　liststring += <li>This is list item # + （ i）

　　document getElementById（ someUL ） innerHTML（liststring）

　　正如上面所描述的一样下面再提供一个方式使用数组

　　var liststring = <li>

　　var lis = [];

　　for （var i = ; i > ; i ）

　　lis push（ This is list item # + （ i））

　　liststring += lis join（ </li><li> ） + </li> ;

　　document getElementById（ someUL ） innerHTML（liststring）

　　这是在JavaScript创建重复HTML最快最简单的方法无需使用模板库或框架

　　 不一致的变量名和函数名

　　这个问题是非常重要的尤其当你在别人的代码上工作时一定要保持标识符（变量名和函数名）一致例如下面这段代码

　　var foo = bar ;

　　var plant = green ;

　　var car = red ;

　　通常人们并不会设置变量名叫Something 这涉及到命名规则问题命名应清晰明了一目了然很多编程语言地变量命名都使用大写

　　下面是对函数的命名

　　function subtractFive（number）

　　return number ;

　　语法结构清晰并且能起到解释性功能

　　例如想要对给定的数字加仍采用上述命名模式比如

　　function addFive（number）

　　return number + ;

　　有时你会根据返回值命名例如该函数要返回一个HTML字符串那么可以命名为getTweetHTML（）如果函数只是做一些操作无需返回值那么可以在前面加一个do前缀例如doFetchTweets（）

　　构造函数通常会遵循类原则大写第一个字母

　　function Dog（color）

　　lor = color;

　　命名应带有描述性比如操作型的函数在前面加do 另外要具备可读性和提示性

　　 在for…Loops中使用hasOwnProperty（）方法

　　JavaScript数组是没有关联的可以把它当做哈希表使用循环来遍历对象属性

　　for （var prop in someObject）

　　alert（someObject[prop]） // alert s value of property

　　然而存在的问题是for…in loop是在对象属性链上遍历每个枚举类型的属性如果你只想使用对象实际拥有的属性这可能有问题的那怎么解决呢？你可以使用hasOwnProperty（）方法代码如下

　　for （var prop in someObject）

　　if （someObject hasOwnProperty（prop））

　　alert（someObject[prop]） // alert s value of property

　　 比较布尔值

　　把布尔值作为条件进行比较其实这是在浪费电脑的计算时间看下面这个例子吧

　　if （foo == true）

　　// do something for true

　　 else

　　// do something for false

　　其实foo==true这个比较完全是多余的因为foo已经是布尔类型直接这样写就行

　　if （foo）

　　// do something for true

　　 else

　　// do something for false

　　又或者这样写

　　if （！foo）

　　// do something if foo is false

　　 else

　　// do something if foo is true

　　 事件绑定

　　在JavaScript中事件是个复杂的问题事件冒泡（event bubbling）和委托正在取代内联事件（inline onclick）操作（一些特殊的初始页除外）

　　假设你有一个图片网格需要启动一个modal lightbox窗口千万不要采取下面的做法示例采用的是jQuery 如果你使用相似的库或者其他冒泡机制也同样适合传统的JavaScript

　　相关的HTML代码

　　…

　　</div>

　　不好的JavaScript写法

　　$（ a ） on（ click function（）

　　callLightbox（this）

　　）

　　这段代码假设调用lightbox 里面传递一个anchor元素并且引用全屏图片与其绑定每个anchor元素还不如直接使用#grid container元素

　　$（ #grid container ） on（ click a function（event）

　　callLightbox（event target）

　　）

　　在这段代码中 this和event target都表示anchor元素同样你也可以在任何父元素上使用只要保证所定义的元素是事件目标就行（event s target）

　　 避免三元冗余

　　在JavaScript和PHP中过度使用三元语句是很常见的事情

　　// javascript

　　return foo toString（） !== ? true : false;

　　// php

　　return （something（）） ? true : false;

　　条件判断的返回值永远只有false和true 言外之意就是你无需把true和false显示添加到三元运算中相反你只需简单的返回条件

　　// javascript

　　return foo toString（） !== ;

　　// php

cha138/Article/program/Java/JSP/201311/19714