jquery mobile alpha4有什么变化

Jquery mobile团队即将发布alpha4,这个版本主要关注两个问题:性能以及兼容性。以下是这个版本更新的主要部分

Windows Phone 7 (WP7) 支持

JQM已经支持在WP7上运行,原来对WP7原生浏览器的支持度为C,也就是说部分核心功能不可用。而alpha4对这个做了大幅改动,支持度为A-,也就是说jquery mobile所有核心功能在WP7上都能运行良好。顺带受惠的还有桌面版的ie7, 8, 9,也能取得很好的运行效果。

名称空间data- 属性

jquery mobile大量使用html5的data属性来定义html标签,比如页头是 data-role=”header”,但是其它开发框架和插件也可能使用了data来标记某些特性,为避免冲突,alpha4新增了名称空间的概念,新增了jqmData,jqmRemoveData和jqmHasData这几个方法来访问data属性,和jquery的data()相比,这几个方法支持名称空间访问。

举个例子,原来使用data-icon来标记一个标签使用的图标,但是如果你使用了名称空间 foo,那么这个属性应该变成 data-foo-icon。为了不影响原来基于jquery mobile开发的程序,名称空间默认为空,保持不变。

统一的touch/mouse事件处理系统

新的touch/mouse“虚拟”事件,详情请参考The current state of touch events

phonegap支持增强

jquery mobile很适合和phonegap一起搭配来做原生的手机应用,但是在alpha3的时候,页面上的链接会被phonegap神奇的截断,有三个相关的问题:

  • jQuery 1.5 截断了 file:// URLs
  • jQuery 1.5.1 修复了 file://,但是它把HTML当成是XML, 所以需要在做ajax请求的时候指定dataType.
  • 原来是不允许JQM加载跨域的JQM页面,但是这个版本新增了一个配置选项 $.mobile.allowCrossDomainPages 来支持http/https页面. 这个改动会导致URL可能出现这样的情况: file://dir1/dir2/myPhoneGapApp.html#https://myHomeServer.com/dir1/dir2/foo

以上这些问题在JQM alpha4里都得到了很好的解决,前提是使用jquery 1.5.1。

重要的升级注意事项

  • 列表li的html结构变化,可以用a标签直接包住li中需要链接的整个部分,比如图片,文字段落。
  • 由于WP7不支持动态插入viewport meta标签,所以现在推荐的方式是在每个页面上都放上meta标签,原来是由JQM的metaViewportContent 方法动态插入的,但是以后这个方法将被取消。为了避免影响已有的站点,JQM会在缺少meta标签的页面上直接插入了一个。
  • 原生的select选单将成为默认选项,这是出于性能问题考虑,如果你希望在alpha4中继续使用JQM定制的select选单,那么需要加上 data-native-menu=”false”

yepnope.js – 异步加载资源文件

yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本,可以在页面上仅加载用户需要的js/css。

典型代码示例


yepnope({
  test : Modernizr.geolocation,
  yep  : 'normal.js',
  nope : ['polyfill.js', 'wrapper.js']
});

当Modernizr.geolocation为真时,加载yep项也就是”normal.js”,否则加载nope项——可以同时加载多个文件。

yepnope和现有的xxx script loader有什么区别?

个人认为主要 是这两点:

  • 可以同时处理javascript以及css
  • 能够按条件加载

yepnope的全部参数

yepnope([{
  test : /* boolean(ish) - 你要检查真伪的表达式             */,
  yep  : /* array (of strings) | string - test为true时加载这项  */,
  nope : /* array (of strings) | string - test为false时加载这项 */,
  both : /* array (of strings) | string - 什么情况下都加载              */,
  load : /* array (of strings) | string - 什么情况下都加载              */,
  callback : /* function ( testResult, key ) | object { key : fn }   当某个url加载成功时执行相应的方法         */,
  complete : /* function   都加载完成了执行这个方法                                                   */
}, ... ]);

这里的参数都可以是array或者object,在加载多个资源文件的时候有用。

yepnope加载jquery的实例

yepnope([{
  load: 'http:/­/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
  complete: function () {
    if (!window.jQuery) {
      yepnope('local/jquery.min.js');
    }
  }
}, {
  load: 'jquery.plugin.js',
  complete: function () {
    jQuery(function () {
      jQuery('div').plugin();
    });
  }
}]);

这段代码异步加载了jquery和jquery.plugin.js,甚至还对jquery加载失败的情况做了一个备用处理。

jQuerify书签

我不知道有多少人在使用浏览器的书签,这东东有时候实在是很有用的,比如现在说到的jQuerify书签

jQuerify书签的功能很简单,那就是在当前页面中直接载入jquery.js,并以一个粉红色的浮动层提示jquery已经载入。书签的源代码如下:

