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 相关文章推荐
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
详解jQuery选择器
Dec 21 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 Javascript
vue实现移动端返回顶部
Oct 12 Javascript
解决vue scoped html样式无效的问题
Oct 24 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
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
php使用qr生成二维码的示例分享
2014/01/20 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
关于图片验证码设计的思考
2007/01/29 Javascript
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
简单的python后台管理程序
2017/04/13 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
Python地图绘制实操详解
2019/03/04 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
普天C++笔试题
2016/03/20 面试题
解除劳动合同证明书模板
2014/11/20 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
PHP解决高并发问题
2021/04/01 PHP
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL
Python if else条件语句形式详解
2022/03/24 Python