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中的$(document).ready()与window.onload的区别
Nov 18 Javascript
一个轻量级的javascript库 pj介绍
Dec 19 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
jQuery插件Tmpl的简单使用方法
Apr 27 Javascript
jquery实现倒计时效果
Dec 14 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
vuex实现购物车功能
Jun 28 Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 Javascript
JS实现鼠标移动拖尾
Dec 27 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/28 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
javascript,jquery闭包概念分析
2010/06/19 Javascript
jquery.validate使用攻略 第三部
2010/07/01 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
jQuery防止重复绑定事件的解决方法
2016/05/14 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
JS删除对象中某一属性案例详解
2020/09/08 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
Python单链表的简单实现方法
2014/09/23 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
Django 限制访问频率的思路详解
2019/12/24 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
Python类继承和多态原理解析
2020/02/05 Python
python实现简单坦克大战
2020/03/27 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
智能钱包:Ekster
2019/11/21 全球购物
电子商务专业自荐信
2014/06/02 职场文书
公司经营目标责任书
2015/01/29 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
Python中文纠错的简单实现
2021/07/07 Python
JavaScript中isPrototypeOf函数
2021/11/07 Javascript