转自:http://keenwon.com/955.html
本文介绍一些使用jQuery的通用标准和最佳实践,这些标准不涵盖Javascript的标准和最佳实践,英文原文地址是 http://lab.abhinayrathore.com/jquery-standards/。
加载jQuery
1、尽量使用CDN加载:
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"><</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">script type</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"text/javascript"</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> src</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">></</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">script</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">></span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"><</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">script</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">></span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">window</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">jQuery </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">||</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> document</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">write</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'<script src="js/jquery-1.11.0.min.js" type="text/javascript"><\/script>'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">)</</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">script</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">></span></li></ol>
2、就像上面的代码一样,在CDN加载失败时,要回源到本地服务器的同版本jQuery。
3、使用依赖协议的URL(不加http:
和https:
,直接使用//
),参看上面的例子。
4、尽可能在页面底部加载jQuery和javascript。
5、如何选择jQuery版本?
- 如果要兼容IE6/7/8,不要使用2.x版本的
- 对于新的应用,如果不考虑一些插件的兼容性问题,尽可能的使用最新版
- 从CDN加载jQuery的时候,使用完整的版本号(例如,使用1.11.0,不用1.11和1)
- 不要加载多个版本的jQuery
6、如果你使用了Prototype, MooTools, Zepto等,尝试使用jQuery
代替$
。可以使用$.noConflict()
让出$
的控制权。
jQuery变量
1、所有被缓存的jQuery对象,变量名以$
开头。
2、总是缓存jQuery选择器返回的对象,方便复用:
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $myDiv </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#myDiv"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$myDiv</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">click</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">function</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(){...});</span></li></ol>
3、使用驼峰命名。
选择器
1、尽可能的使用ID选择器。ID选择器使用document.getElementById()
,所以更快。
2、当使用类选择器的时候,不要加DOM元素类型:
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $products </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"div.products"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 慢</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $products </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">".products"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 快</span></li></ol>
3、使用find查找ID->Child的嵌套查询,.find()
方法更快,因为第一次选择没有使用jQuery的选择器引擎:
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 差, 全部使用jQuery的选择器引擎</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $productIds </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#products div.id"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 好, #products使用document.getElementById(), 只有div.id需要使用jQuery的选择器引擎</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $productIds </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#products"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">find</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"div.id"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li></ol>
4、越靠右侧越具体:
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 差</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"div.data .gonzalez"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 最佳</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">".data td.gonzalez"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li></ol>
5、选择器不要太“具体”:
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">".data table.attendees td.gonzalez"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 更好,尽可能省去中间部分</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">".data td.gonzalez"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li></ol>
6、给选择器指定上下文(限定范围):
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 慢,因为它在整个DOM结构中查找</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'.class'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 快,因为它只查找 class-container 下的.</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'.class'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'#class-container'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li></ol>
7、避免使用“*”:
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'div.container > *'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 差</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'div.container'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">children</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">();</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 好</span></li></ol>
8、避免隐式使用“*”:
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'div.someclass :radio'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 差,还是用了“*”</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'div.someclass input:radio'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 好</span></li></ol>
9、不要使用多个ID选择器,或者嵌套使用ID选择器,单独的ID选择器使用document.getElementById()
,速度很快:
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'#outer #inner'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 差</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'div#inner'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 差</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'.outer-container #inner'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 差</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'#inner'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 好, 调用 document.getElementById()</span></li></ol>
DOM操作
1、先把元素分离出DOM结构,再进行复杂的操作,之后再附加回DOM中。不明白原因的话,可以了解下.detach()
这个方法
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $myList </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#list-container > ul"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">detach</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">();</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 对 $myList 执行大量复杂操作</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$myList</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">appendTo</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#list-container"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li></ol>
2、使用字符串连接或者array.join(),少用.append(),点击这里查看性能比较。
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 慢</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $myList </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#list"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">for</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> i </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="lit" style="font-family:inherit;color:#cd5c5c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">0</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">;</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> i </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"><</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="lit" style="font-family:inherit;color:#cd5c5c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">10000</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">;</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> i</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">++){</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $myList</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">append</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"<li>"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">+</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">i</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">+</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"</li>"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">}</span></li><li class="L5" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L6" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 快</span></li><li class="L7" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $myList </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#list"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L8" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> list </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">""</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">;</span></li><li class="L9" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">for</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> i </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="lit" style="font-family:inherit;color:#cd5c5c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">0</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">;</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> i </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"><</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="lit" style="font-family:inherit;color:#cd5c5c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">10000</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">;</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> i</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">++){</span></li><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> list </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">+=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"<li>"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">+</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">i</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">+</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"</li>"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">;</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">}</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$myList</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">html</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">list</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 更快</span></li><li class="L5" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> array </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">[];</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L6" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">for</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> i </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="lit" style="font-family:inherit;color:#cd5c5c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">0</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">;</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> i </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"><</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="lit" style="font-family:inherit;color:#cd5c5c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">10000</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">;</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> i</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">++){</span></li><li class="L7" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> array</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">[</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">i</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">]</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"<li>"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">+</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">i</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">+</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"</li>"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">;</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L8" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">}</span></li><li class="L9" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$myList</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">html</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">array</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">join</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">''</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">));</span></li></ol>
3、不要对不存在的元素做操作:
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 差: 在发现该ID不存在之前,已经执行了3个函数</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#nosuchthing"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">slideUp</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">();</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 好</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $mySelection </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#nosuchthing"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L5" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">if</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$mySelection</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">length</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">)</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">{</span></li><li class="L6" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $mySelection</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">slideUp</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">();</span></li><li class="L7" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">}</span></li></ol>
事件
1、一个页面只使用一个Document ready,便于调试和跟踪。
2、不要使用匿名函数绑定事件,匿名函数不利于调试,复用,测试,debug:
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#myLink"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">on</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"click"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">function</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(){...});</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 差</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 好</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">function</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> myLinkClickHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(){...}</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#myLink"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">on</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"click"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> myLinkClickHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li></ol>
3、Document ready 不要用匿名函数,原因同上:
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">function</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(){</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">...</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">});</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 差: 你没办法写单元测试和复用</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 好</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">initPage</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// or $(document).ready(initPage);</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">function</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> initPage</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(){</span></li><li class="L5" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">//...</span></li><li class="L6" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">}</span></li></ol>
4、Document ready 的处理函数应该写在外部文件,内联的javascript可以在一些初始化设置之后调用 ready 函数,例如:
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"><</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">script src</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"my-document-ready.js"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">></</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">script</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">></span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"><</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">script</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">></span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 做一些初始化设置.</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">document</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">ready</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">initPage</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// or $(initPage); initPage函数在外部文件中</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"></</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">script</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">></span></li></ol>
5、不要把事件直接写在HTML元素上,这样不方便调试:
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="tag" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;"><a</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="atn" style="font-family:inherit;color:#bdb76b;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">id</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="atv" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"myLink"</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="atn" style="font-family:inherit;color:#bdb76b;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">href</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="atv" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#"</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="atn" style="font-family:inherit;color:#bdb76b;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">onclick</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="atv" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">myEventHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">();</span><span class="atv" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"</span><span class="tag" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">></span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">my link</span><span class="tag" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;"></a></span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"><!-- 差--></span></li></ol>
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#myLink"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">on</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"click"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> myEventHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 好</span></li></ol>
6、尽可能的给事件加上命名空间。这样方便解除绑定,而不影响该DOM元素的其他事件:
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#myLink"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">on</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"click.mySpecialClick"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> myEventHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 好</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 之后,很容易的解除绑定</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#myLink"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">unbind</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"click.mySpecialClick"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li></ol>
AJAX
1、使用.ajax()
,避免.getJson()
或者.get()
,它们在内部也是调用.ajax()
的。
2、不要在https
的站点上请求http
,使用依赖协议的URL
3、不要把数据加在url上,使用data属性。
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 可读性差</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">ajax</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">({</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> url</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"something.php?param1=test1¶m2=test2"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">....</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">});</span></li><li class="L5" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L6" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 可读性好</span></li><li class="L7" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">ajax</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">({</span></li><li class="L8" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> url</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"something.php"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span></li><li class="L9" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> data</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">{</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> param1</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> test1</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> param2</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> test2 </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">}</span></li><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">});</span></li></ol>
4、指定dataType属性,更容易知道数据类型。
5、对于ajax加载的内容,使用委托绑定事件,这样可以在元素不存在的时候执行绑定。(之后ajax加载进DOM结构中)
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#parent-container"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">on</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"click"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"a"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> delegatedClickHandlerForAjax</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li></ol>
6、使用Promise
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">ajax</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">({</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">...</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">}).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">then</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">successHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> failureHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 或者</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> jqxhr </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">ajax</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">({</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">...</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">});</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">jqxhr</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">done</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">successHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L5" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">jqxhr</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">fail</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">failureHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li></ol>
7、抽象出ajax模板,方便复用:
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> jqxhr </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">ajax</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">({</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> url</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> url</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> type</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"GET"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// default is GET but you can use other verbs based on your needs.</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> cache</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">true</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// default is true, but false for dataType 'script' and 'jsonp', so set it on need basis.</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> data</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">{},</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// add your request parameters in the data object.</span></li><li class="L5" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> dataType</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"json"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// specify the dataType for future reference</span></li><li class="L6" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> jsonp</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"callback"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// only specify this to match the name of callback parameter your API is expecting for JSONP requests.</span></li><li class="L7" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> statusCode</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">{</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// if you want to handle specific error codes, use the status code mapping settings.</span></li><li class="L8" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="lit" style="font-family:inherit;color:#cd5c5c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">404</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> handler404</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span></li><li class="L9" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="lit" style="font-family:inherit;color:#cd5c5c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">500</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> handler500</span></li><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">}</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">});</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">jqxhr</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">done</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">successHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">jqxhr</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">fail</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">failureHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li></ol>
动画效果
1、Adopt a restrained and consistent approach to implementing animation functionality(大意:采取受限制的和统一的方法来实现动画功能。)
2、满足用户体验即可,不要做过多的动画:
- 尽量使用简单的show/hide,slideUp/slideDown来切换元素
- 尽量使用jQuery预定义的时间间隔(durations),“slow”,“fast”或者400(中等)
插件
1、选择兼容性好,文档,测试齐全何社区支持好的插件。
2、检查插件在不同版本jQuery下的兼容性。
3、任何参加的可复用的组件,都应该以插件的形式实现。
链式调用
1、使用链式调用代替变量缓存和多次调用选择器:
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#myDiv"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">addClass</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"error"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">show</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">();</span></li></ol>
2、当链式调用超过3级的时候,适当的换行增加可读性:
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#myLink"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">)</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">addClass</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"bold"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">)</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">on</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"click"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> myClickHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">)</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">on</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"mouseover"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> myMouseOverHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">)</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">show</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">();</span></li></ol>
3、链太长的时候,缓存中间对象是可以接受的。
其他
1、参数尽量使用对象形式:
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$myLink</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">attr</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"href"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">attr</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"title"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"my link"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">attr</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"rel"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"external"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 差, 调用三次attr()</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 好, 调用一次</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$myLink</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">attr</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">({</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> href</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> title</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"my link"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span></li><li class="L5" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> rel</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"external"</span></li><li class="L6" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">});</span></li></ol>
2、尽量不要把css混在js中:
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#mydiv"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">css</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">({</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'color'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">red</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'font-weight'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'bold'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">});</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 差</span></li></ol>
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">error </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">{</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> color</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> red</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">;</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> font</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">-</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">weight</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> bold</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">;</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">}</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">/* 好*/</span></li></ol>
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#mydiv"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">addClass</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"error"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 好</span></li></ol>
3、不要使用过时的方法,注意新版更新时弃用的方法,不要使用它们。
4、必要的时候使用原生js,这里看查看性能对比 http://jsperf.com/document-getelementbyid-vs-jquery/3
<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#myId"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 还是有一点点点点慢...</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">document</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">getElementById</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"myId"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li></ol>
就这么多,技术有限,翻译的不妥的地方,欢迎留言指出!