BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

新书:《jQuery、jQuery UI 和 jQuery Mobile》

| 作者 Roopesh Shenoy 关注 0 他的粉丝 ,译者 蔡坚安 关注 1 他的粉丝 发布于 2013年5月14日. 估计阅读时间: 13 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

jQuery、jQuery UI和jQuery Mobile》是Adriaan de Jonge和Phil Dutson合著的新书。该书向读者介绍了各种jQuery库,并讲述了jQuery提供的插件架构。作者假定该书的读者具备基本的HTML和JavaScript知识,但在编排上仍是先从每个jQuery库的最基础的知识讲起,然后再逐步深入到更高级的主题。

该书分为4部分——前三部分分别讲述jQuery核心、jQuery UI和jQuery Mobile,最后一部分讲述插件相关知识。每部分又划分为多个章节以描述各种高级场景。每一章包括若干 攻略,而每个攻略又提供了一个或多个例子。这些攻略直指前端开发人员的各种实践,使他们能更加容易地找到所需的特定API。最后一部分解释了怎样创建可重用的插件,并介绍了一些常用插件以及它们的用法。

InfoQ联系了Phil,请他谈谈书中内容的更多信息,以及其他和JavaScript开发相关的知识。

InfoQ:有些函数,比如append()appendTo(),它们语法不一样,但功能相同——这仅仅是语法糖,还是有其他更重要的原因使得jQuery需要为同一功能提供多种实现方式?

Phil Dutson就像你所说的,那些方法主要是“语法糖”,做的事情其实是一样的。我喜欢根据编程的不同场景来划分它们。如果需要插入硬编码的元素或者跟在静态实例后面的元素,我倾向于使用.append() 方法。如果需要处理包含多个元素或者动态数据的对象,我则倾向于使用.appendTo() 方法。我想重点推荐的做法是:为怎样使用它们建立规则并坚持这些规则。否则,为了搞清楚为什么这个地方使用了append() 而那个地方却使用了appendTo() 而回头重新审视代码,会使你头昏脑胀的。

InfoQ:书中涉及到JSONP并提到使用其进行跨站(cross-site)请求的固有安全威胁——你能在这里再解释下吗?存在可行的替代方案吗?

Phil Dutson当使用JSONP时,在代码层面你只能是完全信任你所请求数据的服务器或Web服务的。这意味者如果服务器或者Web服务发出的是被恶意注入了的JSON数据,你再将这些数据直接给发送请求的客户端,其结果可能是灾难性的。许多社交平台(包括Google+、Twitter和Facebook)已经开始封锁(lock down)返回JSON对象的API服务,而要求客户端使用OAuth(或者类似的服务)来获取数据。作为可行的替代方案,你总是可以创建服务端代理服务来请求数据并在返回前解析对象。或者你可以升级你的应用程序以使用OAuth来和信任的服务器或Web服务交互。

InfoQ:可以和jQuery Mobile一起使用jQuery UI(例如,在移动设备上创建可拖动的组件)吗?

Phil Dutson事实上这是个很受关注的话题。问题是jQuery UI不支持触摸事件,而jQuery Mobile不支持点击并拖动事件。这部分是源于jQuery Mobile将"drag"绑定到"swip"。我还没有找到如何用jQuery Mobile实现拖放事件,然而有些插件已经实现了jQuery UI上的触摸支持。Touch-PunchMobile Drag and Drop这两个程序库能够用来在Web项目中实现触摸设备的拖放功能。说得更明白点,Mobile Drag and Drop并不添加拖放事件,而是添加tap-to-select和tap-to-target在Web站点/应用中移动对象。

InfoQ:混合了触摸和鼠标的设备,比如支持触摸的笔记本电脑或者像Surface这种新硬件,最好是如何处理?

Phil Dutson如果你试图同时绑定鼠标事件(点击、鼠标键按下和鼠标键放开)和触摸事件(触摸开始、触摸移动、触摸结束),结果将导致所谓的“幽灵点击(ghost click)”。这是因为触摸事件触发,而仅接着点击事件又立即触发。有时候这并没有什么问题,但也有时候会导致非常奇怪和意想不到的行为(可以在Google developers上看到更多信息)。我找到的这个问题最好的解决方案之一是Mathias Paumgarten提出的。他用一段简单的代码灵巧地解决了这个问题。你可以看看这段代码

InfoQ:你解释了Promise对象的用法以及它们如何隐藏内部实现——诸如ajax() 之类的jQuery函数也能够实现相应的功能(同时使用回调函数和promise对象)——存在其中一种方式优于另一种方式的理由吗?

Phil Dutson我的很多Ajax作品都是使用jQuery的$.ajax() 函数完成的。我同时努力保证我的所有项目使用的至少是jQuery 1.6.4,因为我总在和Promise接口打交道(因为它在1.5版本中被纳入$.ajax() 方法)。回调函数通常用起来快速而简单,然而在调试代码时它们会导致很多难以发现的错误。当在一个Web应用程序中处理到各种社交网络的多个Ajax调用时,问题更加普遍。

InfoQ:你们用整一章的篇幅讲述Bootstrap提供的插件——这是为什么呢?

