摘要:一、原型模式结构代码如下: // 定义一个jQuery构造函数 var jQuery = function() { }; // 扩展jQuery原型 jQuery.prototype = { };

脚本宝典收集整理的这篇文章主要介绍了

js实例教程-jQuery基础框架浅入剖析

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

一、原型模式结构

代码如下:

// 定义一个jQuery构造函数
var jQuery = function() {
};
// 扩展jQuery原型
jQuery.prototype = {
};

上面是一个原型模式结构,一个jQuery构造函数和jQuery实例化对象的的原型对象,我们一般是这样使用的:

. 代码如下:

var jq = new jQuery(); //变量jq通过new关键字实例化jQuery构造函数后就可以使用原型对象中的方法,但是jQuery并不是这么使用的

二、返回选择器实例

. 代码如下:

var jQuery = function() {
// 返回选择器实例
return new jQuery.prototype.init();
};
jQuery.prototype = {
// 选择器构造函数
init: function() {
}
};

虽然jQuery不是通过new关键字实例化对象,但是执行jQuery函数仍然得到的是一个通过new关键字实例化init选择器的对象,如:
var navCollections = jQuery('.nav'); //变量navCollections保存的是class名为nav的DOM对象集合.
三、访问原型方法

. 代码如下:

var jQuery = function() {
// 返回选择器实例
return new jQuery.prototype.init();
};
jQuery.prototype = {
// 选择器构造函数
init: function() {
},
// 原型方法
toArray: function() {
},
get: function() {
}
};
// 共享原型
jQuery.prototype.init.prototype = jQuery.prototype;

我们一般习惯称jQuery函数中返回的选择器实例对象为jQuery对象,如我们可以这样使用:

. 代码如下:

jQuery.('.nav').toArray(); // 将结果集转换为数组

为什么可以使用toArray方法呢? 即如何让jQuery对象访问jQuery.prototype对象中的方法?只需将实例化选择器对象的原型对象共享jQuery.prototype对象,上面体现代码为:

. 代码如下:

jQuery.prototype.init.prototype = jQuery.prototype; // 共享原型

四、自执行匿名函数

. 代码如下:

(function(window, undefined) {
var jQuery = function() {
// 返回选择器实例
return new jQuery.prototype.init();
};
jQuery.prototype = {
// 选择器构造函数
init: function() {
},
//原型方法
toArray: function() {
},
get: function() {
}
};
jQuery.prototype.init.prototype = jQuery.prototype;
// 局部变量和函数在匿名函数执行完后撤销
var a, b, c;
function fn() {
}
// 使jQuery成为全局变量
window.jQuery = window.$ = jQuery;
})(window);

自执行匿名函数中声明的局部变量和函数在匿名函数执行完毕后撤销,释放内存,对外只保留jQuery全局变量接口。

一、原型模式结构

代码如下:

// 定义一个jQuery构造函数
var jQuery = function() {
};
// 扩展jQuery原型
jQuery.prototype = {
};

上面是一个原型模式结构,一个jQuery构造函数和jQuery实例化对象的的原型对象,我们一般是这样使用的:

. 代码如下:

var jq = new jQuery(); //变量jq通过new关键字实例化jQuery构造函数后就可以使用原型对象中的方法,但是jQuery并不是这么使用的

二、返回选择器实例

. 代码如下:

var jQuery = function() {
// 返回选择器实例
return new jQuery.prototype.init();
};
jQuery.prototype = {
// 选择器构造函数
init: function() {
}
};

虽然jQuery不是通过new关键字实例化对象,但是执行jQuery函数仍然得到的是一个通过new关键字实例化init选择器的对象,如:
var navCollections = jQuery('.nav'); //变量navCollections保存的是class名为nav的DOM对象集合.
三、访问原型方法

. 代码如下:

var jQuery = function() {
// 返回选择器实例
return new jQuery.prototype.init();
};
jQuery.prototype = {
// 选择器构造函数
init: function() {
},
// 原型方法
toArray: function() {
},
get: function() {
}
};
// 共享原型
jQuery.prototype.init.prototype = jQuery.prototype;

我们一般习惯称jQuery函数中返回的选择器实例对象为jQuery对象,如我们可以这样使用:

. 代码如下:

jQuery.('.nav').toArray(); // 将结果集转换为数组

为什么可以使用toArray方法呢? 即如何让jQuery对象访问jQuery.prototype对象中的方法?只需将实例化选择器对象的原型对象共享jQuery.prototype对象,上面体现代码为:

. 代码如下:

jQuery.prototype.init.prototype = jQuery.prototype; // 共享原型

四、自执行匿名函数

. 代码如下:

(function(window, undefined) {
var jQuery = function() {
// 返回选择器实例
return new jQuery.prototype.init();
};
jQuery.prototype = {
// 选择器构造函数
init: function() {
},
//原型方法
toArray: function() {
},
get: function() {
}
};
jQuery.prototype.init.prototype = jQuery.prototype;
// 局部变量和函数在匿名函数执行完后撤销
var a, b, c;
function fn() {
}
// 使jQuery成为全局变量
window.jQuery = window.$ = jQuery;
})(window);

自执行匿名函数中声明的局部变量和函数在匿名函数执行完毕后撤销,释放内存,对外只保留jQuery全局变量接口。

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

js实例教程-jQuery基础框架浅入剖析

全部内容,希望文章能够帮你解决

js实例教程-jQuery基础框架浅入剖析

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过