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 简练的几个函数
Aug 29 Javascript
js 格式化时间日期函数小结
Mar 20 Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
浅析vue component 组件使用
Mar 06 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 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数组内存耗用太多问题的解决方法
2010/04/05 PHP
php 函数使用方法与函数定义方法
2010/05/09 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
php实现计数器方法小结
2015/01/05 PHP
新浪SAE搭建PHP项目教程
2015/01/28 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
对之前写的jquery分页做下升级
2014/06/19 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
小程序实现带年月选取效果的日历
2018/06/27 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
Python中最好用的命令行参数解析工具(argparse)
2019/08/23 Python
python实现单链表的方法示例
2019/09/03 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
图书室标语
2014/06/21 职场文书
武当山导游词
2015/02/03 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle