javascript - 构建JavaScript:编写基本验证器

我正在尝试清理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变量附加到窗口来公开它。

在Form var中，我设置了一些属性（这就是我们如何称呼它们？），并且有两种方法。我只在return语句中公开validate方法。这个可以吗？

然后是我卡住的部分。我希望validate()像一个初始化函数，该函数具有验证表单的任务。验证应调用getFields函数以解析表单字段并将其放入fields对象。但是，我似乎无法正常工作。当我呼叫this.getFields()，this.prototype.getFields()或Form.getFields时，它不起作用。这是因为此函数内的this与Form对象（此处的正确措词？）不同吗？我应该在Form函数的开头放置this.self = this之类的东西吗？

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

我正在尝试学习;我读过的有关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文件，可以吗？

最佳答案

您会混淆构造函数和可以从中创建的对象。原型的想法是在构造函数的.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/。

关于javascript - 构建JavaScript:编写基本验证器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12731203/

myStuff

javascript - 构建JavaScript:编写基本验证器