Mootools调研(3)

3 功能

3.1 OOP继承

类的实现和扩展

MooTools框架的core中定义了class方法：

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
 
/*
---
name: Class
description: Contains the Class Function for easily creating, extending, and implementing reusable Classes.
license: MIT-style license.
requires: [Array, String, Function, Number]
provides: Class
...
*/
(function(){
var Class = this.Class = new Type('Class', function(params){
 if (instanceOf(params, Function)) params = {initialize: params};
 var newClass = function(){
 reset(this);
 if (newClass.$prototyping) return this;
 this.$caller = null;
 var value = (this.initialize) ? this.initialize.apply(this, arguments) : this;
 this.$caller = this.caller = null;
 return value;
 }.extend(this).implement(params);
 newClass.$constructor = Class;
 newClass.prototype.$constructor = newClass;
 newClass.prototype.parent = parent;
 return newClass;
});
var parent = function(){
 if (!this.$caller) throw new Error('The method "parent" cannot be called.');
 var name = this.$caller.$name,
 parent = this.$caller.$owner.parent,
 previous = (parent) ? parent.prototype[name] : null;
 if (!previous) throw new Error('The method "' + name + '" has no parent.');
 return previous.apply(this, arguments);
};
var reset = function(object){
 for (var key in object){
 var value = object[key];
 switch (typeOf(value)){
 case 'object':
 var F = function(){};
 F.prototype = value;
 object[key] = reset(new F);
 break;
 case 'array': object[key] = value.clone(); break;
 }
 }
 return object;
};
var wrap = function(self, key, method){
 if (method.$origin) method = method.$origin;
 var wrapper = function(){
 if (method.$protected && this.$caller == null) throw new Error('The method "' + key + '" cannot be called.');
 var caller = this.caller, current = this.$caller;
 this.caller = current; this.$caller = wrapper;
 var result = method.apply(this, arguments);
 this.$caller = current; this.caller = caller;
 return result;
 }.extend({$owner: self, $origin: method, $name: key});
 return wrapper;
};
var implement = function(key, value, retain){
 if (Class.Mutators.hasOwnProperty(key)){
 value = Class.Mutators[key].call(this, value);
 if (value == null) return this;
 }
 if (typeOf(value) == 'function'){
 if (value.$hidden) return this;
 this.prototype[key] = (retain) ? value : wrap(this, key, value);
 } else {
 Object.merge(this.prototype, key, value);
 }
 return this;
};
var getInstance = function(klass){
 klass.$prototyping = true;
 var proto = new klass;
 delete klass.$prototyping;
 return proto;
};
Class.implement('implement', implement.overloadSetter());
Class.Mutators = {
 Extends: function(parent){
 this.parent = parent;
 this.prototype = getInstance(parent);
 },
 Implements: function(items){
 Array.from(items).each(function(item){
 var instance = new item;
 for (var key in instance) implement.call(this, key, instance[key], true);
 }, this);
 }
};
})();

从中可以看出，参数可以传两种。第一种也是标准方式传递一个对象字面量，这个对象字面量可以包括你为类添加的所有属性、方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var Person = new Class({ 
    // Methods 
    initialize: function (name, age) { 
        this.name = name; 
        this.age = age; 
    }, 
 
    log: function () { 
        console.log(this.name + ',' + this.age); 
    } 
}); 
 
var mark = new Person('mark', 24); 
mark.log(); // returns 'mark,24'

第二种是传递一个普通函数，mootools会自动把这个函数包装成只含一个initialize键值的对象字面量，然后你可以使用implement方法对类进行扩展，例如：

1
2
3
4
5
6
7
8
9
10
11
12
 
var Person = new Class(function (name, age) { 
    this.name = name; 
    this.age = age; 
}); 
Person.implement('log', function () { 
    console.log(this.name + ',' + this.age); 
}); 
var mark = new Person('mark', 24); 
mark.log(); // returns 'mark,24'

core中定义了Implement方法。这个方法用来为类添加新的方法和属性。需要注意的是，如果新添加的方法或属性与类中旧有的方法或属性同名，则会覆盖类中旧有的方法、属性。调用Implement方法有两种方式，第一种方式传递两个参数，第一个参数为String类型，存储要添加的方法或属性的名称，第二个参数为方法所对应的函数或属性所对应的值，这种方式每次只能为类添加一个方法或属性，第二种方式传递一个对象字面量参数，把要添加的方法属性包含在这个对象中，一次添加多个方法、属性，避免重复调用implement。方法调用示例：

1
2
3
4
5
6
 
Person.implement('log', function () { 
    console.log(this.name + ',' + this.age); 
}); 
Person.implement('city', '深圳');

1
2
3
4
5
6
7
 
Person.implement({ 
    'city': '深圳', 
    'log': function () { 
        console.log(this.name + ',' + this.age); 
    } 
});

MooTools关于Class的官方文档中只暴露了implement一个方法，其实对类本身进行操作的还有一个比较重要的方法extend，这个方法之所以没有出现在Class的文档中。这是因为它不是作为Class的特殊方法，而实际上是Type的方法。它的作用是为类创建静态成员，静态成员关联的是类本身，换句话说，静态成员是在类的层次上操作，而不是在实例的层次上操作，每个静态成员都只有一份。调用extend方法的方式同Implement，也是两种方式。
简单一点讲，implement为实例创建方法和属性，extend为类本身创建方法和变量，请看下面的例子：

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
 
