• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > 编写高效jQuery代码的4个原则和5个技巧

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了jQuery,高效,原则,技巧等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

jQuery的编写原则:

一、不要过度使用jQuery

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


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


二、缓存jQuery对象

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

例如:

三、少改动DOM结构

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

例如:

四、命名规范

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

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

还可以这样定义:

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()方法,因此会使这类选择器的性能有大幅提高。

二、链式写法

  

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


三、高效循环

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

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

四、字符串拼接

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

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使用率。

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

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 2017-08-16jQuery Lightbox 图片展示插件使用说明
  • 2017-08-16jQuery实现遍历复选框的方法示例
  • 2017-08-16jquery 弹出层实现代码
  • 2017-08-16iframe子页面获取父页面元素的方法
  • 2017-08-16浅谈jquery中的each方法$.each、this.each、$.fn.each
  • 2017-08-16jQuery增加、删除及修改select option的方法
  • 2017-08-16『jQuery』取指定url格式及分割函数应用
  • 2017-08-16Jquery中基本选择器用法实例详解
  • 2017-08-16jquery实现可拖拽弹出层特效
  • 2017-08-16jQuery.holdReady()使用方法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jquery tab标签页的制作
    • JQuery1.6 使用方法三
    • jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
    • jquery实现心算练习代码
    • jQuery插件ajaxFileUpload使用实例解析
    • jquery创建一个新的节点对象(自定义结构/内容)的好方法
    • jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
    • jQuery EasyUI Panel面板组件使用详解
    • jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
    • jQuery创建自定义的选择器用以选择高度大于100的超链接实例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有