jQuery 陷阱与javascript陷阱.docx
《jQuery 陷阱与javascript陷阱.docx》由会员分享，可在线阅读，更多相关《jQuery 陷阱与javascript陷阱.docx（15页珍藏版）》请在冰点文库上搜索。
jQuery陷阱与javascript陷阱
1.浮点运算
这可能是挫败一些对javascript不熟悉并准备执行一些数学运算的人的主要原因.
1.
Math.round（）就能在这里派上用场.
2.加号操作符的重载
"+"加号运算符即能做算术运算,又能够做字符串的连接.如果正确的使用它是很便利的.让我们看一看.
1.
上述行为是因为这些运算都是从左到右执行的.类型的转换是基于其中的字符串或数字.
3.行尾插入分号
javascript自动在行尾插入分号";",让我们来看看这在一个简单的示例中的情况.
1.
当在创建对象或使用对象的值的时候这个神奇的分号能使事情变得更复杂.
4.typeof操作符
typeof是一个一元操作符,运算结果往往并不是如预期的那样.令人吃惊的是对"null"的运算结果是"object"
1.
它仅仅能查找对象的原始类型.
5.false,null,undefined,NaN,Infinity
尽管他们看起来相似,但他们代表 着不通的意思.javascript有3种基本数据类型数字numbers,字符串strings和布尔boolean,除此之外还有两个不重要的数据类型"undefine"和"null".按照"=="运算符运算,null和undefine是相等的.
1.
6.字符串只替换第一个匹配的字符
与PHP或其他程序语言不同,默认情况下,javascript的字符替换只替换第一个出现的匹配的字符.
1.
7.parseInt函数
parseInt用来将一个字符串转换为整数类型.这个函数能传入两个参数,第二个参数是指定多少进制的.这里十进制用10指定.如果没有指定进制,则parseInt函数自己会试图找到合适的进制.如果是这样,以0开头的字符串将会转换为8进制.
1.
1）最近接触jquery，觉得jquery确实比较好用，但是在使用过程中碰到不少问题，最典型的问题是选择器通过元素的#id来查找元素对象时，如果id中包含jquery的特殊字符就会导致查找失败，以下特殊字符需要转义：
#;&,.+*~':
"!
^$[]（）=>|/
Ifyouwishtouseanyofthemeta-characters（#;&,.+*~':
"!
^$[]（）=>|/）asaliteralpartofaname,youmustescapethecharacterwithtwobackslashes:
//.Forexample,ifyouhaveananinputwithname="names[]",youcanusetheselector$（"input[name=names//[//]]"）.
2）使用$.ajax 对功能的Ajax 请求到服务器，避免使用complete 事件处理响应数据。
过度使用选择器和不分配给本地变量，例如：
$（'#button'）.click（function（）{
$（'#label'）.method（）;
$（'#label'）.method2（）;
$（'#label'）.css（'background-color','red'）;
}）;
而不是：
-
$（'#button'）.click（function（）{
varlabel=$（'#label'）;
label.method（）;
label.method2（）;
label.css（'background-color','red'）;
}）;
我发现这个 富有启发性的一刻，我意识到如何调用堆栈的工作。
过量使用的链接。
看到这样的：
this.buttonNext[n?
'bind':
'unbind']（this.options.buttonNextEvent,this.funcNext）[n?
'removeClass':
'addClass']（this.className（'jcarousel-next-disabled'））.attr（'disabled',n?
false:
true）;
解释
3）
不理解的事件有约束力。
JavaScript和jQuery的工作方式不同。
应广大用户要求，例如：
在jQuery：
$（"#someLink"）.click（function（）{//dosomething}）;
没有jQuery的：
Link
SomeClickFunction（item）{
//dosomething
}
基本上所需的JavaScript钩子不再需要。
即使用内联标记（的onClick等），因为你可以简单地使用ID和类，开发人员通常会利用对CSS的目的。
4）
如果您绑定（）相同的事件多次将大火多次。
我通常总是拆散（'点击'）。
绑定（'点击'）以防万一
场景：
点击加号按钮自动复制加号按钮所在行，至下一行，然后在一行中补上减号按钮。
问题：
在IE下出现nodetype错误。
分析：
之前的代码是其它人写的，采用jquery的clone（true）。
如果用clone（），就不会报错，然而复制所在行的组件上的事件，就不起作用了。
百思不得其解。
方案：
在网上找了半天，每有正解。
最后发现ie下报完这个错误后，再点击就可以正常运行了，然后再报错，再点击再正常运行。
根据这个特点，给这条语句加了个try{}catch{}终于解决，try,catch中都是同样的语句
try//在IE下第一次运行以下语句会出异常，捕获异常再次执行该语句就没事了
{
varcloned=parent.clone（true）;
}
catch（err）
{
varcloned=parent.clone（true）;
}
Query有個很方便的function：
toggle
，可以讓元素做指定的切換動作，若不指定任何參數，則可以讓元素做很簡單的隱藏、顯示的切換，很是
方便。
Iftheyareshown,togglemakesthemhidden（usingthehide
method）.Iftheyarehidden,togglemakesthemshown（usingtheshow
method）.
但今天突然發現在針對大量元素的隱藏顯示時，這個function效能很差。
看範例
（另開視窗）
第一種方式是click之後再跑一個for
loop讓所有元素做toggle，很明顯的這個方式效能很差（用IE開更是慢到離譜~）。
範例裡頭的element有600個。
viewsource
print?
1
function dividend_toggle（）{
2
$（ ".dividend" ）.toggle（）;
3
dividend_toggled=!
dividend_toggled;
4
$（ "#toggler" ）.html（dividend_toggled?
'hide' :
'show' ）;
5
}
6
$（ "#toggler" ）.click（dividend_toggle）;
第二種方式是利用toggle的切換直接決定showandhide，效能上就比第一種方式好多了。
viewsource
print?
1
$（ "#toggler2" ）.toggle（ function （）{
2
$（ "td.dividend" ）.hide（）;
3
$（ this ）.html（ 'show' ）;
4
}, function （）{
5
$（ "td.dividend" ）.show（）;
6
$（ this ）.html（ 'hide' ）;
7
}）;
其實這是一個觀念上的陷阱，toggle（）交由元素自己判斷顯示還是隱藏，在很多場合是非常方便的，但元素一多就會發生效能上的問題，因為你把顯示還是隱藏的決定權交給元素去判斷，當元素一多，每個元素都要重複判斷。
以下是jquery1.3.2的toggle的片段原始碼：
viewsource
print?
1
this .each（ function （）{
2
var state=bool?
fn:
jQuery（ this ）.is（":
hidden"）;
3
jQuery（ this ）[state?
"show":
"hide"]（）;
4
}）:
seethat?
每次都要判斷元素是否被隱藏，然後再決定showorhide。
這也是為何在大量做toggle時效能會差的原因。
因此在大量元素的顯示或隱藏時，不要使用toggle來讓元素自己決定要顯示或隱藏。
換句話說，當要決定兩個以上元素的顯示或隱藏時，這個「決定」（boolean值）就應該被存起來，而不應該再下一個元素還要再判斷這個決定。
升级会员 