巧用jQuery建设跨平台应用

欢迎访问我的小站：极光账本

不少脚本程序员都使用jQuery发送ajax请求，其内置的回呼函数能够轻松跨浏览器处理返回数据。鲜为人知的是，结合jQuery UI和jQuery Mobile，jQuery框架集是建设跨平台应用的独门利器。

jQuery本身就支持不少实用的跨平台函数，以HTML元素选择为例，$('div > span')就可以选择所有父亲为div的span元素。无论浏览器是否支持CSS3，此语句都能成功执行。担心浏览器js引擎的for..in语句运行差异么？我们可以使用$.each()安全地循环处理字典和阵列中的值。要是喜欢使用class操纵元素样式，addClass和removeClass都是经典函数。

jQuery UI更是前端开发的高级工具，它提供了几个模块化插件，帮助我们实现一些通用的小脚本。UI 1.9在十月发布后，引入了Tooltip插件，一句$(document).tooltip()就能将所有的原生气泡提示(title气泡)替换成统一样式，方便开发者统一应用界面。UI Datepicker不用介绍，它是最热门的自定义格式日期选择器，其界面也有多种设定，省时省力，极光账本的记账日期选择器就是Datepicker的中文化版本。十分常用的插件还有UI Dialog，它替代了原生的alert(), confirm()等函数，还能生成半透明蒙板，将用户注意力引向对话框。UI对平板的支持十分到位，UI Button, UI Tabs等插件的按钮尺寸都非常适合手指操作。极光账本所有的按钮元素和文本输入框都应用了UI Button样式，标题是UI Header样式，看起来十分大方、美观。玩过UI官网上的ThemeRoller么？您也可以将其部署在您的应用上，您的用户就能个性化自已的页面主题啦。

jQuery家族的最新成员Mobile不像是javascript框架，更像一个移动应用框架。我们只需按照Mobile的HTML5语法编写网页，Mobile就能帮您生成移动网页甚至原生的安卓、苹果等平台应用。其实现方式就是在元素中加入特有的data-role属性，Mobile在加载后就会自动将元素修饰成适合移动设备的样式。所有页面链接都被Mobile接管，自动调用$.ajax异步载入，成功后再调用fadeIn和fadeOut切换页面。由此实现类似于原生应用的换页体验。受益于网页应用的跨平台特性，编写的jQuery Mobile应用能运行在所有设备上，无需重复开发。极光账本有全套现成的记账api，掌上账本只需调用api就能实现所有功能，免除了后台开发。Mobile自带的Popup插件和安卓原生的Toast类似，所以极光大量应用了Popup显示提示信息。

jQuery发展迅猛，在2013年第一季推出的Core 2.0版将不再支持IE8及以下版本。随着移动浏览器的更新，跨平台网页应用的兴起指日可待。