JavaScript之创建对象并添加方法

怼烎@ 2022-07-12 08:05 153阅读 0赞

1、创建一个htService类，获得实例化对象
    var htService = $.htService;
    
    2、登陆操作，调用对象的登录方法
    $("#J_SubmitStatic").on("click",function(){
       var nameVal = userName.val();
       var pwdVal = passWord.val();
       if(!nameVal){
          layer.tips("用户名不能为空！",userName);
          return;
       }
       if(!pwdVal){
          layer.tips("密码不能为空！",passWord);
          return;
       }
       if(pwdVal.length<6){
          layer.tips("密码长度不能低于6位数！",passWord);
          return;
       }
       //登陆回调函数
       var loginCall = function(results){
          if(results.code=="0X0000"){
             var data = results.data;
             var strData = JSON.stringify(data);
             //用户信息存储cookie
             $.setSessionStorage("userInfo",strData)
             $.redirect("index/index");
          }else{
             layer.msg(results.message);
          }
       }
       htService.login(loginCall,nameVal,pwdVal);
    });
    
    
    3、增加JS拓展方法，可以批量添加方法，添加后JS可直接调用方法
    var jquery = $;
    
    // var hostUrl = //"http://localhost/haitun/api.php/";
    var ext = {
       /**
        * 功能:封装ajax公共请求方法
        * 参数：param:入参包括URL
        *      callback:执行成功回调函数
        *    isLoad：是否显示加载层
        *    isAsync：是否异步
        *    title：加载层提示信息
        */
       request : function(param,callback,isLoad,isAsync,title){
           var isAsync = (typeof(isAsync) == "undefined" || isAsync === null || isAsync === "") ? true : isAsync;
           var title = (typeof(title) == "undefined" || title === null || title === "") ? "正在请求数据":title;
           var url = $.apiU(param.url);
           delete param["url"];
           var option = {
               url: url,//url,
               data: param,
               type: "post",
               dataType: "json",
               async: isAsync,
               beforeSend: function(XMLHttpRequest) {
                  if(isLoad)layer.msg(title, {icon: 16,shade: 0.01});
               },
               success: function(data, textStatus,XMLHttpRequest) {
                  if(isLoad)layer.closeAll();
                   callback(data);
               },
               complete: function(XMLHttpRequest, textStatus) {
    
               },
               //abort会执行error方法
               error: function(XMLHttpRequest, textStatus, errorThrown) {
    
               }
           };
           $.ajax(option);
       },
        /**
          * 功能:正则表达式的匹配
          * 参数：pattern:正则表达式
          *      str:校验的值
          * 返回:true,false
          */
         executeExp : function(pattern, str){
           return pattern.test(str);
         }
    };
    jquery.extend(ext);//为jQuery添加新的方法，JS就有这许多个方法了
    
    
    
    4、定义login登录方法，调用 jQuery对象的request（刚添加的拓展）方法
    var jquery = $;
    
    function htService(){};
    
    /** 登陆 **/
    htService.prototype.login = function(call,username,password) {
       var paramMap = {}
       paramMap["url"] = "user/login";
       paramMap["user_name"] = username;
       paramMap["password"] = password;
       $.request(paramMap,call,true,false,"正在登陆");
    };
    
    
    5、创建htService类，添加属性和方法，并添加到jQuery类中去，以后可直接调用
    var jquery = $;
    
    function htService(){};
    
    /** 登陆 **/
    htService.prototype.login = function(call,username,password) {
       var paramMap = {}
       paramMap["url"] = "user/login";
       paramMap["user_name"] = username;
       paramMap["password"] = password;
       $.request(paramMap,call,true,false,"正在登陆");
    };
    /** 发送短信验证码 **/
    htService.prototype.sendSms = function(call,mobile,type,captcha){
       var paramMap = {}
       paramMap["url"] = "user/sms";
       paramMap["mobile"] = mobile;
       paramMap["type"] = type;
       paramMap["captcha"] = captcha;
       $.request(paramMap,call,true,false,"正在发送...");
    };
    //实力化 htService请求服务对象
    var htService = new htService();
    var service = {
       "htService":htService
    };
    jquery.extend(service);// 添加到jQuery对象中去，变成jQuery类的方法了