位置: 编程技术 - 正文

7个jQuery最佳实践(jquery技巧)

编辑:rootadmin

推荐整理分享7个jQuery最佳实践(jquery技巧),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery实现,jquery常用的5个方法,jquery技巧,jquery有哪些,jquery实例,jquery常用的5个方法,jquery实战,jquery实战,内容如对您有帮助,希望把文章链接给更多的朋友!

随着富网络应用(rich web applications)数量的增长,以及用户对快速交互响应的高期望,开发者开始使用JavaScript库来快速高效的完成一些重复性的工作。这其中最流行的JavaScript库就是jQuery。但是jQuery的大量应用却带来了另外一个问题:在使用JavaScript库的时候,有哪些最佳实践,又有哪些不好的实践呢?

背景

在这篇文章中,我会给大家介绍在编写、调试和审查JavaScript代码的时候一些好的实践(至少我是这么认为的)。事实上,我选择了其中7个最常见的场景。

1、使用CDN及其回退地址(fallback)

CDN代表内容传递网络(Content Delivery Network),是一个缓存了JavaScript文件的服务器。使用CDN之后,每当一个新用户发起请求的时候,你的应用程序可以使用CDN缓存,而不用从你的服务器上重新加载库文件。Google、Microsoft和JQuery都提供CDN服务。

鉴于网络并不总是%可靠,服务器也可能因为一些原因宕机,你必须要确保即使这些事情发生,你的应用程序依然能正常运行。这时候我们就要用到回退地址:当应用程序无法找到缓存库的时候,它就会回退回来,使用服务器文件。

Google CDN 是这样的:

Microsoft CDN是这样的:

需要注意的是,我们没有指定URL协议为http而是使用的//。这是因为CDN服务器支持http和https,如果你的网站拥有SSL认证,你无须修改就可以正常加载文件。

另外,就像我之前提到的那样,我们还需要一个回退地址,以防CDN服务器出现问题。

当然,你也可以用Require来配置需要的jQuery,不过我觉得就这样也不错。

2、限制DOM交互

用JavaScript操作DOM树是存在性能消耗的。jQuery也一样。所以,尽量减少与DOM的交互吧。当我帮助我一个同事提高数据显示速度的时候,我看见他在一个循环里面使用了选择器。这简直是性能杀手!他是这样写的:

有什么问题呢?咋一看没啥问题。而且我的同事也说这段代码跑得很欢乐呢!我真是哔了狗了!当TotalActions小于时,察觉不到任何问题;但是其达到的时候,速度便降低了很多,原因(我也是google到的)就是DOM交互放到了循环当中。

对于这个功能,(多次尝试失败之后)我将循环中的直接DOM交互替换成了一个数组的push操作,然后用一个空字符串作为分隔符将数组连接(join)起来。最后,程序当然变得更加流畅和高效了。

3、缓存

7个jQuery最佳实践(jquery技巧)

