1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

jQuery框架实例代码分析

作者:用户 来源:互联网 时间:2016-06-25 15:54:27

框架对象实例函数prototype一个

jQuery框架实例代码分析 - 摘要: 本文讲的是jQuery框架实例代码分析, 随着时代发展,javascript阵营里面出现了越来越多的优秀的框架,大大简化了我们的开发工作,在我们使用这些框架的时候是不是也应该饮水思源想想它们都是怎

随着时代发展,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指针指当前对象实例。



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索框架 , 对象 , 实例 , 函数 , prototype 一个 jquery ui框架实例、html框架布局实例代码、ssh框架实例源代码、mui框架开发实例代码、ssh框架实例代码,以便于您获取更多的相关知识。

jquery-求高手指点一下 分析一下 每一句代码主要是这个.selectWidget

问题描述 求高手指点一下 分析一下 每一句代码主要是这个.selectWidget $(".ui-select").selectWidget({ change : function (changes) { } effect : "slide", keyControl : true, ...

jQuery中noConflict()用法实例分析_jquery

本文实例讲述了jQuery中noConflict()用法。分享给大家供大家参考。具体分析如下: jQuery默认使用"$"操作符,$ 符号只是 window.jQuery 对象的一个引用,jQuery.noConflict() ,这个函数将变量$的控制权让渡给第一个实现它的那个库。这有助...

供参考的 php 学习路线

第一阶段第一讲,WEB基础     1.1 网站基本知识; 1.2 网络协议介绍; 1.3 B/S与C/S结构的区别; 1.4 WEB编程、网站开发技术介绍。     第二讲,网页设计     2.1 Dreamweaver介绍及使用; 2.2 静态网页HTML语言; 2.3 标题与段落,换...

分布式架构之电子商务

电子商务系统,jeesz团队正在赶进度,有愿意一起学习的朋友欢迎来咨询(手把手搭建分布式企业架构--电子商务平台) 声明:该框架面向企业的大型互联网分布式企业架构,后期会介绍linux上部署高可用集群项目。有愿意...

jQuery源码 框架分析

每一个框架都有一个核心,所有的结构都是基于这个核心之上,结构建立好了之后,剩下的就是功能的堆砌。 jQuery的核心就是从HTML文档中匹配元素并对其操作。 就跟一座大楼一样,让我们一步一步了解这座大厦的基石和结构。...

前三篇
后三篇