จัดการกับ Script ที่ยุ่งเหยิง ของ Javascript

เรื่อง Basic ของคนที่เขียน Javascript คือ พอเขียนไปสักพัก ระบบโตขึ้น Script ที่เราเขียนไว้มันก็จะโตตามไปด้วย

แน่นอนว่าเราอาจจะไม่ได้ทำงานเพียงลำพัง มีเพื่อนร่วมงานที่แสนน่ารักคอยช่วย Support และแบ่งงานเราไปทำ

เมื่อสภาพแวดล้อมเป็นดังข้างต้น ปัญหาที่จะตามมาที่หลายคนอาจจะเจอ คือ

1. function มีเยอะแยะมากมาย จนไม่รู้ว่าอันไหนถูกใช้งาน หรือไม่ได้ถูกใช้งาน
2. function ทำงานเหมือนกัน แต่ทำไมเขียนไว้หลายที่
3. function ถูกเขียนกระจัดกระจาย ชื่อเดียวกัน แต่ทำงานไม่เหมือนกัน
4. ฯลฯ

และอื่นๆ อีกมากมายที่หลายคนอาจจะพอนึกออก

ดังนั้น เราจะมาเสนอทางออก สำหรับจัดการกับ Script ที่ยุ่งเหยิง โดยมีวิธีการ ดังนี้

function ที่ใช้ร่วมกันบ่อยๆ ให้เขียนไว้ที่ Shared fileให้ import ไปใช้

ให้สร้างข้อตกลงกับทีมว่า เราจะมี Shared file สำหรับร่วมรวม function ที่จะใช้ร่วมกัน หรือใช้บ่อยๆ ไว้ที่เดียว

var employee: {
  firstName: "Malee",
  lastName: "Sunsuk",
  age: 28,
  address: "54 Bangna, Bangkok, Thailand",
  tel: "0811234567",
  fullName: function(){
    return employee.firstName + " " + employee.lastName;
  }
}
function getEmployeeName(employeeId){
  let employeeName = employeeUtils.employee.fullName;
  return employeeName;
}

จัดระเบียบของ function โดยการสร้างเป็น Accessing Object Methods

เราสามารถสร้าง Accessing Object Methods บอกว่า Scope ของ function ที่จะอยู่ภายใต้ Object เพื่อสะดวกต่อการใช้ อ่านเข้าใจง่าย และรู้ได้ด้วยตัวชื่อของ Object Function ว่า function อยู่ที่ไหนของ Project

var employeeUtils = {
  employee: {
    firstName: "Malee",
    lastName: "Sunsuk",
    age: 28,
    address: "54 Bangna, Bangkok, Thailand",
    tel: "0811234567",
    fullName: function(){
      return employeeUtils.employee.firstName + " " + employeeUtils.employee.lastName;
    }
  },
  getEmployeeName: function(employeeId){
    let employeeName = employeeUtils.employee.fullName;
    return employeeName;
  }
}

เขียน Comment บอกรายละเอียด Function

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

var employeeUtils = {
  employee: {
    firstName: "Malee",
    lastName: "Sunsuk",
    age: 28,
    address: "54 Bangna, Bangkok, Thailand",
    tel: "0811234567",
    fullName: function(){
      return employeeUtils.employee.firstName + " " + employeeUtils.employee.lastName;
    }
  },
  /* for get employee name*/
  getEmployeeName: function(employeeId){
    let employeeName = employeeUtils.employee.fullName;
    return employeeName;
  }
}

ตั้งชื่อ function ให้สื่อความหมาย

เราควรใส่ใจในการตั้งชื่อ function เพื่อให้ตัวเราเอง หรือคนอื่นๆ อ่านแล้วเข้าใจ เพื่อสะดวกต่อการหยิบไปใช้งาน

บทสรุป

เขียน function ให้อยู่ในรูปแบบของ Accessing Object Methods เพื่อให้อ่านและเข้าใจได้เลยว่า function นั้นอยู่ที่ส่วนไหนของ project ง่ายต่อการ debug และใช้งาน ควรมีความรู้พื้นฐาน Accessing Object Methods เพื่อให้สร้าง function ได้ถูกต้อง