jQuery框架实例代码分析

随着时代发展,javascript阵营里面出现了越来越多的优秀的框架,大大简化了我们的开发工作,在我们使用这些框架的时候是不是也应该饮水思源想想它们都是怎样构建起来的呢?如果你不满足于仅仅是使用一些现成的API,而是深入了解它们内部的实现机制(照某人的说法, API是贬值最快的东西),最好的办法就是阅读它们的源代码了,前提是你读得懂。

最近两天研究了一下jQuery的源码,在这里将本人一些粗浅认识分享出来,不当之处请各位指正。好了,下面我们就来看看jQuery大概是怎样工作的,我假定你已经具备了一些基本的javascript知识,如果基础不够俺推荐你阅读《JavaScript高级程序设计》和《悟透JavaScript》这两本书。本文不适合对js里面的类、对象、函数、prototype等概念没有了解的朋友。

我们从最开始的说起:

首先构造一个对象给使用者,假定我们这个框架叫 Shaka   ( 俺的名字;) )
var Shaka = function(){}; 这里我们创建了一个空函数,里面什么也没有,这个函数实际上就是我们的构造函数。为了让我们生成的对象能够调用在prototype里定义出来的方法, 我们需要用原型的方式(把Shaka当作是一个类)给Shaka添加一些方法,于是定义:

Shaka.fn =  Shaka.prototype = {};

这里的Shaka.fn相当于Shaka.prototype的别名,方便以后使用,它们指向同一个引用。

OK,我们添加一个sayHello的方法, 给Shaka添加一个参数,这样这个框架最基本的样子已经有了,如果它有生命的话那么它现在是1岁, 看代码:

运行代码框
<script type="text/javascript">
var Shaka = function(age){ this.age = age; };
Shaka.fn = Shaka.prototype = { sayHello: function() { alert('I am a little baby, my age is ' + this.age + ' years old.'); }};
var babyShaka = new Shaka(1);
babyShaka.sayHello();
</script>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

好啦,先别激动, 我们注意到这个框架跟jQuery在使用上是有一些差别的, 比如在jq 中我们可以这样写:

jQuery('#myid').someMethod();

这是怎样做到的呢, 也就是说 jQuery()这个构造函数返回了一个jQuery的对象实例,因此我们可以在上面调用它的方法,所以Shaka的构造函数应该返回一个实例,它看起来应该是这个样子:

var Shaka = function(){ return //返回Shaka的实例; };

那么我们要如何取得一个Shaka的实例呢, 我们先来回顾一下使用prototype方式来模拟类的时候 var someObj = new  MyClass(); 这个时候实际上是创建一个新对象someObje,把新对象作为this指针,调用 MyClass函数,即类的构造函数, 然后 someObj 就获得了在 MyClass.prototype里面定义的方法, 这些方法内的this指针指当前对象实例。

时间: 2016-06-25

jQuery框架实例代码分析的相关文章

jQuery Ajax 实例代码 ($.ajax、$.post、$.get)_jquery

$.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , data: data , success: success , dataType: dataType }); 二.$.ajax的参数描述 参数 描述 url 必需.规定把请求发送到哪个 URL. data 可选.映射或字符串值.规定连同请求发送到服务器的数据. success(data, textS

原生JS实现风箱式demo,并封装了一个运动框架(实例代码)_javascript技巧

声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构.话不多说,现在开始改demo的制作. 首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的框架. function getStyle(obj,attr) { if(obj.currentStyle){ return obj.currentStyle[attr];//为了获取IE下的属性值 }else{ return window.getComputedStyle(obj,null)[at

web前端开发JQuery常用实例代码片段(50个)_jquery

本文给大家展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成.这些都是我尽量记住的有着最佳性能的代码段,因此如果你发现你任何可以做得更好的地方的话,欢迎把你的版本粘贴在评论中!我希望你在这一文章中能找到有帮助的东西. 1. 如何创建嵌套的过滤器 //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下

jQuery Validation实例代码 让验证变得如此容易_jquery

使用客户端验证可以有效的减少数据往返服务器和客户端的次数,有利于提高服务器的资源利用路,并且还能够给用户直观,快速的回应. 在Web 2.0时代,这显得尤其重要,我想大家一定和我一样讨厌用基础的javascript写着烦人的验证.现在服务器端的验证有比较好的框架可以解决,ASP.NET MVC就可以很好的完成这样的工作,所以对于.net开发来说,拥有一个好的客户端养正框架对于开发效率的提高起着至关重要的作用. 我们可以通过下面的地址获得这个JS框架 JQuery jQuery Validatio

Java线程池框架核心代码分析

前言 多线程编程中,为每个任务分配一个线程是不现实的,线程创建的开销和资源消耗都是很高的.线程池应运而生,成为我们管理线程的利器.Java 通过Executor接口,提供了一种标准的方法将任务的提交过程和执行过程解耦开来,并用Runnable表示任务. 下面,我们来分析一下 Java 线程池框架的实现ThreadPoolExecutor. 下面的分析基于JDK1.7 生命周期 ThreadPoolExecutor中,使用CAPACITY的高3位来表示运行状态,分别是: RUNNING:接收新任务

php和数据库结合的一个简单的web实例 代码分析 (php初学者)_php实例

然而,除了安装部分,有或多或少的针对于Windows的说明外,其它部分对所有的平台都是一样的.顺便说一下,关于安装部分,请看本站的安装指南.在这个教程中,我们将一步一步地建立一个小的网站,使用了PHP和MySQL的下面特性: 1. 查看数据库: 2. 编辑数据库的记录: 3. 修改数据库的记录: 4. 删除数据库的记录. 我们将同时学习MySQL和PHP,一起去感觉它们.本文直接从这里学,如果不会安装配置Apache+PHP+Mysql请查看网页教学网相关文章吧! 先运行web服务器(已增加PH

jquery json 实例代码_jquery

复制代码 代码如下: 1.获取DataSet 2.转成DataTable 3. public static string DataTableToJson(DataTable dt) { StringBuilder jsonBuilder = new StringBuilder(); //jsonBuilder.Append("{"); //输出的要求不要'}' //jsonBuilder.Append(dt.TableName); jsonBuilder.Append("[&

.NET示波器控件的实例代码分析_实用技巧

缘起同事负责的项目中,会扫描硬件中的某个东西是否存在,因此老板希望对这些扫描结果,能有个图像画的介面可以查看因此做了个小工具,可读取同事提供的数据,并将其视觉化显示那显示扫描结果最容易的就是示波器了,但第三方控件的示波器功能又太繁琐,最终就决定自己做个简单的反正对我来说用GDI来绘制,跟花时间去研究没用过的第三方控件,时间也不会差太多 思路 如图所示,示波器其实就是这样简单的图整体思路其实很单纯,就把一个示波器分成三个部分来绘制.首先是上面那块横线,通常表示高值第二块是下面那块横线,表示低直第三

Python 文件操作技巧(File operation) 实例代码分析_python

常用的module是 os ,os.path 和shutil,所以要先引入他们. python遍历文件夹和文件 这个也许是最常用的功能,如下: 复制代码 代码如下: import os  import os.path  rootdir = "D:\\programmer\\training"  for parent, dirnames, filenames in os.walk(rootdir):      #case 1:      for dirname in dirnames: