jQuery源码学习一: 创建一个jquery实例
程序员文章站
2024-01-13 22:12:58
前言: jquery是每个前端都会的基础技能,众所周知,jquery返回的是jquery实例方法,但是我们似乎是直接使用$就可以获取到jquery的方法啦,可以在浏览器中判断一下 window.$ 和window.jQuery,jQuery 之间的关系,就会发现他们之间是全等的; 不使用new方法调 ......
前言:
jquery是每个前端都会的基础技能,众所周知,jquery返回的是jquery实例方法,但是我们似乎是直接使用$就可以获取到jquery的方法啦,可以在浏览器中判断一下 window.$ 和window.jquery,jquery 之间的关系,就会发现他们之间是全等的;
不使用new方法调用
我们一般调用实例大部分是通过new方法,但是jquery却不是,而是直接调用,这是为什么呢
1. 创建实例方法:
(function(root){ var jquery = function(){ console.log('创建实例啦') } root.jquery = jquery //这样赋值就可以调用啦 })(window)
2.返回时操作
但是现在页面上调用jquery仍然不能使用$调用,于是简单修改代码
(function(root){ var jquery = function(){ return new jquery() } root.$ = root.jquery = jquery })(this)
这样我们就可以不在外部调用new方法,因为jquery在返回的时候就已经调用了new
原型共享
在之前的操作下,我们已经将new jquery返回了出去,但是这样是有问题的。我们在jquery原型中定义一个init方法,并将init返回出去
1. 定义一个init
var jquery = function(){ return new jquery.prototype.init(); } jquery.prototype = { init: function(){ } }
但是这样我们虽然解决了报错问题,但是我们现在无法获取到jquery中的原型方法,也就无法调用到jquery的方法。
2. 原型共享
jquery中有很重要的一行代码:
jquery.prototype.init.prototype = jquery.prototype
这就是原型共享,简单从代码来看,就是将jquery的原型赋值给jquery.prototype.init方法原型;
这样我们调用jquery时,虽然获取的是init方法,但是依然可以调用jquery中的原型方法。
3. 例子
我们在jquery上简单扩展方法,并打印jquery验证
jquery.prototype = { init: function(){ }, css: function(){}, }
结果:
推荐阅读
-
jQuery源码学习一: 创建一个jquery实例
-
jquery动画2.元素坐标动画效果(创建一个图片走廊)_jquery
-
分享一个我自己写的ToolTip提示插件(附源码)_jquery
-
jquery动画3.创建一个带遮罩效果的图片走廊_jquery
-
基于jquery创建的一个图片、视频缓冲的效果样式插件_jquery
-
分享一个jQuery获取表格总行数的实例代码
-
jquery动画3.创建一个带遮罩效果的图片走廊_jquery
-
jquery 设置元素相对于另一个元素的top值(实例代码)
-
jquery动画之如何创建一个带遮罩效果的图片走廊
-
使用jquery判断一个元素是否含有一个指定的类(class)实例