[js高手之路] 设计模式系列课程 - jQuery的extend插件机制
这里在之前的文章[js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数基础上增加一个extend浅拷贝,可以为对象方便的扩展属性和方法,
jquery的插件扩展机制,大致就是这个原理.
var G = function ( selector, context ) {
return new G.fn.init( selector, context );
};
G.fn = G.prototype = {
constructor : G,
init: function ( selector, context ) {
this.length = 0;
context = context || document;
if ( selector.indexOf( '#' ) == 0 ) {
this[0] = document.getElementById( selector.substring( 1 ) );
this.length = 1;
}else {
var aNode = context.getElementsByTagName( selector );
for( var i = 0, len = aNode.length; i < len; i++ ){
this[i] = aNode[i];
}
this.length = len;
}
this.selector = selector;
this.context = context;
return this;
},
length: 0,
size: function () {
return this.length;
}
}
G.fn.init.prototype = G.fn;
G.extend = G.fn.extend = function(){
var i = 1,
len = arguments.length,
dst = arguments[0],
j;
if ( i == len ) {
dst = this;
i--;
}
for( ; i < len; i++ ) {
for( j in arguments[i] ) {
dst[j] = arguments[i][j];
}
}
return dst;
}
测试用例:
window.onload = function(){
var src = {
name : 'ghostwu',
age : 22,
sex : 'man',
skills : [ 'php', 'javascript', 'linux' ]
}
var dst = {};
var obj = G.extend( dst, src );
console.log( obj );
obj.skills.push( 'python' );
console.log( src.skills );
}
上例把对象src拷贝到dst, 在src对象中加了一个引用类型skills, 由于我的源码是浅拷贝,所以src.skills和obj.skills依然是相互影响
把方法扩展到原型对象上:
G.extend( G.fn, { version : '0.1' } );
console.log( G.prototype );
G.fn.extend( { getVersion : function(){ return this.version } } );
console.log( G.prototype );
把方法与属性扩展到函数本身(静态属性与方法)
G.extend( G, { 'user' : 'ghostwu' } );
G.extend( { "age" : '22' } );
for( var key in G ){
if( G.hasOwnProperty( key ) ) {
console.log( key );
}
}
[js高手之路] 设计模式系列课程 - jQuery的extend插件机制的更多相关文章
- [js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数
一.我们从一个简单的构造函数+原型程序开始 var G = function(){}; G.prototype = { length : 5, size : function(){ return th ...
- [js高手之路]设计模式系列课程-发布者,订阅者重构购物车
发布者订阅者模式,是一种很常见的模式,比如: 一.买卖房子 生活中的买房,卖房,中介就构成了一个发布订阅者模式,买房的人,一般需要的是房源,价格,使用面积等信息,他充当了订阅者的角色 中介拿到卖主的房 ...
- [js高手之路]设计模式系列课程-组合模式+寄生组合继承实战新闻列表
所谓组合模式,就是把一堆结构分解出来,组成在一起,现实中很多这样的例子,如: 1.肯德基套餐就是一种组合模式, 比如鸡腿堡套餐,一般是是由一个鸡腿堡,一包薯条,一杯可乐等组成的 2.组装的台式机同理, ...
- [js高手之路]设计模式系列课程-单例模式实现模态框
什么是单例呢? 单,就是一个的意思.例:就是实例化出来的对象,那合在一起就是保证一个构造函数只能new出一个实例,为什么要学习单例模式呢?或者说单例模式有哪些常见的应用场景.它的使用还是很广泛,比如: ...
- [js高手之路]设计模式系列课程-设计一个模块化扩展功能(define)和使用(use)库
模块化的诞生标志着javascript开发进入工业时代,近几年随着es6, require js( sea js ), node js崛起,特别是es6和node js自带模块加载功能,给大型程序开发 ...
- [js高手之路] 设计模式系列课程 - DOM迭代器(2)
如果你对jquery比较熟悉的话,应该用过 eq, first, last, get, prev, next, siblings等过滤器和方法.本文,我们就用迭代设计模式来封装实现,类似的功能 < ...
- [js高手之路]设计模式系列课程-委托模式实战微博发布功能
在实际开发中,经常需要为Dom元素绑定事件,如果页面上有4个li元素,点击对应的li,弹出对应的li内容,怎么做呢?是不是很简单? 大多数人的做法都是:获取元素,绑定事件 <ul> < ...
- [js高手之路] 设计模式系列课程 - 迭代器(1)
迭代器是指通过一种形式依次遍历数组,对象,或者类数组结构中的每个元素. 常见的有jquery中的each方法, ES5自带的forEach方法. 下面我们就来自定义一个类似jquery或者ES5的迭代 ...
- [js高手之路] es6系列教程 - 迭代器与生成器详解
什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的 ...
随机推荐
- java中null的类型匹配
null作为一个特殊的参数匹配为String对象
- 团队作业4——第一次项目冲刺(Alpha版本) Day4
借的今天有课,我们团队在课间时间开了简短的会议 2.Leangoo任务分解图: 3.会议结果,和任务分配 队员 今日进展 明日安排 林燕 试编写签到.请假功能的代码雏形 签到.请假功能成熟 王李焕 和 ...
- 201521123114 《Java程序设计》第8周学习总结
1. 本章学习总结 2. 书面作业 Q1. List中指定元素的删除(题目4-1) 1.1 实验总结 使用iterator迭代器的remove()函数来移除元素,能够从最后一个元素来移除,可以避免从第 ...
- 201521123011《Java程序设计》第10周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出 ...
- Junit4学习(五)Junit4测试套件
一,背景 1,随着开发规模的深入和扩大,项目或越来越大,相应的我们的测试类也会越来越多:那么就带来一个问题,假如测试类很多,就需要多次运行,造成测试的成本增加:此时就可以使用junit批量运行测试类的 ...
- Hyperledger Fabric 1.0 从零开始(三)——环境构建(内网/准离线)
有公网环境的服务器可以直接看 Hyperledger Fabric 1.0 从零开始(二)--环境构建(公网) ,本篇内容与上篇相似,只不过环境搭建需要在内网下,也就是网络被限制的情况下. 1:环境构 ...
- 王者荣耀是怎样炼成的(二)《王者荣耀》unity安装及使用的小白零基础入门
转载请注明出处:http://www.cnblogs.com/yuxiuyan/p/7535345.html 工欲善其事,必先利其器. 上回书说到,开发游戏用到unity和C#.本篇博客将从零开始做一 ...
- Spring - bean的lazy-init属性(懒加载)
默认情况下,容器初始化的时候便会把bean实例化,通常这样做可以让一些配置或者bean实例化的异常在容器启动的时候就发现,而不是在N久之后.但有时候,我们希望某个可能不会用到但又不是100%不用的be ...
- The Moving Points hdu4717
The Moving Points Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- The Twin Towers zoj2059 DP
The Twin Towers Time Limit: 2 Seconds Memory Limit: 65536 KB Twin towers we see you standing ta ...