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实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
iframe实用操作锦集
Apr 22 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 Javascript
javascript全局自定义鼠标右键菜单
Dec 08 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
提问的智慧
2006/10/09 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
php发送与接收流文件的方法
2015/02/11 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
py中的目录与文件判别代码
2008/07/16 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
Python Pillow Image Invert
2019/01/22 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
python网络应用开发知识点浅析
2019/05/28 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
Python代码注释规范代码实例解析
2020/08/14 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
Linux文件系统类型
2012/02/15 面试题
大雁塔英文导游词
2015/02/10 职场文书
感恩教育观后感
2015/06/17 职场文书