1. التحليل الافتتاحي
في المادتين السابقتين ، تحدثنا بشكل أساسي عن كيفية تطوير المكونات الإضافية في jQuery ، وكيفية الجمع بين تصميم العملية وتصميم التفكير الموجهة للكائنات.
كيف تصمم مكونًا إضافيًا؟ تتمتع الطريقتان بمزاياهما وعيوبهما للتعلم من نقاط القوة والضعف في بعضهما البعض. هذه السلسلة من المقالات موجهة نحو التعلم ، ويقرر الجميع كيفية استخدام السيناريوهات المحددة. لذا ، بدءًا من هذه المقالة اليوم ، سنستخدم أمثلة لتطوير مكتبة المكونات الخاصة بنا من ضحلة إلى عميقة. ههههه ، قل أقل هراء ، وصلت إلى هذه النقطة. مباشرة على الاداءات الفعلية:
يمكنك رؤيته. هذا هو البرنامج المساعد Tab. قد نواجهها عندما نقوم بعمل تطبيقات من صفحة واحدة ("سبا") كل يوم. لنأخذ مثال اليوم.
نقوم ببناء نظام يعتمد على بنية BS ، والتي ستتألف من عدة وحدات ، وهي جميع مكونات نظام البناء. من خلال هذا المكون الإضافي ، يمكننا إدارة وحداتنا بفعالية
دعنا نحلل نموذج التجربة وتفاعل المستخدم بالتفصيل أدناه.
(2) ، تحليل الحالة
(1) أولاً ، حدد ما يفعله هذا البرنامج المساعد. دعنا نلقي نظرة على طريقة المكالمات في المكون الإضافي ووصف معلمة التكوين. الرمز التالي:
نسخة الكود كما يلي:
bigbear.ui.createtab ($ ("#tab") ، {
ButtonText: "إضافة الوحدة النمطية" ،
نتيجة: [
{
النص: "موجه المعالج" ،
عنوان URL: "Help.html" ،
showclose: "0" ،
الحالة: "1"
} ،
{
النص: "معلومات الطالب" ،
عنوان URL: "info.html" ،
Showclose: "1" ،
الحالة: "1"
} ،
{
النص: "تصنيف الطالب" ،
عنوان URL: "الفئة. html" ،
Showclose: "1" ،
الحالة: "1"
} ،
{
النص: "Big Bear {{bb}}" ،
عنوان URL: "BB.HTML" ،
Showclose: "1" ،
الحالة: "1"
} ،
{
النص: "وحدة اختبار بيتا" ،
URL: "Test.html" ،
Showclose: "1" ،
الحالة: "1"
}
]
}) ؛
"bigbear.ui.createtab" يحتوي على معلمتين. الأول هو كائن عقدة DOM والثاني هو خيار المعلمة الإضافية. يمثل "ButtonText" وصف النص لزر التشغيل في المكون الإضافي "Tab".
"النتيجة" هي صفيف يحتوي على خصائص عنصر علامة التبويب ، بما في ذلك وصف النص ، عنوان URL المستخدم لطلبه عند النقر فوق عنصر علامة التبويب ، "showclose" يمثل ما إذا كان خيار علامة التبويب يعرض زر الإغلاق.
تمثل "الحالة" حالة الخيار ، وهو على الحالة بشكل افتراضي ، وقد تكون هناك حالة مغلقة ، يتم التعبير عنها على أنها: 1-Open و 0-Open على التوالي.
(2) ما هي الوظائف المعنية؟
من خلال المعلمات الاختيارية ، يتم إنشاء إدخالات الخيارات ذات الصلة ديناميكيًا ، على النحو التالي:
نسخة الكود كما يلي:
bigbear.ui.createtab ($ ("#tab") ، {
ButtonText: "إضافة الوحدة النمطية" ،
نتيجة: [
{
النص: "تحليل رمز المصدر jQuery" ،
عنوان URL: "Help.html" ،
showclose: "0" ،
الحالة: "1"
} ،
{
النص: "Big Bear {{bb}}}" ،
عنوان URL: "BB.HTML" ،
Showclose: "1" ،
الحالة: "1"
}
]
}) ؛
التأثير على النحو التالي:
يمكنك إضافة خيارات الإدخالات وحذفها بحرية ، كما هو موضح في التأثير التالي:
تظهر الصورة أعلاه إحدى هذه المواقف. عندما لا توجد وحدة ، سيتم مطالب رسالة.
هذه هي الحالة الثانية ، ويمكن استعادة تلك التي تم حذفها سابقًا.
(3) ، رمز كامل للتعلم ، تم اختبار هذا الرمز ، بما في ذلك بنية الدليل والملفات ذات الصلة.
(1) ، HTML
نسخة الكود كما يلي:
<body>
<viv>
Big Bear {{BB}}-DXJ UI ------ Tab
</div>
<viv>
<div id = "tab">
<viv>
<viv>
+ إضافة معلومات الطالب
</div>
<viv>
<!-<viv> <span> x </span> صفحة الترحيب </div>
<viv> <span> x </span> إدارة المستخدم </div>
<viv> <span> x </span> BigBear </viv>->
</div>
</div>
<viv>
</div>
<viv>
<!-<viv>
<viv> <span> الاسم: </span> <input type = "text"/> </viv>
<viv> <span> ملاحظة: </span> <evideArea> </textarea> </viv>
</viv> <viv> <إدخال نوع = "زر" value = "حفظ"/> </div>
->
</div>
</div>
</div>
</body>
(2) ، رمز ملف CSS
نسخة الكود كما يلي:
.dxj-ui-hd {
الحشو: 0px ؛
الهامش: 0 Auto ؛
الهامش: 30 بكسل ؛
العرض: 780 بكسل ؛
الارتفاع: 60px ؛
ارتفاع الخط: 60 بكسل ؛
الخلفية: #3385ff ؛
اللون: #ffff ؛
Font-Family: "Microsoft Yahei" ؛
حجم الخط: 28 بكسل ؛
محاذاة النص: المركز ؛
خط الرصيف: جريئة ؛
}
.dxj-ui-bd {
الحشو: 0px ؛
الهامش: 0 Auto ؛
العرض: 778 بكسل ؛
الحشو أعلى: 30 بكسل ؛
حشوة القاع: 30 بكسل ؛
الفائض: مخفي.
الحدود: 1 بكسل Solid #3385ff ؛
}
.dxj-ui-bd #tab {
الحشو: 0px ؛
الهامش: 0 Auto ؛
العرض: 720 بكسل ؛
الفائض: مخفي.
}
.dxj-ui-bd #tab .title {
العرض: 720 بكسل ؛
الفائض: مخفي.
Border-Bottom: 2px Solid #3385ff ؛
}
.dxj-ui-bd #tab .title .adder {
العرض: 160 بكسل ؛
الارتفاع: 32 بكسل ؛
Line-Leight: 32px ؛
الخلفية: #DC143C ؛
اللون: #ffff ؛
Font-Family: "Microsoft Yahei" ؛
حجم الخط: 14px ؛
محاذاة النص: المركز ؛
خط الرصيف: جريئة ؛
تعويم: اليسار.
المؤشر: مؤشر.
}
.dxj-ui-bd #tab .title .items {
الارتفاع: 32 بكسل ؛
الهامش اليساري: 20 بكسل ؛
العرض: 540 بكسل ؛
الفائض: مخفي.
تعويم: اليسار.
}
.dxj-ui-bd #tab .title .items div {
الحشو: 0px ؛
الهامش اليساري: 10px ؛
العرض: 96 بكسل ؛
الارتفاع: 32 بكسل ؛
Line-Leight: 32px ؛
الخلفية: #3385ff ؛
اللون: #ffff ؛
Font-Family: Arial ؛
حجم الخط: 12 بكسل ؛
محاذاة النص: المركز ؛
الموقف: قريب
تعويم: اليسار.
المؤشر: مؤشر.
}
.dxj-ui-bd #tab .title .items div span.del {
العرض: 16 بكسل ؛
الارتفاع: 16 بكسل ؛
ارتفاع الخط: 16 بكسل ؛
العرض: كتلة ؛
الخلفية: #DC143C ؛
الموقف: مطلق ؛
اليمين: 0 ؛
أعلى: 0 ؛
المؤشر: مؤشر.
}
.dxj-ui-bd #tab. content {
العرض: 716px ؛
الحشو أعلى: 30 بكسل ؛
الفائض: مخفي.
الحدود: 2px الصلبة #3385ff ؛
أعلى الحدود: 0px ؛
MINIight: 130px ؛
محاذاة النص: المركز ؛
}
.dxj-ui-bd #TAB. جدول content {
الهامش: 0 Auto ؛
}
.dxj-ui-bd #tab. content div.c {
الحشو أعلى: 20 بكسل ؛
حشو اليسار: 20 بكسل ؛
الخلفية: #EEE ؛
الارتفاع: 140 بكسل ؛
}
.dxj-ui-bd #tab. content div.c .inpt-content {
الهامش: 10 بكسل ؛
Font-Family: Arial ؛
حجم الخط: 12 بكسل ؛
}
.dxj-ui-bd #tab .console-panel {
العرض: 716px ؛
الحشو أعلى: 20 بكسل ؛
حشوة القاع: 20 بكسل ؛
الفائض: مخفي.
الحدود: 2px الصلبة #3385ff ؛
أعلى الحدود: 0px ؛
Border-Bottom: 2px Solid #3385ff ؛
الخلفية: #fff ؛
العرض: لا شيء ؛
}
.نشيط {
خط الرصيف: جريئة ؛
}
(3) ، رمز JS هو كما يلي:
نسخة الكود كما يلي:
$ (function () {
bigbear.ui.createtab ($ ("#tab") ، {
ButtonText: "إضافة الوحدة النمطية" ،
نتيجة: [
{
النص: "موجه المعالج" ،
عنوان URL: "Help.html" ،
showclose: "0" ،
الحالة: "1"
} ،
{
النص: "معلومات الطالب" ،
عنوان URL: "info.html" ،
Showclose: "1" ،
الحالة: "1"
} ،
{
النص: "تصنيف الطالب" ،
عنوان URL: "الفئة. html" ،
Showclose: "1" ،
الحالة: "1"
} ،
{
النص: "Big Bear {{bb}}" ،
عنوان URL: "BB.HTML" ،
Showclose: "1" ،
الحالة: "1"
} ،
{
النص: "وحدة اختبار بيتا" ،
URL: "Test.html" ،
Showclose: "1" ،
الحالة: "1"
}
]
}) ؛
}) ؛
(وظيفة ($) {
فار وين = نافذة ؛
var bb = win.bigbear = win.bigbear || {
واجهة المستخدم: {}
} ؛
var ui = bb.ui = {} ؛
var tab = function (elem ، opts) {
this.Elem = elem ؛
this.Opts = opts ؛
} ؛
var tabproto = tab.prototype ؛
TabProto._DeleteItem = function (item) {
var that = هذا ؛
this.getelem ().
.eq (البند ["الفهرس"])
.fadeout (function () {
that._resetcontent () ؛
that._updatestatus (عنصر) ؛
that._triggerItem (العنصر ["index"] + 1) ؛
that.getElem ().
}) ؛
} ؛
TabProto._triggerItem = function (التالي) {
var nextStatus = this._getStatus (التالي) ؛
var heads = this.getElem ().
التالي = items.eq (التالي) ؛
if (next.size () && "1" == nextStatus) {// توجد عقدة DOM اللاحقة
next.trigger ("انقر") ؛
}
آخر{
items.eq (0) .trigger ("انقر") ؛
}
} ؛
TabProto._getStatus = function (index) {
var status = "" ؛
دولار.
if (index == item ["index"]) {
الحالة += عنصر ["الحالة"] ؛
العودة كاذبة
}
}) ؛
حالة العودة ؛
} ؛
tabproto._updatestatus = function (item) {
var status = item ["الحالة"] ؛
البند ["الحالة"] = ("1" == الحالة)؟ "0": "1" ؛
} ؛
tabproto.init = function () {
var that = هذا ؛
this.getelem ().
.text (" +" + this.getopts () ["buttontext"])
.on ("انقر" ، وظيفة () {
that._toggleconsolepanel (function () {
var root = that.getElem ().
دولار.
إذا ("0" == عنصر ["الحالة"]) {
var elem = $ ("<div style = 'float: left' ؛> </viv>")
.Data ("العنصر" ، البند)
.appendto (الجذر) ؛
$ ("<input type = 'radio' name = 'addmod' />").appendto(elem) ؛
$ ("<span> </span>"). النص (العنصر ["text"]). appendto (elem) ؛
}
}) ؛
if (root.find ("div"). size ()) {
$ ("<input type = 'button' value = 'add module' style = 'margin-left: 20px'/>")
.on ("انقر" ، وظيفة () {
var data = root.find ("input [type = radio]: exced"). data (). data ("item") ؛
that._updatestatus (البيانات) ؛
that.getElem ().
that.getElem ().
})
.appendto (الجذر) ؛
}
آخر{
root.text ("لا توجد عناصر لإضافتها بعد!") ؛
}
}) ؛
}) ؛
دولار.
البند ["الفهرس"] = i ؛
that._render (عنصر) ؛
}) ؛
this.getelem ().
.eq (0)
.trigger ("انقر") ؛ // افترض أنه يجب أن يكون هناك واحد ، وإلا فإن المكون الإضافي لن يكون له معنى كبير!
} ؛
tabproto._toggleconsolepanel = function (callback) {
this.getelem ().
$ .isfunction (Callback) && callback () ؛
}) ؛
} ؛
TabProto._ResetContent = function () {
this.getElem ().
} ؛
tabproto._setContent = function (html) {
this.getElem ().
} ؛
tabproto._getContent = function (url) {
إرجاع $ .ajax ({
عنوان URL: URL
}) ؛
} ؛
TabProto._render = دالة (البيانات) {
var that = هذا ؛
var item = $ ("<viv> </viv>")
.Text (البيانات ["النص"])
.on ("انقر" ، وظيفة () {
that._setCurrent (البيانات ["الفهرس"]) ؛
that._getContent (Data ["url"]). تم (الوظيفة (النتيجة) {
that._setContent (النتيجة) ؛
})
.fail (function () {
رمي خطأ جديد ("خطأ صافي!") ؛
}) ؛
})
.appendto (this.getElem ().
إذا ("1" == بيانات ["showclose"]) {
$ ("<span class = 'del'> x </span>")
.on ("انقر" ، وظيفة () {
if (win.confirm ("هل يتم حذف هذا العنصر؟")) {
that._deleteitem (data) ؛
العودة كاذبة // توقف الفقاعات
}
})
.appendto (البند) ؛
}
} ؛
tabproto._setcurrent = function (index) {
var heads = this.getElem ().
items.eq (index) .addClass ("نشط") ؛
var contents = this.getElem (). find (".
المحتويات.
} ؛
tabproto.getelem = function () {
إرجاع هذا.
} ؛
tabproto.getopts = function () {
إرجاع هذا.
} ؛
ui.createTab = function (elem ، opts) {
var tab = علامة تبويب جديدة (elem ، opts) ؛
tab.init () ؛
علامة التبويب إرجاع ؛
} ؛
}) (jQuery) ؛
(رابعا) ، الملخص النهائي
(1) تحليل معقول للمتطلبات الوظيفية في طريقة التفكير الموجهة للكائن.
(2) ، قم بتنظيم منطق المكونات الخاصة بنا بطريقة الفصل.
(3) إعادة بناء الأمثلة المذكورة أعلاه باستمرار ، وكيفية إعادة بناء ذلك بشكل معقول؟ لا تصمم بشكل مفرط ، كن مرتاحًا. الطريقة الموصى بها هي الجمع بين تصميم العملية وتصميم التفكير الموجهة للكائنات.
(4) فكر فيما إذا كان يمكن تصنيف الخيارات الموجودة في علامة التبويب بشكل مستقل في فئات منفصلة في المثال أعلاه؟ على سبيل المثال ، "عنصر" ، ثم كيفية تعديل فئة "علامة التبويب"؟ فكر في الأسئلة. . .
ما سبق هو المحتوى الكامل لهذه المقالة. سوف نستمر في تحسين هذا المكون الإضافي في المستقبل. إذا أعجبك هذا المقال ، فالرجاء إعطائي إبهامًا.