的Javascript原型複用同樣的方法

Question

我有這樣的JS文件

function APIAccess(){ 
    this.LoadScreen = function(){ 
     var loadScreen = $('#loadScreen'); 
     if(loadScreen.html() == undefined){ 
      loadScreen = '<div id="loadScreen" style="display: none;width: 100%; height: 100%; top: 0pt;left: 0pt;">' + 
          '<div id="loadScr" style="filter: alpha(opacity = 65); z-index: 9999;border: medium none; margin: 0pt; padding: 0pt; width: 100%; height: 100%; top: 0pt;left: 0pt; background-color: rgb(0, 0, 0); opacity: 0.2; cursor: wait; position: fixed;"></div>' + 
          '<div id="loader" style="z-index: 10000; position: fixed; padding: 0px; margin: 0px;width: 30%; top: 40%; left: 35%; text-align: center;cursor: wait; ">' + 
          '<img src="img/ajax-loader.gif" alt="loading" /></div></div>'; 
      $(document.body).append(loadScreen); 
     } 
    }; 

    this.APICall = function(url, params, method, callback){ 
     this.LoadScreen(); 
     var postData = null; 
     if(params != null){ 
      postData = JSON.stringify(params); 
     } 
     if(url.toLowerCase().indexOf("http") < 0){ 
      url = "http://" + url; 
     } 
     $('#loadScreen').show(function(){ 
      $.ajax({ 
       url: url, 
       async: true, 
       type: method, 
       data: postData, 
       success: function(data){ 
       $('#loadScreen').hide(); 
       callback(data); 
       }, 
       error:function(data){ 
        alert("failure"); 
        return false; 
       } 
      }); 
     }); 
    }; 
} 

function Domain(reqCallback){ 
    this.url = 'http://beta.test123.net/api/domain'; 
    this.params = null; 
    this.method = 'GET'; 
    this.callback = function(data){ 
     setCookie("domain", data); 
     if(typeof reqCallback != null){ 
      reqCallback(data); 
     } 
    }; 
    this.request = this.APICall(this.url, this.params, this.method, this.callback); 
} 
Domain.prototype = new APIAccess; 

function Login(usermail, pass, reqCallback){ 
    var domainUrl = getCookie("domain"); 
    if(domainUrl == null) 
     return false; 
    else 
     domainUrl += '/api/login'; 

    this.url = domainUrl; 
    this.params = {"email": usermail, "password": password}; 
    this.method = 'POST'; 
    this.callback = function(data){ 
     setCookie("login", data); 
     if(typeof reqCallback != null){ 
      reqCallback(data); 
     } 
    }; 
    this.request = this.APICall(this.url, this.params, this.method, this.callback); 
} 
Login.prototype = new APIAccess; 

如果你看到的方法this.request = this.APICall(this.url, this.params, this.method, this.callback);將重複每次。我希望它可以放在APIAccess函數中。你能建議可以做些什麼嗎？

我用這個在我的HTML，因爲這

$(document).ready(function(){ 
      var domain = new Domain(function(data){ 
       alert(data); 
      }); 
      domain.request; 
     }); 

Answer 1

我不知道這是否是你問什麼，下面的代碼中最重要的部分是 ，我已經使用對象。創建（）而不是對象原型從基類「繼承」如果你想知道爲什麼？參觀https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/create

希望它能幫助:)

//Base class 
var APIAccess = { 

    LoadScreen : function() { 
     var loadScreen = $('#loadScreen'); 
     if (loadScreen.html() == undefined) { 
      loadScreen = '<div id="loadScreen" style="display: none;width: 100%; height: 100%; top: 0pt;left: 0pt;">' + 
          '<div id="loadScr" style="filter: alpha(opacity = 65); z-index: 9999;border: medium none; margin: 0pt; padding: 0pt; width: 100%; height: 100%; top: 0pt;left: 0pt; background-color: rgb(0, 0, 0); opacity: 0.2; cursor: wait; position: fixed;"></div>' + 
          '<div id="loader" style="z-index: 10000; position: fixed; padding: 0px; margin: 0px;width: 30%; top: 40%; left: 35%; text-align: center;cursor: wait; ">' + 
          '<img src="img/ajax-loader.gif" alt="loading" /></div></div>'; 
      $(document.body).append(loadScreen); 
     } 
    }, 

    APICall : function (url, params, method, callback) { 
     this.LoadScreen(); 
     var postData = null; 
     if (params != null) { 
      postData = JSON.stringify(params); 
     } 
     if (url.toLowerCase().indexOf("http") < 0) { 
      url = "http://" + url; 
     } 
     $('#loadScreen').show(function() { 
      $.ajax({ 
       url: url, 
       async: true, 
       type: method, 
       data: postData, 
       success: function (data) { 
        $('#loadScreen').hide(); 
        callback(data); 
       }, 
       error: function (data) { 
        alert("failure"); 
        return false; 
       } 
      }); 
     }); 
    }, 

    //added to base class 
    url : null, 
    params : null, 
    method : null, 
    callback : null, 
    request : function(){ 
     //TODO validate url, params and method here 
     APICall(this.url, this.params, this.method, this.callback); 
    } 
} 


var Domain = function(reqCallback) { 
    var obj = Object.create(APIAccess); 
    //obj.prototype = APIAccess; 
    obj.url = 'http://beta.test123.net/api/domain'; 
    obj.params = null; 
    obj.method = 'GET'; 
    obj.callback = function (data) { 
     setCookie("domain", data); 
     if (typeof reqCallback != null) { 
      reqCallback(data); 
     } 
    }; 
    return obj; 
} 

var Login = function (usermail, password, reqCallback) { 
    var domainUrl = getCookie("domain"); 
    if (domainUrl == null){ 
     return false; 
    } 
    else{ 
     domainUrl += '/api/login'; 
    } 

    var obj = Object.create(APIAccess); 
    //obj.prototype = APIAccess; 
    obj.url = domainUrl; 
    obj.params = { "email": usermail, "password": password }; 
    obj.method = 'POST'; 
    obj.callback = function (data) { 
     setCookie("login", data); 
     if (typeof reqCallback != null) { 
      reqCallback(data); 
     } 
    } 
    return obj; 
} 


//Code below is just for testing 
function getCookie(str){ 
    return 'test'; 
} 

console.log(
    new Domain(function(data){alert(data);}), //domain 
    new Login(//loging 
     'user', 
     'passwd', 
     function(data){alert(data);} 
    ) 
) 

Answer 2

OweRReLoaDeD's answer是正確的，但把它更簡潔：

你應該基類不能實例只是設置繼承。

Domain.prototype = new APIAccess; 

應該

Domain.prototype = Object.create(APIAccess); 

話雖如此，你是造型看起來與繼承有點怪異，希望我有時間去提出一個不同的方式。