jQuery源码--小白入门
jQuery源码—分析常用方法的原理
第一次写文章,有任何问题及时提出来哦!!!_
话不多说,直接进入正题:
一. jQeury如何无new化构建实例
//引入自写的jQuery.js文件
//在html中 console.log($) $: jQuery本身 $(): jQuery实例
(function(root){
var jQuery = function(){
}
root.$ = root.jQuery = jQuery;
})(this) //this指向于window
如果我们要调用$()这个方法,目的就是创建jQuery的实例对象,
接下来问题来了,如何在以上代码去创建jQuery的实例对象呢?
//引入自写的jQuery.js文件
//在html中并输出 console.log($) $: jQuery本身 $(): jQuery实例
(function(root){
var jQuery = function(){
//==> 在这里return 一个jQuery实例?
return new jQuery();
}
root.$ = root.jQuery = jQuery;
})(this) //this指向于window
其实这样做是不对的,因为每调用一次jQuery实例就会return 并
创建jQuery的实例
,这样就会陷入死循环
,不断的创建并调用…,代码越写越乱,哈哈哈,尴尬了吧!!!
在jQuery中有一个共享原型对象的设计,流程图如下:
//引入自写的jQuery.js文件
//在html中并调用$() $: jQuery本身 $(): jQuery实例对象 其实就是调用了jQuery原型对象上面的init方法
(function(root){
var jQuery = function(){
//==> 在这里return 一个jQuery实例?
return new jQuery.prototype.init(); //返回
}
jQuery.prototype = {
init : function(){
},
css : function(){
} //扩展了一个css的方法
}
//共享原型对象的目的
jQuery.prototype.init.prototype = jQuery.prototype;
root.$ = root.jQuery = jQuery;
})(this) //this指向于window
通过在jQuery原型上创建一个
init
方法,并且在jQuery原型对象上的init方法,把它当做一个构造函数
,设置它的原型对象指向于 jQuery的原型对象,这样就达到共享原型对象
的目的
控制台输出结果:
二. jQuery中的extend方法是如何进行扩展的?
基本使用方法如下:
//给对象进行扩展
var obj = $.extend({
},{
hobby: 'football'});//输出obj 得到{hobby: 'football'}
//{} 第一个空对象的引用, 扩展了hobby: 'football' 属性
//如果 第一个对象的有hobby属性 则执行替换该属性的值的操作
//如下
var first = {
hobby: 'football'};
var second = {
hobby: 'basketball'}
var obj = $.extend(first,second);//此时obj输出结果为{hobby: 'basketball'}
//如果想给jQuery扩展一个方法
$.extend({
clickMe: function(){
console.log('点我试试!')