jQuery框架实例代码分析

弓箭手准备

弓箭手准备

2016-02-20 01:11

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

随着时代发展,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岁, 看代码:

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

运行代码框

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

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

好啦,先别激动, 我们注意到这个框架跟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指针指当前对象实例。

展开更多 50%)
分享

猜你喜欢

jQuery框架实例代码分析

Web开发
jQuery框架实例代码分析

基于JQuery框架的AJAX实例代码

Web开发
基于JQuery框架的AJAX实例代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

JQuery 小练习(实例代码)

Web开发
JQuery 小练习(实例代码)

JQUERY操作JSON实例代码

Web开发
JQUERY操作JSON实例代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jquery的颜色选择插件实例代码

Web开发
jquery的颜色选择插件实例代码

jQuery 学习入门篇附实例代码

Web开发
jQuery 学习入门篇附实例代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

JQuery知识:20个jQuery教程+11个jQuery插件

JQuery知识:20个jQuery教程+11个jQuery插件

如何禁止修改Win7系统的IP地址

如何禁止修改Win7系统的IP地址
下拉加载更多内容 ↓