الحديث عن النمطية في تصميم أثاث ايكيا

لقد عرفت عن ايكيا منذ فترة طويلة، وذهبت إلى هناك ذات مرة عندما كنت في قوانغتشو، وكان انطباعي أنها كبيرة ومكلفة وذكية. المكان كبير، والأشياء باهظة الثمن، والتصميم ذكي. أعيش الآن على مسافة ليست بعيدة عن ايكيا، وقد وجدت وقتًا للذهاب للتسوق هذا الشهر. لا يزال المكان كبيرًا جدًا، ولا تزال الأشياء باهظة الثمن، ولا يزال التصميم ذكيًا للغاية. على الرغم من أنني لم أشتري أي شيء، إلا أنني اكتسبت شيئًا ما من خلال أساليب تصميم الأثاث في ايكيا، يمكننا التحدث عن النمطية.

يجب على الطلاب الذين زاروا ايكيا أن يلاحظوا أن أثاث ايكيا عبارة عن وحدات نمطية وقابلة للإزالة بشكل أساسي. وينطبق الشيء نفسه على خصائص النمطية، حيث يمكن دمجها، وتكون مستقلة نسبيًا، ويمكن إضافتها بسهولة عند الحاجة. إذن كيف يمكننا تنفيذ هذه الطريقة بشكل أساسي؟ أعط مثالا بسيطا:

<div class="mode-a">
<h3>العرض التوضيحي المعياري</h3>
<p>مثال على البنية المعيارية. </ص>
</div>

يمكن كتابة CSS المقابل على النحو التالي:

.الوضع-أ{...}
.mode-a h3{...}
.الوضع-ع{...}

من بينها، "mode-a" هو اسم هذه الوحدة، مما يشير إلى أن هذه الوحدة تسمى "a". الآن يمكن وضع هذه الوحدة في المكان الذي تريده. نظرًا لأننا نصنع وحدة نمطية، فلن يكون هناك وحدة واحدة فقط، بل نضيف "mode-b" آخر:

<div class="mode-b">
<h3>العرض التوضيحي المعياري</h3>
<ديف>
<h4>الميزات المعيارية:</h4>
<ul>
<li>مستقلة نسبيًا</li>
<li>قابلية نقل عالية</li>
</ul>
</div>
</div>

يمكن كتابة CSS المقابل على النحو التالي:

.الوضع-ب{...}
.الوضع-ب h3{...}
.mode-b div {...}
.الوضع-ب h4{...}
.mode-b ul li{...}

في التطبيقات العملية، غالبًا ما يكون من الضروري إضافة بعض أسماء الفئات لتقليل تعقيد تعريفات الفئات. هذا المثال بسيط نسبيًا، ولكنه يكفي لتوضيح خصائص النمطية. يمكن استخدام الوحدتين المذكورتين أعلاه في صفحة واحدة أو أكثر في نفس الوقت.

في متاجر ايكيا، ربما لاحظت أن مناطق المنتجات مقسمة بشكل أساسي حسب المصممين، وخاصة تلك العناصر الصغيرة. يمكن أيضًا تعيين التعليمات البرمجية المعيارية لأشخاص مختلفين للكتابة لتحسين الكفاءة. بالطبع، لتنفيذ هذه الطريقة، نحتاج أيضًا إلى القيام ببعض الأعمال، مثل اصطلاح تسمية الوحدة، حيث يجب ترك الواجهات في الوحدة، وما إلى ذلك. كما في المثال أعلاه، يمكن الاتفاق على أن الاسم يبدأ بـ "mode" وأن عنوان الوحدة يستخدم علامة h3. بهذه الطريقة، بغض النظر عمن يكتب الوحدة، ستكون متوافقة مع الصفحات الموجودة في المشروع.

عند رؤية هذا، قد تجد أنه بما أنه تم الاتفاق على البنية الثابتة للوحدة أعلاه، أليس هذا الجزء مكتوبًا في تعريف النمط لكل وحدة زائدة عن الحاجة؟ نعم. إذا تم تشكيل الاتفاقيات ذات الصلة، فيمكن اقتراح هذا الجزء من تعريف النمط ووضعه في التعريف العام للمشروع لتقليل تكرار التعليمات البرمجية. المثال أعلاه يمكن أن يصبح:

/* =S عالمي */
ح3{
/* الطريقة الأولى للكتابة */
...
}
.mode-a h3،
.الوضع-ب h3{
/*الطريقة الثانية للكتابة*/
...
}
/* =E عالمي */
/* =وضع S-أ */
.الوضع-أ{...}
.الوضع-ع{...}
/* =الوضع E-أ */
/* =وضع S-ب */
.الوضع-ب{...}
.mode-b div {...}
.الوضع-ب h4{...}
.mode-b ul li{...}
/* ==الوضع E-ب */

أتساءل عما إذا كنت قد لاحظت أن تلك العناصر الصغيرة الموجودة في ايكيا يمكن غالبًا دمجها مع عناصر أخرى مختلفة. يؤدي هذا أيضًا إلى طرح موضوع آخر للنمطية: الوحدات النمطية داخل الوحدات النمطية. وهذا يعني أنه يمكن أن توجد وحدات أخرى في الوحدة، وهو أمر يسهل فهمه أيضًا، تمامًا كما هو الحال عندما ننشئ موقع ويب، فإن بنية الصفحة بأكملها تشبه وحدة كبيرة، والمثال المذكور أعلاه هو وحدة داخل وحدة. الوحدة النمطية، ولكن دعونا نحصر هذا التعريف في مستوى واحد. يمكن اعتبار تعريف h3 في المثال أعلاه وحدة نمطية، ويظهر في كل من الوحدتين "mode-a" و"mode-b"، وأدائه الهيكلي ثابت نسبيًا.

حسنًا، هذا مجرد تعريف للملصق، ماذا لو كان هناك أكثر من ملصق واحد؟ لنغير المثال مرة أخرى:

<div class="mode-b">
<div class="mode-a">
<h3>العرض التوضيحي المعياري</h3>
<p>مثال على البنية المعيارية. </ص>
</div>
<div class="cont">
<h4>الميزات المعيارية:</h4>
<ul>
<li>مستقلة نسبيًا</li>
<li>قابلية نقل عالية</li>
</ul>
</div>
</div>
<div class="mode-c">
<div class="mode-a">
<h3>العرض التوضيحي المعياري</h3>
<p>هذا مثال على "وحدة داخل وحدة نمطية". </ص>
</div>
<div class="cont">
<h4>وحدات داخل الوحدات:</h4>
<p>الوحدة "mode-a" هي وحدة داخل وحدة نمطية. </ص>
</div>
</div>

/* =وضع S-أ */
.الوضع-أ{...}
.mode-a h3{...}
.الوضع-ع{...}
/* =الوضع E-أ */
/* =وضع S-ب */
.الوضع-ب{...}
.الوضع-ب h4{...}
.mode-b .cont{...}
.mode-b .cont ul li{...}
/* =الوضع E-ب */
/* =وضع S-ج */
.الوضع-ج{...}
.الوضع-ج h4{...}
.mode-c .cont{...}
.mode-c .cont p{...}
/* =الوضع E-ج */

كما ترون مما سبق، "mode-a" هو وحدة نمطية مستقلة عندما يكون جزءًا من "mode-b" و"mode-c"، فإنه يصبح وحدة نمطية داخل الوحدة النمطية. إسقاط الطوب، على أمل إثارة المزيد من المناقشات ذات الصلة.