一、原型模式结构
1 // 定义一个jQuery构造函数 2 var jQuery = function() { 3 4 }; 5 6 // 扩展jQuery原型 7 jQuery.prototype = { 8 9 };
上面是一个原型模式结构,一个jQuery构造函数和jQuery实例化对象的的原型对象,我们一般是这样使用的:
1 var jq = new jQuery(); //变量jq通过new关键字实例化jQuery构造函数后就可以使用原型对象中的方法,但是jQuery并不是这么使用的
二、返回选择器实例
1 var jQuery = function() { 2 3 // 返回选择器实例 4 return new jQuery.prototype.init(); 5 }; 6 jQuery.prototype = { 7 8 // 选择器构造函数 9 init: function() { 10 11 } 12 };
虽然jQuery不是通过new关键字实例化对象,但是执行jQuery函数仍然得到的是一个通过new关键字实例化init选择器的对象,如:
1 var navCollections = jQuery('.nav'); //变量navCollections保存的是class名为nav的DOM对象集合.
三、访问原型方法
1 var jQuery = function() { 2 3 // 返回选择器实例 4 return new jQuery.prototype.init(); 5 }; 6 jQuery.prototype = { 7 8 // 选择器构造函数 9 init: function() { 10 11 }, 12 13 // 原型方法 14 toArray: function() { 15 16 }, 17 get: function() { 18 19 } 20 }; 21 22 // 共享原型 23 jQuery.prototype.init.prototype = jQuery.prototype;
我们一般习惯称jQuery函数中返回的选择器实例对象为jQuery对象,如我们可以这样使用:
1 jQuery('.nav').toArray(); // 将结果集转换为数组
为什么可以使用toArray方法呢? 即如何让jQuery对象访问jQuery.prototype对象中的方法?只需将实例化选择器对象的原型对象共享jQuery.prototype对象,上面体现代码为:
1 jQuery.prototype.init.prototype = jQuery.prototype; // 共享原型
四、自执行匿名函数
1 (function(window, undefined) { 2 3 var jQuery = function() { 4 5 // 返回选择器实例 6 return new jQuery.prototype.init(); 7 }; 8 jQuery.prototype = { 9 10 // 选择器构造函数 11 init: function() { 12 13 }, 14 15 //原型方法 16 toArray: function() { 17 18 }, 19 get: function() { 20 21 } 22 }; 23 jQuery.prototype.init.prototype = jQuery.prototype; 24 25 // 局部变量和函数在匿名函数执行完后撤销 26 var a, b, c; 27 function fn() { 28 29 } 30 31 // 使jQuery成为全局变量 32 window.jQuery = window.$ = jQuery; 33 34 })(window);
自执行匿名函数中声明的局部变量和函数在匿名函数执行完毕后撤销,释放内存,对外只保留jQuery全局变量接口。
转载请注明转自博客园浅析jQuery基础框架
相关推荐
浅析JQuery框架及其插件应用,欢迎交流。
这个函数的参数就是jQuery()===$()执行函数中的参数,可以先看我之前写的浅析jQuery基础框架一文,了解基础框架后,再看此文。 思路分析: 以下是几种jQuery的使用情况(用于查询dom),每种情况都返回一个选择器实例...
Jquery是优秀的Javascrīpt框架。我们现在来讨论下在 Jquery 中两个页面载入后执行的函数。 $(document).ready(function(){ // 在这里写你的代码…});在DOM加载完成时运行的代码 可以简写成 jQuery(function(){ });...
上篇文章给大家介绍了jQuery的框架,有关jquery的基础知识可以参考下。 jQuery使用许久了,但是有一些API的实现实在想不通。下面将使用简化的代码来介绍,主要关注jQuery的实现思想。 相较于上一篇,代码更新了:21...
就是说其代码组织是模块化的, angular的view可能仅仅是一个框架, , 对view的dom操作或者时间监听都是在directive中实现的, 而且一般情况下很少直接去写dom操作代码, 只要你监听model, model发生变化后view也会发生...
这篇文章就主要介绍一下javascriptdelegate的用法和原理,以及Dojo,jQuery等框架中delegate的接口。首先介绍一下JavaScript的事件代理。事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加...
最近做web项目,接触了jquery等框架,虽然使用方便,但是还是想学习下Javascript,今天分享下最近对js原型继承的理解,不足之处欢迎指正。 一、构造器的原型属性与原型对象 刚接触js时通常依样画瓢,用函数new一个...
4.2 struts2框架实现数据校验.....................................................................................................................34 第 5章 国际化实现......................................
在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取到的 DOM 元素进行操作。但是,当我们...
jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作。 $.ajax({ beforeSend:function(){ // handle the beforeSend event }, complete:...
在ASP.NET MVC beta中我们可以使用Ajax.BeginForm, Ajax.ActionLink来进行Ajax调用,同样我们也可以使用一些支持Ajax 框架如jQuery来简化对ajax的调用。
Vue 系列 学习笔记阅读目录Vue 双向绑定原理,浅析 MVVMVue 源码概要VueX 状态管理常用地址链接Vue 是一个开源框架,最新版本已经更新到了 3.0,当前系列基于 2.X(单独发文 3.0),是一个独立的 Javascript 框架,...