JavaScript面向对象OOP思想Class系统
JavaScript的Class模块,纯天然无依赖,只有2k大小,快速高效,让我们优雅的面向对象...
| |目录
- 1源码:jClass.js
- 2源码:jClass.min.js
- 3构建一个类
- 4访问类
- 5实例化对象
- 6Get/Set方法
- 7静态属性
- 8静态方法
- 9读取常量
- 10类的继承
JavaScript的Class模块,让我们优雅的面向对象...
纯天然无依赖,只有2k大小,快速高效。
这是夏老师编写的一个JS模块,用来快速开发面向对象的JS程序,
模块中实现了对Browser,AMD,CMD,node等多种环境的支持。
1源码:jClass.js
jClass.js 文件源码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
/** 快速高效的Class模块,提供了优雅的API @ Author : 夏增明老师 @ Date :2016年7月29日 @ QQ :1500506007 @ URL :http://baike.xsoftlab.net @ Version:1.0 */ ( function (global){ global = global||{}; var ClassCache = {}; /* 类加载器 */ var Class = function (className,opts){ /* 如果没有初始化参数,则是查找类对象 */ if (!opts){ return ClassCache[className]; } var static = {}; var temp = opts.ctor || function (){}; ClassCache[className] = temp; /* 处理继承关系 */ if ( typeof opts.extends === 'function' ){ var obj = new opts.extends; console.log(obj); temp.prototype = obj; } /* 设置类名 */ temp.className = className; temp.simpleName = className.substring(className.lastIndexOf( '.' ) + 1); temp.prototype.class = temp; /* 把类注册到全局命名空间中 */ var arr = className.split( "." ); var obj = global; for ( var n in arr){ if (n==arr.length-1){ obj[arr[n]] = temp; } else { obj[arr[n]] = obj[arr[n]]||{}; obj = obj[arr[n]]; } } /* 为属性生成GetSet方法 */ var GettersAndSetters = function (field){ var format = field.substr(0,1).toUpperCase()+field.substr(1,field.length-1); temp.prototype[ "get" +format] = function (){ return this [field]; } temp.prototype[ "set" +format] = function (value){ this [field] = value; } } /* 注册静态变量与静态方法 */ temp.prototype.static = static; temp.static = static; for ( var f2 in opts.static){ static[f2] = opts.static[f2]; } /* 注册实例变量与实例方法 */ for ( var f in opts){ var exclude = [ 'static' , 'ctor' , 'extends' , 'final' ]; if ( exclude.indexOf(f)!=-1 ) continue ; temp.prototype[f] = opts[f]; GettersAndSetters(f); } /* 注册常量,使用getFinal(name)获取 */ var FinalData = {}; for ( var f in opts.final){ FinalData[f] = opts.final[f]; } temp.prototype.getFinal= function (name){ return FinalData[name]; } return temp; } // 注册为CMD模块化对象 if ( typeof define === "function" && define.cmd) { define( function (require, exports, module){ module.exports = Class; }); } // 注册为AMD模块化对象 else if ( typeof define !== "undefined" ) { define( 'Class' , [], function () { return Class; }); } // 注册到全局命名空间,例如(浏览器中的window)或者(node中的exports) else if (global) { global[ 'Class' ] = Class; } }( typeof define !== "undefined" || typeof window === "undefined" ? exports : window)); |
2源码:jClass.min.js
jClass.min.js 文件源码
1
|
eval( function (p,a,c,k,e,d){e= function (c){ return (c<a? "" :e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))}; if (! '' .replace(/^/,String)){ while (c--)d[e(c)]=k[c]||e(c);k=[ function (e){ return d[e]}];e= function (){ return '\\w+' };c=1;}; while (c--) if (k[c])p=p.replace( new RegExp( '\\b' +e(c)+ '\\b' , 'g' ),k[c]); return p;}( '(4(c){c=c||{};3 o={};3 e=4(8,5){9(!5){i o[8]}3 6={};3 2=5.z||4(){};o[8]=2;9(h 5.u===\'4\'){3 7=K 5.u;J.L(7);2.a=7}2.8=8;2.N=8.M(8.I(\'.\')+1);2.a.G=2;3 b=8.F(".");3 7=c;k(3 n j b){9(n==b.w-1){7[b[n]]=2}p{7[b[n]]=7[b[n]]||{};7=7[b[n]]}}3 B=4(d){3 s=d.v(0,1).U()+d.v(1,d.w-1);2.a["O"+s]=4(){i x[d]}2.a["R"+s]=4(y){x[d]=y}}2.a.6=6;2.6=6;k(3 m j 5.6){6[m]=5.6[m]}k(3 f j 5){3 E=[\'6\',\'z\',\'u\',\'l\'];9(E.S(f)!=-1)Q;2.a[f]=5[f];B(f)}3 t={};k(3 f j 5.l){t[f]=5.l[f]}2.a.P=4(A){i t[A]}i 2}9(h g==="4"&&g.T){g(4(H,q,C){C.q=e})}p 9(h g!=="r"){g(\'e\',[],4(){i e})}p 9(c){c[\'e\']=e}}(h g!=="r"||h D==="r"?q:D));' ,57,57, '||temp|var|function|opts|static|obj|className|if|prototype|arr|global|field|Class||define|typeof|return|in|for|final|f2||ClassCache|else|exports|undefined|format|FinalData|extends|substr|length|this|value|ctor|name|GettersAndSetters|module|window|exclude|split|class|require|lastIndexOf|console|new|log|substring|simpleName|get|getFinal|continue|set|indexOf|cmd|toUpperCase' .split( '|' ),0,{})) |
3构建一个类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
/** 构建一个类,全名为:com.zhenzhigu.Person 定义一个Person变量用来接收类对象 */ var Person = Class( "com.zhenzhigu.Person" ,{ /* 静态属性与静态方法 */ static:{ a:10, b:20, hello: function (){ alert( "HelloWorld" ); } }, /* 构造方法,用变元模拟重载 */ ctor: function (){ //Person(name,age) if (arguments.length==2){ this .name = arguments[0]; this .age = arguments[1]; } //Person(name) if (arguments.length==1){ this .name = arguments[0]; } //Person() if (arguments.length==0){} }, /* 定义常量 */ final:{ PI : 3.14 }, /* 实例属性与实例方法 */ name: '无' , age: '-1' , say: function (){ alert( "中华人民共和国万岁" ); } }); |
4访问类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
/* 类在创建的时候会被注册到全局空间(window), 以类名中的'.'作为层级分隔,可以这样访问它们 */ console.log( com ); console.log( window.com ); console.log( com.zhenzhigu ); console.log( com.zhenzhigu.Person ); /* 两种获取类对象的方式 */ var classA = com.zhenzhigu.Person; var classB = Class( "com.zhenzhigu.Person" ); /* 获取类的全名 */ console.log( classA.className ); /* 获取类的简名 */ console.log( classA.simpleName ); |
5实例化对象
1
2
3
4
5
6
7
8
|
/* 创建对象 */ var p1 = new com.zhenzhigu.Person( "八戒" ,22); var p2 = new classA( "悟净" ); var p3 = new classB( "红孩儿" ,18); /* 输出到控制台 */ console.log( p1 ); console.log( p2 ); console.log( p3 ); |
6Get/Set方法
所有的实例属性都会自动添加Getters And Setters !
格式:get或set加上属性,首字母大写
1
2
3
4
5
6
7
8
|
/* 设置属性 */ p1.setName( "悟空" ); p1.setAge(19); /* 输出信息 */ console.log( p1 ); /* 获取属性 */ console.log( p1.getName() ); console.log( p1.getAge() ); |
7静态属性
类和实例都可以对静态属性进行直接的访问和修改。
1
2
3
4
5
6
7
8
9
|
//使用p2对象访问静态属性a console.log( p2.static.a ); console.log( classA.static.a ); //使用p2对象修改静态属性a p2.static.a = 66; //测试是否发生变化 console.log( com.zhenzhigu.Person.static.a ); console.log( p1.static.a ); console.log( classB.static.a ); |
8静态方法
类和实例都可以对静态方法进行直接的访问和修改。
1
2
3
4
5
6
7
8
9
10
|
//p1对象调用静态方法 p1.static.hello(); //p2对象重写静态方法 p2.static.hello = function (city){ alert(city+ "欢迎您!" ); } //直接用类调用静态方法 com.zhenzhigu.Person.static.hello( "北京" ); //p1对象再次调用静态方法 p1.static.hello( "上海" ); |
9读取常量
1
2
|
//使用obj.getFinal(name)读取常量 console.log( p1.getFinal( 'PI' ) ); |
10类的继承
1
2
3
4
5
6
7
|
/* 创建一个类,继承Person */ var Coder = Class( "com.zhenzhigu.Coder" ,{ extends:com.zhenzhigu.Person, speed : 12 }); var obj = new Coder(); console.log( obj ); |