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代码必备[js多浏览器兼容写法]
Oct 29 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
AngularJS快速入门
Apr 02 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
js实现简单音乐播放器
Jun 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将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
php实现对象克隆的方法
2015/06/20 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
JavaScript的public、private和privileged模式
2009/12/28 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
详解vue v-model
2020/08/31 Javascript
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
Python中逗号的三种作用实例分析
2015/06/08 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
Python 互换字典的键值对实例
2019/02/12 Python
Django实现单用户登录的方法示例
2019/03/28 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
python之生产者消费者模型实现详解
2019/07/27 Python
基于python 取余问题(%)详解
2020/06/03 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
英文简历自荐信范文
2013/12/11 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA