优点有两处,一个是区分了共有方法和私有方法,再一个是页面上事件的this可以传递到类中与类的this区分开来.
注:此风格针对传统jquery写法设计的,不适用于mvvm框架,如ng,vue,avalon等
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
(function ($,window) {
/**
*Page类
*des:此处代码只提供方法,不提供任何调用和控制
*/
function Page() {
//页面参数
this.Param = {
Name: "",//姓名
Pwd: ""//密码
};
this.PageType = "";//页面类型
//页面控件
this.Control = {
$name: $("#name"),
$pwd:$("#pwd"),
$enter: $("#enter")
}
}
//获取用户名
Page.prototype.GetName = function () {
return this.Param.Name;
}
//设置页面参数
Page.prototype.SetParam=function(){
this.Param.Name = this.Control.$name.val();
this.Param.Pwd = this.Control.$pwd.val();
}
//确定按钮--点击事件
Page.prototype.enter_Click = function (obj) {
var $this = $(obj);
var str = pri.strAdd("账号:"+this.GetName(), "密码:"+this.Param.Pwd);
alert($this.val()+"###" +str);
}
//私有方法
var pri = {
//字符串拼接
strAdd: function (str1,str2) {
return str1 + "---" + str2;
}
};
//将Page类传递到window对象
window.Page = Page;
})(jQuery, window);
//onload
//des:此处代码用于调用和控制
$(function () {
var page = new Page();
page.SetParam();
page.Control.$enter.click(function () {
page.enter_Click(this);
});
});
</script>
</head>
<body>
<input type="text" id="name" value="张三" />
<input type="password" id="pwd" value="123456" />
<input id="enter" type="button" value="确定" />
</body>
</html>