1. التحليل الافتتاحي
ماذا نقول في هذا المقال اليوم؟ هههههههههههههههههههههههههههههههههه ثم أعيدنا بناء أوجه القصور في المقالة السابقة وقمنا بتحليلها خطوة بخطوة بطريقة سهلة الفهم ، حتى يتمكن الجميع من تحسين خطوة بخطوة. أقل هراء ، وصلت إلى هذه النقطة. دعنا أولاً نراجع السابق
رمز جزء JS كما يلي:
نسخة الكود كما يلي:
وظيفة itemselector (elem ، opts) {
this.Elem = elem ؛
this.Opts = opts ؛
} ؛
var isProto = itemselector.prototype ؛
isProto.getElem = function () {
إرجاع هذا.
} ؛
isProto.getopts = function () {
إرجاع هذا.
} ؛
/* البيانات manip*/
isproto._setcurrent = function (current) {
this.getopts () ["current"] = current ؛
} ؛
isProto.getCurrentValue = function (current) {
إرجاع this.getopts () ["الحالي"] ؛
} ؛
/* البيانات manip*/
isProto.init = function () {
var that = هذا ؛
this.getopts () ["current"] = null ؛ // مؤشر البيانات
this._setItemValue (this.getopts () ["CurrentText"]) ؛
var itemselem = that.getElem ().
this.getelem ().
itemselem.toggle () ؛
}) ؛
this.getelem (). find (".
itemselem.toggle () ؛
}) ؛
$ .each (this.getopts () ["العناصر"] ، الدالة (i ، العنصر) {
العنصر ["id"] = (New Date (). getTime ()). toString () ؛
that._render (عنصر) ؛
}) ؛
} ؛
isProto._SetItemValue = function (value) {
this.getelem ().
} ؛
isProto._render = دالة (عنصر) {
var that = هذا ؛
var itemElem = $ ("<viv> </viv>")
.Text (عنصر ["نص"])
.attr ("id" ، item ["id"]) ؛
إذا ("0" == عنصر ["تعطيل"]) {
itemelem.on ("Click" ، function () {
var onchange = that.getopts () ["التغيير"] ؛
that.getElem ().
that._setitemvalue (العنصر ["النص"]) ؛
that._setcurrent (العنصر) ؛
OnChange && onchange (item) ؛
})
.mouseover (function () {
$ (this) .addClass ("item-hover") ؛
})
.mouseout (function () {
$ (هذا) .removeclass ("item-hover") ؛
}) ؛
}
آخر{
itemelem.css ("color" ، "#ccc"). on ("click" ، function () {
that.getElem ().
that._setitemvalue (العنصر ["النص"]) ؛
}) ؛
}
itemelem.appendto (this.getElem ().
} ؛
يظهر التأثير في الشكل أدناه:
أ) -------- حالة غير قابلة للتشغيل
ب) ------ الدولة القابلة للتشغيل
(2) افتح أفكارك وإعادة البناء
ليس من الصعب عليك أن ترى من الكود أنه قد تم تنظيمه بشكل فعال بطريقة موجهة نحو الكائن من خلال خصائص بناء الجملة في "JS" ، والتي هي أفضل بكثير من طريقة التنظيم القائمة على العملية ، لكنك ستظل تجد العديد من أوجه القصور.
(1) هناك الكثير من التكرارات فيه
(2) تقسيم المسؤوليات غير واضح
(3) العملية غير كاملة
لقد تم إعادة تمهيدنا بشكل فعال بناءً على النقاط المذكورة أعلاه. أولاً ، نحتاج إلى فرز متطلبات هذا المكون ، والنقاط الوظيفية هي كما يلي:
(1) تهيئة مكون التكوين
نسخة الكود كما يلي:
$ (function () {
var itemselector = new itemselector ($ ("#item-selector") ، {
CurrentText: "الرجاء اختيار العنصر" ،
أغراض: [
{
النص: "JavaScript" ،
القيمة: "JS" ،
معاق: "1"
} ،
{
النص: "CSS" ،
القيمة: "CSS" ،
معاق: "0"
} ،
{
النص: "HTML" ،
القيمة: "HTML" ،
معاق: "0"
}
]
}) ؛
itemselector.init () ؛
}) ؛
هذا الرمز واضح للغاية ولا يتطلب أي تعديلات ، ولكن يمكنك تمديد الوظائف بناءً على التكوين أعلاه ، مثل إضافة عنصر تكوين "وضع" لدعم خيارات متعددة. على سبيل المثال: "وضع فحص مربع الاختيار".
التالي هو إكمال منطق التهيئة ، على النحو التالي:
نسخة الكود كما يلي:
isProto.init = function () {
var that = هذا ؛
this.getopts () ["current"] = null ؛ // مؤشر البيانات
this._setItemValue (this.getopts () ["CurrentText"]) ؛
var itemselem = that.getElem ().
this.getelem ().
itemselem.toggle () ؛
}) ؛
this.getelem (). find (".
itemselem.toggle () ؛
}) ؛
$ .each (this.getopts () ["العناصر"] ، الدالة (i ، العنصر) {
العنصر ["id"] = (New Date (). getTime ()). toString () ؛
that._render (عنصر) ؛
}) ؛
} ؛
يحتوي هذا الرمز على العديد من المشكلات ، والمسؤوليات غير الواضحة ، ويحتوي منطق التهيئة على تطبيقات مفصلة للنقاط الوظيفية.
استمر في رؤية رمز التقديم:
نسخة الكود كما يلي:
isProto._render = دالة (عنصر) {
var that = هذا ؛
var itemElem = $ ("<viv> </viv>")
.Text (عنصر ["نص"])
.attr ("id" ، item ["id"]) ؛
إذا ("0" == عنصر ["تعطيل"]) {
itemelem.on ("Click" ، function () {
var onchange = that.getopts () ["التغيير"] ؛
that.getElem ().
that._setitemvalue (العنصر ["النص"]) ؛
that._setcurrent (العنصر) ؛
OnChange && onchange (item) ؛
})
.mouseover (function () {
$ (this) .addClass ("item-hover") ؛
})
.mouseout (function () {
$ (هذا) .removeclass ("item-hover") ؛
}) ؛
}
آخر{
itemelem.css ("color" ، "#ccc"). on ("click" ، function () {
that.getElem ().
that._setitemvalue (العنصر ["النص"]) ؛
}) ؛
}
itemelem.appendto (this.getElem ().
} ؛
المشكلة واضحة. تم العثور على عمليات قابلة للتكرار ، ويجب تنفيذ التجريد المعقول ، وقد تم تحقيق الغرض من إعادة الاستخدام.
تتضمن عملية البناء بأكملها التهيئة ، وتقديم (ربط الأحداث) ، وطرق تشغيل البيانات ذات الصلة والطرق المساعدة لعمليات DOM.
لتلخيص ، بعد الفرز البسيط ، يجب أن نضع الغرض التشغيلي للوظيفة وتعيين المهمة للخط الرئيسي للعملية ، كل منها سيكون مسؤولاً عن مسؤولياتها.
لذا فإن الغرض من إعادة الإعمار لدينا واضح للغاية ، صحيح! هو تجريد النقاط الوظيفية وتقسيم المسؤوليات مع تقسيم ودود ، فكيف نحقق ذلك؟
الخطوة الأولى هي إنشاء وظائف العملية: (واجهة الطريقة)
نسخة الكود كما يلي:
isProto.init = function () {
// ضع الرمز هنا!
} ؛
isProto._render = function () {
// ضع الرمز هنا!
} ؛
الجزء 2: إنشاء واجهة طريقة مجردة:
نسخة الكود كما يلي:
isproto._fnitemselectordelegateHandler = function () {
// ضع الرمز هنا!
} ؛
isproto._fntriggerhandler = function () {
// ضع الرمز هنا!
} ؛
isproto._addorremoveclass = function () {
// ضع الرمز هنا!
} ؛
الخطوة الثالثة هي إنشاء واجهة تشغيل البيانات:
نسخة الكود كما يلي:
isproto._setcurrent = function () {
// ضع الرمز هنا!
} ؛
isProto._getCurrent = function () {
// ضع الرمز هنا!
} ؛
هناك أيضًا بعض الإشارات إلى رمز المصدر الكامل أدناه ، والتي هي مجرد الفكرة المذكورة هنا.
(3) ، الرمز الكامل مخصص للتعلم ، تم اختبار هذا الرمز
نسخة الكود كما يلي:
وظيفة itemselector (elem ، opts) {
this.Elem = elem ؛
this.Opts = opts ؛
this.current = -1 ؛ // مؤشر البيانات
} ؛
var isProto = itemselector.prototype ؛
/* getter API*/
isProto.getElem = function () {
إرجاع هذا.
} ؛
isProto.getopts = function () {
إرجاع هذا.
} ؛
isProto._getCurrent = function () {
إرجاع هذا.
} ؛
/* getter API*/
/* البيانات manip*/
isproto._setcurrent = function (current) {
this.current = الحالي ؛
} ؛
isProto._SetIteMtext = function (text) {
this.getElem ().
} ؛
/* البيانات manip*/
/ * تحديث في 2015 1/31 23:38 */
isproto._fntriggerhandler = function (الفهرس ، النص ، القيمة) {
if (this._isdisabled (value)) {
الفهرس = -1 ؛
text = this.getopts () ["CurrentText"] ؛
}
this._setitemtext (text) ؛
this._setcurrent (index) ؛
this.getElem ().
} ؛
isproto._addorremoveclass = function (elem ، classname ، addis) {
إذا (addis) {
elem.addclass (className) ؛
}
آخر{
elem.removeclass (className) ؛
}
} ؛
isproto._fnitemselectordelegateHandler = function () {
var that = هذا ؛
this.getelem (). on ("Click" ، "[data-toggle]" ، function () {
that.getElem ().
}) ؛
} ؛
isproto._isdisabled = function (value) {
العودة ("1" == القيمة)؟ صحيح: خطأ
} ؛
/ * تحديث في 2015 1/31 23:38 */
isProto.init = function () {
var that = هذا ؛
this._fnitemselectordlegateHandler () ؛
$ .each (this.getopts () ["العناصر"] ، الدالة (i ، العنصر) {
البند ["الفهرس"] = i ؛
that._render (عنصر) ؛
}) ؛
this._fntriggerHandler (this._getCurrent () ، this.getopts () ["CurrentText"] ، "1") ؛
} ؛
isProto._render = دالة (عنصر) {
var that = هذا ؛
var itemElem = $ ("<viv> </viv>"). النص (العنصر ["text"]). attr ("id" ، item ["index"]) ؛
var activEclass = ("0" == العنصر ["معطل"])؟ "البند المضي قدماً":
itemelem.on ("Click" ، function () {
that._fntriggerhandler (العنصر ["index"] ، العنصر ["text"] ، العنصر ["تعطيل"]) ؛
})
.mouseover (function () {
that._addorremoveClass ($ (this) ، activEclass ، true) ؛
})
.mouseout (function () {
that._addorremoveClass ($ (هذا) ، activEclass ، false) ؛
}) ؛
itemelem.appendto (this.getElem ().
} ؛
(رابعا) ، الملخص النهائي
(1) تحليل معقول للمتطلبات الوظيفية في طريقة التفكير الموجهة للكائن.
(2) ، قم بتنظيم منطق المكونات الخاصة بنا بطريقة الفصل.
(3) إعادة بناء الأمثلة المذكورة أعلاه باستمرار ، وكيفية إعادة بناء ذلك بشكل معقول؟ لا تصمم بشكل مفرط ، كن مرتاحًا. الطريقة الموصى بها هي الجمع بين تصميم العملية وتصميم التفكير الموجهة للكائنات.
(4) ستوسع المقالة التالية الوظائف ذات الصلة ، مثل "الوضع" الخاصية. عندما يكون "1" ، فإنه يدعم وضع مربع الاختيار المتعدد ، ولكنه الآن هو الوضع المنسدل الافتراضي.
النظر إلى مقالتي ، هل هو أفضل بكثير من الكود السابق؟ يجب على الأصدقاء التفكير في ومزيد من المشاريع بأنفسهم ومحاولة جعل رمزهم أكثر منطقية.