Structure of JavaScript OOP

Question

我绝对是JavaScript OOP的新手，我想问您。有人可以告诉我我的代码结构是否可以吗？因为我真的搜索了与JavaScript结构有关的信息，但找不到。因此，我不知道如何编写某些方法，对象等。除此之外，还可以分享我一些有用的信息，以了解JavaScript OOP代码的外观吗？：/谢谢

这是我的代码：

function Date() {
this.validateDate = function() {
    var twoDates = {
        inputDate: new Date($('#employmentDate').val()),
        todaysDate: new Date
    }
    return inputDate.getTime() < today.getTime();
}
this.documentReady = function() {
    $( document ).ready(function() {

$('[name="Submit"]').on('click', function(e) {
    console.log('test click');

    if (!this.validateDate()) {
        e.preventDefault();
        console.log('prevented');
    }
})
})
}
this.documentChange = function() {
  $('#employmentDate').change(function() {
 console.log('Check after change');
if (!this.validateDate()) {
    console.log('Wrong date');
    alert ("Entered date is later than today's date");
    }
})
}
}
var date= new Date();
date.validateDate();
date.documentReady();
date.documentChange();

Answer 1

在您的代码中需要改进的一些事情：

1. 正确缩进您的代码。
2. 不要重新定义Date，而是为您自己的构造函数使用其他名称
3. 不要将DOM依赖项放入构造函数（雇用日期，提交），而是将这些依赖项之类的依赖项传递给构造函数，或者将属性公开以允许呼叫者设置它们。
4. 请在您的对象中保持等待文档就绪的事件：只需在主脚本中进行一次。
5. 在回调中使用this时，请确保设置上下文。您可以使用.bind(this)。
6. 除非您有一些约束，否则在原型而不是单个对象实例上定义方法。阻止您这样做的约束可能是您需要访问私人变量。

这是我如何适应您的代码：

// Use a custom name, not one that is already used. 
// Pass dependencies to the object instance.
function DateVerifier(submitButton, dateElement) {
    this.$submitButton = $(submitButton);
    this.$dateElement = $(dateElement);
    
    // Assume DOM is loaded, 
    // and set the event handlers during the construction of this object
    this.$submitButton.on('click', function(e) {
        console.log('test click');
        if (!this.validateDate()) {
            e.preventDefault();
            console.log('prevented');
        }
    }.bind(this)); // bind the callback's context to your object (for `this` to work)
    this.$dateElement.change(function() {
        console.log('Check after change');
        if (!this.validateDate()) {
            console.log('Wrong date');
            alert ("Entered date is not valid date before today's date");
        }
    }.bind(this)); // bind the callback's context to your object (for `this` to work)
}
// Methods can be set on the prototype
DateVerifier.prototype.validateDate = function() {
    // Creating an object here is overkill, just do:
    var todaysDate = new Date().getTime();
    var inputDate = Date.parse(this.$dateElement.val());
    // Also check whether the input date is a valid date
    return !isNaN(inputDate) && inputDate < todaysDate;
}
// Keep the document-ready thing out of your object. 
// You just need it once in your main script,
// which also gives you a closure at the same time:
$(function () {
    // Pass the dependecies as arguments
    var dateVerifier = new DateVerifier('[name="Submit"]', '#employmentDate');
    dateVerifier.validateDate();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    Employment date: <input id="employmentDate">
    <input type="submit" name="Submit" value="Submit">
</form>

Answer 2

在这里您找到一个德语示例。

在这里您找到一个英语示例。

1. 构建自己的构造函数function XYZ(parameters){ //define members }
2. 向构造函数添加函数XYZ.prototype.functionName = function(){};
3. 用var xyz = new XYZ(parameters);初始化对象

这些是Javascript OOP的基本步骤，但是请小心不要在示例中覆盖/阴影native constructors/objects作为Date。

您的问题没有定义，因为每个人都会以另一种方式使用它。您需要找到编码风格。您现在在这里有basics。因此，请查看并通过试用和错误来查找： - ）

function Person(firstName) {
  this.firstName = firstName;
}
Person.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.firstName);
};
var person1 = new Person("Alice");
var person2 = new Person("Bob");
// Aufrufen der Methode sayHello der Person.
person1.sayHello(); // logs "Hello, I'm Alice"
person2.sayHello(); // logs "Hello, I'm Bob"