jQuery基础框架浅入剖析


Posted in Javascript onDecember 27, 2012

一、原型模式结构

// 定义一个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

Javascript 相关文章推荐
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
Angular获取手机验证码实现移动端登录注册功能
May 17 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
JavaScript递归函数定义与用法实例分析
Jan 24 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
vue设置默认首页的操作
Aug 12 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 #Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 #Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 #Javascript
Three.js源码阅读笔记(光照部分)
Dec 27 #Javascript
通过jQuery源码学习javascript(三)
Dec 27 #Javascript
JS原型对象通俗"唱法"
Dec 27 #Javascript
通过jQuery源码学习javascript(二)
Dec 27 #Javascript
You might like
php中异常处理方法小结
2015/01/09 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
Python文件操作类操作实例详解
2014/07/11 Python
python基础教程之面向对象的一些概念
2014/08/29 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
Python发展史及网络爬虫
2019/06/19 Python
python3 线性回归验证方法
2019/07/09 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
Java和Javasciprt的区别
2012/09/02 面试题
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
《第一朵杏花》教学反思
2014/04/16 职场文书
《海底世界》教学反思
2014/04/16 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
初中教师个人总结
2015/02/10 职场文书