ฉันรู้จัก อิเกีย มาเป็นเวลานาน และครั้งหนึ่งฉันเคยไปที่นั่นตอนที่อยู่ที่กวางโจว ความประทับใจของฉันคือมันใหญ่ ราคาแพง และชาญฉลาด สถานที่ใหญ่ ของมีราคาแพง และการออกแบบก็ฉลาด ตอนนี้ฉันอาศัยอยู่ไม่ไกลจากอิเกีย ฉันมีเวลาไปช้อปปิ้งในเดือนนี้ สถานที่ยังใหญ่มาก ของยังมีราคาแพงอยู่ และการออกแบบก็ยังฉลาดอยู่ แม้ว่าฉันจะไม่ได้ซื้ออะไรเลย แต่ฉันก็ยังได้รับบางสิ่งบางอย่างจากวิธีการออกแบบเฟอร์นิเจอร์ของอิเกีย เราสามารถพูดคุยเกี่ยวกับความเป็นโมดูลได้
นักเรียนที่เคยไปอิเกียควรสังเกตว่าเฟอร์นิเจอร์ของอิเกียโดยพื้นฐานแล้วเป็นแบบโมดูลาร์และถอดออกได้ เช่นเดียวกับคุณลักษณะของโมดูลาร์ สามารถนำมารวมกันได้ ค่อนข้างเป็นอิสระ และสามารถเพิ่มได้อย่างง่ายดายเมื่อจำเป็น แล้วเราจะนำวิธีนี้ไปใช้ได้อย่างไร? ยกตัวอย่างง่ายๆ:
ตัวอย่างโครงสร้างโมดูลาร์
CSS ที่เกี่ยวข้องสามารถเขียนได้ดังนี้:
.โหมด-a{...}
.mode-a h3{...}
.mode-p{...}
ในหมู่พวกเขา "mode-a" คือชื่อของโมดูลนี้ ซึ่งบ่งชี้ว่านี่คือโมดูลชื่อ "a" ตอนนี้โมดูลนี้สามารถวางในตำแหน่งที่คุณต้องการได้ เนื่องจากเรากำลังสร้างโมดูล จะไม่มีเพียงโมดูลเดียว เราจึงเพิ่ม "mode-b" อีกหนึ่งโมดูล:
CSS ที่เกี่ยวข้องสามารถเขียนได้ดังนี้:
.mode-b{...}
.mode-b h3{...}
.mode-b div{...}
.mode-b h4{...}
.mode-b อูลลี{...}
ในการใช้งานจริง มักจำเป็นต้องเพิ่มชื่อคลาสเพื่อลดความซับซ้อนของคำจำกัดความของคลาส ตัวอย่างนี้ค่อนข้างง่าย แต่ก็เพียงพอที่จะแสดงให้เห็นลักษณะของโมดูลาร์ สองโมดูลข้างต้นสามารถใช้ได้กับหนึ่งหน้าขึ้นไปในเวลาเดียวกัน
ในร้านค้าของอิเกีย คุณอาจสังเกตเห็นว่าพื้นที่ผลิตภัณฑ์โดยพื้นฐานแล้วจะถูกแบ่งตามนักออกแบบ โดยเฉพาะสินค้าชิ้นเล็กๆ เหล่านั้น โค้ดแบบโมดูลาร์สามารถกำหนดให้กับบุคคลต่างๆ เพื่อการเขียนเพื่อปรับปรุงประสิทธิภาพได้ แน่นอนว่าเพื่อนำวิธีนี้ไปใช้ เรายังจำเป็นต้องทำงานบางอย่าง เช่น รูปแบบการตั้งชื่อของโมดูล โดยที่อินเทอร์เฟซจะต้องเหลืออยู่ในโมดูล เป็นต้น ดังตัวอย่างข้างต้น อาจตกลงกันว่าชื่อขึ้นต้นด้วย "mode" และชื่อโมดูลใช้แท็ก h3 ด้วยวิธีนี้ไม่ว่าใครจะเขียนโมดูลก็ตาม มันก็จะเข้ากันได้กับเพจต่างๆ ในโปรเจ็กต์
เมื่อเห็นสิ่งนี้ คุณอาจพบว่าเนื่องจากโครงสร้างคงที่ของโมดูลได้รับการตกลงข้างต้น ส่วนนี้เขียนในคำจำกัดความสไตล์ของแต่ละโมดูลที่ซ้ำซ้อนไม่ใช่หรือ? ใช่. หากมีการกำหนดแบบแผนที่เกี่ยวข้อง คุณสามารถเสนอคำจำกัดความสไตล์ส่วนนี้และใส่ลงในคำจำกัดความสาธารณะของโครงการเพื่อลดความซ้ำซ้อนของโค้ด ตัวอย่างข้างต้นสามารถกลายเป็น:
/* =S ทั่วโลก */
h3{
/* วิธีเขียนแบบแรก */
-
-
.โหมด-a h3,
.mode-b h3{
/* วิธีเขียนแบบที่สอง*/
-
-
/* =E ทั่วโลก */
/* =โหมด S-a */
.โหมด-a{...}
.mode-p{...}
/* =โหมด E-a */
/* =S โหมด-b */
.mode-b{...}
.mode-b div{...}
.mode-b h4{...}
.mode-b อูลลี{...}
/* ==E โหมด-b */
ฉันสงสัยว่าคุณสังเกตไหมว่าสิ่งของชิ้นเล็กๆ ในอิเกียมักจะใช้ร่วมกับสิ่งของอื่นๆ ที่แตกต่างกันได้ สิ่งนี้ยังนำเสนอหัวข้ออื่นของความเป็นโมดูล: โมดูลภายในโมดูล กล่าวคือ โมดูลอื่นๆ สามารถมีอยู่ในโมดูลได้ซึ่งง่ายต่อการเข้าใจ เช่นเดียวกับเมื่อเราสร้างเว็บไซต์ โครงสร้างของทั้งหน้าก็เหมือนกับโมดูลขนาดใหญ่ และตัวอย่างที่กล่าวถึงข้างต้นคือโมดูลภายใน โมดูล แต่ลองจำกัดคำจำกัดความนี้ให้แคบลงหนึ่งระดับ คำจำกัดความของ h3 ในตัวอย่างข้างต้นถือได้ว่าเป็นโมดูล ซึ่งปรากฏในทั้งโมดูล "mode-a" และ "mode-b" และประสิทธิภาพของโครงสร้างค่อนข้างคงที่
ตกลง นี่เป็นเพียงคำจำกัดความของป้ายกำกับ จะเกิดอะไรขึ้นหากมีป้ายกำกับมากกว่าหนึ่งรายการ มาเปลี่ยนตัวอย่างอีกครั้ง:
ตัวอย่างโครงสร้างโมดูลาร์
นี่คือตัวอย่างของ "โมดูลภายในโมดูล"
โมดูล "mode-a" เป็นโมดูลภายในโมดูล
/* =โหมด S-a */
.โหมด-a{...}
.mode-a h3{...}
.mode-p{...}
/* =โหมด E-a */
/* =S โหมด-b */
.mode-b{...}
.mode-b h4{...}
.mode-b .ต่อ{...}
.mode-b .ต่อ li{...}
/* =E โหมด-b */
/* =S โหมด-c */
.mode-c{...}
.mode-c h4{...}
.mode-c .ต่อ{...}
.mode-c .cont p{...}
/* =E โหมด-c */
ดังที่คุณเห็นจากด้านบน "mode-a" เป็นโมดูลอิสระ เมื่อเป็นส่วนหนึ่งของ "mode-b" และ "mode-c" มันจะกลายเป็นโมดูลภายในโมดูล ทิ้งอิฐโดยหวังว่าจะจุดประกายการสนทนาที่เกี่ยวข้องมากขึ้น