编写高效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 相关文章推荐
随鼠标上下滚动的jquery代码
Dec 05 Javascript
js导出txt示例代码
Jan 14 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
js 实现ajax发送步骤过程详解
Jul 25 Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 Javascript
在pycharm中开发vue的方法步骤
Mar 04 Javascript
小程序实现密码输入框
Nov 16 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
风格模板初级不完全修改教程
2006/10/09 PHP
用PHP实现多服务器共享SESSION数据的方法
2007/03/16 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
js loading加载效果实现代码
2009/11/24 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
对pandas中apply函数的用法详解
2018/04/10 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
Python sublime安装及配置过程详解
2020/06/29 Python
python 检测图片是否有马赛克
2020/12/01 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
敬老文明号事迹材料
2014/01/16 职场文书
十八届三中全会报告学习材料
2014/02/17 职场文书
安全生产承诺书
2014/03/26 职场文书
党员个人剖析材料
2014/09/30 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
详细介绍python类及类的用法
2021/05/31 Python