您的WebApp真的需要jQuery吗?

首先要承认jQuery的强大魅力,是jQuery陪伴着我们度过桌面浏览器开发的每一天,它的使用轻巧人人皆知,这是桌面浏览器项目常用的主流框架之一。但是在移动浏览器项目中,比如WebApp,你真的愿意引用这样一个庞大且肿胀的前端框架么?你真的需要它么?其实你不需要,因为现在的高端移动设备中的API已经足够了。

接下来我们谈谈你应该在移动设备上放弃jQuery的理由。

为什么前端工程师需要在乎移动设备上的前端框架?

众所周知,移动设备与固定装置最明显的一点不同是:带宽的问题。在移动设备上加载外部资源肯定要比固定装置设备加载外部资源要缓慢的多。我们将问题引向前端框架,jQuery最新版本的min版本为77KB,仅这一点就需要前端工程师折衷。

jQuery中占了很大一个比重的则是Sizzle选择器,这是一个兼容多平台的javascript selector开源框架,但是在移动设备中我们真的不需要这个Sizzle选择器,另外一部分则是jQuery的动画类库,这个也是兼容多平台的动画类库,但是在WebApp中,我们同样不需要,我们需要CSS 3的translate和animation即可完成需求,最后一个算是jQuery的OOP了,这个完全不需要,开发者完全可以根据自己的专业技能封装一套OOP的方法。

首先来看javascript selector

我们做DHTML网站通常情况也都是对DOM做操作,jQuery可以说是一个非常轻巧且功能强大的灵活操作DOM的JavaScript框架,你在使用jQuery操作DOM时,就像是在玩魔术一样的神奇,这也正是jQuery的设计初衷。

但是当前你的用户群是Iphone、Android、Ipad、Blackberry等等一些高端用户时,你不应该为了使用选择器而再引入这样一个庞大的JavaScript框架,你应该这样做:

  1. document.querySelector(DOM);  

querySelector是一个更容易、更快、更可靠的本地选择器引擎。你也可以利用3行代码封装一个像jQuery那样的函数来使用选择器

  1. function $(query) {    
  2.      return document.querySelectorAll(query);    
  3. }  

这里就有你喜欢的$,仅仅3行代码就搞定了!你也许可能会问利用getElementById获取DOM会更加的快,这很不错。getElementById方法获取DOM确实快些,但是这个方法适用于页面中元素较多的情况下,你才能够感觉到它的快感,但是WebApp是不可能在同一张页面中有很多元素的,它不会像Web产品一样。所以在这里我不建议前端工程师为了这个感觉不到的快,而放弃使用querySelectorAll/querySelector而使用getElementById重新封装。而且在实际的项目开发中,你也可以将获取到的DOM保存在变量中,这样也同样减少了对DOM的访问。

DOMReady Function

当然,有些时候我们可能需要等待DOM加载完毕后才去执行我们的function。jQuery有ready方法,我们同样可以拥有自己我的ready方法。

  1. function ready (fn) {    
  2.     document.addEventListener('DOMContentLoaded', fn, false);    
  3. }  

所以的函数的都将在DOM元素加载完毕后,立刻执行,这里不包括image|audio|video。

  1. ready(function (){    
  2.     alert($('#demo')[0].innerHTML);    
  3. });  

可能你已经发现了,这样的ready方法并不是很灵活。首先你不能够卸载DOMContentLoaded事件,每调用ready方法,都会为document注册DOMContentLoaded事件;其次当DOM加载完毕后,仅仅执行了一个函数的一次调用。这不是我们想要的,我们需要改进它。

  1. var readyFuns = [];    
  2. function DOMReady(){    
  3.     for(var i=0,l=readyFuns.length;i<l;i++){    
  4.       readyFun[i]();    
  5.     }    
  6.     readyFuns = null;    
  7.     document.removeEventListener('DOMContentLoaded',DOMReady,false);    
  8. }    
  9. function readyFun(fn){    
  10.     if(readyFuns.length == 0){    
  11.        document.addEventListener('DOMContentLoaded',DOMReady,false);    
  12.     }    
  13.     readyFuns.push(fn);    
  14. }  

