博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery的编写原则
阅读量:7224 次
发布时间:2019-06-29

本文共 2898 字,大约阅读时间需要 9 分钟。

hot3.png

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
  • " + 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_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");

    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] = "
    ";}document.getElementById("one").innerHTML = array.join("");

    直接用arr[i]或者arr[arr.length]的方式要快一点,但是差别不是很大。

    五、页面加载

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

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

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

    转载于:https://my.oschina.net/u/2375891/blog/550529

    你可能感兴趣的文章
    理解并配置:在路由器上建立主机名与DNS名称解析
    查看>>
    [.Net线程处理系列]专题三:线程池中的I/O线程
    查看>>
    配套自测连载(四)
    查看>>
    演示:OSPF的邻居关系故障分析与排除
    查看>>
    MySQL中AES_ENCRYPT('密码','钥匙')函数 可以对字段值做加密处理
    查看>>
    《从零开始学Swift》学习笔记(Day43)——构造函数继承
    查看>>
    修改SQL Server序列号
    查看>>
    企业云桌面-08-准备虚拟机-041-exsi01-042-exsi02-043-exsi03-044-exsi04
    查看>>
    MS UC 2013-0-Prepare Tool
    查看>>
    紧跟QQ 为什么支付宝不避嫌也推AR红包?
    查看>>
    Hibernate的批量处理-批量插入
    查看>>
    烂泥:Wing FTP Server与mysql数据库整合
    查看>>
    Apache HTTP Server搭建虚拟主机
    查看>>
    烂泥:查看服务器的BIOS是否开启CPU虚拟化
    查看>>
    [招聘季]--留些回忆给青葱岁月
    查看>>
    SANS:2017年网络威胁情报现状调研报告
    查看>>
    Ntop性能提升方案
    查看>>
    人民日报发声,区块链成“兵家必争之地”,或成“国家战略”
    查看>>
    Fcoin交易所的危险游戏!韭菜请远离!
    查看>>
    新浪微博商业化:步子要再大一些
    查看>>