编写高效jQuery代码的4个原则和5个技巧


Posted in Javascript onApril 24, 2014

jQuery的编写原则:

一、不要过度使用jQuery

1. jQuery速度再快,也无法与原生的javascript方法相比,而且建立的jQuery对象包含的信息量很庞大。所以有原生方法可以使用的场合,尽量避免使用jQuery。

$("a").click(function(){
    alert($(this).attr("id"));
});
//改良后↓
$("a").click(function(){
    alert(this.id);
});

2. 许多jQuery方法都有两个版本,一个是供jQuery对象使用的版本,另一个是供jQuery函数使用的版本。由于后者不通过jQuery对象操作,所以相对开销较小,速度比较快。

var $text = $("#text");
var $ts = $text.text();
//改良后↓
var $text = $("#text");
var $ts = $.text($text);

这里是用了“$.text()”的内置函数,其他类似的还有“$.data()”等。

二、缓存jQuery对象

查找DOM元素实际上有不小的内存开销,使用选择器的次数应该越少越好,并且尽可能缓存选中的结果,便于以后反复使用。记住,永远不要让相同的选择器出现多次。

例如:

$("#top").find("p.classA");
$("#top").find("p.classB");
改良后↓
var cached = $("#top");
cached.find("p.classA");
cached.find("p.classB");

三、少改动DOM结构

如果要多次改动DOM结构,就先把要改动的部分先取出来,改动完成后再放回去。这里的基本思想是在内存中建立你确实想要的东西,最后做一次最有效的更新DOM操作。

例如:

var top_100_list = [...], // 这里是100个字符串的数组  
$mylist = $("#mylist"); 
for (var i=0, l=top_100_list.length; i<l; i++){
    $mylist.append("<li>" + top_100_list[i] + "</li>"); // 100次DOM操作
}
改良后↓
var top_100_list = [...],
$mylist = $("#mylist"),
top_100_li = ""; // 这个变量用来存储变化的字符串
for (var i=0, l=top_100_list.length; i<l; i++){
    top_100_li += "<li>" + top_100_list[i] + "</li>";
} 
$mylist.html(top_100_li);// DOM操作只有这么一次

四、命名规范

jQuery代码中不免夹杂有JS代码,如何让jQuery代码看起来严谨有序,规范自己的命名规则能更好的提高代码的阅读性。

1. 函数名:function getResultByUserId(){..},遵循骆驼命名法,首字母小写,单词首字母大写,尽量短而且明确表达方法的用意。

还可以这样定义:

$.flushCartItemList = function() {
    isAjaxDate = true;
}

2. 参数名:function method(recordIdx, recordVal){..}, 同函数名,参数尽量用缩写。
命名就是要有意义,一些属性的缩写也很有讲究,例如:索引:idx;值:val;长度:len;名称:nm;等...

3. 变量名:var user_id; var user_list_tab; var user_list_tr_1;,一般以下划线为单词分割,按照“命名_元素_索引”的规则。

jQuery对象的变量名要加上“$”的前缀以区分javascript对象。

jQuery编写技巧:

一、选择器择优

选择器是jQuery的基础,如何选择效率最高的选择器,先要了解各种选择器的性能差异。

①ID选择器和标签元素选择器:$("#ID"); $("Tag");

jQuery内部会自动调用浏览器的原生方法(getElementById();,getElementByTagName();),所以执行速度快。

②类选择器:$(".Class");

jQuery会遍历所有DOM节点查找class=Class的DOM对象,所以执行速度较慢。

③伪类选择器和属性选择器:$(":Type"); $("[Attribute='Value']");

因为浏览器没有针对它们的原生方法,这两种选择器执行速度是最慢的。不过,不排除一些第三方浏览器增加了querySelector()和querySelectorAll()方法,因此会使这类选择器的性能有大幅提高。

二、链式写法

$("div").find("h3").eq(2).html("Hello");

采用链式写法时,jQuery会自动缓存每一步的结果,比非链式写法(手动缓存)要快。

三、高效循环

循环总是一种比较耗时的操作,javascript原生循环方法for和while,要比jQuery的“.each()”快。并且关于for循环,以下这种写法效率最高。

for (var i = 0, len = array.length; i < len; i++) {
  // alert(i);
}

先声明变量,再进行循环操作,效率远比遍历数组“for (var i in arr)”高得多,也比循环取得数组长度“for (var i = 0; i < arr.length; i++)”的效率高!

四、字符串拼接

 字符串的拼接在开发中会经常遇到,用“+=”的方式来拼接字符串的效率非常的低,我们可以利用数组的“.join()”方法。

var array = [];
for(var i = 0; i < 10000; i++){
    array[i] = "<input type='button' value='a'>";
}
document.getElementById("one").innerHTML = array.join("");

以前我很喜欢用数组的原生的方法“.push()”,其实直接用arr[i]或者arr[arr.length]的方式要快一点,但是差别不是很大。

五、页面加载

 尽管$(function(){}); 确实很有用, 它是在所有DOM元素加载完成。如果你发现你的页面一直是载入中的状态,很有可能就是这个函数引起的。你可以通过将jQuery函数绑定到$(window).load 事件的方法来减少页面载入时的cpu使用率。

$(window).load(function(){
    // 页面完全载入(包括所有的DOM元素和JS代码)后才初始化的jQuery函数. 
});

一些特效的功能,例如拖放,视觉特效和动画,预载入隐藏图像等等,都是适合这种技术的场合。

Javascript 相关文章推荐
Javascript客户端将指定区域导出到Word、Excel的代码
Oct 22 Javascript
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
javascript制作2048游戏
Mar 30 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
vue和webpack安装命令详解
Jun 15 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
es6函数中的作用域实例分析
Apr 18 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 #Javascript
javascript模拟订火车票和退票示例
Apr 24 #Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
Apr 23 #Javascript
jquery map方法使用示例
Apr 23 #Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 #Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 #Javascript
Jquery实现Div上下移动示例
Apr 23 #Javascript
You might like
基于pear auth实现登录验证
2010/02/26 PHP
php判断变量类型常用方法
2012/04/24 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
php数组键值用法实例分析
2015/02/27 PHP
phpStorm2020 注册码
2020/09/17 PHP
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
详解微信小程序支付流程与梳理
2019/07/16 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
Python中返回字典键的值的values()方法使用
2015/05/22 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
Python实现SMTP邮件发送
2020/06/16 Python
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
技术总监岗位职责
2013/12/05 职场文书
难忘的一天教学反思
2014/04/30 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
总结Python使用过程中的bug
2021/06/18 Python