没有合适的资源?快使用搜索试试~ 我知道了~
资源详情
资源评论
资源推荐
7个个jQuery最佳实践最佳实践
主要为大家分享了7个jQuery最佳实践,在使用JavaScript库的时候,有哪些最佳实践,又有哪些不好的实践
呢?感兴趣的小伙伴们可以参考一下
随着富网络应用(rich web applications)数量的增长,以及用户对快速交互响应的高期望,开发者开始使用JavaScript库来快
速高效的完成一些重复性的工作。这其中最流行的JavaScript库就是jQuery。但是jQuery的大量应用却带来了另外一个问题:
在使用JavaScript库的时候,有哪些最佳实践,又有哪些不好的实践呢?
背景背景
在这篇文章中,我会给大家介绍在编写、调试和审查JavaScript代码的时候一些好的实践(至少我是这么认为的)。事实上,
我选择了其中7个最常见的场景。
1、使用、使用CDN及其回退地址(及其回退地址(fallback))
CDN代表内容传递网络(Content Delivery Network),是一个缓存了JavaScript文件的服务器。使用CDN之后,每当一个新
用户发起请求的时候,你的应用程序可以使用CDN缓存,而不用从你的服务器上重新加载库文件。Google、Microsoft和
JQuery都提供CDN服务。
鉴于网络并不总是100%可靠,服务器也可能因为一些原因宕机,你必须要确保即使这些事情发生,你的应用程序依然能正常
运行。这时候我们就要用到回退地址:当应用程序无法找到缓存库的时候,它就会回退回来,使用服务器文件。
Google CDN 是这样的:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
Microsoft CDN是这样的:
<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"> </script>
需要注意的是,我们没有指定URL协议为http而是使用的//。这是因为CDN服务器支持http和https,如果你的网站拥有SSL认
证,你无须修改就可以正常加载文件。
另外,就像我之前提到的那样,我们还需要一个回退地址,以防CDN服务器出现问题。
<script>Window.JQuery || document.write(‘<script src=”script/localsourceforjquery”></script>’)
当然,你也可以用Require来配置需要的jQuery,不过我觉得就这样也不错。
2、限制、限制DOM交互交互
用JavaScript操作DOM树是存在性能消耗的。jQuery也一样。所以,尽量减少与DOM的交互吧。当我帮助我一个同事提高数
据显示速度的时候,我看见他在一个循环里面使用了选择器。这简直是性能杀手!他是这样写的:
containerDiv = $("#contentDiv");
for(var d =0; d < TotalActions; d++)
{
containerDiv.append("<div><span class='brilliantRunner'>" + d + "</span></div>");
}
有什么问题呢?有什么问题呢?咋一看没啥问题。而且我的同事也说这段代码跑得很欢乐呢!我真是哔了狗了!当TotalActions小于50时,察
觉不到任何问题;但是其达到25000的时候,速度便降低了很多,原因(我也是google到的)就是DOM交互放到了循环当
中。
对于这个功能,(多次尝试失败之后)我将循环中的直接DOM交互替换成了一个数组的push操作,然后用一个空字符串作为
分隔符将数组连接(join)起来。最后,程序当然变得更加流畅和高效了。
var myContent=[];
for(var d = 0; d < TotalActions; d++)
{
myContent.push("<div><span class='brilliantRunner'>" + d + "</span></div>");
}
containerDiv.html(myContent.join(""));
3、缓存、缓存
jQuery最重要也是最有特色的地方,就是它的选择器以及在DOM树中查找HTML元素的方式。但是,我多次看到,一些开发者
在同一个函数中,多次调用相同的选择器,比如 $(“#divid”)。尽管jQuery选择元素非常快,但也不要每次都去查找相同的元素
吧。所以,你可以像这样缓存的你元素:
var $divId = $("#divId")
weixin_38710566
- 粉丝: 5
- 资源: 1029
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- #P0015. 全排列 超级简单
- pta题库答案c语言之排序4统计工龄.zip
- pta题库答案c语言之树结构7堆中的路径.zip
- pta题库答案c语言之树结构3TreeTraversalsAgain.zip
- pta题库答案c语言之树结构2ListLeaves.zip
- pta题库答案c语言之树结构1树的同构.zip
- 基于C++实现民航飞行与地图简易管理系统可执行程序+说明+详细注释.zip
- pta题库答案c语言之复杂度1最大子列和问题.zip
- 三维装箱问题(Three-Dimensional Bin Packing Problem,3D-BPP)是一个经典的组合优化问题
- 以下是一些关于Linux线程同步的基本概念和方法.txt
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0