ผู้เริ่มต้นที่กำลังเรียนรู้ JS มีการวิเคราะห์ความเข้าใจเกี่ยวกับธรรมชาติเชิงวัตถุของ JavaScript เพื่อนที่ต้องการเรียนรู้สามารถอ้างอิงได้ คัดลอกรหัสรหัสดังต่อไปนี้:
var obj = document.getElementById(ชื่อ);
ฟังก์ชั่น clickMe() {
การแจ้งเตือน (this.value);
this.value += !!!!;
การแจ้งเตือน (this.value);
-
var ActionBinder = function() {//กำหนดคลาส
-
ActionBinder.prototype.registerDOM = ฟังก์ชั่น (doms) {
this.doms = doms;//ลงทะเบียน doms
-
ActionBinder.prototype.registerAction = ฟังก์ชั่น (ตัวจัดการ) {
this.handlers = ตัวจัดการ;//ลงทะเบียนการกระทำ
-
ActionBinder.prototype.bind = ฟังก์ชั่น () {
this.doms.onclick = this.handlers
}//ลงทะเบียนการกระทำของ doms
var Binder = new ActionBinder();//สร้างคลาสใหม่ตามเมธอด ActionBinder
Binder.registerDOM(obj);
binder.registerAction(คลิกฉัน);
เครื่องผูก.bind();
เริ่มต้นด้วยโค้ดเชิงวัตถุที่เขียนด้วย js ขั้นแรกให้สร้างคลาส ActionBinder วิธีการเขียนก็คล้ายกับ java เนื่องจาก js นั้นใช้วัตถุ dom ของ html เพื่อดำเนินการเนื้อหาของ html registerDOM เพื่อลงทะเบียน dom ในคลาส ให้ใช้ pr ototype สร้างต้นแบบเพื่อการเรียกที่ง่ายดาย นอกจากนี้ยังมีการเพิ่มวิธีการลงทะเบียนเหตุการณ์ registerAction ซึ่งสร้างต้นแบบโดยใช้วิธีต้นแบบด้วย ในที่สุด การผูกการดำเนินการต้นแบบจะถูกนำมาใช้เพื่อผูก dom ที่ลงทะเบียนไว้และเหตุการณ์ที่ลงทะเบียนไว้ด้วยกัน ดำเนินการ
นี่คือข้อมูลโค้ด js ดั้งเดิม:
รหัส
คัดลอกรหัสรหัสดังต่อไปนี้:
<ร่างกาย>
<สคริปต์>
document.onload= ฟังก์ชัน(){
var obj = document.getElementById(ชื่อ);
obj.onclick = function(){การแจ้งเตือน(this.value);}
-
</สคริปต์>
<ประเภทอินพุต=ข้อความ id=ชื่อ />
</ร่างกาย>
โค้ดยังบรรลุผลตามที่ต้องการ สำหรับแอปพลิเคชันง่ายๆ บางอย่างก็สามารถตอบสนองได้ แต่สำหรับโปรแกรมที่ซับซ้อนกว่านั้น การใช้จะยุ่งยากกว่าและการเขียนโค้ดจะยุ่งยากกว่า เช่น ข้อมูลโค้ด
รหัส
คัดลอกรหัสรหัสดังต่อไปนี้:
<ร่างกาย>
<สคริปต์>
document.onload= ฟังก์ชัน(){
obj1 = document.getElementById(name1);
obj2 = document.getElementById(name2);
obj3 = document.getElementById(name3);
obj1.onclick = ฟังก์ชั่น () {การแจ้งเตือน (this.value);}
obj2.onclick = ฟังก์ชั่น () {การแจ้งเตือน (this.value);}
obj3.onclick = ฟังก์ชั่น(){การแจ้งเตือน(this.value);}
-
</สคริปต์>
<ประเภทอินพุต=ข้อความ id=ค่าชื่อ1=111 />
<ประเภทอินพุต=ข้อความ id=ค่า name2=222 />
<ประเภทอินพุต=ข้อความ id=ค่าชื่อ3=333 />
</ร่างกาย>
หรือ
รหัส
คัดลอกรหัสรหัสดังต่อไปนี้:
<ร่างกาย>
<สคริปต์>
ฟังก์ชั่น clickMe(){alert(this.value);}
</สคริปต์>
<ประเภทอินพุต=ข้อความ id=ค่า name1=111 onclick=return clickMe() />
<ประเภทอินพุต=ข้อความ id=ค่า name2=222 onclick=return clickMe() />
<ประเภทอินพุต=ข้อความ id=name3 ค่า=333 onclick=return clickMe() />
</ร่างกาย>
แน่นอนว่ายังมีวิธีที่ง่ายกว่าในการเขียนโค้ดสองชิ้นข้างต้น แต่โดยรวมแล้วยังมีโค้ดที่ซ้ำซ้อนอีกมาก
การเขียนแบบเชิงวัตถุมีความยืดหยุ่นมากกว่า เช่น
รหัส
คัดลอกรหัสรหัสดังต่อไปนี้:
<ร่างกาย>
<สคริปต์>
window.onload = ฟังก์ชั่น () {
var objs = document.getElementsByTagName(อินพุต);
ฟังก์ชั่น clickMe() {
การแจ้งเตือน (this.value);
-
var ActionBinder = function() {//กำหนดคลาส
-
ActionBinder.prototype.registerDOM = ฟังก์ชั่น (doms) {
this.doms = doms;//ลงทะเบียน doms
-
ActionBinder.prototype.registerAction = ฟังก์ชั่น (ตัวจัดการ) {
this.handlers = ตัวจัดการ;//ลงทะเบียนการกระทำ
-
ActionBinder.prototype.bind = ฟังก์ชั่น () {
this.doms.onclick = this.handlers
}//ลงทะเบียนการกระทำของ doms
สำหรับ (var i=0;i<objs.length;i++){
var Binder = new ActionBinder();//สร้างคลาสใหม่ตามเมธอด ActionBinder
binder.registerDOM(objs[i]);
binder.registerAction(คลิกฉัน);
เครื่องผูก.bind();
-
-
</สคริปต์>
<ประเภทอินพุต=ข้อความ id=ค่าชื่อ=111/>
<ประเภทอินพุต=ข้อความ id=ค่า name1=222/>
<ประเภทอินพุต=ข้อความ id=ค่า name2=333/>
</ร่างกาย>
ด้วยวิธีนี้ จะไม่มีโค้ดที่ซ้ำซ้อน และตรรกะของ js จะค่อนข้างชัดเจน จำเป็นต้องมีการศึกษาการเชื่อมโยงของหลายเหตุการณ์