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 相关文章推荐
基于jquery的cookie的用法
Jan 10 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 Javascript
jQuery 无限级菜单的简单实例
Feb 21 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
javascript实现回到顶部特效
May 06 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
微信小程序时间戳转日期的详解
Apr 30 Javascript
jQuery实现高级检索功能
May 28 jQuery
react+redux仿微信聊天界面
Jun 21 Javascript
基于form-data请求格式详解
Oct 29 Javascript
vue操作dom元素的3种方法示例
Sep 20 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 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 htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
Windows下安装Memcached的步骤说明
2010/04/25 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
javascript 写类方式之十
2009/07/05 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
python网页请求urllib2模块简单封装代码
2014/02/07 Python
python操作gmail实例
2015/01/14 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
Python 线程池用法简单示例
2019/10/02 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
flask的orm框架SQLAlchemy查询实现解析
2019/12/12 Python
python文件读取失败怎么处理
2020/06/23 Python
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
介绍一下Java中的static关键字
2012/05/12 面试题
考博专家推荐信
2014/05/10 职场文书
法学专业求职信
2014/07/15 职场文书
党校学习心得体会范文
2014/09/09 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers