js对象化

谢了js也有一年了，本来在三个月左右就开始写封装类的，但是由于没有总结和忙，所以自己写的js都是“散装”的，其实好的想法要延续的，随意以后写js一定要养成习惯写成封装类，今天就总结一些前一段时间写的js封装类，拿实例说话：

一：prototype 写法

    
    如果这个对象只有一个方法：
    functon CreatePerson(name,sex,birthday,fn)  
    {  
      this.name =name;  
      this.sex = sex;  
      this.birthday = birthday;  
    }  
    CreatePerson.prototype.sayHi = function ()  
    {  
      alert("Hi ! I am "+this.name);  
    }  
      
    var person1 = new CreatePerson('zs','boy','2001-02-03');  
    var person2 = new CreatePerson('ls','boy','2001-02-04');  
    person1.sayHi(); //outputs "Hi ! I am zs"  
    person2.sayHi(); //outputs "Hi ! I am ls"  
      
    一般情况下，一个对象或者类不只一个方法，需要多个方法配合使用，那么  
    CreatePerson.prototype={  
      sayHi:function()  
      {  
        alert("Hi ! I am "+this.name);  
      },  
      walk:function()  
      {  
        alert("walk,walk");  
      },  
      ……  
    }  

二：构造函数写法

//由于js没有map函数(有Array)，下面是一个完整版的Map模仿函数：

var claMap = new Map(); //初始化
claMap.get(classId); //调用其中的方法


function Map(){
    var struct = function(key, value) {
        this.key = key;
        this.value = value;
    }

    var put = function(key, value){
        for (var i = 0; i < this.arr.length; i++) {
            if ( this.arr[i].key === key ) {
                this.arr[i].value = value;
                return;
            }
        }
        this.arr[this.arr.length] = new struct(key, value);
    }

    var get = function(key) {
        for (var i = 0; i < this.arr.length; i++) {
            if ( this.arr[i].key === key ) {
                return this.arr[i].value;
            }
        }
        return null;
    }

    var remove = function(key) {
        var v;
        for (var i = 0; i < this.arr.length; i++) {
            v = this.arr.pop();
            if ( v.key === key ) {
                continue;
            }
            this.arr.unshift(v);
        }
    }

    this.arr = new Array();
    this.get = get;
    this.put = put;
    this.remove = remove;
}

三：数组方式

var reg={};

reg.clientValidate=function(){
	var username = $('#register-name').val();
	var phone = $('#register-phone').val();
	var password = $('#register-pass').val();
	var passwordConfirm = $('#register-confirm').val();
	var registerAgreement = $('#register-agreement').val();
	var validator = $('#register-validator').val();

	var phoneRegExp = new RegExp(CONSTANTS_MOBILE);// 建立验证电话的正则对象
	var usernameRegExp = new RegExp(CONSTANTS_NUM_CHAR);// 建立验证用户名的正则对象

	if (phone == null || phone.length == 0) {
		alert('请输入手机号码');
		$("#register-phone").focus();
		return false;
	}

	if (!phoneRegExp.exec(phone)) {
		alert('无效的手机号码');
		$("#register-phone").focus();
		return false;
	}

	if (username == null || username.length == 0) {
		alert('请输入用户名');
		$("#register-name").focus();
		return false;
	}

	if (!usernameRegExp.exec(username)) {
		alert('无效的用户名, 0-9A-z');
		$("#register-name").focus();
		return false;
	}

	if (password == null || password.length == 0 || passwordConfirm == null
			|| passwordConfirm.length == 0) {
		alert('请输入密码');
		return false;
	}

	if (password != passwordConfirm) {
		alert('两次输入的密码不一致');
		return false;
	}

	if (validator == null || validator.length == 0) {
		alert('请输入验证码');
		$("#register-validator").focus();
		return false;
	}

	if (!$('#register-agreement').is(':checked')) {
		alert('请勾选认真阅读并同意《使用协议》');
		return false;
	}
	
	return true;
	
}

reg.submit=function(){
	$.ajax({
        type: "post",
        url: "/user/register.html?phone="+$("#register-phone").val()+"&username="+$("#register-name").val()+"&password="+hex_md5($("#register-pass").val())+"&validator="+$("#register-validator").val(),
        async: false,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data) {
        	if (data.value.status == 1){
        	    alert(data.value.message);
        	    window.location.href="/index.html";
        	} else {
        	     alert(data.value.message);
        	     $("#validator").attr("src","/commons/validator.html?"+Math.random());
        	}
        },
        error: function(err) {
            alert("请求失败，请稍后再试...");
        }
    });
}

<pre name="code" class="html">reg.registe=function(){
	if(reg.clientValidate()){
		reg.submit();
	}
}

 
上面是js代码，html调用代码：

<div class="button-border">
	<input id="register-button" class="border" type="button" title="阅读并同意《使用协议》方可注册。" value="注册" onclick="javascript:reg.registe();"/>	
</div>

总结：

javascript的方法可以分为三类：

     a 类方法

     b 对象方法

     c 原型方法

function People(name)
{
  this.name=name;
  //对象方法
  this.Introduce=function(){
    alert("My name is "+this.name);
  }
}
//类方法
People.Run=function(){
  alert("I can run");
}
//原型方法
People.prototype.IntroduceChinese=function(){
  alert("我的名字是"+this.name);
}

 

//测试

var p1=new People("Windking");

p1.Introduce();

People.Run();

p1.IntroduceChinese();