JavaScript面向对象OOP思想Class系统

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

 

| |目录

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

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

 

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

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

1源码:jClass.js

jClass.js 文件源码

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

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

JavaScript | 复制
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访问类

JavaScript | 复制
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实例化对象

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

JavaScript | 复制
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静态属性

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

JavaScript | 复制
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静态方法

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

JavaScript | 复制
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读取常量

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

 

10类的继承

JavaScript | 复制
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 );

posted on 2016-08-17 15:37  Java初级码农  阅读(475)  评论(0)    收藏  举报

导航