这样貌似解决了我们以上的两个问题。现在的DOMReady方法可以保证在DOM加载完毕后,一次执行多个函数,且支持卸载DOMContentLoaded事件。在WebApp中封装一个domready方法,你无需考虑IE浏览器或其它的济览器,仅仅考虑WebKit内核的浏览器即可,所以你可以使用一对removeEventListener和addEventListener。这两个方法同样也是W3C的标准方法,所以我们已经覆盖了jQuery的DOMReady50%的代码。

转载于:https://www.cnblogs.com/fullhouse/archive/2011/12/16/2290068.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/475352.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

delphi64位 char数组转换string中文乱码_使用位运算、值交换等方式反转java字符串-共四种方法...

在本文中&#xff0c;我们将向您展示几种在Java中将String类型的字符串字母倒序的几种方法。 StringBuilder(str).reverse()char[]循环与值交换byte循环与值交换apache-commons-lang3如果是为了进行开发&#xff0c;请选择StringBuilder(str).reverse()API。出于学习的目的&…

LeetCode 1119. 删去字符串中的元音

文章目录1. 题目2. 解题1. 题目 给你一个字符串 S&#xff0c;请你删去其中的所有元音字母&#xff08; ‘a’&#xff0c;‘e’&#xff0c;‘i’&#xff0c;‘o’&#xff0c;‘u’&#xff09;&#xff0c;并返回这个新字符串。 示例 1&#xff1a; 输入&#xff1a;&quo…

vc++网络安全编程范例(14)-openssl bio编程

OpenSSL整个软件包大概可以分成三个主要的功能部分&#xff1a;密码算法库、SSL协议库以及应用程序。OpenSSL的目录结构自然也是围绕这三个功能部分进行规划的。作为一个基于密码学的安全开发包&#xff0c;OpenSSL提供的功能相当强大和全面&#xff0c;囊括了主要的密码算法、…

LeetCode 760. 找出变位映射(哈希)

文章目录1. 题目2. 解题1. 题目 给定两个列表 A and B&#xff0c;并且 B 是 A 的变位&#xff08;即 B 是由 A 中的元素随机排列后组成的新列表&#xff09;。 我们希望找出一个从 A 到 B 的索引映射 P 。 一个映射 P[i] j 指的是列表 A 中的第 i 个元素出现于列表 B 中的第…

hystrix 页面_微服务 | 使用Hystrix实现Spring Cloud的熔断机制

1. 熔断机制介绍在介绍熔断机制之前&#xff0c;我们需要了解微服务的雪崩效应。在微服务架构中&#xff0c;微服务是完成一个单一的业务功能&#xff0c;这样做的好处是可以做到解耦&#xff0c;每个微服务可以独立演进。但是&#xff0c;一个应用可能会有多个微服务组成&…

LeetCode 1165. 单行键盘(哈希)

文章目录1. 题目2. 解题1. 题目 我们定制了一款特殊的力扣键盘&#xff0c;所有的键都排列在一行上。 我们可以按从左到右的顺序&#xff0c;用一个长度为 26 的字符串 keyboard &#xff08;索引从 0 开始&#xff0c;到 25 结束&#xff09;来表示该键盘的键位布局。 现在…

看了新闻,思科研发中心 没有成都的。。。

思科中国研发中心又添三处 //上海是&#xff1a;交大。。 合肥是 中科大。。至于苏州&#xff1f; 为何不到成都&#xff0c;只给个销售中心 查看评论 发表评论2011年11月08日 17:51分 作者&#xff1a;网界网 佚名 来源&#xff1a;网界网 摘要&#xff1a;思科宣…

去重 指定区域数据_大数据分析常用去重算法分析

去重分析在企业日常分析中的使用频率非常高&#xff0c;如何在大数据场景下快速地进行去重分析一直是一大难点。在近期的 Apache Kylin 沙龙上&#xff0c; Kyligence 大数据研发工程师陶加涛为大家揭开了大数据分析常用去重算法的神秘面纱。首先&#xff0c;请大家思考一个问题…

LeetCode 1469. 寻找所有的独生节点

文章目录1. 题目2. 解题1. 题目 二叉树中&#xff0c;如果一个节点是其父节点的唯一子节点&#xff0c;则称这样的节点为 “独生节点” 。 二叉树的根节点不会是独生节点&#xff0c;因为它没有父节点。 给定一棵二叉树的根节点 root &#xff0c;返回树中 所有的独生节点的值…

C#4.0 Collections【集合】

