文章比较浅显,高手勿入。

感谢**@樱花坡道_CZT**同学纠错,文章已于2013-05-21更新, 添加了简单的选择器支持,以及新的隐式遍历操作元素。

DEMO页面(2013/05/25更新):

对于IE6,7,8看DEMO就知道是没有打算支持的,对于非标浏览器做兼容支持的话,参考类似属性和方法多写一点判断就好了。

常常写小页面自己玩的同学有没有发现,偶尔需要的一些功能,如果引用JQ,PROTOTYPE,MOOTOOLS这些著名JS库的话,代价略大,感觉略重了点。

如果你也纠结这些,想让自己的小项目略完美一些,那么为什么不写一个自己的小脚本库呢。

可能有的同学写过很多了。像是下面的这种:

这样是可以称作脚本库,比较简单直接,但是通常情况这不一定是一个最佳实践。

如果考虑到扩充不发生冲突的话,你的函数应该有一个命名空间,或者挂载在一个非WINDOW的对象之下。(特殊需求特殊考虑)

那么如果完成一个类似JQ,自己完全可以掌握,可以控制的脚本库呢?如果你感兴趣,那么就继续看下去吧:D

首先我们希望创建一个共有的元素来包装或者说来代理所有的操作,可以简化我们的重复操作,以及进行一些必要的变量保存。

然后我们希望这个元素的使用方法和JQEURY一样,可以JQUERY(ANY)来选择操作某个元素;

那我们不妨这样做,具体看注释:

接着, 我们开始扩充这个对象,把我们的工具函数都挂载上去.这里我们使用稳妥构造创建的方法,好处详见设计模式.

接下来我们要搞一个比较简单的,仅支持webkit的mini库,支持jquery的bind,unbind,创建callback,创建ajax.

至于其他浏览器,感兴趣的童鞋可以看完本文后扩充。

我们先来说说jquery的bind和unbind,

jquery代理了我们的绑定和解除绑定, 尤其是解除绑定,我们知道 removeEventListener这个函数需要传入相同的函数, 言简意赅的说就是, 你的函数的handle要一样。

文章开始说的那种定义式的函数,很容易解决,全局的名字就是他的句柄,但是闭包内的函数呢,函数内的函数呢,callback回来的函数呢。 这个时候,我们使用对象内部空间就有了用武之地。

我们可以先设计一个数据仓库,来存放我们在这个文档中的元素和元素下绑定的事件,以及事件下的函数们。 转换成伪代码就是这样。

然后因为我们的句柄和原始函数都存在了这个对象中,解除绑定的时候,我们就也可以指定某个元素的某类事件,或者指定某元素,或者什么都不传入,卸载所有的事件了。

bind和unbind简单实现如下:

看到上面的处理,有的同学会提问,什么叫做不处理事件叠加。

是这样的,之前元素可能绑定了事件,我们需要枚举和保存下来,等处理完我们的事件后,再把事件叠加上去。 这里有一个额外的处理,就是针对在元素内写死onclick之类的事件情况,我们要保存属性事件到自己的函数变量中, 然后obj.removeAttribute(‘onclick’)来完全解除绑定…

我们接着来说下callback,我写的很简单,你可以扩充一下。

大概思路就是创建元素,把你的url请求的元素添加文档,之前的体验都是加在head中,但是实际上不算是太友好,IE head元素有个小坑,感兴趣的童鞋可以搜索一下,题外话了,就不说了,body尾部算是一个不错的选择.

接着我们来看看AJAX,同样很简单,随便写的.

ajax回调的话,自定义比较多,这个参考jq或者mootools都可以…

然后是常见的属性赋值,这里少写一个获取,大家懂的。 如果你只是使用一般的标签和textarea的话… 至于多什么,自己判断type和浏览器,分别获取一下就好了,推荐做成list。

然后这个对象或许名字长了点,和楼主的英文名都撞一起了。 那么我们给他个alias

然后我们就可以简单的使用下面的方法来进行便捷操作了.

这个脚本的扩展还有很多,这里没有把全局的工具方法用prototype超类重写挂载到原型上,你可以在对象外部再来一层,把对象挂载上去,看起来会更加的美观.

感谢你耐心看完这篇浅显的渣文,欢迎吐槽,欢迎留言讨论。

最后,把上面的不完整版本的完整版本(绕嘛)贴一下。