javascript - 如何用 JavaScript 原型(prototype)编程来管理 HTTP 请求。

Question

在原型(prototype)编程方面，我可以使用回调管理http ajax 请求。我正在寻找更好的解决方案，你能解释一下如何用 JavaScript 原型(prototype)编程来管理你的 HTTP 请求吗？

    var filterObj=(function(){
            var siteUrl='http://localhost/testproject/project';
           
            function jsonObj(callback){
              $.getJSON(siteUrl+"/posts?type[]=cfg",callback)
            }
            function projectObject(callback){
                jsonObj(function(result){
                    callback(result);
                })
            }
        
            return {    
                getProjectInfo:function(callback){
                    projectObject(function(data){
                        console.log(data);
                        callback(data);
                    });
                 },
                getProjectCategoryInfo:function(){

                },
                getProjectLocation:function(){

                }
            }    

        })();

   filterObj.getProjectInfo(function(data){
        console.log(data);
   });

Answer 1

一般来说，拥抱 Javascript 的函数式编程本质比模拟 OOP 更好。然而这个例子可以完美地转换为构造函数。在 ECMA 5 中你可以这样写:

function Filter(siteUrl) {
    this.siteUrl = siteUrl;
}
Filter.prototype.jsonObj = function (callback) {
    $.getJSON(this.siteUrl + "/posts?type[]=cfg", callback)
};
Filter.prototype.projectObject = function (callback) {
    this.jsonObj(function (result) {
        callback(result);
    })
};

Filter.prototype.getProjectInfo = function (callback) {
    projectObject(function (data) {
        console.log(data);
        callback(data);
    });
};
Filter.prototype.getProjectCategoryInfo = function () {
    //some code
};
Filter.prototype.getProjectLocation = function () {
    //some code
};


//Instanciate it
var filterObj = new Filter('http://localhost/testproject/project');

filterObj.getProjectInfo(function (data) {
    console.log(data);
});

在 ECMA 6 或 Typescript 中，您可以使用 class 关键字获得更清晰的语法。 You can write a class in Typescript playground and see the resulting ECMA 5 code in real time here.例如，从下拉菜单中选择“演练:类”，了解新语法如何简化原型(prototype)的使用。