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 相关文章推荐
css值转换成数值请抛弃parseInt
Oct 24 Javascript
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
javascript+canvas制作九宫格小程序
Dec 28 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
简单实现js上传文件功能
Aug 21 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
原生js实现九宫格拖拽换位
Jan 26 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 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
jQuery学习笔记之jQuery的动画
2010/12/22 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
Element Input输入框的使用方法
2020/07/26 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
python学习 流程控制语句详解
2016/06/01 Python
Django的分页器实例(paginator)
2017/12/01 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
python实现交并比IOU教程
2020/04/16 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
运动会口号8字
2014/06/07 职场文书
党员个人对照检查材料
2014/10/01 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
全陪导游词
2015/02/04 职场文书
教师个人师德总结
2015/02/06 职场文书
公司放假通知怎么写
2015/04/15 职场文书
大学生暑假实习总结
2015/07/13 职场文书
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