码迷,mamicode.com
首页 > Web开发 > 详细

《锋利的jQuery》(第2版)读书笔记4

时间:2016-04-04 00:05:05      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:

第9章 jQuery Mobile

  jQuery Mobile是用来填补jQuery在移动设备应用上的缺憾的一个新项目。

  它基于jQuery框架并使用HTML5和CSS3这些新的技术,除了能提供很多基础的移动页面元素开发功能外,框架自身还提供了很多可供扩展的API,以便于开发人员在移动应用上使用。

 

  在移动框架方面,除了jQuery Mobile之外,还有很多移动框架可选。

      jqMobi是基于jQuery重写的,适用于iOS和Android等移动设备的JavaScript框架,它含有jQuery Mobile的大部分功能,但是jqMobi体积更小,速度更快,兼容性也有所不同。

      Sencha Touch是专门为移动设备开发应用的JavaScript框架。它是一个重量级的框架,组件封装较多,在各平台交互表现统一,但入门门槛较高。

      Zepto.js是一个专为Mobile WebKit浏览器而开发的一个JavaScript框架,它是超轻量级的,只有5KB。

      PhoneGap是一个开源的开发框架,使用HTML、CSS和JavaScript来构建跨平台的移动应用程序。其特性包括:将HTML/JavaScript代码打包成本地App,帮助开发者部署到各种平台上,并提供了访问移动应用本地特性的接口,同时支持多语言混合的插件机制。

第11章 jQuery性能优化和技巧

jQuery性能优化

1、使用最新版本的jQuery类库

不过需要注意的是,在更换新版本之后,不要忘记测试你的代码,毕竟有时候不是完全向后兼容的。

2、使用合适的选择器

       尽量使用ID选择器;尽量给选择器指定上下文。

3、缓存对象

       不要让相同的选择器在你的代码里出现多次,可以利用缓存变量。

4、循环时的DOM操作

       尽可能减少DOM操作,应该将整个元素字符串在插入DOM之前全部创建好。

5、数组方式使用jQuery对象

使用jQuery选择器获取结果是一个jQuery对象。然而,jQuery类库会让你感觉你正在使用一个定义了索引和长度的数组。在性能方面,建议使用简单for或者while循环来处理,而不是$.each(),这样使你的代码更快。

另外注意,检查长度也是一个检查jQuery对象是否存在的方式。

6、事件代理

每一个JavaScript事件都会冒泡到父级节点。当我们需要给多个元素调用同个函数时,我们只需向它们的父节点绑定一次事件,然后通过event.target获取到点击的当前元素。比如,我们要为一个表格绑定这样的行为:点击td后,把背景色设置为红色,代码如下:

$(‘#myTable’).click(function(e) {

       var $click = $(e.target);   // e.target捕获到触发的目标元素

       $click.css(‘background’,’red’);

}

此外,在jQuery.1.7中提供了一个新的方式on(),来帮助你将整个事件监听封装到一个便利方法中,如下所示:

$(‘#myTable’).on(‘click’,’td’,function() {

       $(this).css(‘background’,’red’);

}

7、将你的代码转化成jQuery插件

如果你每次都需要花上一定的时间去开发类似的jQuery代码,那么你可以考虑将代码变成插件。

8、使用join()来拼接字符串

       使用join()代替“+”来拼接长字符串,它确实有助于优化性能,尤其是长字符串处理的时候。

       首先创建一个数组,然后循环,最后使用join()把数组转化为字符串,代码如下:

var array = [];

for(var i-0;i<=10000;i++) {

   array[i] = ‘<li>+i+’</li>’;

}

$(‘#list’).html(array.join(‘’));

9、合理利用HTML5的Data属性

       HTML5的data属性可以帮助我们插入数据,特别是前后端的数据交换。jQuery的data()方法,有效的利用HTML5的属性,来自动得到数据。

下面是个例子:

       <div id=”dl” data-role=”page” data-last-value=”43”

data-options=’{“name”:”John”}’></div>  

为了读取数据,你需要使用如下代码:

$(“#dl”).data(“role”);      //  ”page”

$(“#dl”).data(“lastValue”);      //  43

$(“#dl”).data(“options”);    //  ”John”

10、尽量使用原生的JavaScript方法

       经验告诉我们,方法的选择很重要,有时候你也许根本不需要jQuery。

11、压缩JavaScript

       现在的Web项目中离不开大量JavaScript,而JS文件的体积越来越大,随之也影响到页面的感知性能。因此,需要对JavaScript文件进行压缩,一方面是使用Gzip;另一方面则是去除JavaScript文件里的注释、空白,并且压缩局部变量长度等。

 

《锋利的jQuery》(第2版)读书笔记4

标签:

原文地址:http://www.cnblogs.com/ww03/p/5351021.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!