原型到 JQuery 的转换 - 坚持使用 class.create答案

【问题标题】：Prototype to JQuery conversion - stuck with class.create原型到 JQuery 的转换 - 坚持使用 class.create
【发布时间】：2012-12-10 14:31:11
【问题描述】：

我是一个试图将代码从原型转换为 JQuery 的新手。我正在了解基础知识，但我坚持使用下面的代码。我尝试过使用 jquery 范围，但无法解决。这是代码，非常感谢您的帮助。

var SaveForm = Class.create();
SaveForm.prototype = {
    formId: null,
    responseText: null,

    initialize: function(formId)
    {
            this.formId = formId;
    }, 
    sendRequest: function(idform)
    {
            var referenceThis = this;
            $(idform).request(
            {
                      onSuccess: function(transport)
                      {
                              referenceThis.responseText = transport.responseText;
                              referenceThis.onSuccess();
                      },
                      onFailure: function(transport)
                      {
                              referenceThis.responseText = transport.responseText;
                              referenceThis.onFailure();
                      }
            });
    },
    onSuccess: function()
    {
    },
    onFailure: function()
    {
    }
}

【问题讨论】：

类继承超出了 jQuery 的范围，我建议使用许多现有的预构建方法之一来执行此操作（jQuery 没有内置一个。）

标签： javascript jquery class prototypejs

【解决方案1】：

jQuery 是为 DOM、事件处理、Ajax 和动画制作的。创建“类”不在其范围内。

但是，您可以轻松地将其转换为简单的纯 JavaScript 构造函数和原型方法：

function SaveForm(formId) {
    this.formId = formId;
    this.responseText = null;
}
SaveForm.prototype.sendRequest = function(idform){
    var _this = this;
    $(idform).request({
        onSuccess: function(transport){
            _this.responseText = transport.responseText;
            _this.onSuccess();
        },
        onFailure: function(transport){
            _this.responseText = transport.responseText;
            _this.onFailure();
        }
    });
};
SaveForm.prototype.onSuccess = function(){};
SaveForm.prototype.onFailure = function(){};

但是，我不确定您真正需要哪种方法。 jQuery 没有request 方法，要做Ajax 请求只需使用强大的$.ajax 函数和Defereds 功能。听起来你只需要

 function submitForm(id) {
     var $form = $('#'+id);
     return $.ajax({
         url: $form.attr("target"),
         method: $form.attr("method"),
         data: $form.serialize(),
         dataType: "html"
     });
 }
 // Usage:
 submitForm("myForm")
   .done(function onSuccess(responseText) {…})
   .fail(function onFailure(error) {…});

【讨论】：

我发现重写代码并使用 $.ajax 是最好的方法。感谢您的帮助。

【解决方案2】：

翻译应该是这样的： - 你不需要使用'Class.create()' - 创建新的 SaveForm 实例时必须使用新的“新” - 将 'referenceThis' 更改为 _this。

为什么要传递2次formId？初始化一次就足够了

var SaveForm = function(){
    this.formId;
    this.responseText;
};

SaveForm.prototype.initialize = function(formId){
    this.formId = formId;
}

SaveForm.prototype.sendRequest = function(idform){
    var _this = this;
    $(idform).request({
        onSuccess: function(transport){
            _this.responseText = transport.responseText;
            _this.onSuccess();
        },
        onFailure: function(transport){
            _this.responseText = transport.responseText;
            _this.onFailure();
        }
    });
};

SaveForm.prototype.onSuccess = function(){};
SaveForm.prototype.onFailure = function(){};


var form = new SaveForm(); // 'new' is very important!!
form.initialize('myId');

【讨论】：