jQuery基础框架浅入剖析

 更新时间:2012年12月27日 17:23:32   作者:  
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全局变量接口。

来源: http://www.cnblogs.com/yangjunhua/archive/2012/12/27/2835989.html

相关文章

  • jQuery源码分析之Event事件分析

    jQuery源码分析之Event事件分析

    对于javascript事件扩展,所有的lib都差不多。和jquery和prototype,yui和Ext,其要解决的首要问题是兼容性,所有 lib都会对event进行包裹,统一其属性解决其兼容性。
    2010-06-06
  • JQuery中根据属性或属性值获得元素(6种情况获取方法)

    JQuery中根据属性或属性值获得元素(6种情况获取方法)

    根据属性或属性值获得元素本文介绍六种不同的情况获取方法,有需要的朋友可以参考下
    2013-01-01
  • 深入学习jQuery Validate表单验证(二)

    深入学习jQuery Validate表单验证(二)

    这篇文章主要针对jQuery Validate表单验证为大家进行详细介绍,通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到js代码中,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • jquery.fileEveryWhere.js 一个跨浏览器的file显示插件

    jquery.fileEveryWhere.js 一个跨浏览器的file显示插件

    大牛ppk都说过,在从多表单控件中,上传文件控件的样式是最难以控制的。见文章Styling an input type="file"。本插件也多是参考此文
    2011-10-10
  • chosen实现省市区三级联动

    chosen实现省市区三级联动

    这篇文章主要为大家详细 介绍了chosen实现省市区三级联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • jQuery实现鼠标跟随效果

    jQuery实现鼠标跟随效果

    本文主要分享了jQuery实现鼠标跟随效果的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • jQuery插件开发的五种形态小结

    jQuery插件开发的五种形态小结

    这篇文章主要介绍了jQuery插件开发的五种形态小结,具体的内容就是解决javascript插件的8种特征,非常的详细,这里推荐给小伙伴们。
    2015-03-03
  • jquery popupDialog 使用 加载jsp页面的方法

    jquery popupDialog 使用 加载jsp页面的方法

    下面小编就为大家带来一篇jquery popupDialog 使用 加载jsp页面的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • jquery实现选项卡切换代码实例

    jquery实现选项卡切换代码实例

    这篇文章主要介绍了jquery实现选项卡切换,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • jQuery .tmpl() 用法示例介绍

    jQuery .tmpl() 用法示例介绍

    解决 PHP 拼数据这方面的问题而有了 Smarty 这些模版,JavaScript 也可以利用模版来解决这些问题,比如基于 jQuery 的 jquery.tmpl
    2014-08-08

最新评论