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

Here you find a german example.

Here you find an english example.

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"

Answer 2

有些事情在你的代碼以提高：

1. 縮進你的代碼正確。
2. 不要重新定義Date，但使用不同的名稱爲自己構造
3. 不要把DOM依賴於你的構造（employmentDate，提交），但通過這種依賴作爲參數傳遞給構造函數，或暴露屬性允許呼叫者設置它們。
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>