小谈Jquery框架
2013-12-23 16:29
387 查看
现在Jquery框架对于开发人员基本上是无人不知,无人不晓了,用起来十分的方便,特别是选择器十分强大,提高了我们的开发速度。但是好多人也只是停留在了会用的基础上,我个人觉得会用一个框架不算什么,只能说明你对那个框架比较熟悉,知道里面的思想和实现才是王道。有好多大牛对Jquery框架进行了剖析,今天我只是根据我的见解来分析一下。一段代码如下:
这些方法我们都实现了,但是有一个问题:怎么让Init方法的this.elements这个属性让$也能共享呢?他们的作用域不一样呢。
(function(win){ var_$=function(selector,context){ returnnew_$.prototype.Init(selector,context); } _$.prototype={ Init:function(selector,context){ this.elements=[]; varcontext=context||document; if(context.querySelectorAll){ vararr=context.querySelectorAll(selector); for(vari=0;i<arr.length;i++){ this.elements.push(arr[i]); } } ////这一块是选择器的实现,没有写完,可以自己实现 }, each:function(callback){ if(this.elements.length>0){ for(vari=0;i<this.elements.length;i++){ callback.call(this,i,this.elements[i]); } } } } _$.prototype.Init.prototype=_$.prototype; window.$=_$; })(window||global);一般的我们写一个函数,调用的方法如下:varDemo=function(){}Demo.prototype={method:function(){}}vardemo=newDemo();//实例化Demo之后我们可以调用method方法:demo.method();如果这样的话,我们每次都要实例化一下,才能调用里面的方法,岂不是有点儿烦?我想直接这样调用:Demo().method();这样不是省了一段代码(哈哈,程序员都喜欢偷懒)。那么我们再写一段代码:vardemo=function(){returnnewDemo();}然后就可以demo().method()这样调用了。如果你理解了我讲的这个,相信下面的代码你就会明白了:
var_$=function(selector,context){ returnnew_$.prototype.Init(selector,context); } 接下来我们再看看_$.prototype.Init方法的扩展
Init:function(selector,context){ this.elements=[]; varcontext=context||document; if(context.querySelectorAll){ vararr=context.querySelectorAll(selector); for(vari=0;i<arr.length;i++){ this.elements.push(arr[i]); } } ////这一块是选择器的实现,没有写完,可以自己实现 } 这里面有selector,context两个参数: selector其实就是所谓的选择器符号了,我们是根据这个来找到dom节点对象的。 context就是我们所说的执行上下文了,通常都是document,这个是可选参数,只是为了以后的扩展。 然后我们要获取节点对象了 vararr=context.querySelectorAll(selector); document.querySelector和document.querySelectorAll是w3c标准新加入的方法,是已经写好的选择器,但是ie8以下的版本不支持。 我们要优先查看有没有这个方法,有的话就直接用这个了。 没有就直接用document.getElementById,document.getElementsByClassName(IE8以下不兼容,须扩展),document.getElementsByName,document.getElementsByTagName扩展了 (这个后面会讲具体实现)。 this.elements=[]保存查询出的dom节点对象。 然后说说each方法,这个其实是用回掉简化elements的循环。
each:function(callback){ if(this.elements.length>0){ for(vari=0;i<this.elements.length;i++){ callback.call(this,i,this.elements[i]); } } }
这些方法我们都实现了,但是有一个问题:怎么让Init方法的this.elements这个属性让$也能共享呢?他们的作用域不一样呢。
var_$=function(selector,context){ returnnew_$.prototype.Init(selector,context); } 我们最终得想法其实是想用$().method()这种方式去对dom节点做事件绑定,动画效果,样式设置等等处理。 我们知道:如果让两个对象共享一个属性,那么有一个方法就是让他们的原型指向一致 那么,关键的一段代码上场了:
_$.prototype.Init.prototype=_$.prototype; 这样之后我们就可以让_$和Init实现对elements的共享了。 Jquery框架的核心代码其实就是这些了。后面就可以对$进行方法扩展了。 今天就讲到这,有些说法不是很规范,但是应该能看懂,后面会陆续讲各个方法的具体实现。。。
相关文章推荐
- jquery框架分析-构造jquery对象初步
- jQuery:收集一些基于jQuery框架开发的控件/jquery插件。
- 基于jquery框架实现以行的添加、上移、下移和删除操作
- jQuery框架学习第一天:开始认识jQuery
- JQuery框架介绍【上】
- 基于jquery框架实现以下行的向上、向下和删除
- 简单Json实例——基于JQuery框架Ajax支持的Json操作——J2EE版本
- jQuery框架学习第七天:jQuery动画–jQuery让页面动起来!
- 仿Jquery框架之Jask框架
- 31、实例 jQuery框架核心构建过程
- 转:jQuery框架学习第一天:开始认识jQuery
- jQuery框架学习笔记一
- 基于JQuery框架的AJAX数据获取
- jQuery框架的语法总结下来包括什么?
- jquery框架路径 引用问题
- jQuery系列 第二章 jQuery框架使用准备
- 基于JQuery框架的AJAX
- [大综合]vs2008全面支持jQuery框架的智能提示!
- 浅析jQuery框架与构造对象
- 如何在AJAX应用中访问ADO.NET Data Service(续)——基于jquery框架