20条常见的编码陷阱之JavaScript篇

一、20条常见的编码陷阱之JavaScript篇

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

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

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

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

5、 document getElementById（ someUL） innerHTML（liststring）

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

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

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

9、 document getElementById（ someUL） innerHTML（liststring）

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

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

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

13、 function subtractFive（number）{

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

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

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

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

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

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

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

21、 for（var prop in someObject）{

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

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

24、 for（var prop in someObject）{

25、 if（someObject hasOwnProperty（prop））{

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

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

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

29、// do something if foo is false

30、// do something if foo is true

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

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

33、<div id= grid container>

34、<a><img src= someimage thumb jpg></a>

35、<a><img src= someimage thumb jpg></a>

36、<a><img src= someimage thumb jpg></a>

37、$（ a） on（ click function（）{

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

39、$（#grid container） on（ click a function（event）{

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

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

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

43、 return（something（））? true: false;

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

二、JavaScript特点

1、JavaScript诞生于1995年。它当时的目的是为了验证表单输入的验证。因为在JavaScript问世之前，表单的验证都是通过服务器端验证的。而当时都是电话拨号上网的年代，服务器验证数据是一件非常痛苦的事情。

2、经过许多年的发展，JavaScript从一个简单的输入验证成为一门强大的编程语言。所以，学会使用它是非常简单的，而真正掌握它则需要很漫长的时间。那么沙河电脑培训就带领大家进入JavaScript课堂，去学习和理解它。

3、JavaScript是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运行，而只需要支持它的浏览器即可。它的主要目的是，验证发往服务器端的数据、增加Web互动、加强用户体验度等。

4、JavaScript语言核心与C、C++、Java相似，比如条件判断、循环、运算符等。但，它却是一种松散类型的语言，也就是说，它的变量不必具有一个明确的类型。

5、JavaScript中的对象把属性名映射为任意的属性值。它的这种方式很像哈希表或关联数组，而不像C中的结构体或者C++、Java中的对象。

6、JavaScript中的面向对象继承机制是基于原型的，这和另外一种不太为人所知的Self语言很像，而和C++以及Java中的继承大不相同。

三、JavaScript文档节点和文本节点一样吗

JavaScript文档节点和文本节点一样吗？

不一样。常见的节点分五种：

更多的参见：:w3school../jsref/prop_node_nodetype.asp

文档就是DOM树的根节点（其实就是<></>），剩下所有节点都包含在文档里。

元素就是一个个标签了，<p><div>什么的。

属性是元素里的，<p id="id" name=name>这种的。

文本是元素或属性中的文本内容，<p id="我是文本">我也是文本</p>这种。

document.getElementById("mi").innerText=“”;

document.all.mi.innerText=“”;

最简单的方法就是用元素的innerHTML属性赋值，如：myNewElement.innerHTML=“我是文本”;但这样不能清晰的体现DOM中新增加了一个文本节点。

然后另一种添加文本节点的方式，可分为两步：

1、创建节点：文本节点的创建使用createTextNode方法，如：var myText= document.createTextNode(“我是文本”);

2、将创建的节点用appendChild方法添加某个元素下。如：myNewElement.appendChild(myText);这样myNewElement就有myText的文本节点，文本节点的内容是“我是文本”即可。

第一种方法：获取官方定义的属性节点(获取元素的对应属性值)。

注意：不能获取自定义属性的值。

console.log(jsInput.placeholder);

alert("是时候展现真正的技术");

公式：元素节点.属性名=新的属性值

jsInput.placeholder="sunck good";

公式：元素节点. getAttribute(属性名);

注意：还可以获取自定义属性的值。

console.log(jsInput.getAttribute("my"));

公式：元素节点. setAttribute(属性名,新属性值);

注意：当属性不存在时，变为添加属性

元素节点.setAttribute(属性名,新属性值);

jsInput.setAttribute("my","sunck");

注意：当属性不存在时，变为添加属性

jsInput.setAttribute("other","sunck");

公式：元素节点.removeAttribute(属性名);

jsInput.removeAttribute("other");

DOM中有三大节点，分别是元素节点，文本节点，属性节点，他们所对应的nodeType不相同。

可以通过判断nodeType进行过滤文本节点。

你应该把整个要解析的XML串传给TiDocument

超文本标记语言或超文本链接标示语言（标准通用标记语言下的一个应用）HTML（HyperText Mark-up Language）是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，

它消除了不同计算机之间信息交流的障碍。

它是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。

HTML文件是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML文件的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

有什么js函数可以获取和操作文本节点，注释节点

因为你注释前面有空白区域,dom解析时也会把他当成一个dom节点,所以是文本类型,下一个就是注释了

var lix= document.createElement("li");

var targetElement= document.getElementById("li1");

var parent= targetElement.parentNode;

if(parent.lastChild== targetElement)

parent.insertBefore(lix, targetElement.nextSibling);

1、DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。

document.documentElement返回文档的根节点<>

document.activeElement返回当前文档中被击活的标签节点(ie)

event.fromElement返回鼠标移出的源节点(ie)

event.toElement返回鼠标移入的源节点(ie)

event.srcElement返回激活事件的源节点(ie)

event.target返回激活事件的源节点(firefox)

返回父节点：node.parentNode, node.parendElement,

返回所有子节点：node.childNodes（包含文本节点及标签节点）,node.children

返回第一个子节点：node.firstChild

返回最后一个子节点： node.lastChild

返回同属上一个子节点：node.nextSibling

返回同属下一个子节点：node.previousSibling

parentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和

childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持

,所以大家只要记得有parentElement和children就行了

2、DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

createDocumentFragment()创建一个DOM片段

createElement()创建一个具体的元素

createTextNode()创建一个文本节点

getElementsByTagName()通过标签名称

getElementsByName()通过元素的Name属性的值

getElementById()通过元素Id，唯一性

3、事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。

（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

IE 5.5: div-> body-> document

IE 6.0: div-> body->-> document

Mozilla 1.0: div-> body->-> document-> window

（2）捕获型事件(event capturing)：事件从最不精确的对象(document对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

（3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。

DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。

4、XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。

XMLHttpRequest对象提供了在网页加载后与服务器进行通信的方法。

<script type=text/javascript>

if(window.XMLHttpRequest){ code for all new browsers

}elseif(window.ActiveXObject){ code for IE5 and IE6

xml=newActiveXObject("Microsoft.XMLHTTP");

xml.onreadystatechange=state_Change;

alert("Your browser does not support XMLHTTP.");

if(xml.readyState==4){ 4="loaded"

alert("Problem retrieving XML data");

5、严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。

在标准模式中，浏览器根据规范呈现页面；

在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。

浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式

4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过

渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

6、盒模型——外边距、内边距和边框之间的关系，IE 8以下版本的浏览器中的盒模型有什么不同。

一个元素盒模型的层次从内到外分别为：内边距、边框和外边距

IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框

7、块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。

块级元素，用CSS中的display:inline;属性则变为行内元素

行内元素，用CSS中的display:block;属性则变为块级元素

影响：周围元素显示在同一行或换行显示，根据具体情况调整样式

8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。

需要浮动的元素可使用CSS中float属性来定义元素的浮动位置，left：往左浮动，right：往右浮动

（1）父元素的高度无法被撑开，影响与父元素同级的元素

（2）与浮动元素同级的非浮动元素会跟随其后

（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：

.clearfix:after{content:".";display: block;height: 0;clear: both;visibility: hidden;}

.clearfix{display: inline-block;}/* for IE/Mac*/

9、HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。

XHTML元素必须被关闭，空标签也必须被关闭，如<br>必须写成<br/>

XHTML文档要求给所有属性赋一个值

XHTML要求所有的属性必须用引号""括起来

XHTML文档需要把所有<、>、&等特殊符号用编码表示

XHTML文档不要在注释内容中使“--”

XHTML文档中用id属性代替name属性

10、JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。

“名称/值”对的***（A collection of name/value

pairs）。不同的语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表

（hash table），有键列表（keyed list），或者关联数组（associative array）。

值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组（array）。