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 相关文章推荐
学习ExtJS(二) Button常用方法
Oct 07 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 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 无限分类的树类代码
2009/12/03 PHP
php 伪造本地文件包含漏洞的代码
2011/11/03 PHP
php实现word转html的方法
2016/01/22 PHP
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
mint-ui在vue中的使用示例
2018/04/05 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
Python中time模块和datetime模块的用法示例
2016/02/28 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
四年级科学教学反思
2014/02/10 职场文书
学习雷锋倡议书
2014/04/15 职场文书
周一问候语大全
2015/11/10 职场文书
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL