1. التحليل الافتتاحي
مرحبًا ، هل ما زلت تتذكر المقال السابق؟ إنه يخبر بشكل أساسي كيف ينظم المكون الإضافي "Tab" رمزًا ويقوم بتنفيذه ، وكيف يتم دمج تصميم العملية مع تصميم التفكير الموجهة للكائنات
كيف تصمم مكونًا إضافيًا؟ تتمتع الطريقتان بمزاياهما وعيوبهما للتعلم من نقاط القوة والضعف في بعضهما البعض. هذه السلسلة من المقالات موجهة نحو التعلم ، ويقرر الجميع كيفية استخدام السيناريوهات المحددة. من هذه المقالة ، ما زلنا نركز على مثيل "علامة التبويب".
الاستمرار في توسيع الوظائف ذات الصلة. ههههه ، قل أقل هراء ، وصلت إلى هذه النقطة. مباشرة على الاداءات الفعلية:
لقد رأيت ذلك ، وتم إضافة ميزة جديدة. إذا كان عدد إدخالات معلومات تكوين الوحدة النمطية الخاصة بنا عندما نتم تهيئة أكبر مما نحدده ، فسيتم عرضه في "المزيد من الوحدات"
في القائمة الخفية لعناصر التشغيل ، تم تعديل تكوين معلمة التهيئة لدينا حديثًا ، مثل "DisplayMax" إضافي لتحديد عدد الإدخالات في التهيئة ، وسمات العنصر ، "الحالة"
أثناء التهيئة ، لا يلزم تكوين. يتم إنشاء التكوين الديناميكي في البرنامج ، مما يزيد من مرونة البرنامج. دعنا نحللها بالتفصيل أدناه.
(2) ، تحليل الحالة
(1) أولاً ، حدد ما يفعله هذا البرنامج المساعد. دعنا نلقي نظرة على طريقة المكالمات في المكون الإضافي ووصف معلمة التكوين. الرمز التالي:
نسخة الكود كما يلي:
{
ButtonText: "إضافة الوحدة النمطية" ،
نتيجة: [
{
النص: "موجه المعالج" ،
عنوان URL: "Help.html" ،
showclose: "0"
} ،
{
النص: "معلومات الطالب" ،
عنوان URL: "info.html" ،
showclose: "1"
} ،
{
النص: "تصنيف الطالب" ،
عنوان URL: "الفئة. html" ،
showclose: "1"
} ،
{
النص: "Big Bear {{bb}}" ،
عنوان URL: "BB.HTML" ،
showclose: "1"
} ،
{
النص: "وحدة اختبار بيتا" ،
URL: "Test.html" ،
showclose: "1"
} ،
{
النص: "ثلاثة رجال دهنيون" ،
عنوان URL: "Help.html" ،
showclose: "1"
} ،
{
النص: "أربعة رجال أصلع" ،
عنوان URL: "Help.html" ،
showclose: "1"
}
]
DisplayMax: 5 // أقصى عناصر العرض
}
"bigbear.ui.createtab" يحتوي على معلمتين. الأول هو كائن عقدة DOM والثاني هو خيار المعلمة الإضافية. يمثل "ButtonText" وصف النص لزر التشغيل في المكون الإضافي "Tab".
"النتيجة" هي صفيف يحتوي على خصائص عنصر علامة التبويب ، بما في ذلك وصف النص ، عنوان URL المستخدم لطلبه عند النقر فوق عنصر علامة التبويب ، "showclose" يمثل ما إذا كان خيار علامة التبويب يعرض زر الإغلاق.
تتم إزالة "الحالة" أيضًا أثناء التهيئة ولا تتطلب التكوين ، ويتم إنشاء التكوين ديناميكيًا في البرنامج. قد تكون هناك حالة مغلقة ، والتي يتم التعبير عنها على النحو التالي: عرض 1-default ، وحالة 0 ، و 2-العدد الافتراضي للإدخالات.
(2) يتم تقديم الوظائف في خطوات
1 --- ، قم بتهيئة المكون الإضافي من خلال المعلمات الاختيارية:
نسخة الكود كما يلي:
$ (function () {
bigbear.ui.createtab ($ ("#tab") ، {
ButtonText: "إضافة الوحدة النمطية" ،
نتيجة: [
{
النص: "موجه المعالج" ،
عنوان URL: "Help.html" ،
showclose: "0"
} ،
{
النص: "معلومات الطالب" ،
عنوان URL: "info.html" ،
showclose: "1"
} ،
{
النص: "تصنيف الطالب" ،
عنوان URL: "الفئة. html" ،
showclose: "1"
} ،
{
النص: "Big Bear {{bb}}" ،
عنوان URL: "BB.HTML" ،
showclose: "1"
} ،
{
النص: "وحدة اختبار بيتا" ،
URL: "Test.html" ،
showclose: "1"
} ،
{
النص: "ثلاثة رجال دهنيون" ،
عنوان URL: "Help.html" ،
showclose: "1"
} ،
{
النص: "أربعة رجال أصلع" ،
عنوان URL: "Help.html" ،
showclose: "1"
}
]
DisplayMax: 5 // أقصى عناصر العرض
}) ؛
}) ؛
2 --- ، قم بإعداد وإكمال وقت ملزمة للوقت ومنطق الأعمال ذات الصلة ، مثل التحقق من عدد الإدخالات أثناء التهيئة.
نسخة الكود كما يلي:
tabproto.init = function () {
if (this._isemptyresult ()) {
this._setContent ("لا وحدة بعد!") ؛
}
var that = هذا ؛
this.getelem ().
.text (" +" + this.getopts () ["buttontext"])
.on ("انقر" ، وظيفة () {
that.getelem ().
that._renderconsolepanel ("0") ؛
}) ؛
}) ؛
دولار.
if (that._isdisplaymax (i + 1)) {
that._saveorupdatestatus (عنصر ، "1") ؛
}
آخر{
that._saveorupdatestatus (البند ، "2") ؛
}
that._render (عنصر) ؛
}) ؛
if (! that._isdisplaymax (this.getopts () ["result"]. الطول)) {
this.getelem ().
$ (this) .find (". tag"). on ("Click" ، function () {
var root = $ (this) .next () ؛
root.empty () ؛
دولار.
$ ("<viv> </viv>"). النص (البيانات ["النص"])
.on ("انقر" ، وظيفة () {
if (that._getItemListbyStatus ("1"). الطول <that.getopts () ["DisplayMax"]) {
that.getelem ().
that._saveorupDateStatus (البيانات ، "1") ؛
}) ؛
}
آخر{
التنبيه ("لا يمكن إضافة وحدات ، فهو حاليًا هو الحد الأقصى للرقم!") ؛
}
})
.appendto (الجذر) ؛
}) ؛
root.toggle () ؛
}) ؛
}) ؛
}
this.getelem ().
.eq (0)
.trigger ("انقر") ؛ // افترض أنه يجب أن يكون هناك واحد ، وإلا فإن المكون الإضافي لن يكون له معنى كبير!
} ؛
3 --- ، تبديل التبديل وعمليات تقديم محتوى البيانات.
نسخة الكود كما يلي:
tabproto._setcurrent = function (index) {
var heads = this.getElem ().
items.eq (index) .addClass ("نشط") ؛
var contents = this.getElem (). find (".
المحتويات.
} ؛
نسخة الكود كما يلي:
item.on ("Click" ، function () {
that._setcurrent ($ (this) .index ()) ؛
that._getContent (Data ["url"]). تم (الوظيفة (النتيجة) {
that._setContent (النتيجة) ؛
})
.fail (function () {
رمي خطأ جديد ("خطأ صافي!") ؛
}) ؛
})
نسخة الكود كما يلي:
tabproto._setContent = function (html) {
this.getElem ().
} ؛
tabproto._getContent = function (url) {
إرجاع $ .ajax ({
عنوان URL: URL
}) ؛
} ؛
4 --- ، لا تتضمن طريقة تشغيل البيانات الأساسية الأساسية DOM.
نسخة الكود كما يلي:
/ * تحديث وقت 2015 1/26 15:36 */
tabproto._isdisplaymax = الدالة (الحجم) {
var displaymax = this.getopts () ["displayMax"] || 5 ؛
العودة (الحجم <= displayMax)؟ صحيح: خطأ
} ؛
tabproto._isemptyresult = function () {
if (! this.getopts () ["النتيجة"]. الطول) {
العودة كاذبة
}
العودة صحيح.
} ؛
tabproto._saveorupDateStatus = function (العنصر ، الحالة) {
البند ["الحالة"] = الحالة ؛
} ؛
tabproto._getitemlistbystatus = function (الحالة) {
var list = [] ؛
var result = this.getopts () ["result"] ؛
$ .each (النتيجة ، الوظيفة (i ، العنصر) {
إذا (الحالة == عنصر ["الحالة"]) {
list.push (item) ؛
}
}) ؛
قائمة العودة
} ؛
tabproto._getStatusByIndex = function (index) {
حالة var = null ؛
var result = this.getopts () ["result"] ؛
$ .each (النتيجة ، الوظيفة (i ، العنصر) {
if (index == item ["index"]) {
الحالة = العنصر ["الحالة"] ؛
}
}) ؛
حالة العودة ؛
} ؛
(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>
<viv>
<div> المزيد من الوحدات النمطية </div>
<viv>
</div>
</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 .Wore-mod {
الفائض: مخفي.
الحدود: 1 بكسل Solid #DC143C ؛
العرض: 70 بكسل ؛
الموقف: مطلق ؛
اليمين: 0 ؛
يمين الهامش: 6px ؛
العرض: لا شيء ؛
}
.dxj-ui-bd #TAB .Title .Wore-mod .tag {
الارتفاع: 32 بكسل ؛
Line-Leight: 32px ؛
العرض: 70 بكسل ؛
الخلفية: #DC143C ؛
اللون: #ffff ؛
Font-Family: Arial ؛
حجم الخط: 12 بكسل ؛
محاذاة النص: المركز ؛
المؤشر: مؤشر.
}
.dxj-ui-bd #TAB .Title .Wore-Mod .Mods {
الفائض: مخفي.
العرض: 70 بكسل ؛
العرض: لا شيء ؛
}
.dxj-ui-bd #tab .title .Wore-mod .Mods div {
الارتفاع: 24 بكسل ؛
Line-Leight: 24px ؛
العرض: 62 بكسل ؛
Font-Family: Arial ؛
حجم الخط: 12 بكسل ؛
المؤشر: مؤشر.
حشو اليسار: 10 بكسل ؛
}
.dxj-ui-bd #tab .title .items {
الارتفاع: 32 بكسل ؛
العرض: 480 بكسل ؛
الفائض: مخفي.
تعويم: اليسار.
}
.dxj-ui-bd #tab .title .items div {
الحشو: 0px ؛
الهامش اليساري: 10px ؛
العرض: 84px ؛
الارتفاع: 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 ، BigBear.JS
نسخة الكود كما يلي:
(وظيفة ($) {
فار وين = نافذة ؛
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 ؛
/ * تحديث وقت 2015 1/26 15:36 */
tabproto._isdisplaymax = الدالة (الحجم) {
var displaymax = this.getopts () ["displayMax"] || 5 ؛
العودة (الحجم <= displayMax)؟ صحيح: خطأ
} ؛
tabproto._isemptyresult = function () {
if (! this.getopts () ["النتيجة"]. الطول) {
العودة كاذبة
}
العودة صحيح.
} ؛
tabproto._saveorupDateStatus = function (العنصر ، الحالة) {
البند ["الحالة"] = الحالة ؛
} ؛
tabproto._getitemlistbystatus = function (الحالة) {
var list = [] ؛
var result = this.getopts () ["result"] ؛
$ .each (النتيجة ، الوظيفة (i ، العنصر) {
إذا (الحالة == عنصر ["الحالة"]) {
list.push (item) ؛
}
}) ؛
قائمة العودة
} ؛
tabproto._getStatusByIndex = function (index) {
حالة var = null ؛
var result = this.getopts () ["result"] ؛
$ .each (النتيجة ، الوظيفة (i ، العنصر) {
if (index == item ["index"]) {
الحالة = العنصر ["الحالة"] ؛
}
}) ؛
حالة العودة ؛
} ؛
tabproto._renderConsolePanel = function (الحالة) {
var that = هذا ؛
var root = that.getElem ().
this._resetconsolepanel () ؛
دولار.
var elem = $ ("<div style = 'float: left' ؛> </viv>"). appendto (root) ؛
$ ("<input type = 'radio' name = 'addmod' />")
.Data ("العنصر" ، البند)
.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]: checked"). data ("item") ؛
if (that._getItemListbyStatus ("1"). الطول <that.getopts () ["DisplayMax"]) {
that.getelem ().
that._saveorupDateStatus (البيانات ، "1") ؛
})
.trigger ("انقر") ؛
}
آخر{
that._saveorupdatestatus (البيانات ، "2") ؛
}
that.getElem ().
})
.appendto (الجذر) ؛
}
آخر{
root.text ("لا توجد عناصر لإضافتها بعد!") ؛
}
} ؛
/ * تحديث وقت 2015 1/26 15:36 */
tabproto._setcurrent = function (index) {
var heads = this.getElem ().
items.eq (index) .addClass ("نشط") ؛
var contents = this.getElem (). find (".
المحتويات.
} ؛
tabproto.getelem = function () {
إرجاع هذا.
} ؛
tabproto.getopts = function () {
إرجاع هذا.
} ؛
TabProto._ResetContent = function () {
this.getElem ().
} ؛
tabproto._setContent = function (html) {
this.getElem ().
} ؛
tabproto._getContent = function (url) {
إرجاع $ .ajax ({
عنوان URL: URL
}) ؛
} ؛
tabproto._deleteitem = function (elem) {
var that = هذا ؛
this.getelem ().
.eq (elem.index ())
.fadeout (function () {
that._resetcontent () ؛
that._saveorupdatestatus (elem.data ("item") ، "0") ؛
that._triggerItem (elem.index () + 1) ؛
}) ؛
} ؛
TabProto._triggerItem = function (التالي) {
var nextStatus = this._getStatusByIndex (التالي) ؛
var heads = this.getElem ().
التالي = items.eq (التالي) ؛
if (next.size () && "1" == nextStatus) {// توجد عقدة DOM اللاحقة
next.trigger ("انقر") ؛
}
آخر{
items.eq (0) .trigger ("انقر") ؛
}
} ؛
tabproto._resetconsolepanel = function () {
this.getElem ().
} ؛
tabproto.init = function () {
if (this._isemptyresult ()) {
this._setContent ("لا وحدة بعد!") ؛
}
var that = هذا ؛
this.getelem ().
.text (" +" + this.getopts () ["buttontext"])
.on ("انقر" ، وظيفة () {
that.getelem ().
that._renderconsolepanel ("0") ؛
}) ؛
}) ؛
دولار.
if (that._isdisplaymax (i + 1)) {
that._saveorupdatestatus (عنصر ، "1") ؛
}
آخر{
that._saveorupdatestatus (البند ، "2") ؛
}
that._render (عنصر) ؛
}) ؛
if (! that._isdisplaymax (this.getopts () ["result"]. الطول)) {
this.getelem ().
$ (this) .find (". tag"). on ("Click" ، function () {
var root = $ (this) .next () ؛
root.empty () ؛
دولار.
$ ("<viv> </viv>"). النص (البيانات ["النص"])
.on ("انقر" ، وظيفة () {
if (that._getItemListbyStatus ("1"). الطول <that.getopts () ["DisplayMax"]) {
that.getelem ().
that._saveorupDateStatus (البيانات ، "1") ؛
}) ؛
}
آخر{
التنبيه ("لا يمكن إضافة وحدات ، فهو حاليًا هو الحد الأقصى للرقم!") ؛
}
})
.appendto (الجذر) ؛
}) ؛
root.toggle () ؛
}) ؛
}) ؛
}
this.getelem ().
.eq (0)
.trigger ("انقر") ؛ // افترض أنه يجب أن يكون هناك واحد ، وإلا فإن المكون الإضافي لن يكون له معنى كبير!
} ؛
TabProto._render = دالة (البيانات) {
var that = هذا ؛
var item = $ ("<viv> </viv>"). النص (البيانات ["text"]). appendto (this.getElem ().
البيانات ["index"] = item.index () ؛
item.on ("Click" ، function () {
that._setcurrent ($ (this) .index ()) ؛
that._getContent (Data ["url"]). تم (الوظيفة (النتيجة) {
that._setContent (النتيجة) ؛
})
.fail (function () {
رمي خطأ جديد ("خطأ صافي!") ؛
}) ؛
})
.Data ("العنصر" ، البيانات) ؛
إذا ("2" == بيانات ["الحالة"]) {
item.Hide () ؛
}
إذا ("1" == بيانات ["showclose"]) {
$ ("<span class = 'del'> x </span>")
.on ("انقر" ، وظيفة () {
if (win.confirm ("هل يتم حذف هذا العنصر؟")) {
that._deleteitem (item) ؛
العودة كاذبة // توقف الفقاعات
}
})
.appendto (البند) ؛
}
} ؛
ui.createTab = function (elem ، opts) {
var tab = علامة تبويب جديدة (elem ، opts) ؛
tab.init () ؛
علامة التبويب إرجاع ؛
} ؛
}) (jQuery) ؛
(رابعا) ، الملخص النهائي
(1) تحليل معقول للمتطلبات الوظيفية في طريقة التفكير الموجهة للكائن.
(2) ، قم بتنظيم منطق المكونات الخاصة بنا بطريقة الفصل.
(3) إعادة بناء الأمثلة المذكورة أعلاه باستمرار ، وكيفية إعادة بناء ذلك بشكل معقول؟ لا تصمم بشكل مفرط ، كن مرتاحًا. الطريقة الموصى بها هي الجمع بين تصميم العملية وتصميم التفكير الموجهة للكائنات.