replace的妙用

最近在看司徒正美的ajax框架代码的时候发现一段有意思的代码:

"get post".replace( dom.rword, function(method){
	dom[ method ] = function( url, data, callback, type ) {
		if ( dom.isFunction(data) ) {
			type = type || callback;
			callback = data;
			data = undefined;
		}
		return dom.ajax({
			type: method,
			url: url,
			data: data,
			success: callback,
			dataType: type
		});
	};
});
阅读全文 »

javascript弹出层组件easyDialog v2.0

easyDialog在经过一段时间的使用后,对使用中碰到的一些问题进行了总结,最近花了点时间对原来的代码进行了重构和优化,并加入了一些新功能。原来的版本只是为了实现简单的弹出层的基本功能,从项目的角度来说就是如何能快速的完成项目,而这个版本不仅仅是实现基本的功能,更多的考虑了弹出层如何更好更轻松的应用于项目中。

easyDialog v2.0新增的功能:

1. 增加了默认的弹出层内容模板,如果只是一些简单的应用,自己可以不去写弹出层内容的结构,而只需传几个简单的参数即可,原来的使用方法:

easyDialog.open({
  container : 'demoBox'
});

使用默认的内容模板,那么container参数可以这么用:

easyDialog.open({
  container : {
    header : '弹出层标题',
    content : '欢迎使用easyDialog : )',
	yesFn : btnFn,
    noFn : true
  }
});
阅读全文 »

javascript事件系统

2005年的时候,jQuery的作者John Resig提出了一个兼容IE和标准浏览器的addEvent的方案,在当时认为是最佳的方案,但是几天后Dean Edwards提出了更好的方案,John Resig之后把Dean Edwards的方法应用在了jQuery中(在jQuery的事件系统的注释代码中可以看到Dean Edwards的署名)。

jQuery历经了这么多的版本,在原来Dean Edwards的基础上,John Resig对于最初的addEvent的方法有了一定的改进。最近在深入学习javascript的事件系统时,看了不少的jQuery的代码,我自己也写了一个简单的javascript事件系统,也算是对于jQuery事件的一个精简。当然这里指得精简并不是说jQuery代码比较臃肿,而是jQuery作为一个类库,需要考虑的东西有很多,也紧密结合了选择器,所以代码量确实很庞大。我的javascript事件系统解决了几个最基本的常见问题:

1. 尽量避免IE在绑定事件时出现的内存泄漏;

2. 修正了IE的this指向问题;

3. 让IE可以支持一些常见的事件标准方法;

4. 同类型的事件可以多次绑定并按顺序执行;

阅读全文 »

解析jQuery的缓存系统

<p>前不久在研究jQuery的动画队列的时候,发现jQuery的缓存系统也很强大,尽管以前也稍微接触过,但一直都没有深入研究过。jQuery的缓存系统在外部应用的时候都比较简单,比如要将某个URL数据存到缓存中只要这么写:</p>
<pre class="brush: c-sharp">
var val = 'blog.yiguochen.com';
$('div').data( 'url' ); // 返回undefined
$('div').data( 'url', val ); // 返回'blog.yiguochen.com'
$('div').data( 'url' ); // 返回'blog.yiguochen.com'
</pre>
<p>不光可以存储字符串,上面的val也可以是任意数据,对象、数组、函数等都可以存到里面。仅仅实现这种功能还是挺简单的,声明一个全局对象用来存储数据,然后使用data方法来存储或返回数据…</p>

阅读全文 »

JavaScript 动画类库 easyAnim

记得几年前刚接触jQuery的时候,就一直叹服于jQuery竟然能如此轻松的实现javascript的动画。前不久想研究下javascript的动画,当时就萌生了自己开发一个javascript动画类库的念头,于是就有了现在的easyAnim。

javascript动画的实现原理看起来很简单:连续改变元素的CSS属性,如:width, height, left, margin等,只要有一定的速度就可以达到动画效果,与动画片的制作原理类似。尽管如此,自己真正动手开发起来并不简单,也从中学到了不少东西。

easyAnim小巧、简洁、易用,API和jQuery的调用几乎一样,熟悉jQuery动画的人甚至不用去看API说明就能轻松使用,jQuery这么高的使用率与其简洁易用的API设计是分不开的。

如何使用easyAnim?

// 引入easyAnim(为了你的网页性能,强烈建议在底部引用)

比如要给元素box添加一个slideUp效果:

easyAnim( 'box' ).slideUp();

easyAnim()接收一个参数,该参数可以是元素的ID也可以是一个DOM对象,将元素实例化后就可以调用easyAnim的动画方法了。easyAnim支持联写,支持动画队列:

easyAnim( 'box' ).slideDown( 'slow' )
	.custom( { left : '500px' }, 600, 'linear' )
	.slideUp( 400, 'easeInStrong' function(){
		alert( 'I am is callback!' );
	});
阅读全文 »