《锋利的jQuery》(第2版)读书笔记4
第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的更多相关文章
- 锋利的jQuery第2版学习笔记4、5章
第4章,jQuery中的事件和动画 注意:使用的jQuery版本为1.7.1 jQuery中的事件 JavaScript中通常使用window.onload方法,jQuery中使用$(document ...
- 锋利的jQuery第2版学习笔记8~11章
第8章,用jQuery打造个性网站 网站结构 文件结构 images文件夹用于存放将要用到的图片 styles文件夹用于存放CSS样式表,个人更倾向于使用CSS文件夹 scripts文件夹用于存放jQ ...
- 锋利的jQuery第2版学习笔记6、7章
第6章,jQuery与Ajax的应用 Ajax的优势和不足 Ajax的优势 1.不需要插件支持 2.优秀的用户体验 3.提高Web程序的性能 4.减轻服务器和带宽的负担 Ajax的不足 1.浏览器对X ...
- 锋利的jQuery第2版学习笔记1~3章
第1章,认识jQuery 注意:使用的jQuery版本为1.7.1 目前流行的JavaScript库 Prototype(http://www.prototypejs.org),成型早,面向对象的思想 ...
- Linux设备驱动程序 第三版 读书笔记(一)
Linux设备驱动程序 第三版 读书笔记(一) Bob Zhang 2017.08.25 编写基本的Hello World模块 #include <linux/init.h> #inclu ...
- 锋利的jQuery(第二版)学习总结
通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结. 此书主要讲解了jQuery的常用操作,包括认识jQuery,j ...
- Primer C++第五版 读书笔记(一)
Primer C++第五版 读书笔记(一) (如有侵权请通知本人,将第一时间删文) 1.1-2.2 章节 关于C++变量初始化: 初始化不是赋值,初始化的含义是创建变量时赋予其一个初始值,而赋值的含义 ...
- 单元测试之道Java版——读书笔记
单元测试知道Java版读书笔记 首先我们必须要知道我们所写的代码,它的功能是什么,如果我们不了解代码的行为,那么也就无从测试. 我们测试的目的,是为了我们整个程序架构的稳定,代码其实就是欧文要实现功能 ...
- 《jQuery基础教程》读书笔记
最近在看<jQuery基础教程>这本书,做了点读书笔记以备回顾,不定期更新. 第一章第二章比较基础,就此略过了... 第三章 事件 jQuery中$(document).ready()与j ...
- 锋利的jQuery(第二版) 初读笔记
window.onload(): 必须等待网页中所有的内容加载完毕后(包括图片)才能执行. $(document).ready(): 网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没 ...
随机推荐
- 1不等于1?numeric、decimal、float 和 real 数据类型的区别
大家有没有在SQL中遇见1不等于1(1<>1)的情形!?下面会有一个例子演示这个情形. 先简单介绍一下标题中的四种数值数据类型. 在T-SQL中,numeric和decimal是精确数值数 ...
- python3+ 模块学习 之 re
re 模块 参考:Python3 如何优雅地使用正则表达式(详解系列) Python3 正则表达式特殊符号及用法(详细列表) (出处: 鱼C论坛) 正则表达式 常用元字符:. ^ $ * + ? ...
- JS-获取URL请求参数
前言:原来做过一个项目,需要实现一个页面打印的功能,由于项目中使用了AngularJS+Bootstrap等前端框架,需要打印的页面又在弹出框中,使用了Bootstrap的模态框后发现打印的效果不太好 ...
- 在大于32GB或64GB容量的SD卡上使用NOOB安装树莓派 - Using NOOB on SD cards larger than 32GB or 64GB for Raspberry Pi
在树莓派上玩了一小段时间了,因为装的软件包越来越多,所以越来越感觉16G的SD卡没办法长期使用下去.于是采购了几张64G的SD卡,打算周末装上系统.可是按照一般的流程,在Windows下用SD For ...
- 【原创】loadrunner12.53 录制脚本时 打不开网页或者打开网页慢?
问题描述: 之前刚装12.5版本时候,用 WebTours测试过,应用程序选择自己本地IE浏览器.exe程序,输入url地址就可以成功录制了 . 但是由于公司网络配置环境改变了(猜测),现 ...
- MSSQL 跨数据库连接
SELECT * FROM opendatasource('sqloledb','data source=192.168.1.197;user id=sa;password=sa').SafetyMo ...
- ArcSDE安装步骤及问题
ArcSDE安装步骤及问题 自己在安装ArcSDE的时候遇到了一些问题,现在将详细的安装过程和遇到的问题记在这里,以备以后使用. 1. 安装Oracle: 2. 安装ArcSdeOracle10g: ...
- 关于NK3C使用富文本编辑器(CKEditor)发送HTML邮件的使用说明
目前NK3C发送HTML邮件使用的的编辑器是CKEditor4.6版本,关于CKEditor的使用说明如下: 1.依赖JQuery1.7版本以上,在xxx.vm中<head>< ...
- svn记录删除
Delete SVN Folders.reg 批量删除文件夹里的SVN 文件 ------------------------------------------------------------- ...
- EUI ViewStack实现选项卡组件
一 TabBar+ViewStack实现 这个教程确实没看懂...贼麻烦... 二 RadioButton+ViewStack 在exml中拖动组件RadioButton和ViewStack 设置e ...