Javascript Prototype重用相同的方法

Question

I have this JS file

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;

If you see the method this.request = this.APICall(this.url, this.params, this.method, this.callback); will be repeated everytime. I wish it could be placed in APIAccess function. can you please suggest what can be done.

I use this in my html as this

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

Answer 1

I'm not sure about if this is what you are asking for, The most important part of the code below is that I have used Object.create() instead of object prototype to "inherit" from the base class If you want to learn why? visit https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/create

hope it helps :)

//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 is correct, but to put it more succinctly:

You should not instantiate the base class just to setup inheritance.

Domain.prototype = new APIAccess;

Should be

Domain.prototype = Object.create(APIAccess);

Having said this, what you're modeling looks a little weird with inheritance, wish I had time to suggest a different way.