var Person = new Class(function (name, age) { 
    this.name = name; 
    this.age = age; 
}); 
Person.implement({ 
    instanceMethod: function () { 
        console.log('From an instance!'); 
    } 
}); 
Person.extend({ 
    classMethod: function () { 
        console.log('From the class itself!'); 
    } 
}); 
 
var mark = new Person('mark', 24); 
 
console.log(typeOf(mark.instanceMethod)); // returns 'function' 
mark.instanceMethod(); // returns 'From an instance!' 
console.log(typeOf(mark.classMethod)); // returns 'null'，说明实例是不能调用静态方法的 
 
console.log(typeOf(Person.classMethod)); // returns 'function' 
Person.classMethod(); // returns 'From the class itself!' 
console.log(typeOf(Person.instanceMethod)); // returns 'null'，同样类也不能直接调用为实例而创建的方法 
 
Person.prototype.instanceMethod(); // 类只能通过这种方式调用原型上的方法

继承

MooTools实现类的继承有两种模式：原型式继承和多亲继承，原型式继承由内建的Extends Mutator来实现，多亲继承由Implements Mutator或implement方法来实现。
这里着重讲一下多亲继承。在JavaScript里，因为一个对象只能拥有一个原型对象，所以不允许子类继承多个超类，不过我们可以利用多个掺元类(minix class)或掺元对象对一个类进行扩充，这样类的实例就可以拥有mixin类(对象)中的方法、属性，所以这实际上实现了多继承的效果。通常mixin类(对象)包含一些通用的方法，大家可以看看MooTools里Class.Extras模块中三个mixin类的定义(Chain、Events、Options)：
测试用例如下：首先我们先建立一个基类：

1
2
3
4
5
6
 
var Animal = new Class({ 
    initialize: function (age) { 
        this.age = age; 
    } 
});

使用Extends Mutator派生一个子类：

1
2
3
4
5
6
7
8
9
10
11
12
 
var Cat = new Class({ 
    Extends: Animal, 
    initialize: function (name, age) { 
        this.parent(age); // calls initalize method of Animal class 
        this.name = name; 
    } 
}); 
 
var cat = new Cat('Micia', 20); 
console.log(cat.name); // 'Micia' 
console.log(cat.age); // 20

利用Implements Mutator扩充一个类，首先建立一个mixin类：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
var Mixin = new Class({ 
    getName: function () { 
        return this.name; 
    }, 
    setName: function (value) { 
        this.name = value 
    } 
}); 
 
var Cat = new Class({ 
    Extends: Animal, 
    Implements: Mixin, 
    initialize: function (name, age) { 
        this.parent(age); // calls initalize method of Animal class 
        this.name = name; 
    } 
}); 
 
var cat = new Cat('Micia', 20); 
console.log(cat.name); // 'Micia' 
console.log(cat.age); // 20 
cat.setName('Dog'); 
console.log(cat.getName()); // 'Dog'

还可以使用implement方法扩充一个类，示例如下：

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
 
// mixin对象存储一些通用方法，可以被不同的类implement 
var objMixin = (function () { 
    var counter = 0; 
 
    return { 
        init: function () { 
            counter += 1; 
        }, 
        getCounter: function () { 
            return counter; 
        }, 
        getAge: function () { 
            return this.age; 
        }, 
        setAge: function (value) { 
            this.age = value; 
        } 
    }; 
})(); 
 
var Cat = new Class({ 
    Extends: Animal, 
    Implements: Mixin, 
    initialize: function (name, age) { 
        this.parent(age); // calls initalize method of Animal class 
        this.name = name; 
    } 
}); 
Cat.implement(objMixin); 
 
var Dog = new Class({ 
    Extends: Animal, 
    Implements: Mixin, 
    initialize: function (name, age) { 
        this.parent(age); // calls initalize method of Animal class 
        this.name = name; 
    } 
}); 
Dog.implement(objMixin); 
 
var cat = new Cat('Micia', 20); 
console.log(cat.name); // 'Micia' 
console.log(cat.age); // 20 
cat.setName('汤姆'); 
console.log(cat.getName()); // '汤姆' 
cat.setAge(12); 
console.log(cat.getAge()); // 12 
// 对mixin对象的私有属性进行操作 
cat.init(); 
console.log(cat.getCounter()); // 1 
 
var dog = new Dog('小狗', 6); 
console.log(dog.name); // '小狗' 
console.log(dog.age); // 6 
dog.setName('布鲁托'); 
console.log(dog.getName()); // '布鲁托' 
dog.setAge(8); 
console.log(cat.getAge()); // 8 
// 对mixin对象的私有属性进行操作 
dog.init(); 
console.log(dog.getCounter()); // 2 
console.log(cat.getCounter()); /

赏

谢谢打赏

支付宝

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    2、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: true
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

前端开发攻城师一枚<br>爱前端，<br>爱生活，<br>爱好和平和一切美好的事(食)物~~<br><br>很高兴<br><br>能和大家一起分享<br>谢谢~~