编写高效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插件bxSlider实现响应式焦点图
Apr 12 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
js实现密码强度检验
Jan 15 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
微信小程序云开发之使用云存储
May 17 Javascript
node使用request请求的方法
Dec 20 Javascript
javascript实现获取中文汉字拼音首字母
May 19 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 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
PHP和XSS跨站攻击的防范
2007/04/17 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
php实现复制移动文件的方法
2015/07/29 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
js获取IFRAME当前的URL的方法
2013/11/13 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
学习python处理python编码问题
2011/03/13 Python
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
python绘制随机网络图形示例
2019/11/21 Python
python源文件的字符编码知识点详解
2021/03/04 Python
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
中专自荐信
2013/10/13 职场文书
学习自我鉴定
2014/02/01 职场文书
初中学生评语大全
2014/04/24 职场文书
介绍信样本
2015/01/31 职场文书
幼师中班个人总结
2015/02/12 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python
什么是Python装饰器?如何定义和使用?
2022/04/11 Python
css3 文字断裂效果
2022/04/22 HTML / CSS
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技
Python sklearn分类决策树方法详解
2022/09/23 Python