首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

自个儿的js框架

2012-10-24 
自己的js框架?模仿jquery,写了自己的框架,只不过jquery的选择器是css的选择器功能没有实现,这个感觉有点困

自己的js框架

?模仿jquery,写了自己的框架,只不过jquery的选择器是css的选择器功能没有实现,这个感觉有点困难,毕竟都是正则表达式,在写自己的框架的同时,也能了解一下jquery的工作原理,更好的进行开发

?

事先声明:此js比不了jquery只是在编写的过程中以个人的思路模仿jquery的部分功能 - 插件是怎么开发的,扩展是如何实现的,等等。jquery有自己强大的类似于css的选择器,我只做了id的功能


最外层的是通过
(function(){
......... //代码
})()
包装起来,为了防止和其他js声明的变量冲突

构造函数 _T = function(obj){........} 封装了DOM Element 对象,以便可以使用自己定义的方法(函数)去对这个对象进行各种原生js的操作. obj这个参数可以是DOM element的id 也可以是DOM element本身 或者是 _T创建的对象。

通过 window.t = window.ThirdteenDevil = function(obj){return new _T(obj)} 来返回由_T封装的对象,把window.t定义成返回一个由_T创建的对象的函数,使用的时候类似于t("id"),就是jquery中的$("#id"),这样可以获取到_T类创建的对象,以便使用自定义的各种方法

通过prototype属性为_T添加各种方法
_T.prototype={
? ? css:function(){},
? ? attr:function(){},
? ? data:function(){},
? ? ...
? ???
}
这样一来,通过t(obj)得到的对象就可以使用以上css,attr,data....等各种方法操作obj对象了。方法可以由使用此js的人自己扩展,类似于jquery的方法扩展。这个扩展功能依然是使用prototype来实现的。
至于插件,同jquery的插件扩展
扩展格式:
(function(t){
? ? t.plugs.自定义的插件名称 = function(){
? ?? ?? ? ......
? ?? ?? ? ......
? ?? ?? ? .....//内容
? ? }
})(t)
使用上面的格式依然是防止和其他变量冲突可以在(function(){....})()的作用域中定义自己的变量。
t.plugs是已经定义好的一个空的对象,通过给这个对象赋属性来扩展插件。


以下是代码??源文件和例子在附件中

?

?

?

方法的扩展:

?

插件的编写:

?

所有文件都在附件中,详细例子见附件

?

1 楼 87399126 2010-11-18   JS没啥实际经验,但平时挺喜欢看这种书籍,发下我的读后感吧
1,append 函数跟appendTo貌似忘记返回this了
2 , 为什么不添加个each函数,这样可以把你的包装器T函数扩展为接受一个dom对象数组(比如以常见的“,”分割接受多个id值),反正只是自己用的方便库总共也就10几20个函数  每个函数利用个each函数为包装器中的所有dom对象做一次操作比如(挑个简单的)
append : function(var){
      this.each(function(eli){
             eli.appendChild(new _T(var));
      })
}
关于each函数(each:function(fn){..............})的实现无非就是对包装器对象里的对象数组的一次遍历,有个关键点就是类似你这个事件添加函数的做法用fn.call(this,this.le[i]),使之fn第一个参数指向当前遍历到的dom对象。
而且既然你在后面已经添加了byTagName等返回Dom数组的方法,有了each函数就可以返回一个包装器对象了,这样在形式上也统一一点。
3,事件添加函数,没那个json参数会好读非常多。可能看的书还不够深入,但是我还是觉得这个参数在实际应用中出现的概率不会太大。
4,看了你整理的库还是学到了很多东西,你是直接看的jquery的库学习javascript的吗?
你的博客写的很好,不想别的人东西基本都是挪来挪去的。 2 楼 devil13th 2010-11-19   谢谢 兄弟 ,学js的时候jquery还没有出。。。 一点一点学的 呵呵

热点排行
Bad Request.