//lang.js面向对象扩展库使用指南
//http://www.cnblogs.com/xiao-f/archive/2011/12/19/lang.html
//1.基本的包和类的定义:
//首先通过全局函数Package定义一个包,下面可通过链式调用向包中定义类、对象或函数。
Package('com.site').
Class('Base',{
Base: function(tagName){
this.element = document.createElement(tagName);
},
add: function(child){
this.element.appendChild(child);
},
show: function(){
alert('I am Base!');
}
}).
Class('Control', {
Control: function(){
//do soming
}
});
alert(com.site);
alert(com.site.Base);
alert(com.site.Control);
//2.普通对象定义
//一个不需初始化的类,可直接定义成普通对象
Package('com.site.util').
Object({
ModelA: {
say: function(){
alert('ModelA: Hello!');
}
},
ModelB: {
print: function(){
alert('ModelB: ' + this.Class.Type.name);
}
}
});
com.site.util.ModelA.say();
//3.类的继承
//像很多面向对象语言一样,这里约定一个类只能拥有一个父类。但是可以通过mixin混合多个普通对象。
//在子类的构造函数中可以通过this.base访问父类的构造函数。
//如子类定义了与父类相同函数,父类函数将被重写,这里同样可以通过this.base调用父类被重写的函数。
Package('com.site').
Class('Panel', {extend: com.site.Base, mixin:[com.site.util.ModelA, com.site.util.ModelB]}, {
Panel: function(tagName){
//这里使用this.base调用父类构造函数
this.base(tagName);
},
show: function(){
alert('I am Panel!');
this.base();
}
});
var panel = new com.site.Panel("div");
panel.say();
panel.print();
alert(panel.element.tagName);
//4.静态成员的定义
/*
程序中可以将类的主体以函数的形式定义,将私有成员定义在函数内部,将公共成员以返回值的形式暴露出来。这种设计模式在很多流行框架中都可以看到,虽然隐藏的成员只能是静态的,不过这也足以满足大部分的需求了。
公有的静态成员可以通过Static标签定义,Static中可包含一个静态构造函数,该函数只会在类第一次创建的时候执行一次。
在运行期间类的内部可以通过this.Class.xxx的形式访问自身的静态成员,(this.Class就是所属类的引用)
*/
Package('com.site').
Class('Button', {extend: com.site.Panel}, function(){
//在这里定义私有静态成员
var tagName = 'BUTTON';
var onclick = function(){
alert('I am a Button!');
}
return {
//这里定义共有静态成员
Static: {
count: 1,
//静态构造函数
Button: function(){
this.createTime = new Date();
}
},
Button: function(text){
this.base(tagName);
this.element.innerHTML = text;
this.element.onclick = onclick;
//调用静态变量
this.Class.count++;
}
};
});
var button = new com.site.Button("Button1");
document.body.appendChild(button.element);
alert(com.site.Button.count);
//5.重载函数的定义
/*
lang.js中对函数重载提供了较完善的支持,在定义函数时可在函数名后面指定参数签名,调用函数时程序根据传入的参数自动匹配转发。
其中支持的类型包括:var,string,number,boolean,array,date,object,function,element和自定义的类(var表示任意类型,element表示DOM元素。)
为了保证灵活性,重载支持通配符功能,遵循正则表达式的规则,可以通过标记“+ * ? {?,?}”来处理不确定参数个数的情况。
重载函数在类的继承过程中是有效的,签名不同的函数不会被重写,被重写的父类重载函数同样支持通过this.base调用。
以下代码为重载在类中应用的例子:
*/
Package('com.site').
Class('Student',{
Static: {
//静态函数重载
'create()': function(){
//这里的this就是类本身,所以可以直接new
return new this('静态', 1);
},
'create(string, number)': function(name, age){
return new this(name, age);
},
'search()': function(){
alert('search(*)');
},
'search(string)': function(name){
alert('search('+name+')');
}
},
//构造函数重载
'Student()': function(){
//利用this.self调用自身构造函数"Student(string, number)"
this.self('未知', 0);
},
'Student(string, number)': function(name, age){
this.name = name;
this.age = age;
},
//普通成员函数重载
'print()': function(){
this.print(this.name ,this.age);
},
'print(string, number)': function(name, age){
alert('name:' + name + ',age:' + age);
},
//支持自定义类的类型
'print(lib.ui.Panel)': function(panel){
this.print(panel, true);
},
'print(lib.ui.Panel, boolean)': function(panel, append){
if(append){
panel.element.innerHTML += this.name;
}else{
panel.element.innerHTML = this.name;
}
}
}).
//继承中对重载的支持
Class('MaleStudent',{extend: com.site.Student},{
Static: {
//重写父类静态函数
'search(string)': function(name){
alert('MaleStudent: search('+name+')');
},
'search(string, number)': function(name, age){
alert('MaleStudent: search('+name+','+age+')');
}
},
'MaleStudent': function(){
//调用父类的构造函数"Student(string, number)"
this.base('未知男同学', 0);
},
'MaleStudent(string, number)': function(name, age){
//调用父类的构造函数"Student(string, number)"
this.base(name, age);
},
//重写了父类的重载函数
'print()': function(){
alert('MaleStudent: name:' + this.name + ',age:' + this.age);
},
'print(string, number)': function(name, age){
//通过this.base调用父类函数"print(string, number)"
this.base('<'+name+'>', '<' + age + '>');
},
//模糊匹配,这个函数可接受一个或多个字符串和零个或多个数字
'print(string+, number*)': function(){
var msg = [];
for(var i=0; i<arguments.length; i++){
msg.push(arguments[i]);
}
alert('print(string+, number*):' + msg.join('+'));
}
});
//创建对象时会自动判断调用的构造函数
var studentA = new com.site.Student();
studentA.print();
var studentB = new com.site.MaleStudent('王小虎', 19);
studentB.print();
studentB.print('小虎', 19);
//这里调用了模糊匹配的重载函数
studentB.print('a','b','c');
studentB.print('x','y','z', 1, 2 ,3);
var studentC = new com.site.MaleStudent();
studentC.print();
//调用静态重载函数
var student = com.site.Student.create();
student.print();
com.site.Student.search();
com.site.Student.search('某同学');
//共有的静态函数会继承到子类,所以MaleStudent也可以create
var maleStudent = com.site.MaleStudent.create('小红', 18);
maleStudent.print();
com.site.MaleStudent.search('小明');
com.site.MaleStudent.search('小明',20);
//6.匿名定义
//有些时候,我们不希望显示的指定一个类或函数的名字,只希望把它保存到变量里面,那么可以通过匿名的方式进行定义。
//1)使用lang.Class创建匿名类
var clazz = lang.Class({
//匿名类的名字统一为Anonymous,所以构造函数的名字也要是Anonymous
Anonymous: function(name){
this.name = name;
},
show: function(){
alert(this.name);
}
});
alert(clazz);
new clazz('匿名类').show();
//2)使用lang.Function创建匿名重载函数
var fn = lang.Function({
'(default)': function(){
var a = [].slice.call(arguments, 0);
alert(a);
},
'(string)': function(a){
alert('(string): ' + a);
},
'(string, number)': function(a, b){
alert('(string, number): ' + a + ':' + b);
},
'(number)': function(a){
alert('(number): ' + a);
}
});
alert(fn);
fn('message');
fn('message', 1);
fn(1);
fn(1,2,3,4,5);
//3)使用lang.Object创建支持重载函数的普通对象
var obj = lang.Object({
name: 'jim',
'write()': function(){
this.write(this.name);
},
'write(string)': function(name){
alert(name);
}
});
obj.write();
obj.write('joe');
//7.综合例子
Package("com.site").
Class('ClassA', {
print: function(){
alert(this.toString());
}
}).
Class('ClassB', {
print: function(){
alert(this.toString());
}
}).
Object({
fn1: function(){
alert(1);
},
fn2: function(){
alert(2);
},
'debug(string)': function(msg){
alert(msg);
},
'debug(string, number)': function(msg, num){
alert(num + ': ' + msg);
},
'debug(com.site.ClassA, string)': function(c, method){
alert('debug ClassA');
c[method]();
},
'debug(com.site.ClassB, string)': function(c, method){
alert('debug ClassB');
c[method]();
},
'debug(element)': function(element){
alert('element:' + element.innerHTML);
}
}).
Object('Web', {
'reload': function(){
alert('reload...');
},
'reload(function)'
Javascript面向对象扩展库(lang.js)
5星 · 超过95%的资源 需积分: 16 65 浏览量
2011-12-19
20:32:25
上传
评论 2
收藏 13KB ZIP 举报
aasddsasda
- 粉丝: 19
- 资源: 10
- 1
- 2
- 3
前往页