jQuery框架实例代码分析

2016-02-20 01:11 6 1 收藏

今天图老师小编要向大家分享个jQuery框架实例代码分析教程,过程简单易学,相信聪明的你一定能轻松get!

【 tulaoshi.com - Web开发 】

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

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

我们从最开始的说起:

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

Shaka.fn =  Shaka.prototype = {};

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

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

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

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

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

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

来源:http://www.tulaoshi.com/n/20160220/1633440.html

延伸阅读
标签: Web开发
今天重点一个toggle(fn,fn,….)函数,主要是用来切换某个事件的轮换操作。 比如:对一个按钮的点击事件和一个DIV的背景,点击一次按钮,将DIV的背景显示为蓝色,点击第二次的时候要将DIV的 背景色改为黑色。 我们定义的HTML代码如下: body input type="button" id="btnShow" value="Toggle"/ div id="DivToggle"此处显示 id "DivToggle" ...
标签: Web开发
代码如下: %@ Page Language="C#" % !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" script runat="server"/script html xmlns="http://www.w3.org/1999/xhtml" head runat="server" title无标题页/title script src="../jquery脚本/jquery-1[1].3.2....
标签: Web开发
一、Ajax所有过程事件分析 JQuery在执行Ajax的过程中会触发很多事件。 这些事件可以分为两种事件,一种是局部事件(Local),一种是全局事件(Global)。 局部事件:可以通过$.ajax来调用,你某一个Ajax请求不希望产生全局的事件,则可以设置global:false。 全局事件:跟click等事件类似,可以绑定到到每一个DOM元素上。 这些事件的...
标签: Web开发
提供方便方法操作cookie : 代码如下: $.cookie('the_cookie'); // 获得cookie $.cookie('the_cookie', 'the_value'); // 设置cookie $.cookie('the_cookie', 'the_value', { expires: 7 }); //设置带时间的cookie $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'sosuo8.com', secure: true }); $.cookie('the_...
标签: Web开发
jquery操作表单元素代码 /* 假设在一个表单中有一个按钮id="save" $(document).ready(function(){ $("#save").click(function(){ $("#save").attr("disabled",true);//设为不可用 $("#form1")[0].submit();//如果你有很多个id为form1的表单也没关系,只有第一个会提交的哈哈. }); }); 取下拉菜单选中项的文本; 获取和设置下拉菜单的值;...

经验教程

378

收藏

63
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部