存档在 ‘JavaScript’ 分类

升级jquery版本导致BUG引起的Jquery代码阅读

2009年3月18日

今天碰到一个古怪的问题,按照以前的逻辑思维怎么也走不通。大概的代码是:


$("#node_a,#node_b,#node_c").appendTo($("#container"));

按照以前的逻辑就是将node_a,node_b,node_c节点按顺序插入到container节点内。可是今天出错了。

下面看一个DEMO。http://demo.thankphp.net/65_jquery.htm [IE下看效果]

可以看出来jquery1.3.2和jquery1.3.1的selector有着天壤之别。

仔细阅读了一下jquery最新的1.3.2的代码,发现jquery1.3.2的selector有这样的代码变化。

Sizzle CSS选择器引擎中增加了这样一段话:http://sizzlejs.com/ thankwsx


if ( sortOrder ) {
	hasDuplicate = false;
	results.sort(sortOrder);
	if ( hasDuplicate ) {
		for ( var i = 1; i < results.length; i++ ) {
			if ( results[i] === results[i-1] ) {
				results.splice(i--, 1);
			}
		}
	}
}

sortOrder又是哪里来的呢?


var sortOrder;

if ( document.documentElement.compareDocumentPosition ) {
	sortOrder = function( a, b ) {
		var ret = a.compareDocumentPosition(b) & 4 ? -1 : a === b ? 0 : 1;
		if ( ret === 0 ) {
			hasDuplicate = true;
		}
		return ret;
	};
} else if ( "sourceIndex" in document.documentElement ) {
	sortOrder = function( a, b ) {
		var ret = a.sourceIndex - b.sourceIndex;
		if ( ret === 0 ) {
			hasDuplicate = true;
		}
		return ret;
	};
} else if ( document.createRange ) {
	sortOrder = function( a, b ) {
		var aRange = a.ownerDocument.createRange(), bRange = b.ownerDocument.createRange();
		aRange.selectNode(a);
		aRange.collapse(true);
		bRange.selectNode(b);
		bRange.collapse(true);
		var ret = aRange.compareBoundaryPoints(Range.START_TO_END, bRange);
		if ( ret === 0 ) {
			hasDuplicate = true;
		}
		return ret;
	};
}

现在一切都清楚了,jquery1.3.2版本之前,选择器是按选择器提供的顺序选择节点的,而jquery1.3.2版本之后选择器选择节点的先后顺序与你的书写顺序无关了,jquery会自动匹配节点集合中节点的顺序按节点顺序返回。

为了查这么一个BUG,花费了大半天的时间。其实只要看看jquery官方提供的Release Note就一切明了了。http://docs.jquery.com/Release:jQuery_1.3.2

项目庞大了之后,所有引用的第三方的代码更新升级的时候必须小心谨慎,如果有一些意料外的事情发生要首先检查是否是第三方代码引起的。【在本身代码未作更改的前提下】。第三方代码的升级换代要了解清楚可能会有的影响。兼容性在项目中有时候是最最重要的。

google为jquery提供的cdn服务

2009年3月17日

大家随便用,比放在自己服务器上要方便省事。

http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js

http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js

http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js

将URL中的min去掉是源文件的地址。

这下可以在自己的模板里添加<script type=”text/javascript” src=”GOOGLE_JQUERY_SRC”></script>了。

一个不错的基于jquery的overlay – boxy

2009年3月9日

该plugin的主页是:http://onehackoranother.com/projects/jquery/boxy/

最新版本是:0.1.4

一般性的效果截图如下:

目前IE7还存在问题。

经检测,问题不是出在Boxy,而是我用的YAML和Boxy的CSS定义冲突了。解决中。。。

如何在复杂的嵌套环境中输出单引号和双引号

2009年2月26日

<a href="javascript:alert('这里有2个单引号一个双引号&#34;\&#39;\&#39; :) ');" >引号的嵌套</a>

单引号 ‘ 的 ASCII码是 39  双引号 " 的 ASCII码是34,

所以我们可以用&#xxx;的形式来代替具体的符号。

虽然变成了&#xxx;的形式,但是在嵌套环境中仍然要很当心。这里代码里的alert()使用的引号是单引号,alert里的字符串应该转义掉单引号。于是就有了 \&#39;的形式。

反之,就要转义掉 \&#34;

基于jQuery的datagrid->flexigrid

2009年2月22日

该项目主页:http://www.flexigrid.info/

在使用不起EXTJs的环境下,用用这个代码还是不错的,pack后的代码只有20k不到,稍微修改一下就适合中文使用。

不过最后一次更新是在2008年的7月,作者有一段时间没有更新及添加新功能了,使用说明还不够全面。

JavaScript基于JQ的公告栏效果

2008年10月14日

demo见这里

有些主题要介绍一下:

jQuery的animate函数,

因为这个函数是一个动画函数。

如果你在该函数后放置一些该动画需要改变的样式参数,那么可能程序运行得不到你想要的结果。

比如:

$(this).animate({‘top’:'-=20px’});

$(this).animate({‘top’:’50px’});

程序字面上的意思:位置在当前位置上,上移20px  然后设置节点位置为50px,

但是实际上,程序并不像你想的那样运行。

后面一句甚至是完全无效的。

即将写一个自己的页面,设计了一个JS+CSS布局

2008年9月17日

比较简单,二列有头有脚,没有菜单,以后考虑添加。

可以随着浏览器大小自动调整,并用JS控制了最小宽度和高度。

可以让浏览内容全屏。

DEMO地址在这里

在客户端保存持久化数据-keep persistent data in Client

2008年9月16日

看了怿飞 有关系列的文章 http://www.planabc.net/2008/08/05/userdata_behavior/ 觉得有必要对此进行记录。

大家一般页面级的变量会存储在JavaScript变量中,如果是复杂应用的话,页面中的数据结构就可以对相关数据进行处理,

如果要跨页面的持久保存数据的话,JavaScript变量就做不到了,有2种选择,

1-保存数据在客户端,

2-保存数据在服务器端。

两种方式的优缺点我就不再嗷述了。

单单保存数据在客户端有2种选择,其一就是我们常用的cookie,另外一种就是IE的userData或者其他浏览器也或多或少的用其他名字一样的支持的sessionStorage等等。

首先我们来看看IE的userData

有关userData的具体信息,可以从MSDN网站上查到,http://msdn.microsoft.com/en-us/library/ms531424.aspx# 下面我们做一个具体的实验来看看如何使用。

先看一下这个页面

clientdatasave.htm

打开后,在文本框里随意输入一下文字。按下保存save按钮

然后再打开这个页面

clientdataload.htm

按一下载入load按钮,你发现了什么?

是的,你在第一个页面里输入的东西已经可以在第二个页面里使用了。

花5分钟时间看一下源代码吧。userData是不是用起来很简单呢?

 

看看源代码里有关isIE的分支,当浏览器不是IE的时候,如果是FireFox,那么我们也支持这样的客户端持久保持数据的能力。有关持久化数据的期限问题,以后再介绍。

拖拽定位JavaScript代码-备用

2008年9月10日

今天写了个简单的层拖拽代码,目前没有详细的代码注释.

先把DEMO放出来大家看看.

http://demo.thankphp.net/0910drag.htm

dragdrop

再放一个table的DEMO.

http://demo.thankphp.net/0911drag.htm

JavaScript中的设计模式-Proxy模式

2008年9月9日

代理模式

印象中代理就是厂家没那么多销售人员,在各地弄几个代理点帮助销售其产品

比如我想买个手机,如果没有代理我就要去生产厂家去买,这样很麻烦,

有了代理我可以直接去代理那里买,这样就很方便了

我想这样对于代理会有一个大体的认识:

代理具有和本来要处理的对象一样的方法.

在JavaScript中如果单纯是方法的封装,这样的代理模式没有什么意义.

JS中的代理模式是这样的:

如果本来要处理的对象的实例化比较消耗资源,比较占用内存,那么可以在它外面构造一个代理.

只在实际需要执行方法时才初始化对象.

联系到我工作中一些事情,我觉得代理模式还是能够给我带来思考的.

比如页面上有有关评论的用户和客户端交互.

很多时候用户并不会去进行这样的交互,

这时候我们的代理模式就有用了.

可以将这部分实际交互需要初始化的类的初始化工作放在某些动作的触发下发生.

比如在页面载入后一定时间,或者在用户有交互行为时再去初始化某些实例,这样可以提高JS的效率,减轻客户端压力.

当然上面所说的这一切都是在实例化你要处理的类确实比较耗资源占内存的情况下才会有比较明显的效果.

说了这么多,一点代码都没有,有点太概念化了.

实践中试试看吧.

放一个DEMO代码上来.

/* DirectoryProxy class, as a virtual proxy. */

var DirectoryProxy = function(parent) { // implemen

  this.parent = parent;

  this.directory = null;

  var that = this;

  addEvent(parent, ‘mouseover’, that._initialize); 

};

 

DirectoryProxy.prototype = {

  _initialize: function() {

  this.directory = new PersonnelDirectory(this.parent);

},

showPage: function(page) {

  return this.directory.showPage(page);

}

};

PS:代码来自 《Pro JavaScript Design Patterns》一书