一、命名空间
二、类实例属性
三、类实例方法
四、静态方法
五、构造函数
六、继承
这里可以做个修改,使用静态方法,哪么在HTML中JS可以写的更简单
七、方面重写
这里写的超级简单,主要是用做备忘
//命名空间
Ext.namespace("Ext.dojochina");
Ext.dojochina.HelloWorld = Ext.emptyFn;
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../EXTJS/resources/css/ext-all.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../EXTJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../EXTJS/ext-all.js"></script>
<script type="text/javascript" src="HelloWorld.js"></script>
<script type="text/javascript">
new Ext.dojochina.HelloWorld();
</script>
</head>
<body>
</body>
</html>
二、类实例属性
//类实例属性
Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = Ext.emptyFn;
Ext.apply(Ext.dojochina.Person.prototype , {
name:"陈治文"
});
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../EXTJS/resources/css/ext-all.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../EXTJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../EXTJS/ext-all.js"></script>
<script type="text/javascript" src="Person.js"></script>
<script type="text/javascript">
var _person = new Ext.dojochina.Person();
alert(_person.name);
_person.name = "张妍娜"
alert(_person.name);
</script>
</head>
<body>
</body>
</html>
三、类实例方法
//类实例方法
Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = Ext.emptyFn;
Ext.apply(Ext.dojochina.Person.prototype , {
name:"",
sex:"",
print:function(){
alert(String.format("姓名:{0},性别:{1}" , this.name , this.sex))
}
});
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../EXTJS/resources/css/ext-all.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../EXTJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../EXTJS/ext-all.js"></script>
<script type="text/javascript" src="Person.js"></script>
<script type="text/javascript">
var _person = new Ext.dojochina.Person();
_person.name = "陈冶文";
_person.sex = "男";
_person.print();
_person.name = "张妍娜"
_person.sex = "女";
_person.print();
</script>
</head>
<body>
</body>
</html>
四、静态方法
//静态方法
Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = Ext.emptyFn;
Ext.dojochina.Person.print = function(_name , _sex){
var _person = new Ext.dojochina.Person();
_person.name = _name;
_person.sex = _sex;
_person.print();
}
Ext.apply(Ext.dojochina.Person.prototype , {
name:"",
sex:"",
print:function(){
alert(String.format("姓名:{0},性别:{1}" , this.name , this.sex))
}
});
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../EXTJS/resources/css/ext-all.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../EXTJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../EXTJS/ext-all.js"></script>
<script type="text/javascript" src="Person.js"></script>
<script type="text/javascript">
Ext.dojochina.Person.print("陈冶文" , "男");
Ext.dojochina.Person.print("张妍娜" , "女");
</script>
</head>
<body>
</body>
</html>
五、构造函数
//构造函数
Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = function(_cfg){
Ext.apply(this , _cfg);
};
Ext.dojochina.Person.print = function(_name , _sex){
var _person = new Ext.dojochina.Person({name:_name , sex:_sex});
_person.print();
}
Ext.apply(Ext.dojochina.Person.prototype , {
print:function(){
alert(String.format("姓名:{0},性别:{1}" , this.name , this.sex))
}
});
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../EXTJS/resources/css/ext-all.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../EXTJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../EXTJS/ext-all.js"></script>
<script type="text/javascript" src="Person.js"></script>
<script type="text/javascript">
Ext.dojochina.Person.print("陈冶文" , "男");
Ext.dojochina.Person.print("张妍娜" , "女");
</script>
</head>
<body>
</body>
</html>
六、继承
//类继承
Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = function(_cfg){
Ext.apply(this , _cfg);
};
Ext.apply(Ext.dojochina.Person.prototype , {
job:"无",
print:function(){
alert(String.format("姓名:{0},性别:{1},角色:{2}" , this.name , this.sex , this.job));
}
});
Ext.namespace("Ext.dojochina");
Ext.dojochina.Student = function(_cfg){
Ext.apply(this , _cfg);
}
Ext.extend(Ext.dojochina.Student , Ext.dojochina.Person , {
job:"学生"
});
Ext.namespace("Ext.dojochina");
Ext.dojochina.Teacher = function(_cfg){
Ext.apply(this , _cfg);
};
Ext.extend(Ext.dojochina.Teacher , Ext.dojochina.Person , {
job:"教师"
});
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../EXTJS/resources/css/ext-all.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../EXTJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../EXTJS/ext-all.js"></script>
<script type="text/javascript" src="Person.js"></script>
<script type="text/javascript" src="Student.js"></script>
<script type="text/javascript" src="Teacher.js"></script>
<script type="text/javascript">
var _teacher = new Ext.dojochina.Teacher({name:"陈冶文" , sex:"男"});
_teacher.print();
var _student = new Ext.dojochina.Student({name:"张妍娜" , sex:"女"});
_student.print();
</script>
</head>
<body>
</body>
</html>
这里可以做个修改,使用静态方法,哪么在HTML中JS可以写的更简单
七、方面重写
//方法重写
Ext.namespace("Ext.dojochina");
Ext.dojochina.Person = function(_cfg){
Ext.apply(this , _cfg);
};
Ext.apply(Ext.dojochina.Person.prototype , {
job:"无",
print:function(){
alert(String.format("姓名:{0},性别:{1},角色:{2}" , this.name , this.sex , this.job));
}
});
//方法重写
Ext.namespace("Ext.dojochina");
Ext.dojochina.Student = function(_cfg){
Ext.apply(this , _cfg);
};
Ext.extend(Ext.dojochina.Student , Ext.dojochina.Person , {
print:function(){
alert(String.format("{0}是一个{1}学生!" , this.name , this.sex));
}
});
//方法重写
Ext.namespace("Ext.dojochina");
Ext.dojochina.Student = function(_cfg){
Ext.apply(this , _cfg);
};
Ext.extend(Ext.dojochina.Student , Ext.dojochina.Person , {
print:function(){
alert(String.format("{0}是一个{1}学生!" , this.name , this.sex));
}
});
//方法重写
Ext.namespace("Ext.dojochina");
Ext.dojochina.Teacher = function(_cfg){
Ext.apply(this , _cfg);
};
Ext.extend(Ext.dojochina.Teacher , Ext.dojochina.Person , {
print:function(){
alert(String.format("{0}是一名{1}老师", this.name, this.sex));
}
});
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../EXTJS/resources/css/ext-all.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../EXTJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../EXTJS/ext-all.js"></script>
<script type="text/javascript" src="Person.js"></script>
<script type="text/javascript" src="Student.js"></script>
<script type="text/javascript" src="Teacher.js"></script>
<script type="text/javascript">
var _teacher = new Ext.dojochina.Teacher({name:"陈冶文" , sex:"男"});
_teacher.print();
var _student = new Ext.dojochina.Student({name:"张妍娜" , sex:"女"});
_student.print();
</script>
</head>
<body>
</body>
</html>
这里写的超级简单,主要是用做备忘