1

我正在尝试清理我的 JavaScript 代码，这样我就可以停止编写意大利面条代码并拥有更多的整体结构。我想通过编写一个简单的表单验证器来测试我的技能。但是，我已经卡住了。

这是我目前的代码：

(function($, window, undefined) {
    var Form = function($el) {
        this.$el = $el;
        this.fields = {};

        this.prototype.validate = function() {
            this.getFields();    
        }

        this.prototype.getFields = function() {
            console.log("getting fields");
        }

        return {
            validate: this.validate
        }
    };

    window.Form = Form;
})(jQuery, window);


$(function() {

    var form = new Form('#form-newsletter');
    form.validate();

});

关于这个的几个问题。

我将 Form 变量包装在一个自执行函数中，并传入三个参数。jQuery、window 和 undefined 以确保它始终未定义。我不会撒谎，这就是我学会这样做的方式，我不是 100% 确定我为什么要这样做。这是不好的做法还是我可以以某种方式改进？然后我通过将 Form 变量附加到窗口来公开它。

在Formvar 中，我设置了一些属性（我们是这样称呼它们的吗？），我有几个方法。我只在 return 语句中公开了 validate 方法。这个可以吗？

然后是我卡住的部分。我想validate()成为一个初始化函数，它的任务是验证表单。Validate 应该调用 getFields 函数来解析表单字段并将它们放入 fields 对象中。但是，我似乎无法让它发挥作用。我打电话时它不起作用this.getFields()，this.prototype.getFields()或者Form.getFields。这是因为thisthis 函数内部的 this 与 Form 对象不同（这里的措辞正确吗？）？我应该this.self = this在 Form 函数的开头放置类似的东西吗？

我也想知道是否可以将这些方法附加到原型上。有理由不这样做吗？

我正在尝试学习; 我读过的大多数关于 JavaScript 的书都关注基础知识：Dog从类继承的Mammal类。但是，据我所知，他们并没有真正帮助我解决此类问题。是否有任何书籍、教程、截屏视频可以帮助我更好地理解这些概念？

编辑：

假设我想将我的脚本分组在一个公共命名空间下：我可以这样做

var MyStuff = {};

MyStuff.Utilities = { // stuff };
MyStuff.Form = function() { // stuff };

但是，如果我想将它们放入单独的文件中，例如mystuff-form.js, mystuff-utilities.js，我该怎么做呢？我在哪里声明命名空间 var var MyStuff = {}？在我这样做之后，我可以将我的表单和实用程序附加到上面，对吗？我几乎不能MyStuff.js用它来制作文件var MyStuff = {}; window.MyStuff = MyStuff，可以吗？

4

1 回答 1

2

您混淆了构造函数和可以从中创建的对象。原型的想法是您在构造函数的.prototype属性上设置函数，然后您通过构造函数创建的每个对象都可以访问这些函数。

在构造函数内部，this指的是正在创建的对象。在您的情况下，您正在对此类对象的原型进行设置 - 但该属性不存在。要在构造函数上设置属性.prototype，jQuery 允许使用简洁的语法$.extend：

// extend constructor's prototype with functions

$.extend(Form.prototype, {
    validate: function() {
        this.getFields();    
    },

    getFields: function() {
        console.log("getting fields");
    }
});

现在，任何对象都有.validate()可用的功能。

此外，您正在从构造函数返回一个新对象。你不需要；它甚至会破坏继承/原型的想法。

另外 - 你编码this.$el = $el，但在你的情况下，你传递了一个选择器字符串，所以我想你想$($el)将它转换为一个 jQuery 集（也许还重命名参数）。

最后，匿名函数不需要传递所有这些参数：

  • jQuery -> $- 如果页面处于模式，这很有用- 您可以在函数内部jQuery.noConflict()访问 jQuery 。$
  • window -> window- 没有真正的目的。window甚至是只读的，所以它不会改变。
  • undefined- 在现代浏览器中，这是只读的，所以不需要传递它。在较旧的浏览器中，如果您 a) 不通过它，并且 b) 您页面上的某些脚本发生更改，它只会导致冲突undefined。这不是很重要，但当然，像你一样通过它并没有什么坏处。

请参阅http://jsfiddle.net/4UNAp/。

于 2012-10-04T16:17:51.403 回答