3

我有一页有两种类型的表格。我在顶部有一个 A 型的形式，然后在它下面有一个或多个 B 型的形式。

我使用模块模式 + jQuery 来连接表单上的所有事件、处理验证、ajax 调用等。

这是定义单例（如表格 A）和可重用对象类（如表格 B）的首选/有效方式吗？它们非常相似，我不确定是否需要使用 objectprototype属性new、 或不同的模式。一切似乎对我有用，但我担心我错过了一些关键错误。

Form Ajavascript看起来像这样：

var MyProject.FormA = (function() {
  var $_userEntry;
  var $_domElementId;

  var validate = function() { 
    if($_userEntry == 0) {
      alert('Cannot enter 0!');
    } 
  }
  var processUserInput = function() {
    $_userEntry = jQuery('inputfield', $_domElementId).val();
    validate();
  }
  return {
    initialize: function(domElementId) {
      $_domElementId = domElementId;
      jQuery($_domElementId).click(function() {
        processUserInput();
      }
    }
  }

})();
jQuery(document).ready(function() {
  MyProject.FormA.initialize('#form-a');
});

Form B，它被初始化一次或多次，定义如下：

var MyProject.FormB = function() {
  var $_userEntry;
  var $_domElement;

  var validate = function() { 
    if($_userEntry == 0) {
      alert('Cannot enter 0!');
    } 
  }
  var processUserInput = function() {
    $_userEntry = jQuery('inputfield', $_domElement).val();
    validate();
  }
  return {
    initialize: function(domElement) {
      $_domElement = domElement;
      jQuery($_domElement).click(function() {
        processUserInput();
      }
    }
  }

};
jQuery(document).ready(function() {
  jQuery(".form-b").each(function() {
    MyProject.FormB().initialize(this);
  });
});
4

2 回答 2

2

您的两个模块都明确返回排除使用 new 的对象。

原型继承与隐藏您使用此模式实现的方法并不真正兼容。当然，您可以使用定义了验证方法的原型表单对象重新编写它，但是该方法将是可见的，并且您会失去封装。

您是否想要原型的低内存占用和快速对象初始化（共享方法仅存在一次，实例化以恒定时间运行）或封装带有轻微性能损失的模块模式（多个定义的相同方法，对象实例化减慢，因为每次都必须创建每个方法）

在这种情况下，我建议性能差异微不足道，所以选择你喜欢的任何东西。就我个人而言，我会说它们之间有太多重复，我倾向于将它们统一起来。你真的需要 A 成为单身人士吗？它被意外实例化两次有什么危险？似乎这可能是针对这个问题的过度设计。如果你真的必须有一个单例，我会像这样包装非单例（B）类：

var getSingleton = function() {
    var form = MyProject.FormB();
    form.initialize("#form-a");
    console.log("This is the original function");
    getSingleton = function() {     
        console.log("this is the replacement function");
        return form;
    }
    return form;
}
于 2010-07-22T08:10:47.210 回答
1

我认为您只需要编写一种 jQ 插件：

(function($) {
    $.fn.formValidator = function() {
        return $(this).each(function() {
            var $_domElement = $(this);
            $_domElement.click(function() {
                if($('inputfield', $_domElement).val() == 0) {
                    alert('Cannot enter 0!');
                }
            });
        });
    };
})(jQuery);

在这种情况下，您将扩展 jQ 元素方法模块，并将能够将它用于页面上的任意数量的元素（用于单个或多个元素集合）。它也将是可链接的。

用法：

$('#form-a').formValidator();
$('.form-b').formValidator();

或者

$('#form-a, .form-b').formValidator();

当然你可以使用一个模块来存储这个函数：

ProjectModule.formValidator = function(selector) {
    return $(selector).each(function() {
        var $_domElement = $(this);
        $_domElement.click(function() {
            if ($('inputfield', $_domElement).val() == 0) {
                alert('Cannot enter 0!');
            }
        });
    });
};

用法：

ProjectModule.formValidator('#form-a, .form-b');
于 2010-07-22T05:44:42.887 回答