- 浏览: 1184458 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
zhizhen23:
LZ 提供的链接地址失效了
重写的isPlainObject方法 -
LovingBaby:
<div class="quote_title ...
读jq之二(两种扩展) -
LovingBaby:
说的很清楚!jQuery作者为了实现简洁调用的苦心!高超的编程 ...
读jq之一(jq对象的组成) -
hard_ly:
...
将伪数组转换成数组 -
zlxzlxzlxzlxzlx:
这不能算是任意进制之间的转换,例如二十六进制、十二进制又该如何 ...
用递归实现十进制数转换N进制
上一篇分析了jquery对象的组成,这次来分析下jquery的extend方法。部分如下:
jQuery.extend = jQuery.fn.extend = function() { ... };
我们可以用$.extend去扩展自定义的对象,如:
var myself = {name:jack}; $.extend(myself, {setName:function)(n){this.name=n;} }); myself.setName("tom");
通过$.extend为对象myself添加了setName方法。但这里主要讨论$.extend如何构建jquery库的。不知注意到上面代码中jQuery.extend和jQuery.fn.extend是同一个函数。我们浏览下jquery库,发现有些方法是通过调用jQuery.extend扩展的,有的则是通过调用jQuery.fn.extend扩展的。下面分别讨论:
1,通过jQuery.extend扩展
我们知道jQuery.extend中的jQuery类型是function,即typeof jQuery值为字符串“function”。如果把jQuery当成一个类,jQuery.extend相当于为该类添加了静态方法extend。静态方法是不需要new一个实例再去调用的,通过“类名+方法名”直接调用。即jQuery.extend(...),jQuery又被赋值给$。因此我们更习惯$.extend(...)。
源码中直接调用jQuery.extend方法,只传一个参数。如下:
jQuery.extend({ noConflict: function( deep ) { window.$ = _$; if ( deep ) window.jQuery = _jQuery; return jQuery; }, ... });
我们知道extend中如果只传一个参数,那么将执行该句:
target = this;
即扩展自己,而这里的this则是function jQuery。也就是说给function jQuery添加了许多静态方法,这些方法都可以直接通过jQuery.xx(或$.xx)方式来调用,而不是先执行(调用)jQuery方法再去调用xx,如$("#id").xx。也许下面这个例子更容易理解:
function fun(){}//定义一个类(函数) //为该类(函数)添加一个静态方法extend fun.extend=function(obj){ for(var a in obj) this[a] = obj[a];//注意:这里的tihs即fun } //调用extend为该类添加了静态属性name,静态方法method1 fun.extend({name:"fun",method1:function(){}}); //输出name,prototype,extend,method1 console.dir(fun)
因此,jquery中的isFunction, isArray, trim等都是静态方法,只能通过$.isFunction, $.isArray, $.trim来调用。而不能通过$("...").isFuction, $("...").isArray, $("...").trim调用。
2,通过jQuery.fn.extend扩展
jQuery.fn等于jQuery.prototype,也就是说给function jQuery的原型(prototype)上挂了个extend方法。通过调用jQuery.fn.extend(object)来扩展时(注意只传一个参数object),extend函数中仍然会执行
target = this;
而这时的this则是jQuery.prototype(上面则是jQuery函数自身)。即给jQuery.prototype上添加了许多属性,方法。当jQuery函数执行时,如$()或jQuery(),更多时候是$()。该函数会new一个jQuery(见上一篇jquery对象的组成)。这时则把扩展的属性,方法都附加到new生成的对象上了。也许下面这个示例更容易理解:
function fun(){}//定义一个类(函数) //给该类原型上添加一个方法extned fun.prototype.extend = function(obj){ for(var a in obj) this[a] = obj[a];//注意:这里的this即是fun.prototype } //调用extend方法给fun.prototype上添加属性,方法 fun.prototype.extend({name:"fun2",method1:function(){}}) //输出name,extend,method1 console.dir(new fun())
因此扩展的属性或方法都添加到jquery对象上了。
如bind, one, unbind等可以通过$("...").bind, $("...").one, $("...").unbind方式调用。却不能通过 $.bind, $.one, $.unbind方式调用。
jquery库与prototype库一样都是通过extend方法扩展出整个库的。相对来说jqueyr的扩展方式更难理解一些。
总结如下:
a,jQuery.extend({...})是给function jQuery添加静态属性或方法
b,jQuery().extend({...})是给jquery对象添加属性或方法。
ps:这里的jQuery即为$。
- jq2.zip (614 Bytes)
- 下载次数: 96
评论
}
fun.prototype.extend = function (obj) {
for (var a in obj) {
this[a] = obj[a];//this === fun.prototype
}
console.log(this)
};
fun.prototype.extend({name: 'prototype-extend', method2: function () {
}});
console.log(new fun());
//这是我用NodeJS运行的结果:
{ extend: [Function],
name: 'prototype-extend',
method2: [Function] }
{}
//很纳闷,为什么原型的属性方法,对象没有继承过来,这个和V8引擎有关系?
哈哈,这是早期的回答,本来就是应该这样的,特来更正....
}
fun.prototype.extend = function (obj) {
for (var a in obj) {
this[a] = obj[a];//this === fun.prototype
}
console.log(this)
};
fun.prototype.extend({name: 'prototype-extend', method2: function () {
}});
console.log(new fun());
//这是我用NodeJS运行的结果:
{ extend: [Function],
name: 'prototype-extend',
method2: [Function] }
{}
//很纳闷,为什么原型的属性方法,对象没有继承过来,这个和V8引擎有关系?

平时只管用,从不管这些之前区别,达到目的就行了。
以后多来学习下
发表评论
-
如何定制你自己的jQuery
2015-01-12 08:38 2986jQuery随着版本的不断升级代码量也随之增加,从1.0. ... -
读jQuery之二十一(队列queue)
2013-11-21 14:13 2518queue模块在jQuery中分在Effects中,搜索整个 ... -
读jQuery之二十(Deferred对象)
2013-09-24 07:23 1251Deferred对象是由$.Deferred构造的,$.D ... -
读jQuery之十九(多用途回调函数列表对象)
2013-08-08 07:39 3210$.Callbacks是在版本1.7中 ... -
jQuery1.8的几个小变化
2013-05-18 07:57 1289一,.width() 和 .height()方法 1 ... -
读jQuery之十七(attribute/property/class)
2012-04-23 07:44 1703jQuery的属性模块提供了如下方法 attr/rem ... -
读jQuery之十六(事件代理)
2012-04-21 11:45 1901事件代理的实现原理很简单:利用浏览器中事件的冒泡(eve ... -
读jQuery之十五
2012-04-21 08:27 1307在之前的event-jq-0.2.js基础上继续提取jQuer ... -
读jQuery之十三(触发事件核心方法)
2012-04-20 07:40 1792触发事件,或称模拟用户动作。比如点击,我们可以用代码去模拟用户 ... -
读jQuery之十四
2012-04-20 22:12 1362最近看完了添加事件和删除事件的核心方法,忍不住想把jQu ... -
读jQuery之十八(元素位置)
2012-04-24 07:09 1777本篇所读源码版本为1.7.2 jQuer ... -
读jQuery之十二(删除事件核心方法)
2012-04-19 13:57 1594使用jQuery删除事件(或称解除事件绑定)有三个函数:unb ... -
读jQuery之十一(添加事件核心方法)
2012-04-19 07:07 2101上一篇提到jQuery中添加 ... -
读jQuery之十(事件模块概述)
2012-04-18 14:39 1876jQuery的事件模块是较 ... -
读jQuery之九(一些瑕疵)
2012-04-18 14:34 1355jQuery1.6.1 发布有一段时间了,发现一些冗余代 ... -
读jQuery之十八(元素位置)
2012-04-18 14:27 20本篇所读源码版本为1.7.2 jQuery中提供 ... -
读jq之八(原生事件对象的修复及扩充)
2010-12-04 09:13 2461由于各个浏览器中原生事件对象的 差异性 ,多数 JS库/框 ... -
读jq之七(判断点击了鼠标哪个键)
2010-12-03 18:31 2519jQuery丢弃了标准的 button 属性采用which ... -
jq中html()方法使用不当带来的陷阱
2010-05-29 10:54 5332.html方法当不传参数时用来获取元素的html内容,查看源码 ... -
jQuery1.4.2的一些瑕疵
2010-05-05 09:31 2312jQuery1.4.2 发布有一段时间了,发现一些多余的代 ...
相关推荐
技术运维-机房巡检表及巡检说明
第四次算法分析与设计整理
图像处理项目实战
该资源为jaxlib-0.4.18-cp311-cp311-macosx_11_0_arm64.whl,欢迎下载使用哦!
搭建说明. 运行环境 php5.6 mysql5.6 扩展sg11 前置条件: 前后端分离,需要准备两个域名,一个后台域名,一个前端域名 后端源码修改(cs2.ijiuwu.com批量替换改为你的后端域名)数据库修改(cs3.ijiuwu.com批量替换为你的前端域名)1、创建后台站点,上传后台源码并解压到根目录2、创建前端站点,上传前端源码并解压到根目录 3、创建数据库上传并导入数据库文件 4、修改数据库信息: 后台:app/database.php 前端:application/database.php 前端站点设置 伪静态thinkphp 运行目录public 关闭防跨站 访问后台域名/admin.php进入后台管理 admin 123456 系统-》系统设置-》附件设置-》Web服务器URL 改为你的前端域名 系统-》清前台缓存 改为你的前端域名 点击刷新缓存
【毕业答辩】爆款黑板风教育文艺毕业论文答辩通用模板.pptx
1、文件内容:systemd-devel-219-78.el7_9.9.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/systemd-devel-219-78.el7_9.9.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持:公众号禅静编程坊
win32汇编环境,对 WM-MOUSEMOVE 消息的理解
车牌识别项目
UE项目开发过程中的一些快捷脚本
lab1的words.txt文件
python、yolo、pytorch
人工智能、大语言模型相关学习资料
图像处理项目实战
python、yolo、pytorch
车牌识别项目
该资源为jaxlib-0.4.18-cp312-cp312-macosx_10_14_x86_64.whl,欢迎下载使用哦!
python、yolo、pytorch
Swift-IOS TODO_List应用开发
图像处理项目实战