ทำไมคุณควรเขียนโค้ด Javascript ของคุณเหมือนผลิตภัณฑ์? การเขียนโค้ด เช่น ผลิตภัณฑ์ แนวทางปฏิบัติที่ดีที่สุด

สวัสดีทุกคน,

เราทุกคนใช้ JS และส่วนประกอบในขณะที่พัฒนาผลิตภัณฑ์ของเราในทุกส่วน บางครั้งโค้ดจาวาสคริปต์บางตัวอาจซับซ้อนและยาวมาก ในสถานการณ์ที่คล้ายคลึงกัน เราต้องการโค้ดที่มีความคล่องตัว ยืดหยุ่น และมีประสิทธิภาพมากขึ้น

ดังนั้น หากคุณกำลังเขียนโค้ดบน Javascript หรือส่วนประกอบอื่นๆ คุณควรคิดที่จะเขียนโค้ดของคุณเหมือนกับผลิตภัณฑ์ เอาล่ะ 'งานเขียนเหมือนผลิตภัณฑ์คืออะไร' มาตอบคำถามเหล่านี้กันดีกว่า Developer ทุกคนได้ใช้ส่วนประกอบของ jQuery ในการพัฒนาผลิตภัณฑ์มาเป็นเวลาอย่างน้อยบางส่วนในชีวิต ดังนั้นเราทุกคนรู้จักส่วนประกอบต่างๆ เช่น 'date-picker' หรือ 'color-picker' เป็นต้น ความแตกต่างระหว่างส่วนประกอบเหล่านี้กับโค้ด Javascript ปกติอื่นๆ คือใครๆ ก็สามารถใช้ส่วนประกอบเหล่านี้หรือพัฒนาโค้ดของตนบนส่วนประกอบเหล่านี้ได้ แล้วฉันกำลังพยายามจะพูดอะไรล่ะ? ส่วนประกอบเหล่านี้มีการกำหนดค่าหรือตัวเลือกในการใช้งาน มันไม่ได้เกิดขึ้นเพียง 2–3 ฟังก์ชันเท่านั้น นอกจากนี้ หากคุณต้องการการกำหนดค่าบางอย่าง คุณสามารถเขียนโค้ดสำหรับส่วนประกอบเหล่านี้ได้ โดยพื้นฐานแล้ว มี 4 วิธีในการเขียนโค้ด Javascript ของคุณ มาวิเคราะห์วิธีการเหล่านี้ตั้งแต่ขั้นพื้นฐานไปจนถึงขั้นสูง

นี่คือเรื่องราวเกี่ยวกับตัวอย่างของเรา: สมมติว่าเราต้องการพูดว่า 'สวัสดีชาวโลก' หลังจากที่โหลดหน้าเว็บหรือจัดการ HTML บางส่วน

วิธีแรก

ourLayoutPage.xxx

<script type="text/javascript"> 
  $(document).ready(function() {
     alert(‘Hello, world!’);
  });
</script>

ดังนั้นวิธีนี้จึงง่ายมาก มีหน้าหนึ่งในแอปพลิเคชันของคุณ และคุณกำลังเขียนโค้ดเพื่อพูดว่า 'Hello, World' ในเลย์เอาต์ของคุณ คุณไม่ได้ใช้ไฟล์จาวาสคริปต์หรือฟังก์ชันใด ๆ ในการดำเนินการนี้ อย่างที่คุณเห็น วิธีนี้ไม่มีประโยชน์ มันเป็นแบบคงที่ หากคุณพัฒนาแอพพลิเคชั่นขนาดใหญ่หรือต้องการฟังก์ชั่นที่ยืดหยุ่นกว่านี้ วิธีนี้ไม่เหมาะกับคุณ 😁

วิธีที่สอง

ourLayoutPage.xxx

<script type="text/javascript" src="/someFolder/ourJavascripCode.js"></script>

JavascriptCode.js ของเรา

function firstFunction(param) {
  alert(param);
}
$(document).ready(function() {
  firstFunction("Hello, world!")
});

