[js高手之路] 设计模式系列课程 - jQuery的extend插件机制

这里在之前的文章[js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数基础上增加一个extend浅拷贝,可以为对象方便的扩展属性和方法,

jquery的插件扩展机制,大致就是这个原理.

复制代码
 1     var G = function ( selector, context ) {
 2             return new G.fn.init( selector, context );
 3         };
 4         G.fn = G.prototype = {
 5             constructor : G,
 6             init: function ( selector, context ) {
 7                 this.length = 0;
 8                 context = context || document;
 9                 if ( selector.indexOf( '#' ) == 0 ) {
10                     this[0] = document.getElementById( selector.substring( 1 ) );
11                     this.length = 1;
12                 }else {
13                     var aNode = context.getElementsByTagName( selector );
14                     for( var i = 0, len = aNode.length; i < len; i++ ){
15                         this[i] = aNode[i];
16                     }
17                     this.length = len;
18                 }
19                 this.selector = selector;
20                 this.context = context;
21                 return this;
22             },
23             length: 0,
24             size: function () {
25                 return this.length;
26             }
27         }
28         G.fn.init.prototype = G.fn;
29         G.extend = G.fn.extend = function(){
30             var i = 1,
31                 len = arguments.length,
32                 dst = arguments[0],
33                 j;
34             if ( i == len ) {
35                 dst = this;
36                 i--;
37             }
38             for( ; i < len; i++ ) {
39                 for( j in arguments[i] ) {
40                     dst[j] = arguments[i][j];
41                 }
42             }
43             return dst;
44         }
复制代码

测试用例:

复制代码
 1         window.onload = function(){
 2             var src = {
 3                 name : 'ghostwu',
 4                 age : 22,
 5                 sex : 'man',
 6                 skills : [ 'php', 'javascript', 'linux' ]
 7             }
 8             var dst = {};
 9             var obj = G.extend( dst, src );
10             console.log( obj );
11             obj.skills.push( 'python' );
12             console.log( src.skills );
13         }
复制代码

上例把对象src拷贝到dst, 在src对象中加了一个引用类型skills, 由于我的源码是浅拷贝,所以src.skills和obj.skills依然是相互影响

把方法扩展到原型对象上:

1        G.extend( G.fn, { version : '0.1' } );
2             console.log( G.prototype );
3             G.fn.extend( { getVersion : function(){ return this.version } } );
4             console.log( G.prototype );

把方法与属性扩展到函数本身(静态属性与方法)

1         G.extend( G, { 'user' : 'ghostwu' } );
2             G.extend( { "age" : '22' } );
3             for( var key in G ){
4                 if( G.hasOwnProperty( key ) ) {
5                     console.log( key );
6                 }
7             }

 

posted @   ghostwu  阅读(784)  评论(0编辑  收藏  举报
编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee
· 用 DeepSeek 给对象做个网站,她一定感动坏了
· .NET 8.0 + Linux 香橙派,实现高效的 IoT 数据采集与控制解决方案
· DeepSeek处理自有业务的案例:让AI给你写一份小众编辑器(EverEdit)的语法着色文件
Copyright ©2017 ghostwu
点击右上角即可分享
微信分享提示