URI:http://www.albahari.com/nutshell/cs4ch07.aspx 集合&#xff1a; Implementing IEnumerable<T> with an iterator&#xff08;实现IEnumerable<T>的迭代器&#xff09;: public class MyGenCollection : IEnumerable<int>{int[] data {1, 2, 3};publi…

四舍五入_从四舍五入谈起

起源前几天改了同事遗留的一个四舍五入的缺陷&#xff0c;颇有探索的价值。问题简化如下&#xff1a;总邀约人数11人&#xff0c;已完成6人&#xff0c;邀约完成率应显示为55%&#xff0c;实际显示54%废话不多说翻代码&#xff1a;C#:int CalcPercentageInt(int a, int b){if (…

LeetCode 339. 嵌套列表权重和(DFS)

文章目录1. 题目2. 解题1. 题目 给定一个嵌套的整数列表&#xff0c;请返回该列表按深度加权后所有整数的总和。 每个元素要么是整数&#xff0c;要么是列表。同时&#xff0c;列表中元素同样也可以是整数或者是另一个列表。 示例 1: 输入: [[1,1],2,[1,1]] 输出: 10 解释:…

精心设计的基于组件的C# Win Forms实践 一个框架数据库驱动多个业务逻辑数据库...

设计一个灵活稳定的多层架构的程序不是件容易的事情。当有了成熟的模式和应用之后&#xff0c;还需要经历各种应用与需求考验&#xff0c;用直白的话说&#xff0c;就是要经得起折腾。最近在重构自己的EPN框架时&#xff0c;有了一些新的体会实践&#xff0c;与各位分享。 首先…

软键盘弹出时popwindow_【示例】解决软键盘弹出时底部元素上浮的问题

问题描述在html5plus环境下&#xff0c;当html中存在固定在底部的元素时&#xff0c;此时弹出软键盘的话&#xff0c;底部的元素也会被弹上来。出现这种情况时&#xff0c;看起来页面布局好像乱掉了&#xff0c;这样给用户的体验不太理想。问题分析问题原因之所以会出现这种情况…

LeetCode 1213. 三个有序数组的交集(哈希set)

文章目录1. 题目2. 解题1. 题目 给出三个均为 严格递增排列 的整数数组 arr1&#xff0c;arr2 和 arr3。 返回一个由 仅 在这三个数组中 同时出现 的整数所构成的有序数组。 示例&#xff1a; 输入: arr1 [1,2,3,4,5], arr2 [1,2,5,7,9], arr3 [1,3,4,5,8] 输出: [1,5] 解…

回溯算法--8皇后问题

前些天有同学去跑社招&#xff0c;面试的时候被人问到8皇后问题&#xff0c;很是杯具。这也说明我们平时对于经典的算法问题关注太少&#xff0c;但设计算法的能力也不是一日之功&#xff0c;需要的是长期的练习和锻炼提高&#xff0c;比如我就很需要锻炼啊&#xff0c;哈哈。 …

LeetCode 1085. 最小元素各数位之和

文章目录1. 题目2. 解题1. 题目 给你一个正整数的数组 A。 然后计算 S&#xff0c;使其等于数组 A 当中最小的那个元素各个数位上数字之和。 最后&#xff0c;假如 S 所得计算结果是 奇数 的请你返回 0&#xff0c;否则请返回 1。 示例 1: 输入&#xff1a;[34,23,1,24,75,…

reg类型变量综合电路_Verilog中reg型变量的综合效果(待补充)

在Verilog中最常用的两种数据类型是wire和reg&#xff0c;一般来说&#xff0c;wire型指定的数据和网线通过组合逻辑实现&#xff0c;而reg型指定的数据不一定用寄存器实现。也就是说reg型数据不一定综合成寄存器。下面的例子中将输出信号Dout定义为reg型&#xff0c;但是综合与…

视频文件格式研究

http://blog.csdn.net/windcao/article/details/725722转载于:https://www.cnblogs.com/eustoma/archive/2011/12/28/2415794.html

LeetCode 1134. 阿姆斯特朗数

文章目录1. 题目2. 解题1. 题目 假设存在一个 k 位数 N&#xff0c;其每一位上的数字的 k 次幂的总和也是 N&#xff0c;那么这个数是阿姆斯特朗数。 给你一个正整数 N&#xff0c;让你来判定他是否是阿姆斯特朗数&#xff0c;是则返回 true&#xff0c;不是则返回 false。 …