เราใช้ฟังก์ชันใน 'วิธีที่สอง' ดังนั้น ถ้าเราจำเป็นต้องใช้ ''firstFunction'' จากหลายครั้งหรือจากที่อื่น และเราเปลี่ยนคุณสมบัติของฟังก์ชัน เราก็ไม่จำเป็นต้องเปลี่ยนทั้งหมด คุณก็ควรเปลี่ยนคุณสมบัติของฟังก์ชันในลักษณะนี้ การเปลี่ยนแปลงทั้งหมดจะมีผลกับทุกสถานที่ สิ่งนี้เป็นเพียง S.O.L.I.D. แนวคิด. มาทำให้มันซับซ้อนกว่านี้อีกหน่อย

วิธีที่สาม

ourLayoutPage.xxx

<script type="text/javascript" src="/someFolder/ourJavascripCode.js"></script>

JavascriptCode.js ของเรา

var jsConfig = {
mode:"Debug",
  version:"1.0.0",
  targetObjAttr:"web-target-attr",
  targetObjAttrValue:"web-target",
  targetFunction:"firstFunction",
  properties:{
    style=[
        {
          attr:"font-size",
          value:14
        },
        {
          attr:"font-size",
          value:14
        }
     ]
  }
}
function firstFunction(param) {
  var style;
  var el =     $(["+mode.targetObjAttr+"='"+mode.targetObjAttrValue+"']");
  $(el).text(param);
  $(mode.properties).each(function(i,property){
    style+=property.attr+":"+property.value+";";
  });
  $(el).style(style);
}
$(document).ready(function() {
  firstFunction("Hello, world!")
});

อย่างที่เห็นมีโค้ดเพิ่มเติมตามเดิม 😁. โดยพื้นฐานแล้วความแตกต่างระหว่าง 'วิธีที่สอง' และ 'วิธีที่สาม' คือตัวแปร 'jsConfig' ดังนั้นเราจึงใช้ตัวแปรการกำหนดค่าเพื่อนำไปใช้กับการเปลี่ยนแปลง เราได้ตัดสินใจว่า 'องค์ประกอบใดที่สามารถจัดการได้' 'ฟังก์ชันใดที่เป็นฟังก์ชันของเราที่จะใช้สำหรับการดำเนินการนี้' และ 'เราต้องการกฎระเบียบใด' มีจุดสำคัญตรงนี้คือเราใช้ฟังก์ชันไดนามิกทั้งหมด ไม่มีมูลค่าคงที่ใดๆ เมื่อใดก็ตามที่คุณต้องการ คุณสามารถเปลี่ยนองค์ประกอบที่สามารถจัดการได้ หรือค่าแอตทริบิวต์ใดที่เท่ากับค่าขององค์ประกอบที่ถูกจัดการ นอกจากนี้เรายังติดตามโหมดฟังก์ชัน 'debug' หรือ 'release' และหากคุณต้องการ คุณสามารถเปลี่ยนการทำงานของฟังก์ชันตามค่านี้ได้ เช่นเดียวกับ 'เวอร์ชันของโค้ด/แอปพลิเคชัน' นี่คือ Functional Js นิดหน่อย 😁

ดังนั้น 'วิธี' สุดท้ายคือหัวข้อบล็อกถัดไปของเรา เพราะมันซับซ้อนกว่าเล็กน้อยและต้องศึกษารายละเอียดมากกว่า 'วิธี' อื่น ๆ 😁 ตอนนี้คุณมีไอเดียแล้วว่า 'การเขียนโค้ดเหมือนกับผลิตภัณฑ์คืออะไร' 😁 ขอบคุณที่อ่าน ขอให้สนุกกับการพัฒนานะครับ 😁

ฟังก์ชัน JS พร้อมโปรเจ็กต์ตัวอย่างบน Github — 1
ฟังก์ชัน JS พร้อมโปรเจ็กต์ขั้นสูงบน Github— 2

ทำไมคุณควรเขียนโค้ด Javascript ของคุณเหมือนผลิตภัณฑ์? การเขียนโค้ด เช่น ผลิตภัณฑ์ แนวทางปฏิบัติที่ดีที่สุด

วิธีแรก

วิธีที่สอง

วิธีที่สาม

คำถามในหัวข้อ