1. التحليل الافتتاحي
مرحباً جميعاً! في أول المادتين ، نتحدث بشكل أساسي عن كيفية تطوير المكونات الإضافية في "طريق JQuery" ، وكيفية تصميم مكون إضافي من خلال الجمع بين تصميم العملية وتصميم التفكير الموجهة للكائنات. كلتا الطريقتين لها إيجابياتهما وسلبياتهم للتعلم من نقاط القوة والضعف. Hehehe ، دعنا نتحدث أقل هراء ، ونصل إلى هذه النقطة. مباشرة على الاداءات الفعلية:
يمكنك رؤيته. هذا هو المكون القائمة المنسدلة. في تطورنا اليومي ، قد يجعلنا النظام في بعض الأحيان يشعر أنه ليس جميلًا جدًا ولديه وظائف محدودة ، مما يتسبب في ذلك
نموذج التجربة وتفاعل المستخدم ليسوا جيدًا ، لذا أحاكي اليوم حائزة الكالسين. دعنا نحللها بالتفصيل أدناه.
(2) ، تحليل الحالة
(1) أولاً ، حدد ما يفعله هذا البرنامج المساعد. دعنا نلقي نظرة على طريقة المكالمات في المكون الإضافي ووصف معلمة التكوين. الرمز التالي:
نسخة الكود كما يلي:
$ (function () {
var itemselector = new itemselector ($ ("#item-selector") ، {
CurrentText: "الرجاء اختيار العنصر" ،
أغراض: [
{
النص: "JavaScript" ،
القيمة: "JS" ،
معاق: "1"
} ،
{
النص: "CSS" ،
القيمة: "CSS" ،
معاق: "0"
} ،
{
النص: "HTML" ،
القيمة: "HTML" ،
معاق: "0"
}
]
الوضع: "0" ، // عندما يكون "1" ، يدعم مربع الاختيار تعدد وضع التحديد
التغيير: الوظيفة (القيمة) {
// ضع الكود الخاص بك هنا
}
}) ؛
itemselector.init () ؛
setTimeout (function () {
console.log (itemSelector.getCurrentValue ()) ؛ // اختبار للحصول على العنصر المحدد أولاً
} ، 2000) ؛
"var itemselector = new itemselector ()" يحتوي على معلمتين. الأول هو كائن عقدة DOM والثاني هو خيار المعلمة الإضافية. يمثل "CurrentText" الوصف النصي لمنطقة عرض النص في المكون الإضافي "itemselector".
"العناصر" عبارة عن صفيف يحتوي على خصائص العنصر "itemselector" ، بما في ذلك وصف النص ، وقيمة الخيار ، و "تعطيل" ، يمثل إدخال إدخال القائمة ، ويمثل 0 العرض ، ويمثل 1 لا يمكن عرضه.
يمثل "التغيير" وظيفة رد الاتصال عند تحديدها ، وسيتم إرجاع بيانات الخيار في شكل معلمات.
(2) ما هي الوظائف المعنية؟
العروض التي يمكن عرضها هي كما يلي:
العروض التي لا يمكن عرضها هي كما يلي:
الفرق بين الاثنين هو: لن يتم إرجاع بيانات الحالة غير المخصصة ، ولن يكون هناك أي تأثير عند الطفولة.
3) الرمز الكامل هو للتعلم. تم اختبار هذا الرمز ، بما في ذلك بنية الدليل والملفات ذات الصلة.
(1) ، HTML
نسخة الكود كما يلي:
<body>
<viv>
Big Bear {{BB}}-DXJ UI ------ itemselector
</div>
<viv>
<div id = "item-selector">
<viv>
<viv> </viv> <span> ↓ </span>
</div>
<viv>
<viv>
</div>
</div>
</div>
</div>
</body>
(2) ، CSS
نسخة الكود كما يلي:
/ * عنصر العناصر */
#SELCETER {
الهامش: 0 Auto ؛
العرض: 220 بكسل ؛
الفائض: مخفي.
الحدود: 2px الصلبة #CCC ؛
}
#عنصر العناصر. Title {
Border-Bottom: 1PX Solid #CCC ؛
الفائض: مخفي.
}
#عنصر العناصر. Title Div {
العرض: 190 بكسل ؛
الحدود: 0px ؛
اللون:#999 ؛
Font-Family: Arial ؛
حجم الخط: 14px ؛
الارتفاع: 28 بكسل ؛
ارتفاع الخط: 28 بكسل ؛
تعويم: اليسار.
المؤشر: مؤشر.
}
#SELCETER. TITLE SPAN {
العرض: كتلة ؛
الارتفاع: 30 بكسل ؛
ارتفاع الخط: 30 بكسل ؛
العرض: 29px ؛
تعويم: اليسار.
محاذاة النص: المركز ؛
الحدود اليسرى: 1 بكسل الصلبة #CCC ؛
المؤشر: مؤشر.
}
#SELTECTION. CONTENT {
العرض: 220 بكسل ؛
الفائض: مخفي.
}
#SELCETER. CONTENT .ITEMS {
الفائض: مخفي.
}
#عنصر العناصر. Content .Items Div {
حشو اليسار: 20 بكسل ؛
العرض: 200 بكسل ؛
الارتفاع: 32 بكسل ؛
Line-Leight: 32px ؛
Font-Family: "Microsoft Yahei" ؛
حجم الخط: 14px ؛
خط الرصيف: جريئة ؛
المؤشر: مؤشر.
}
.item-hover {
الخلفية:#3385ff ؛
اللون: #ffff ؛
}
(3) ، "itemselector.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 ().
} ؛
(رابعا) ، الملخص النهائي
(1) تحليل معقول للمتطلبات الوظيفية في طريقة التفكير الموجهة للكائن.
(2) ، قم بتنظيم منطق المكونات الخاصة بنا بطريقة الفصل.
(3) إعادة بناء الأمثلة المذكورة أعلاه باستمرار ، وكيفية إعادة بناء ذلك بشكل معقول؟ لا تصمم بشكل مفرط ، كن مرتاحًا. الطريقة الموصى بها هي الجمع بين تصميم العملية وتصميم التفكير الموجهة للكائنات.
(4) ستوسع المقالة التالية الوظائف ذات الصلة ، مثل "الوضع" الخاصية. عندما يكون "1" ، فإنه يدعم وضع مربع الاختيار المتعدد ، ولكنه الآن هو الوضع المنسدل الافتراضي.
انتهت هذه المقالة هنا أولاً ، وسنستمر في مناقشتها لاحقًا. آمل أن تتمكن من الاستمتاع بهذه السلسلة من المقالات.