0

0

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

php中文网

php中文网

发布时间:2016-05-16 16:51:19

|

1234人浏览过

|

来源于php中文网

原创

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    $mylist.append("
  • " + top_100_list[i] + "
  • "); // 100次DOM操作
    }
    改良后↓
    var top_100_list = [...],
    $mylist = $("#mylist"),
    top_100_li = ""; // 这个变量用来存储变化的字符串
    for (var i=0, l=top_100_list.length; i    top_100_li += "
  • " + top_100_list[i] + "
  • ";
    }
    $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");

    Face Swap Online
    Face Swap Online

    在线免费换脸,支持图片换脸和视频换脸

    下载

    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   // alert(i);
    }

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

    四、字符串拼接

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

    复制代码 代码如下:

    var array = [];

    for(var i = 0; i     array[i] = "";
    }

    document.getElementById("one").innerHTML = array.join("");

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

    五、页面加载

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

    复制代码 代码如下:

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

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

    热门AI工具

    更多
    DeepSeek
    DeepSeek

    幻方量化公司旗下的开源大模型平台

    豆包大模型
    豆包大模型

    字节跳动自主研发的一系列大型语言模型

    通义千问
    通义千问

    阿里巴巴推出的全能AI助手

    腾讯元宝
    腾讯元宝

    腾讯混元平台推出的AI助手

    文心一言
    文心一言

    文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

    讯飞写作
    讯飞写作

    基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

    即梦AI
    即梦AI

    一站式AI创作平台,免费AI图片和视频生成。

    ChatGPT
    ChatGPT

    最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    相关专题

    更多
    Python 序列化
    Python 序列化

    本专题整合了python序列化、反序列化相关内容,阅读专题下面的文章了解更多详细内容。

    0

    2026.02.02

    AO3官网入口与中文阅读设置 AO3网页版使用与访问
    AO3官网入口与中文阅读设置 AO3网页版使用与访问

    本专题围绕 Archive of Our Own(AO3)官网入口展开,系统整理 AO3 最新可用官网地址、网页版访问方式、正确打开链接的方法,并详细讲解 AO3 中文界面设置、阅读语言切换及基础使用流程,帮助用户稳定访问 AO3 官网,高效完成中文阅读与作品浏览。

    91

    2026.02.02

    主流快递单号查询入口 实时物流进度一站式追踪专题
    主流快递单号查询入口 实时物流进度一站式追踪专题

    本专题聚合极兔快递、京东快递、中通快递、圆通快递、韵达快递等主流物流平台的单号查询与运单追踪内容,重点解决单号查询、手机号查物流、官网入口直达、包裹进度实时追踪等高频问题,帮助用户快速获取最新物流状态,提升查件效率与使用体验。

    27

    2026.02.02

    Golang WebAssembly(WASM)开发入门
    Golang WebAssembly(WASM)开发入门

    本专题系统讲解 Golang 在 WebAssembly(WASM)开发中的实践方法,涵盖 WASM 基础原理、Go 编译到 WASM 的流程、与 JavaScript 的交互方式、性能与体积优化,以及典型应用场景(如前端计算、跨平台模块)。帮助开发者掌握 Go 在新一代 Web 技术栈中的应用能力。

    11

    2026.02.02

    PHP Swoole 高性能服务开发
    PHP Swoole 高性能服务开发

    本专题聚焦 PHP Swoole 扩展在高性能服务端开发中的应用,系统讲解协程模型、异步IO、TCP/HTTP/WebSocket服务器、进程与任务管理、常驻内存架构设计。通过实战案例,帮助开发者掌握 使用 PHP 构建高并发、低延迟服务端应用的工程化能力。

    5

    2026.02.02

    Java JNI 与本地代码交互实战
    Java JNI 与本地代码交互实战

    本专题系统讲解 Java 通过 JNI 调用 C/C++ 本地代码的核心机制,涵盖 JNI 基本原理、数据类型映射、内存管理、异常处理、性能优化策略以及典型应用场景(如高性能计算、底层库封装)。通过实战示例,帮助开发者掌握 Java 与本地代码混合开发的完整流程。

    5

    2026.02.02

    go语言 注释编码
    go语言 注释编码

    本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

    62

    2026.01.31

    go语言 math包
    go语言 math包

    本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

    55

    2026.01.31

    go语言输入函数
    go语言输入函数

    本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

    27

    2026.01.31

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    jQuery 教程
    jQuery 教程

    共42课时 | 5.3万人学习

    HTML+CSS基础与实战
    HTML+CSS基础与实战

    共132课时 | 10.1万人学习

    tp6+adminlte搭建通用后台
    tp6+adminlte搭建通用后台

    共39课时 | 5.8万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号