Javascript作為一門面向?qū)ο蟮木幊陶Z言，其最基礎(chǔ)的面向?qū)ο蟾拍罹褪菍?duì)象。一個(gè)對(duì)象就是屬性的集合，我們可以定義一些屬性和方法，并通過操作屬性和調(diào)用方法來完成一些功能。在Web開發(fā)中，輸入框（input）就是一個(gè)經(jīng)典的面向?qū)ο髥栴}，我們可以使用Javascript的面向?qū)ο髞砻枋鲚斎肟虻奶攸c(diǎn)、操作和事件等。

首先，我們定義一個(gè)Input類，它有兩個(gè)屬性：id和value。我們可以通過構(gòu)造函數(shù)來實(shí)現(xiàn)屬性的初始化，并暴露一個(gè)getValue方法用于獲取輸入框中的文本內(nèi)容。

class Input {
constructor(id, value) {
this.id = id;
this.value = value;
}
getValue() {
return this.value;
}
}

接下來，我們可以定義一個(gè)TextInput類，它繼承自Input類并且新增了一個(gè)focus方法，用于設(shè)置輸入框的焦點(diǎn)。我們可以通過調(diào)用inputElement.focus()來實(shí)現(xiàn)焦點(diǎn)設(shè)置。

class TextInput extends Input {
constructor(id, value) {
super(id, value);
}
focus() {
let inputElement = document.getElementById(this.id);
inputElement.focus();
}
}

當(dāng)然，輸入框不僅僅是個(gè)普通的文本框，還可以有多種類型的輸入框，如數(shù)字、日期、郵箱等。我們可以通過定義一個(gè)InputType枚舉來擴(kuò)展Input類，每種類型的輸入框都可以定義不同的校驗(yàn)邏輯，并提供一個(gè)isValid方法用于校驗(yàn)輸入框中的內(nèi)容。

const InputType = {
TEXT: "text",
NUMBER: "number",
EMAIL: "email",
DATE: "date"
};
class Input {
constructor(id, value) {
this.id = id;
this.value = value;
}
getValue() {
return this.value;
}
isValid() {
return true;
}
}
class NumberInput extends Input {
constructor(id, value) {
super(id, value);
}
isValid() {
return !isNaN(this.value);
}
}
class EmailInput extends Input {
constructor(id, value) {
super(id, value);
}
isValid() {
//正則表達(dá)式校驗(yàn)郵箱格式
}
}
//其他輸入框的類定義與實(shí)現(xiàn)類似

最后，我們可以通過在頁面中創(chuàng)建對(duì)應(yīng)的輸入框元素，然后實(shí)例化對(duì)應(yīng)的輸入框?qū)ο?，并通過調(diào)用其方法來完成對(duì)輸入框的操作。

//HTML元素
<input id="text" type="text" />
<input id="number" type="number" />
<input id="email" type="email" />
<input id="date" type="date" />
//創(chuàng)建輸入框?qū)ο?
let textInput = new TextInput("text", "");
let numberInput = new NumberInput("number", "");
let emailInput = new EmailInput("email", "");
let dateInput = new DateInput("date", "");
//設(shè)置文本值
textInput.value = "hello world";
//獲取文本值
console.log(textInput.getValue()); //"hello world"
//設(shè)置焦點(diǎn)
textInput.focus();
//校驗(yàn)輸入值
console.log(numberInput.isValid()); //true
console.log(emailInput.isValid()); //true or false
console.log(dateInput.isValid()); //true or false

總之，Javascript的面向?qū)ο笏枷霟o處不在，而對(duì)于輸入框這樣的常見場(chǎng)景來說，通過面向?qū)ο缶幊炭梢允沟么a結(jié)構(gòu)更加清晰、易于維護(hù)和擴(kuò)展。