المبتدئين الذين يتعلمون JS لديهم تحليل لفهمهم لطبيعة JavaScript الموجهة للكائنات ويمكن للأصدقاء الذين يحتاجون إلى التعلم الرجوع إليها. انسخ رمز الكود كما يلي:
var obj = document.getElementById(name);
وظيفة كليك مي () {
تنبيه (هذه القيمة)؛
this.value += !!!!;
تنبيه (هذه القيمة)؛
}
var ActionBinder = function() {// تحديد فئة
}
ActionBinder.prototype.registerDOM = function(doms) {
this.doms = doms;// سجل doms
}
ActionBinder.prototype.registerAction = function(handlers) {
this.handlers = Handlers;// سجل إجراءً
}
ActionBinder.prototype.bind = function() {
this.doms.onclick = this.handlers
}// سجل إجراء doms
var binder = new ActionBinder();// أنشئ فئة جديدة وفقًا لطريقة ActionBinder
binder.registerDOM(obj);
binder.registerAction(clickMe);
binder.bind();
لنبدأ بقطعة من التعليمات البرمجية الموجهة للكائنات المكتوبة بلغة js. أولاً، قم بإنشاء فئة ActionBinder تشبه طريقة الكتابة أيضًا طريقة Java؛ لأن js يعتمد على كائن html لتشغيل محتوى html RegisterDOM لتسجيل dom في الفصل، استخدم pr نماذج أولية لطريقة الاتصال السهل؛ بالإضافة إلى ذلك، تمت إضافة طريقة لتسجيل الأحداث، وهي RegisterAction، والتي تم تصميمها أيضًا باستخدام طريقة النموذج الأولي؛ وأخيرًا، يتم استخدام ربط الإجراء النموذجي لربط dom المسجل والأحداث المسجلة معًا ينفذ.
إليك مقتطف كود js الأصلي:
شفرة
انسخ رمز الكود كما يلي:
<الجسم>
<النص البرمجي>
document.onload= function(){
var obj = document.getElementById(name);
obj.onclick = function(){alert(this.value);}
}
</script>
<نوع الإدخال = معرف النص = الاسم />
</الجسم>
يحقق الكود أيضًا التأثير المطلوب بالنسبة لبعض التطبيقات البسيطة، ويمكن تحقيق التأثير المذكور أعلاه، ولكن بالنسبة لبعض البرامج الأكثر تعقيدًا، يكون تطبيقه أكثر صعوبة ويكون الكود أكثر تعقيدًا في الكتابة، مثل مقتطفات التعليمات البرمجية
شفرة
انسخ رمز الكود كما يلي:
<الجسم>
<النص البرمجي>
document.onload= function(){
obj1 = document.getElementById(name1);
obj2 = document.getElementById(name2);
obj3 = document.getElementById(name3);
obj1.onclick = function(){alert(this.value);}
obj2.onclick = function(){alert(this.value);}
obj3.onclick = function(){alert(this.value);}
}
</script>
<نوع الإدخال = معرف النص = قيمة الاسم 1 = 111 />
<نوع الإدخال=معرف النص=قيمة الاسم2=222 />
<نوع الإدخال=معرف النص=قيمة الاسم3=333 />
</الجسم>
أو
شفرة
انسخ رمز الكود كما يلي:
<الجسم>
<النص البرمجي>
وظيفة ClickMe(){alert(this.value);}
</script>
<نوع الإدخال = معرف النص = قيمة الاسم 1 = 111 عند النقر = إرجاع ClickMe () />
<نوع الإدخال = معرف النص = قيمة الاسم 2 = 222 عند النقر = إرجاع ClickMe () />
<نوع الإدخال = معرف النص = قيمة الاسم 3 = 333 عند النقر = إرجاع ClickMe () />
</الجسم>
بالطبع، هناك طرق أخرى أبسط لكتابة الجزأين المذكورين أعلاه من التعليمات البرمجية، ولكن بشكل عام لا يزال هناك الكثير من التعليمات البرمجية الزائدة عن الحاجة.
إنها أكثر مرونة في الكتابة بطريقة موجهة للكائنات، مثل
شفرة
انسخ رمز الكود كما يلي:
<الجسم>
<النص البرمجي>
نافذة.onload = وظيفة () {
var objs = document.getElementsByTagName(input);
وظيفة كليك مي () {
تنبيه (هذه القيمة)؛
}
var ActionBinder = function() {// تحديد فئة
}
ActionBinder.prototype.registerDOM = function(doms) {
this.doms = doms;// سجل doms
}
ActionBinder.prototype.registerAction = function(handlers) {
this.handlers = Handlers;// سجل إجراءً
}
ActionBinder.prototype.bind = function() {
this.doms.onclick = this.handlers
}// سجل إجراء doms
for (var i=0;i<objs.length;i++){
var binder = new ActionBinder();// أنشئ فئة جديدة وفقًا لطريقة ActionBinder
binder.registerDOM(objs[i]);
binder.registerAction(clickMe);
binder.bind();
};
}
</script>
<نوع الإدخال=معرف النص=قيمة الاسم=111/>
<نوع الإدخال=معرف النص=قيمة الاسم1=222/>
<نوع الإدخال=معرف النص=قيمة الاسم2=333/>
</الجسم>
بهذه الطريقة، لن يكون هناك أي تعليمات برمجية زائدة عن الحاجة، وسيكون منطق JS واضحًا نسبيًا ويحتاج إلى دراسة ربط الأحداث المتعددة.