我总结的吊炸天的js写法风格

优点有两处,一个是区分了共有方法和私有方法,再一个是页面上事件的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>



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值