发文章
发文工具
撰写
网文摘手
文档
视频
思维导图
随笔
相册
原创同步助手
其他工具
图片转文字
文件清理
AI助手
留言交流
一段代码如下:
(function (win) { var _$ = function (selector, context) { return new _$.prototype.Init(selector, context); } _$.prototype = { Init: function (selector, context) { this.elements = []; var context = context || document; if (context.querySelectorAll) { var arr = context.querySelectorAll(selector); for (var i = 0; i < arr.length; i++) { this.elements.push(arr[i]); } } ////这一块是选择器的实现,没有写完,可以自己实现 }, each: function (callback) { if (this.elements.length > 0) { for (var i = 0; i < this.elements.length; i++) { callback.call(this, i, this.elements[i]); } } } } _$.prototype.Init.prototype = _$.prototype; window.$ = _$; })(window || global);
一般的我们写一个函数,调用的方法如下:
var Demo=function(){
}
Demo.prototype= {
method:function(){
var demo=new Demo();//实例化Demo
之后我们可以调用method方法:
demo.method();
如果这样的话,我们每次都要实例化一下,才能调用里面的方法,岂不是有点儿烦?
我想直接这样调用:Demo().method();这样不是省了一段代码(哈哈,程序员都喜欢偷懒)。
那么我们再写一段代码:
var demo=function(){
return new Demo();
然后就可以demo().method()这样调用了。
如果你理解了我讲的这个,相信下面的代码你就会明白了:
var _$ = function (selector, context) { return new _$.prototype.Init(selector, context); }接下来我们再看看_$.prototype.Init方法的扩展
Init: function (selector, context) { this.elements = []; var context = context || document; if (context.querySelectorAll) { var arr = context.querySelectorAll(selector); for (var i = 0; i < arr.length; i++) { this.elements.push(arr[i]); } } ////这一块是选择器的实现,没有写完,可以自己实现 }这里面有selector,context两个参数:selector其实就是所谓的选择器符号了,我们是根据这个来找到dom节点对象的。context就是我们所说的执行上下文了,通常都是document,这个是可选参数,只是为了以后的扩展。然后我们要获取节点对象了 var arr = 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 (var i = 0; i < this.elements.length; i++) { callback.call(this, i, this.elements[i]); } } }
这些方法我们都实现了,但是有一个问题:怎么让Init方法的this.elements这个属性让$也能共享呢?他们的作用域不一样呢。
var _$ = function (selector, context) { return new _$.prototype.Init(selector, context); }我们最终得想法其实是想用$().method()这种方式去对dom节点做事件绑定,动画效果,样式设置等等处理。我们知道:如果让两个对象共享一个属性,那么有一个方法就是让他们的原型指向一致那么,关键的一段代码上场了:
_$.prototype.Init.prototype = _$.prototype;这样之后我们就可以让_$和Init实现对elements的共享了。Jquery框架的核心代码其实就是这些了。后面就可以对$进行方法扩展了。今天就讲到这,有些说法不是很规范,但是应该能看懂,后面会陆续讲各个方法的具体实现。。。
来自: 昵称10504424 > 《工作》
0条评论
发表
请遵守用户 评论公约
读jQuery源码之整体框架分析
读jQuery源码之整体框架分析。Js代码 var jQuery = function( selector, context ) { // The jQuery object is actually just the...
jQuery的运行机制和设计理念 - 51CTO.COM
jQuery在实现上也可以分成两大部分,一部分是jQuery的静态方法,也可以称作实用方法或工具方法,通过jQuery.xxx()的jQuery命名空间直接引用。在jQuery文档中提供了四种方式:jQuery(expression,[contex...
$到底是什么
jQuery.fn = jQuery.prototype = {从以上jQuery的主体结构,我们可以看出,当首次执行完毕后,全局变量$和jQuery,都是指向了var jQuery=function(selector,context){}这个函数,这里,就可以下个结...
jQuery诞生记
var $ = function(selector, context) { return new $.fn.init(selector, context);上面代码显然是有问题的,new的是$.fn.init, $.fn.in...
jquery 原型
jquery 原型2.2.1 起源 -- 原型继承。jQuery.fn是jQuery.prototype jQuery.fn.init.prototype是jQuery.prototype.init.prototype 这个处理相当于 jQuery.prototype = jQuery.prototype.init.prototype ...
3. 构造jQuery对象
3. 构造jQuery对象。l 先执行 jQuery.fn = jQuery.prototype,再执行 jQuery.fn.init.prototype = jQuery.fn,合并后的代码如下:所有挂载到jQuery.fn的方法,相当于挂载到了jQuery.prototype,即挂载...
jQuery是怎样工作的
jQuery是怎样工作的本资源引自:jQuery是怎样工作的 - 开源中国社区 http://www.oschina.net/question/100267_63679===================...
你可能不需要 jQuery!使用原生 JavaScript 进行开发
$(el).find(selector);el.innerHTMLel.outerHTMLel.textContent || el.innerText判断是否包含某个 css class.var matches = function(el...
从零开始写jQuery框架
从零开始写jQuery框架摘要: 本文由简到繁地介绍了以jQuery作为蓝本的js框架开发步聚, 希望借助本文大家对jQuery这样的框架内部有一个大致的认识。为了让我们生成的对象能够调用在prototype里定义出来的...
微信扫码,在手机上查看选中内容