jQuery最重要也是最有特色的地方,就是它的选择器以及在DOM树中查找HTML元素的方式。但是,我多次看到,一些开发者在同一个函数中,多次调用相同的选择器,比如 $(“#divid”)。尽管jQuery选择元素非常快,但也不要每次都去查找相同的元素吧。所以,你可以像这样缓存的你元素:

然后在接下来的代码中,就可以用$divId了。

对于下面的代码:

我们可以对它做这样的修改,并且使用链式语法,使其看起来更加漂亮:

但是话又说回来,你也不用每次把所有东西都缓存起来。看下面的例子:

在这里,我既没有用 $(“#link”),或者将其缓存起来,而是使用的$(this)。因为在这个例子中,我操作的对象就是这个链接本身。

4、find 和 filter

最近,在使用find()来获取jQuery对象结合的时候,我产生了一些困惑。然后我发现,这个操作可以替换为用filter()方法来实现。理解这两者的区别非常重要:

find: 将会从选定的元素开始,一直向下查找DOM树

filter: 是在jQuery集合当中查找5、end()

当在jQuery集合中进行链式操作的时候,我有时候需要回到父对象去进行一些操作。比如你正在一个表格的第二行应用CSS,然后希望回到表格对象,对其添加一些样式。在你对行应用完样式之后,只要使用end()方法,你就会自动回到表格对象,然后随意的对其添加样式吧!

(译者注:find()、filter()和end()原文是大写,其实应该是小写)

6、对象字面量

当你通过链式语法来操作元素的CSS属性的时候,你可以使用对象字面量方式来提升性能。比如这段代码:

变成下面这样之后,不仅避免了操作DOM元素,而且还不用多次调用相关的设置方法:

7、善用CSS类

尽可能使用CSS类而不要写内联CSS代码。我想这一点就不需要举例说明了吧。

希望这篇文章能够帮助你编写更好的jQuery应用程序,真正的帮助到大家。

基于jQuery实现点击最后一行实现行自增效果的表格 现在任何事务都追求效率和人性化,当然网页效果也是如此,如果一个可以编辑数据的表格,编辑到最后一行的时候,点击可以自动添加一行,这样算

jQuery版本升级踩坑大全 背景--------------------------------------------------------------------------------jQuery想必各个web工程师都再熟悉不过了,不过现如今很多网站还采用了很古老的jQuery版

基于jQuery1.9版本如何判断浏览器版本类型 在jquery.1.9以前的版本,可以使用$.browser很轻松的判断浏览器的类型和版本,但是在1.9中和以后的版本中,$.browser已经被删除,下面就介绍一下如何实现

标签: jquery技巧

本文链接地址:https://www.jiuchutong.com/biancheng/379293.html 转载请保留说明!

上一篇:实例详解jQuery Mockjax 插件模拟 Ajax 请求(MATLAB图像处理实例详解)

下一篇:jQuery.ajax实现根据不同的Content-Type做出不同的响应

  • 饮食企业简介
  • 文化事业建设费减免政策
  • 合伙律师事务所的合伙人必须是
  • 餐费补贴要交个人所得税吗
  • 公司付款发票
  • 工程服务的税率是多少?
  • 技术成果投资入股企业所得税递延纳税备案表
  • 出口货物退运管理办法
  • 房地产开发企业土地增值税清算
  • 存在问题的具体表现和产生问题的原因分析
  • 出口增值税发票金额怎么开
  • 无形资产原值变动账务处理
  • 缴纳税费及工会经费
  • 收回赔款会计分录
  • 金蝶软件如何设置单价小数点
  • 无形资产的初始计量和后续计量
  • 不动产有法律效力吗
  • 应收账款的周转率怎么算
  • 销售货物收入与租金收入的纳税区别
  • 车辆保险分期分摊怎么做账?
  • 非居民企业间接转让中国应税财产
  • 退税指导
  • 拆除原有建筑物成本扣除
  • 钱已确定收不回怎么办
  • 硬盘损坏类型
  • u盘启动器安装系统
  • 上网的操作
  • 政府搬迁补偿款不够建房怎么办
  • js控件的监听事件怎么使用
  • 什么是原始凭证?审核原始凭证主要审查哪些内容?
  • 排污费应计入什么会计科
  • 购入包装物的增值税计入进项税吗
  • A meerkat in Namibia (© Danita Delimont/Offset by Shutterstock)
  • 分期收款销售商品,收到本期货款50万元
  • 用php制作日历2020日历表
  • php冒泡法排序
  • 小规模纳税人结转未交增值税
  • php登录流程
  • cmd more命令
  • 苗木可以进项抵扣的么
  • 什么是电子税务局app
  • 年金现值系数和年金终值系数的公式
  • 门窗安装属于土建还是安装?
  • 出差费用计入
  • 网上免费学电脑
  • mongodb查看数据库大小
  • 六税一费和六税两费的区别
  • 企业短期借款的会计分录
  • 解决问题
  • 未分配利润转增股本要交税吗怎么交
  • 收到投资方投入设备一台会计科目
  • 工会经费保留整数吗
  • 纳税期限与缴库期限不符
  • 铁路运输印花税按什么比例交
  • 内账中已交的增值税在哪
  • 金税盘减免税款的会计分录
  • 收到伙食费的会计处理
  • 采购自产自销的商品
  • 出售无形资产属什么科目
  • linux彻底卸载软件
  • mysql跨服务器查询语句
  • win7旗舰版系统怎么样
  • smOutlookPack.exe - smOutlookPack是什么进程 什么文件
  • xp系统如何共享文件夹怎么弄
  • Linux中通过Socket文件描述符寻找连接状态介绍
  • win7网络连接无internet简单修复方法
  • windows恢复版本
  • Android 摄像头预览卡顿
  • 用jquery实现全选
  • 命令如下
  • Android ExpandableListView的使用技巧
  • python自动化部署oracle csdn
  • js代码测试工具
  • js动态添加trtd
  • 内蒙古税务局电子发票查询
  • 贵州省增值税普通发票图片
  • 江西省税务局电话号码查询
  • 2013年报废车流程
  • 税务局宪法宣传日
  • 城市维护建设税怎么算
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设