JavaScript面向对象OOP思想Class系统

JavaScript的Class模块，纯天然无依赖，只有2k大小，快速高效，让我们优雅的面向对象...

| |目录

JavaScript的Class模块，让我们优雅的面向对象...

纯天然无依赖，只有2k大小，快速高效。

这是夏老师编写的一个JS模块，用来快速开发面向对象的JS程序，

模块中实现了对Browser，AMD,CMD,node等多种环境的支持。

1源码:jClass.js

jClass.js 文件源码

JavaScript | 复制

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 文件源码

JavaScript | 复制

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构建一个类

JavaScript | 复制

/**

构建一个类，全名为：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访问类

JavaScript | 复制

/*

类在创建的时候会被注册到全局空间（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实例化对象

JavaScript | 复制

/* 创建对象 */

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加上属性，首字母大写

JavaScript | 复制

/* 设置属性 */

p1.setName("悟空");

p1.setAge(19);

/* 输出信息 */

console.log( p1 );

/* 获取属性 */

console.log( p1.getName() );

console.log( p1.getAge() );

7静态属性

类和实例都可以对静态属性进行直接的访问和修改。

JavaScript | 复制

//使用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静态方法

类和实例都可以对静态方法进行直接的访问和修改。

JavaScript | 复制

//p1对象调用静态方法

p1.static.hello();

//p2对象重写静态方法

p2.static.hello = function(city){

alert(city+"欢迎您!");

}

//直接用类调用静态方法

com.zhenzhigu.Person.static.hello("北京");

//p1对象再次调用静态方法

p1.static.hello("上海");

9读取常量

JavaScript | 复制

1 2	`//使用obj.getFinal(name)读取常量` `console.log( p1.getFinal('PI') );`

10类的继承

JavaScript | 复制

/* 创建一个类，继承Person */

var Coder = Class("com.zhenzhigu.Coder",{

extends:com.zhenzhigu.Person,

speed : 12

});

var obj = new Coder();

console.log( obj );