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 相关文章推荐
Javascript & DHTML 实例编程(教程)基础知识
Jun 02 Javascript
JS 文字符串转换unicode编码函数
May 30 Javascript
超简单的jquery的AJAX用法
May 10 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
原生JS实现汇率转换功能代码实例
May 13 Javascript
在Vue中使用mockjs代码实例
Nov 25 Vue.js
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
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
用js生产批量批处理执行命令
2008/07/28 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
Python with用法实例
2015/04/14 Python
python获取当前计算机cpu数量的方法
2015/04/18 Python
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
从python读取sql的实例方法
2020/07/21 Python
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
北京银河万佳Java面试题
2012/03/21 面试题
机电一体化专业推荐信
2013/12/03 职场文书
运动会邀请函范文
2014/01/31 职场文书
水电站项目建议书
2014/05/12 职场文书
介绍信的写法
2015/01/31 职场文书
党员转正申请报告
2015/05/15 职场文书