การเขียนโปรแกรม แบ่งหน้าหรือแบ่งคอลั่มด้วยวิธี หารเอาเศษ

เดิมทีก็เขียนมาไม่รู้กี่ร้อยกี่พันครั้งแล้ว แต่ก็ไม่จำซักที ติดกับดักเดิม ๆ จนเกิดความสับสน ทำให้ logical มันเปลี่ยน พอเปลี่ยนเงื่อนไขแรกไม่ได้ เงื่อนไขที่ 2 3 4 ก็ตามมา ทำให้ยิ่งแก้ ก็ยิ่งเละ พอจะย้อนกลับ ก็กลับยากแล้ว เพราะเขียนเงื่อนไขเพิ่มจนมั่วไปหมด วันนี้เลยอยากสรุปกระบวนการคิดให้มันชัดเจน และหยิบไปใช้ได้ทุกเมื่อที่ต้องการ

Concept

มีข้อมูลอยู่ 41 box ต้องการแบ่งให้ขึ้นบรรทัดใหม่ ทุกๆ 6 box โดยแยกกันชัดเจน หรือขึ้นหน้าใหม่เวลาที่พิมพ์ เราจะทำอย่างไร ซึ่ง box ในที่นี้ก็อาจจะเป็น content ต่างๆ เช่น card ที่มีเนื้อหาและรูปภาพ ที่เราต้องการแบ่งให้มันชัดเจน ด้วยการตัดขึ้นแถวใหม่

ดังนั้น เมื่อเรารู้ค่าตัวแปร ที่จะต้องนำไปใช้แล้ว คือ มีกล่องทั้งหมด 41 กล่อง ต้องการแบ่งแถวละ 6 กล่อง จะได้ว่า

let box = 41;
let pageBreak = 6;

Logical

เงื่อนไขที่เราจะใช้คือ MOD หรือการหารเอาเศษ เพื่อใช้ตรวจสอบว่าเราควรตัดขึ้นแถวหรือไม่ ซึ่ง code ด้านล่างนี้จะช่วยอธิบายได้ดีกว่า

for (let i = 0; i < 12; i++) {
  console.log( `${i} % 5 = ${i%5}`);
}
0 % 5 = 0
1 % 5 = 1
2 % 5 = 2
3 % 5 = 3
4 % 5 = 4
5 % 5 = 0
6 % 5 = 1
7 % 5 = 2
8 % 5 = 3
9 % 5 = 4
10 % 5 = 0
11 % 5 = 1

จะเห็นว่าเมื่อ i = 0, 5, 10 ค่า MOD หรือเศษจะเป็น 0 เนื่องจากการหารนี้ลงตัว เราจะใช้จุดนี้มาช่วยในการแบ่งแถวใหม่ โดยทุกครั้งที่พบว่า เศษเป็น 0 เราจะแทรก \n หรือ new line เข้าไป ตามตัวอย่างนี้

let box = 41;
let pageBreak = 6;
let content = '';

for (let i = 1; i <= box; i++) {
   content += `${i} `;
   content += (i%pageBreak == 0) ? `\n` : ``;
}
console.log(content);
 1 2 3 4 5 6 
 7 8 9 10 11 12
 13 14 15 16 17 18
 19 20 21 22 23 24
 25 26 27 28 29 30
 31 32 33 34 35 36
 37 38 39 40 41

จะเห็นว่า ง่ายมาก ๆๆๆๆ โดยจะลองเปลี่ยนตัวแปร box และ pageBreak เป็นจำนวนอื่นก็ได้ เพื่อทดสอบดู ทีนี้มามีประเด็นปัญหา ที่จะต้องเจอแน่ๆ หากการ MOD นั้น ลงตัว หมายความว่า หาก box = 36 และ pageBreak = 6 เราจะได้ข้อมูลทั้งหมด 5 แถว? ซึ่งมันควรจะเป็นแบบนั้น แต่ว่า มันจะมี \n รอบสุดท้ายที่ 36%6 = 0 ติดมาด้วย ดังนั้นแล้ว เราจะต้องเพิ่มเงื่อนไขเข้าไป ให้ i != box เพื่อไม่ให้มันเช็ค 0 รอบสุดท้าย ในทีนี้เพิ่ม tag < > เข้าไปเพื่อให้เห็นภาพชัดเจนขึ้น

let box = 36;
let pageBreak = 6;
let content = '<';

for (let i = 1; i <= box; i++) {
   content += `${i} `;
   content += (i%pageBreak == 0 && i != box) ? `>\n<` : ``;
}
content += `>`;
console.log(content);
 <1 2 3 4 5 6 >
 <7 8 9 10 11 12 >
 <13 14 15 16 17 18 >
 <19 20 21 22 23 24 >
 <25 26 27 28 29 30 >
 <31 32 33 34 35 36 >

เมื่อเราทำออกมาเป็น HTML ก็จะได้ code สำเร็จประมาณนี้

let box = 36;
let pageBreak = 6;
let content = '<div class="row">';

for (let i = 1; i <= box; i++) {
   content += (`  ${i}`).slice(-3);
   content += (i%pageBreak == 0 && i != box) ? ` </div>\n<div class="row">` : ``;
}
content += ` </div>`;

console.log(content);

สรุป

หัวใจสำคัญอยู่ที่ content start loop {mod} content end เพื่อให้ภาพมันออกมาแบบนี้ <div></div><div></div> หากเราขาดสิ่งใดสิ่งหนึ่งไป มันจะทำให้การแสดงผลเพี้ยน

Cover: Design vector created by stories – www.freepik.com