var s=document.createElement('script');
s.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js');
if(typeof jQuery!='undefined') {
  var msg='This page was already jQuerified'
} else {
  document.getElementsByTagName('head')[0].appendChild(s);
  var msg='This page is now jQuerified'
}
var el=document.createElement('div');
  el.style.position='fixed';
  el.style.height='30';
  el.style.width='200';
  el.style.margin='0 auto 0 auto';
  el.id='jq-kswedberg';
  el.style.top='0';
  el.style.left='40%';
  el.style.padding='5px 10px 5px 10px';
  el.style.backgroundColor='#f99';
  el.innerHTML=msg;
var b=document.getElementsByTagName('body')[0];
b.appendChild(el);
window.setTimeout(function() {
  jQuery('#jq-kswedberg').fadeOut('slow',function() {
	jQuery(this).remove()
  });
}, 2500);
void(s);

书签的链接在下边,如果是firefox的话,可以直接拖拽到firefox的书签栏上。

» jQuerify «

这里用到了最近说到的google cdn,速度可是足够快的。在使用书签之后,就可以尽情享受jquery的便利了,比如在firebug的console输入:

$('body').background('#ffc')

你会看到屏幕的背景色变黄了:)

jQuery UI 1.5

jQuery UI 1.5正式版发布,仍然保持了jquery简单易用的特点。

简化的API调用

这个版本最大的改进是重新定义了API规则,之前API提供的95%以上的方法都移除了,取而代之的是更简单的调用规则,每个plugin只保留了一个方法,以draggable为例:

  • $(”div”).draggable() 创建一个拖拽对象
  • $(”div”).draggable(”destroy”) 删掉拖拽对象
  • $(”div”).draggable(”method”) 呼叫这个plugin的其它方法

jQuery UI的另外一个杀手级应用——ThemeRoller

ThemeRoller

利用ThemeRoller,你只要几分钟就可以创建一个自己的主题,可以方便调整色彩并预览效果,在调整满意之后,还能将主题的图片和css以zip包下载,算是相当贴心的一个功能,只可惜从国内访问过去速度有些抱歉。

jQuery UI 1.5的整个包包大小是1.78M,相比yui来说是有过之而无不及。好在包内的各个demo都是真材实料,相当精彩,大一点也无妨。

更详细的信息请看:jQuery UI v1.5 Released, Focus on Consistent API and Effects

利用Google Ajax Library API加速常用js类库的载入

google前不久推出了Google Ajax Library API,说白了就是提供几个知名js库的host,目前有:

google提供的这批js类库都有使用cdn,同时提供压缩和非压缩版本,并gzip输出。比如Prototype在未压缩前是124k,压缩后则只有30k,而jquery经过瘦身以后,也是从97k降到了16k。

这项服务的意义在于,如果各个网站都使用google提供的某个js类库比如jquery,那么由于浏览器缓存的缘故,用户就可以避免下载相同内容的js,这样也就能提高js的载入速度了。

google ajax library api使用方法

传统方式

使用google.load载入



下面是一段小小的视频用来解释它的工作原理:

Update

昨天在某个小页面上尝试引入google提供的jquery.min.js,结果让我大失所望,虽然有时候访问速度很快,但是偶尔能刷出22秒以上的响应时间,如果是这样不稳定的话,那么实在是不敢放心使用。

JQUERY和YUI混用出现的问题

有道是一山不容二虎,其实我本不该把JQUERYYUI夹杂在一块使用,虽然它们各有长短,结合使用的确能够相得益彰,但是暗地里还存着什么矛盾和冲突,这就不是随便刷新一下网页能够看出来的。

列一下最近碰到的问题,备忘。

混用时,YUI的Event在ie6下表现异常

下面代码中,没能在window.onload事件中弹出一个alert弹出窗口。

猜想是jQuery重写了window.onload事件引起冲突,解决办法,使用jQuery的event。

jquery和greasemonkey齐上阵

jquery写起来真的很简单,连我这刚接触jquery不久的新人都能很快用它码出大段的javascript。唯一的坏处是代码里充斥了大量的$。既然写javascript如此简单,那么用jquery+greasemonkey插件同时干活怎么样呢?

这里是一段提醒jquery已经载入的脚本,为了避免和页面上原有的代码冲突,得运行$.noConflict().

// All your GM code must be inside this function
function letsJQuery() {
//make sure there is no conflict between jQuery and other libraries
$.noConflict()
//notify that jQuery is running...
  $('
jQuery is running!
') .css({padding: '10px', background: '#ffc', position: 'absolute',top: '0', width: '100%'}) .prependTo('body') .fadeIn('fast') .animate({opacity: 1.0}, 300) .fadeOut('fast', function() { $(this).remove(); }); //start custom jQuery scripting. }

引入jquery.js只用简单的一行,感谢greasemonkey!

GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';

载入jquery的脚本

var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://code.jquery.com/jquery-latest.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);

原文:Have Your jQuery Fun on Any Site with Greasemonkey