jquery.objectize JavaScript 面向对象编程
canca
demo.html
<html>
<head>
<title>JQuery 面向对象编程插件</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
.userName{
color:#00f;
}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.objectize.js"></script>
<script type="text/javascript">
$.include("example.io.Base"); //导入example/io/Base.js
$.include("example.io.File"); //导入example/io/File.js
$(function(){
//定义类方法1：
/* var a = $.Class('example.io.Base').New("a","b");
var b = $.Class('example.io.File').New("c","d");
//定义类方法2：
$.Objectize.namespaces();
var a = example.io.Base.New("a", "b");
var b = example.io.File.New("c", "d");
//调用类方法
b.showMsg();
alert(b.doSomething());
//判断类类型
alert(b.is("example.io.Base"));
*/
$.Class("user.form.Div",{
Div : function(clsName){
this.object().attr("class",clsName);
},
templet : '<div>${userName}</div>',
_o : null,
object : function(){
if(this._o == null){
this._o = $(this.templet);
}
return this._o;
},setUserName : function(userName){
this.object().html(userName);
}
});
$.Class("user.form.UserName","user.form.Div",{
UserName : function(clsName,data){
this.Div(clsName);
this.object().html(data);
},writeTo : function(elem){
$(elem).append(this.object());
}
});
var userName = $.Class("user.form.UserName").New("userName","Mr.CT");
userName.object().click(function(){
alert($(this).html());
}).css({"cursor" : "pointer"}).hover(function(){
$(this).css("color","#ff0000");
},function(){
$(this).css("color","#0000ff");
});
$(userForm).append(userName.object());
});
</script>
</head>
<body>
<div id="userForm">
</div>
</body>
</html>
Base.js
$.Class('example.io.Base', {
x : 30,
y : 20,
watch: function(people){
return people + "看电视！";
},
Base : function( a, b ) {
alert("Base: " + a+","+b);
}
});
File.js
$.Class('example.io.File','example.io.Base',{
File : function( a, b ) {
this.Base(a, b);
},
showMsg:function(){
alert("X:" + this.x + " Y: " + this.y);
},
doSomething:function(){
return this.watch("Mr.CT");
}
});
发表评论