jQuery基础框架浅入剖析
2012-12-27 00:00
204 查看
一、原型模式结构
上面是一个原型模式结构,一个jQuery构造函数和jQuery实例化对象的的原型对象,我们一般是这样使用的:
二、返回选择器实例
虽然jQuery不是通过new关键字实例化对象,但是执行jQuery函数仍然得到的是一个通过new关键字实例化init选择器的对象,如:
var navCollections = jQuery('.nav'); //变量navCollections保存的是class名为nav的DOM对象集合.
三、访问原型方法
我们一般习惯称jQuery函数中返回的选择器实例对象为jQuery对象,如我们可以这样使用:
为什么可以使用toArray方法呢? 即如何让jQuery对象访问jQuery.prototype对象中的方法?只需将实例化选择器对象的原型对象共享jQuery.prototype对象,上面体现代码为:
四、自执行匿名函数
自执行匿名函数中声明的局部变量和函数在匿名函数执行完毕后撤销,释放内存,对外只保留jQuery全局变量接口。
来源: https://www.geek-share.com/detail/2567598021.html
// 定义一个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全局变量接口。
来源: https://www.geek-share.com/detail/2567598021.html
相关文章推荐
- jQuery基础框架浅入剖析
- html基础开发-jQuery框架基础语法攻略(攻略一)
- 轻量jquery框架之--组件交互基础设计
- 浅析jQuery基础框架
- 使用jquery的验证框架,对表单进行验证(简单、基础)
- 深入剖析MFC基础框架——跟踪MFC单文档程序的执行过程:
- 前端框架技术--jQuery基础应用
- 浅析jQuery基础框架
- 浅析jQuery基础框架
- jQuery源码剖析-框架结构简述
- 深入剖析MFC基础框架——跟踪MFC单文档程序的执行过程
- java基础-集合框架
- DXUT框架剖析(3)
- Java基础-集合框架10 枚举
- jquery 遍历数组each的用法,还有一个jquery的基础用法
- Jquery基础之事件操作详解
- jQuery 2.0.3 源码分析 Deferred(最细的实现剖析,带图)
- 【Java基础】--Java容器剖析:collection容器
- 框架基础:ajax设计方案(二)—集成轮询技术
- java学习【web基础-jQuery】