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 20 Javascript
javascript定时保存表单数据的代码
Mar 17 Javascript
js日期相关函数总结分享
Oct 15 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
详解vue-resource promise兼容性问题
Jun 20 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
Vue props中Object和Array设置默认值操作
Jul 30 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根据图片色界在不同位置加水印的方法
2015/07/01 PHP
javascript 面向对象 function类
2010/05/13 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
vue实现记事本功能
2019/06/26 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python代码调试的几种方法总结
2015/04/15 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
对python sklearn one-hot编码详解
2018/07/10 Python
python 读取文件并替换字段的实例
2018/07/12 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
商务英语专业自荐信
2013/10/14 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
2015年教研工作总结
2015/05/23 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书