jquery 插件开发 extjs中的extend用法小结


Posted in Javascript onJanuary 04, 2013

在jquery中,extend其实在做插件时还是用的比较多的,今天同时小结jquery和ext js中
的extend用法,先来看jquery中的。
1) extend(dest,src1,src2,src3...);

var start = { 
id: 123, 
count: 41, 
desc: 'this is information', 
title: 'Base Object', 
tag: 'uncategorized', 
values: [1,1,2,3,5,8,13]}; 
var more = { name: 'Los Techies', tag: 'javascript'}; 
var extra = { count: 42, title: null, desc: undefined, values: [1,3,6,10]}; 
var extended = $.extend(start, more, extra); 
console.log(JSON.stringify(extended));

输出结果为:
{ "id": 123,
"count": 42,
"desc": "this is information",
"title": null,
"tag": "javascript",
"values": [1, 3, 6, 10],
"name": "Los Techies"}
可以看到,其实是
extend(dest,src1,src2,src3...);
,将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:
var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。
比如:
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
那么合并后的结果
result={name:"Jerry",age:21,sex:"Boy"}
也就是说后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。
同时要注意的是,在第一个例子中, "desc": undefined并不会出现在结果中,
合拼的时候,依然保留了desc的原来的值。但title:null的话,会出现在extend的结果
中。
2) 其他jquery extend的用法
1、$.extend(src)

该方法就是将src合并到jquery的全局对象中去,如:
$.extend({ hello:function(){alert('hello');} });

就是将hello方法合并到jquery的全局对象中。

2、$.fn.extend(src)

该方法将src合并到jquery的实例对象中去,如:
$.fn.extend({ hello:function(){alert('hello');} });

就是将hello方法合并到jquery的实例对象中。

下面例举几个常用的扩展实例:
$.extend({net:{}});

这是在jquery全局对象中扩展一个net命名空间。
$.extend($.net,{ hello:function(){alert('hello');} })

这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。
3 深度复制
// 以前的 .extend()
jQuery.extend( false,
{ name: “John”, location: { city: “Boston” } },
{ last: “Resig”, location: { state: “MA” } }
);
// 结果:
// => { name: “John”, last: “Resig”, location: { state: “MA” } }
jQuery.extend( true,
{ name: “John”, location: { city: “Boston” } },
{ last: “Resig”, location: { state: “MA” } }
);
// 结果
// => { name: “John”, last: “Resig”,
// location: { city: “Boston”, state: “MA” } }
3) 如果是ext js的话,看下有什么不同

var start = { 
id: 123, 
count: 41, 
desc: 'this is information', 
title: 'Base Object', 
tag: 'uncategorized', 
values: [1,1,2,3,5,8,13]}; 
var more = { name: 'Los Techies', tag: 'javascript'}; 
var extra = { count: 42, title: null, desc: undefined, 
values: [1,3,6,10]}; 
var extended = Ext.apply(start, more, extra);console.log(JSON.stringify(extended));

输出
{ "id": 123, "count": 42, "title": null, "tag": "javascript", "values": [1,3,6,10], "name": "Los Techies"}
可以看到,extjs中使用的是apply,而desc居然在合拼的结果中丢掉了,因为ext js认为undefind的东西不应该出现在合拼的结果中了,认为是擦除掉原来的值了,这个要注意
Javascript 相关文章推荐
用js实现手把手教你月入万刀(转贴)
Nov 07 Javascript
Javascript 圆角div的实现代码
Oct 15 Javascript
收集的一些Array及String原型对象的扩展实现代码
Dec 05 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
jQuery实现的自动加载页面功能示例
Sep 04 Javascript
JavaScript SHA512加密算法详细代码
Oct 06 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 #Javascript
表单的焦点顺序tabindex和对应enter键提交
Jan 04 #Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 #Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 #Javascript
html a标签-超链接中confirm方法使用介绍
Jan 04 #Javascript
密码强度检测效果实现原理与代码
Jan 04 #Javascript
禁止你的左键复制实用技巧
Jan 04 #Javascript
You might like
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
php 带逗号千位符数字的处理方法
2012/01/10 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
Js 随机数产生6位数字
2010/05/13 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
javascript实现根据3原色制作颜色选择器的方法
2015/07/17 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
Python单元测试框架unittest简明使用实例
2015/04/13 Python
举例详解Python中yield生成器的用法
2015/08/05 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
python re模块findall()函数实例解析
2018/01/19 Python
python发送邮件脚本
2018/05/22 Python
python多进程读图提取特征存npy
2019/05/21 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
房地产还款计划书
2014/01/10 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
数学系毕业生求职信
2014/05/29 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
节约用电倡议书
2015/04/28 职场文书
音乐课外活动总结
2015/05/09 职场文书