• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

jQuery框架实例代码分析_jquery

jquery 搞代码 7年前 (2018-06-12) 219次浏览 已收录 0个评论

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

运行代码框

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址