Phil Dutson:实际上我本来计划写jQuery插件仓库的,但是它已经被关掉,仍在重建(2013一月份它又开放了)。我那时还想介绍那些开发会活跃起来的以及发展只会越来越好的功能插件 。我还想展示Foundation by Zurb 库(我是Orbit and Reveal的忠实粉丝),但他们引入的插件已经被作为一个整体集成到了程序库中,而没有单独提供。与此同时,Bootstrap取得了出色的成就,并且是一个非常热的话题。我喜欢他们将所有插件分开提供的方式,有时候你并不想要使用整个Bootstrap框架。Bootstrap仍是一个 强有力的框架,能够帮助Web开发者用最少的时间将应用弄出来并运行。

InfoQjQuery团队很快就发布一个新版本,目前已经是1.9版本了——作为相关书籍的作者,你认为这是一个挑战吗?

Phil Dutson任何技术主题都是一个挑战,因为它们更新都很快。为了编写开发技术书籍,你必须及时而快速地跟进相关技术的alpha版本、每日构建版本和beta版本,花时间捣鼓和试验相关代码和功能。总是需要猜测哪些功能会一直保留到最终版本中以及最后怎样工作。从这些方面来说,jQuery团队做得相当出色,其让人们知道哪些功能会被砍掉以及还有多久。我认为总的来说提交了终稿并等待纸书上架的时候是最痛苦的。

InfoQ:移动设备上的网络延迟和带宽限制比桌面电脑上严重得多——jQuery有针对于此的方案吗?

Phil DutsonjQuery并不能优化网络,但对于那种为了以最小资源来支持各种设备和平台而构建并优化的站点而言, jQuery Mobile程序库能够极好地交付。jQuery Mobile能够帮助你更容易地处理鼠标和触摸事件,让你能够自由地创建自己的模板样式引擎。它甚至允许你用鼠标模拟swipe动作。jQuery还有一个常被忽视的好处,你能够从诸如谷歌或微软的CDN地址加载jQuery程序库。如果用户已经访问过使用相同CDN的网站,则浏览器会缓存该jQuery库备用,避免了额外开销。

InfoQ:你们如何抽象不同插件的功能?

Phil Dutson就我个人来说,我会确定我想要完成什么以及使用该任务的频率。对于电子商务网站,这意味着要确定我是要在每个页面上使用某种特定的模态窗口,还是使用专门定制的带滑动条的浏览框。如果我需要做许多重复性的任务,则这应该被视为一个插件。最诡异的地方在于权衡该插件应该负责多少工作以及你想要其具有多大的可定制性。如果插件要求提供30个参数,但实际只用到了其中两个,它不会给任何人带来任何好处。

InfoQNode.jsjQuery专门定制了一个程序包,你能给出几个例子说明它对将jQuery移植到服务器端有什么帮助吗?

Phil DutsonjQuery因为两个功能而为人所熟知,一个是方便的DOM操作和选择,另一个是方便的Ajax函数调用。使用包含jQuery的Node.js,你能够使用所有你熟知的选择符(还有插入函数)和所有的Ajax特性。当然你可以选择不包含jQuery,但对于Node.js新手而言,如果想在学习Node.js时能抓住点熟悉的东西,jQuery可以缓解一下。

InfoQ:你在书中未涉及单元测试。你推荐用哪些框架来测试jQuery代码呢?

Phil Dutson我强烈推荐使用QUnit来做单元测试。它是一个非常灵活的框架,jQuery团队也使用该框架来测试代码。如果有特殊需求(比如需要测试node.js代码),也许需要看看其他框架,例如jsTestDriverBuster.jsYeti

InfoQ:有几个有趣的JavaScript程序库提供了构建UI的更高级抽象——例如Backbone KnockoutAngular——你喜欢哪一个(或不喜欢)?为什么?

Phil Dutson我喜欢Backbone和Meteor。Backbone是构建JavaScript应用程序的相当优雅的解决方案,也是我在该领域接触的第一个框架。我对Meteor不太熟,但我喜欢整个框架的感觉。我倾向于认为, 如果你想的话,可以使用自己已经熟悉的技术(比如Jade框架)。这对我是有帮助的,我就是从学习Node.js开始顺着学习Jade的。

关于书的作者

Phil Dutson是世界上最大的网上健身器材零售公司之一的ICON Health and Fitness的首席前端开发工程师。在该公司,他专门负责构建跨多种浏览器和平台的统一的用户体验。Phil Dutson曾为NordicTrack、ProForm、Freemotion、Sears、Costco和Sam's Club等公司构建项目和解决方案。他还是iFit项目的创始团队成员,该项目将谷歌地图整合进了个性化的训练创建和回放中。Phil是开发技术博客“The E-Com DevBlog”的联合创始人和管理者,该博客专注于Web开发技术和解决方案。

本文基于《jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples》一书。该书的作者是Phil Dutson和Adriaan de Jonge,出版信息为Pearson/Addison-Wesley Professional, Nov 2012, ISBN 0321822080, Copyright 2013 Pearson Education, Inc。更多信息请访问出版社网站

 

感谢臧秀涛对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ)或者腾讯微博(@InfoQ)关注我们,并与我们的编辑和其他读者朋友交流。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

有没有中文版啊? by Woo Victor

有没有中文版啊?

Re: 有没有中文版啊? by 臧 秀涛

中文版将由人民邮电出版社出版。估计还得等等。

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

2 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT