从零开始写jQuery框架
作者:martin0728 来源:经典论坛 发布时间:2008-12-24 13:37:00
摘要: 本文由简到繁地介绍了以jQuery作为蓝本的js框架开发步聚, 希望借助本文大家对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岁, 看代码:
好啦,先别激动, 我们注意到这个框架跟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指针指当前对象实例。
在jQuery中使用了一个工厂方法来创建一个实例,这个方法位于jQuery.prototype中, 现在我们重新来定义Shaka.prototype, 给它添加一个init方法用于返回一个Shaka的实例, 并且把Shaka的构造函数稍稍改变一下:
var Shaka = function(age) { return new Shaka.fn.init(age); };
Shaka.fn = Shaka.prototype = {
init: function(age) { this.age = age; return this; },
sayHello: function() { alert('I am a little baby, my age is ' + this.age + ' years old.'); }
};
Shaka.fn.init.prototype = Shaka.fn;
这里new Shaka.fn.init(age)创建的对象具有init方法的prototype指向对象的方法 , 因此我们将init方法的prototype指向 Shaka的prototype, 这样创建出来的对象就具有了Shaka.prototype里面定义的方法。
OK,现在我们的小宝宝变成大一点的宝宝了,打个招呼先:
嗯,好象有点样子了,但是光这样还不行,来点实际的, 我们在新框架中实现jquery里val()方法的部分功能,这个方法不加参数调用时返回指定ID的input的值,加参数时为设定这个input的值,与jQery一样,我们约定使用id来查找对象时使用"#"符号。把要查找的目标ID作为构造函数的参数传进去,我们给Shaka.prototype添加一个val()方法, 给Shaka添加一个selector的属性用于存储我们要查找的目标。:
Shaka.fn = Shaka.prototype = {
init: function(selector) { this.selector = selector; return this; },
val: function(newValue) { //方法实现代码 }
};
var Shaka = function(selector) { return new Shaka.fn.init(selector); };


猜你喜欢
- 目录前言第一步:查看所有 SSH-Key第二步:生成一个 ssh-key,用于配置公司的 GitLab第三步:Github 生成一个 SSH
- 今天在测试一个pytorch代码的时候显示显存不足,但是这个网络框架明明很简单,用CPU跑起来都没有问题,GPU却一直提示out of me
- 因此,我们主要解决的思路是效验session ID的有效性. 以下为引用的内容: <?php if(!isset($_SESSION[
- 正则给header的冒号两边参数添加单引号(Python请求用)直接从浏览器Chrome复制header值如下:Host: kyfw.123
- paramiko 执行服务器脚本并拿到实时结果import paramikocmd = '{0}/{1} linux 32'
- 一. torch.cat()函数解析1. 函数说明1.1 官网:torch.cat(),函数定义及参数说明如下图所示:1.2 函数功能函数将
- 要自己写一个存储系统,可以依照以下步骤:1.写一个继承自django.core.files.storage.Storage的子类。from
- 本文实例讲述了wxPython窗口的继承机制,分享给大家供大家参考。具体分析如下:示例代码如下:import wx class
- 本文实例讲述了js类的继承定义与用法。分享给大家供大家参考,具体如下:如何实现类的继承呢?有如下2个构造函数:function People
- 使用phpmyadmin或者navicat链接数据库时提示【客户端软件无法连接localhost】经检查发现是IPV6地址监听了3306端口
- UTF-8匹配: 在javascript中,要判断字符串是中文是很简单的。比如: var str = "php编程";
- 需求:根据country列的不同值,将内容分到不同sheet方法一:读取原Excel,根据country列将不同的内容放到不同的sheet,
- 然后给脚本文件运行权限,方法(1)chmod +x ./*.py方法(2)chmod 755 ./*.py (777也无所谓啦)这个命令不去
- 最近买了个腾讯云服务器,搭建环境。该笔记用于系统上未装过mysql的干净系统第一次安装mysql。自己指定安装目录,指定数据文件目录。lin
- os.systemsystem方法会创建子进程运行外部程序,方法只返回外部程序的运行结果。这个方法比较适用于外部程序没有输出结果的情况。im
- 什么是约束作用于表上的规则,限制存储在表中的数据约束分类:约束描述关键字非空约束该字段数据不能为nullNOT NULL唯一约束该字段数据唯
- mysql的存储目录默认是在/var/lib/mysql/,下面将修改默认存储目录.本文使用mysql8.0.20版本,与mysql8.0.
- 1、Xmind用例编写规范1:需求大模块2:大模块中的小模块(需要根据需求来看需要多少层)3:用例等级和用例名称用例等级(转换成Excel文
- windows下python安装pip 简易教程,具体内容如下1.前提你要已经安装了 某个 版本的 python, 下载地址)安装后,需要配
- 在有些使用 javascript 来渲染数据的时候,为了能动态获取不同的数据,并且保持 javascript&