《锋利的jQuery》（第2版）读书笔记4

Posted 2020-07-03 浅岸

第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文件里的注释、空白，并且压缩局部变量长度等。