JScript Katana

คู่มือ Underscore.js ภาษาไทย: การใช้งานพื้นฐาน ฟังก์ชัน และตัวอย่างโค้ด

ไลบรารีจากภายนอก
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. บทนำ

JavaScript เป็นภาษาการเขียนโปรแกรมที่ขาดไม่ได้ในการพัฒนาเว็บ แต่การจัดการกับอาร์เรย์และอ็อบเจ็กต์มักจะทำให้โค้ดซับซ้อนได้ง่าย โดยเฉพาะการทำงานอย่างการกรองข้อมูลหรือการแปลงข้อมูล มักต้องการการเขียนที่กระชับและมีประสิทธิภาพมากขึ้น ตรงนี้เองที่ Underscore.js ซึ่งเป็นไลบรารี JavaScript จะเข้ามามีบทบาทสำคัญ ไลบรารีนี้ช่วยให้คุณสามารถเขียนโค้ดสำหรับการจัดการข้อมูลที่ซับซ้อนให้ง่ายขึ้นได้

ข้อดีของ Underscore.js

  1. ทำให้โค้ดกระชับขึ้น
  • งานที่ปกติใน JavaScript ต้องเขียนหลายบรรทัด สามารถเขียนได้เพียงไม่กี่บรรทัดด้วย Underscore.js
  1. มีฟังก์ชันอำนวยความสะดวกมากมาย
  • มีฟังก์ชันสำหรับจัดการอาร์เรย์ อ็อบเจ็กต์ รวมถึงการควบคุมฟังก์ชันมากมายให้เลือกใช้
  1. เบาและยืดหยุ่น
  • สามารถใช้ฟังก์ชันที่ต้องการโดยตรง ทำให้ผลกระทบต่อประสิทธิภาพของระบบน้อยที่สุด

สิ่งที่จะได้เรียนรู้จากบทความนี้

  • วิธีการติดตั้งและใช้งาน Underscore.js
  • ฟังก์ชันพื้นฐานและตัวอย่างการใช้งาน
  • ยูสเคสที่เป็นประโยชน์ในงานพัฒนาจริง

2. Underscore.js คืออะไร

ภาพรวมของ Underscore.js

Underscore.js เป็นไลบรารีที่มีน้ำหนักเบา ช่วยทำให้การจัดการข้อมูลใน JavaScript ง่ายขึ้น โดยเฉพาะอย่างยิ่งการจัดการอาร์เรย์และอ็อบเจ็กต์ มีฟังก์ชันมากมายที่ช่วยเพิ่มประสิทธิภาพในการทำงาน จึงถูกเรียกว่า ชุดเครื่องมือเสริมของ JavaScript แม้ว่า JavaScript จะสามารถทำงานได้อย่างทรงพลังอยู่แล้ว แต่โค้ดมักจะยาวและอ่านยาก การใช้ Underscore.js จะช่วยแก้ปัญหาเหล่านี้ ทำให้คุณสามารถเขียนโค้ดที่กระชับและจัดการได้ง่ายขึ้น

คุณสมบัติหลัก

  1. ยูทิลิตี้ฟังก์ชันที่หลากหลาย
  • รองรับการทำงานกับ อาร์เรย์ อ็อบเจ็กต์ และ ฟังก์ชัน หลากหลายรูปแบบ
  1. โค้ดที่เรียบง่ายและอ่านง่าย
  • ช่วยให้การเขียนโค้ดสั้นลงเมื่อเทียบกับ JavaScript แบบดั้งเดิม และยังอ่านง่ายขึ้น
  1. ไม่มีการพึ่งพาไลบรารีอื่น
  • สามารถใช้งานได้อิสระโดยไม่ต้องติดตั้งไลบรารีเพิ่มเติม
  1. เบาและทำงานได้รวดเร็ว
  • มีขนาดเล็กและไม่กระทบต่อประสิทธิภาพ จึงเหมาะกับเว็บแอปพลิเคชันสมัยใหม่

การเปรียบเทียบระหว่าง Underscore.js และ Lodash

ไลบรารีที่มักถูกนำมาเปรียบเทียบกับ Underscore.js คือ Lodash ซึ่งถูกพัฒนาต่อยอดจาก Underscore.js โดยเพิ่มฟีเจอร์และปรับปรุงประสิทธิภาพ ความแตกต่างหลักๆ มีดังนี้
คุณสมบัติUnderscore.jsLodash
การทำงานมีฟังก์ชันยูทิลิตี้พื้นฐานครบถ้วนเพิ่มฟังก์ชันที่หลากหลายและขยายขีดความสามารถ
การรองรับการโมดูลาร์รองรับบางส่วนรองรับการโมดูลาร์เต็มรูปแบบ
ประสิทธิภาพทำงานได้รวดเร็วรวดเร็วและได้รับการปรับแต่งประสิทธิภาพ
การเลือกใช้งานขึ้นอยู่กับความต้องการของโปรเจกต์ หากต้องการไลบรารีที่เบาและเรียบง่าย Underscore.js ถือว่าเหมาะสม

Underscore.js เหมาะกับสถานการณ์ใดบ้าง?

Underscore.js มีประโยชน์เป็นพิเศษในสถานการณ์เหล่านี้
  1. การจัดการข้อมูลในอาร์เรย์
  • รองรับการกรองข้อมูล (filtering) และการแมปข้อมูล (mapping) ด้วยโค้ดที่กระชับ
  1. การจัดการอ็อบเจ็กต์
  • สามารถเข้าถึงคีย์ ค่า และรวมอ็อบเจ็กต์ได้อย่างสะดวก
  1. การควบคุมฟังก์ชัน
  • รองรับการรันครั้งเดียว (once) หรือการดีเลย์การทำงานได้อย่างง่ายดาย
  1. การใช้ยูทิลิตี้ฟังก์ชัน
  • รองรับการจัดเรียง (sorting) การสุ่ม (shuffling) และการทำงานในรูปแบบ template engine

3. วิธีการติดตั้ง

ในส่วนนี้เราจะอธิบายขั้นตอนการนำ Underscore.js มาใช้ในโปรเจกต์ โดยสามารถเลือกใช้ได้ทั้งการเรียกผ่าน CDN หรือการดาวน์โหลดไฟล์มาใช้เอง

1. การใช้งานผ่าน CDN

CDN (Content Delivery Network) คือการเชื่อมต่อไปยังไฟล์ที่โฮสต์ไว้บนอินเทอร์เน็ต สามารถใช้งานได้ทันทีเพียงเพิ่มโค้ดลงในแท็ก <head> หรือท้าย <body> ของไฟล์ HTML

ตัวอย่าง: เพิ่มลงในไฟล์ HTML

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>การติดตั้ง Underscore.js</title>
  <!-- ลิงก์ CDN ของ Underscore.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
</head>
<body>
  <h1>ทดสอบ Underscore.js</h1>
  <script>
    // โค้ดทดสอบการทำงาน
    const data = [1, 2, 3, 4, 5];
    const evenNumbers = _.filter(data, function(num) {
      return num % 2 === 0;
    });
    console.log(evenNumbers); // [2, 4]
  </script>
</body>
</html>
เมื่อเปิดไฟล์นี้บนเบราว์เซอร์ จะเห็นผลลัพธ์ใน console แสดงเฉพาะเลขคู่

2. การติดตั้งด้วย npm หรือ yarn

npm และ yarn เป็นเครื่องมือจัดการแพ็กเกจที่ช่วยให้สามารถติดตั้ง Underscore.js ลงในสภาพแวดล้อมการพัฒนาหรือโปรเจกต์ Node.js ได้อย่างสะดวก

การติดตั้งด้วย npm

npm install underscore

การติดตั้งด้วย yarn

yarn add underscore

ตัวอย่างการ import ในไฟล์ JavaScript

import _ from 'underscore';

const data = [10, 20, 30, 40];
const result = _.map(data, (num) => num * 2);
console.log(result); // [20, 40, 60, 80]

3. การดาวน์โหลดไฟล์มาใช้งานโดยตรง

  1. เข้าไปที่เว็บไซต์ทางการ (underscorejs.org)
  2. ดาวน์โหลดไฟล์ JavaScript เวอร์ชันล่าสุดจากเมนู “Download”
  3. นำไฟล์ที่ดาวน์โหลดมาเก็บไว้ในโฟลเดอร์ของโปรเจกต์ (เช่น js/)
  4. เพิ่มแท็ก <script> ใน HTML เพื่อเชื่อมโยงไฟล์
<script src="js/underscore-min.js"></script>

4. การใช้งานร่วมกับ Module Bundler

หากคุณใช้ Webpack หรือ Parcel ก็สามารถติดตั้งและใช้งาน Underscore.js ได้ง่ายเช่นกัน

ตัวอย่าง: การตั้งค่าใน Webpack

  1. ติดตั้งผ่าน npm
npm install underscore
  1. import ในไฟล์ JavaScript
import _ from 'underscore';
  1. ทำการ bundle และใช้งานได้ทันที

การแก้ไขปัญหาที่พบบ่อย

1. ข้อความ “Uncaught ReferenceError: _ is not defined”
  • ตรวจสอบว่าได้เชื่อมต่อไฟล์ Underscore.js ถูกต้องหรือไม่ ไม่ว่าจะผ่าน CDN หรือ path ของไฟล์
2. เกิด error หลังจากติดตั้งผ่าน npm
  • ตรวจสอบให้แน่ใจว่า Node.js และ npm เป็นเวอร์ชันล่าสุด

4. วิธีการใช้งานพื้นฐาน

ในส่วนนี้เราจะมาดูฟังก์ชันพื้นฐานของ Underscore.js พร้อมตัวอย่างการใช้งาน ซึ่งจะช่วยให้การจัดการอาร์เรย์และอ็อบเจ็กต์มีประสิทธิภาพมากขึ้น

1. การวนซ้ำอาร์เรย์ – _.each()

_.each() ใช้สำหรับวนซ้ำอาร์เรย์หรืออ็อบเจ็กต์

ตัวอย่างการใช้งาน

const numbers = [1, 2, 3, 4, 5];

// แสดงค่าของแต่ละ element
_.each(numbers, function(num) {
  console.log(num);
});
ผลลัพธ์:
1
2
3
4
5
จุดสำคัญ:
  • สามารถใช้ได้ทั้งกับอาร์เรย์และอ็อบเจ็กต์
  • callback function จะได้รับค่า element, index และตัวอาร์เรย์ทั้งหมด

2. การแมปอาร์เรย์ – _.map()

_.map() ใช้สร้างอาร์เรย์ใหม่โดยการนำฟังก์ชันไปประยุกต์กับแต่ละ element

ตัวอย่างการใช้งาน

const numbers = [1, 2, 3, 4, 5];

// คูณค่าแต่ละ element ด้วย 2
const doubled = _.map(numbers, function(num) {
  return num * 2;
});

console.log(doubled);
ผลลัพธ์:
[2, 4, 6, 8, 10]

3. ค้นหา element แรกที่ตรงเงื่อนไข – _.find()

_.find() จะคืนค่า element แรกที่ตรงกับเงื่อนไข

ตัวอย่างการใช้งาน

const numbers = [1, 2, 3, 4, 5];

// ค้นหาค่าที่มากกว่าหรือเท่ากับ 3
const result = _.find(numbers, function(num) {
  return num >= 3;
});

console.log(result);
ผลลัพธ์:
3

4. กรอง element ที่ตรงเงื่อนไขทั้งหมด – _.filter()

_.filter() จะคืนค่าอาร์เรย์ใหม่ที่มีเฉพาะ element ที่ตรงกับเงื่อนไข

ตัวอย่างการใช้งาน

const numbers = [1, 2, 3, 4, 5];

// เลือกเฉพาะเลขคู่
const evens = _.filter(numbers, function(num) {
  return num % 2 === 0;
});

console.log(evens);
ผลลัพธ์:
[2, 4]

5. สลับตำแหน่ง element ในอาร์เรย์แบบสุ่ม – _.shuffle()

_.shuffle() ใช้สุ่มลำดับของอาร์เรย์ใหม่

ตัวอย่างการใช้งาน

const numbers = [1, 2, 3, 4, 5];

// สุ่มลำดับใหม่
const shuffled = _.shuffle(numbers);

console.log(shuffled);
ผลลัพธ์ (ตัวอย่าง):
[3, 5, 1, 4, 2]

6. ลบค่า element ที่ซ้ำกัน – _.uniq()

_.uniq() ใช้ลบค่าที่ซ้ำกันออกจากอาร์เรย์

ตัวอย่างการใช้งาน

const numbers = [1, 2, 2, 3, 4, 4, 5];

// ลบค่าซ้ำ
const uniqueNumbers = _.uniq(numbers);

console.log(uniqueNumbers);
ผลลัพธ์:
[1, 2, 3, 4, 5]

สรุป

จนถึงตอนนี้เราได้เรียนรู้ฟังก์ชันพื้นฐานของ Underscore.js ดังนี้
  • _.each() สำหรับการวนซ้ำ
  • _.map() สำหรับสร้างอาร์เรย์ใหม่
  • _.find() และ _.filter() สำหรับค้นหาและกรองข้อมูล
  • _.shuffle() สำหรับสุ่มลำดับ
  • _.uniq() สำหรับลบค่าซ้ำ

5. การใช้งานขั้นสูง

ในส่วนนี้เราจะมาดูฟังก์ชันขั้นสูงของ Underscore.js ที่ช่วยให้สามารถทำงานกับข้อมูลได้ซับซ้อนขึ้นและสะดวกมากยิ่งขึ้น

1. การจัดเรียงอาร์เรย์ – _.sortBy()

_.sortBy() ใช้สำหรับจัดเรียงอาร์เรย์ตามคีย์หรือเงื่อนไขที่กำหนด

ตัวอย่างการใช้งาน

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 20 },
  { name: 'Charlie', age: 30 }
];

// จัดเรียงตามอายุ
const sortedUsers = _.sortBy(users, 'age');

console.log(sortedUsers);
ผลลัพธ์:
[
  { name: 'Bob', age: 20 },
  { name: 'Alice', age: 25 },
  { name: 'Charlie', age: 30 }
]

2. การจัดกลุ่มอาร์เรย์ – _.groupBy()

_.groupBy() ใช้จัดกลุ่ม element ของอาร์เรย์ตามเงื่อนไข

ตัวอย่างการใช้งาน

const numbers = [1.1, 2.3, 2.4, 3.5, 4.7];

// จัดกลุ่มตามค่าทศนิยมปัดเศษลง
const grouped = _.groupBy(numbers, function(num) {
  return Math.floor(num);
});

console.log(grouped);
ผลลัพธ์:
{
  1: [1.1],
  2: [2.3, 2.4],
  3: [3.5],
  4: [4.7]
}

3. การนับจำนวนข้อมูล – _.countBy()

_.countBy() ใช้นับจำนวน element ตามเงื่อนไขที่กำหนด

ตัวอย่างการใช้งาน

const words = ['apple', 'banana', 'apricot', 'blueberry'];

// นับจำนวนตามตัวอักษรแรก
const counts = _.countBy(words, function(word) {
  return word[0];
});

console.log(counts);
ผลลัพธ์:
{
  a: 2,
  b: 2
}

สรุป

ในหัวข้อนี้เราได้เรียนรู้การใช้งานขั้นสูงของ Underscore.js ได้แก่
  • _.sortBy() สำหรับจัดเรียงข้อมูล
  • _.groupBy() และ _.countBy() สำหรับจัดกลุ่มและนับจำนวนข้อมูล

6. การจัดการอ็อบเจ็กต์

ในส่วนนี้เราจะเรียนรู้ฟังก์ชันของ Underscore.js ที่ช่วยให้การทำงานกับอ็อบเจ็กต์มีประสิทธิภาพและง่ายขึ้น

1. การดึง key และ value ของอ็อบเจ็กต์

ดึง key – _.keys()

const person = { name: 'Alice', age: 25, city: 'Tokyo' };

const keys = _.keys(person);
console.log(keys);
ผลลัพธ์:
['name', 'age', 'city']

ดึง value – _.values()

const values = _.values(person);
console.log(values);
ผลลัพธ์:
['Alice', 25, 'Tokyo']

2. การสร้าง clone ของอ็อบเจ็กต์ – _.clone()

_.clone() ใช้สร้างสำเนาของอ็อบเจ็กต์ (shallow copy)
const original = { name: 'Alice', age: 25 };
const clone = _.clone(original);

clone.age = 30; // เปลี่ยนค่าใน clone
console.log(original.age); // 25
console.log(clone.age);    // 30

สรุป

ฟังก์ชันที่เกี่ยวข้องกับอ็อบเจ็กต์ใน Underscore.js ได้แก่:
  • _.keys() สำหรับดึง key
  • _.values() สำหรับดึง value
  • _.clone() สำหรับสร้างสำเนา

7. การจัดการฟังก์ชัน

ในส่วนนี้เราจะมาดูวิธีการจัดการฟังก์ชันด้วย Underscore.js ซึ่งช่วยควบคุมการทำงานและปรับปรุงประสิทธิภาพได้

1. การ bind ฟังก์ชัน – _.bind()

_.bind() ใช้กำหนดค่า this ของฟังก์ชัน

ตัวอย่างการใช้งาน

const person = {
  name: 'Alice',
  greet: function(greeting) {
    return `${greeting}, my name is ${this.name}`;
  }
};

const boundGreet = _.bind(person.greet, person);

console.log(boundGreet('Hello')); // Hello, my name is Alice

2. การหน่วงเวลาการทำงาน – _.delay()

_.delay() ใช้หน่วงเวลาการทำงานของฟังก์ชัน

ตัวอย่างการใช้งาน

_.delay(function(message) {
  console.log(message);
}, 2000, 'จะแสดงหลังจาก 2 วินาที');
ผลลัพธ์ (หลัง 2 วินาที):
จะแสดงหลังจาก 2 วินาที

3. ฟังก์ชันที่รันได้เพียงครั้งเดียว – _.once()

_.once() ทำให้ฟังก์ชันสามารถรันได้เพียงครั้งแรกเท่านั้น

ตัวอย่างการใช้งาน

const initialize = _.once(function() {
  console.log('การเริ่มต้นเสร็จสมบูรณ์');
});

initialize(); // ทำงาน
initialize(); // จะถูกเพิกเฉย

4. การ memoize ฟังก์ชัน – _.memoize()

_.memoize() ใช้เก็บ cache ของผลลัพธ์ฟังก์ชันเพื่อลดการคำนวณซ้ำ

ตัวอย่างการใช้งาน

const factorial = _.memoize(function(n) {
  return n <= 1 ? 1 : n * factorial(n - 1);
});

console.log(factorial(5)); // คำนวณจริง
console.log(factorial(5)); // ดึงจาก cache

5. การควบคุมความถี่การทำงาน – _.throttle()

_.throttle() ใช้ควบคุมไม่ให้ฟังก์ชันทำงานบ่อยเกินไป โดยจะกำหนดให้ทำงานได้ในช่วงเวลาที่กำหนดเท่านั้น

ตัวอย่างการใช้งาน

const log = _.throttle(function() {
  console.log('กำลังประมวลผล...');
}, 2000);

// จำลองการคลิกบ่อยๆ
setInterval(log, 500); // จะทำงานเพียงทุกๆ 2 วินาที

สรุป

ฟังก์ชันที่เกี่ยวข้องกับการจัดการฟังก์ชันใน Underscore.js ได้แก่:
  • _.bind() สำหรับกำหนดค่า this
  • _.delay() สำหรับหน่วงเวลา
  • _.once() สำหรับรันครั้งเดียว
  • _.memoize() สำหรับเก็บผลลัพธ์ไว้ใช้ซ้ำ
  • _.throttle() สำหรับควบคุมความถี่การทำงาน

8. ฟังก์ชันอำนวยความสะดวก (Utility Functions)

ในส่วนนี้เราจะดูฟังก์ชันยูทิลิตี้ของ Underscore.js ที่ช่วยให้การทำงานกับข้อมูลสะดวกขึ้น ทั้งการสุ่ม ตรวจสอบ และสร้าง template

1. การสร้างตัวเลขสุ่ม – _.random()

_.random() ใช้สร้างตัวเลขสุ่มภายในช่วงที่กำหนด

ตัวอย่างการใช้งาน

console.log(_.random(1, 10)); // สุ่มจำนวนเต็มระหว่าง 1-10
console.log(_.random(1, 10, true)); // สุ่มทศนิยมด้วย

2. การตรวจสอบค่าว่าง – _.isEmpty()

_.isEmpty() ใช้ตรวจสอบว่าอาร์เรย์ อ็อบเจ็กต์ หรือสตริงว่างหรือไม่

ตัวอย่างการใช้งาน

console.log(_.isEmpty([]));        // true
console.log(_.isEmpty({}));        // true
console.log(_.isEmpty(''));        // true
console.log(_.isEmpty([1, 2, 3])); // false

3. การสร้าง Template – _.template()

_.template() ใช้สร้างข้อความจาก template string

ตัวอย่างการใช้งาน

const template = _.template('สวัสดี, <%= name %>!');
console.log(template({ name: 'Alice' }));
ผลลัพธ์:
สวัสดี, Alice!

สรุป

ฟังก์ชันยูทิลิตี้ที่น่าสนใจของ Underscore.js ได้แก่:
  • _.random() สำหรับสร้างตัวเลขสุ่ม
  • _.isEmpty() สำหรับตรวจสอบข้อมูลว่าง
  • _.template() สำหรับสร้าง template engine

9. สรุป

ในบทความนี้เราได้อธิบายการใช้งาน Underscore.js ตั้งแต่พื้นฐานจนถึงขั้นสูง ไลบรารีนี้ช่วยทำให้การจัดการข้อมูลใน JavaScript ง่ายขึ้นและทำให้เขียนโค้ดได้กระชับและมีประสิทธิภาพมากกว่าเดิม

สิ่งที่เราได้เรียนรู้

  1. การใช้งานพื้นฐาน – ฟังก์ชันสำคัญในการจัดการอาร์เรย์และอ็อบเจ็กต์
  2. การใช้งานขั้นสูง – การจัดกลุ่ม จัดเรียง และการนับข้อมูล
  3. การจัดการฟังก์ชัน – เทคนิคการควบคุมและเพิ่มประสิทธิภาพการทำงานของฟังก์ชัน
  4. ฟังก์ชันยูทิลิตี้ – ฟังก์ชันช่วยเหลืออย่างการสุ่ม ตรวจสอบ และสร้าง template

สรุปท้ายบท

Underscore.js เป็นเครื่องมือที่ทรงพลังซึ่งช่วยให้การพัฒนา JavaScript ง่ายและมีประสิทธิภาพมากขึ้น คุณสามารถนำไปประยุกต์ใช้ในโปรเจกต์ของคุณเพื่อพัฒนาทักษะและเพิ่มประสิทธิภาพการทำงานได้ทันที

คำถามที่พบบ่อย (FAQ)

Q1: Underscore.js ใช้ได้ฟรีหรือไม่?

A: ใช่ Underscore.js เผยแพร่ภายใต้ MIT License สามารถใช้ได้ฟรีทั้งในงานส่วนตัวและเชิงพาณิชย์

Q2: ความแตกต่างระหว่าง Underscore.js และ Lodash คืออะไร?

A: Underscore.js เป็นไลบรารีที่เบาและใช้งานง่าย ส่วน Lodash ถูกพัฒนาต่อยอดจาก Underscore.js โดยเพิ่มฟีเจอร์มากขึ้นและปรับปรุงประสิทธิภาพ การเลือกใช้ขึ้นอยู่กับความต้องการของโปรเจกต์

Q3: ใน ES6+ ยังจำเป็นต้องใช้ Underscore.js หรือไม่?

A: แม้ว่า ES6 จะมีฟังก์ชันจัดการข้อมูลมากขึ้น แต่ Underscore.js ก็ยังมีประโยชน์เมื่อเน้นเรื่อง cross-browser compatibility และการเขียนโค้ดที่กระชับ รวมถึงการทำงานกับ legacy code

Q4: เหมาะกับโปรเจกต์ประเภทใด?

A: เหมาะกับโปรเจกต์ขนาดเล็กถึงกลางที่ต้องการความกระชับและความเร็ว โดยเฉพาะงานที่เน้นการจัดการข้อมูลอย่างมีประสิทธิภาพ

Q5: วิธีติดตั้ง Underscore.js ทำอย่างไร?

A: สามารถติดตั้งได้หลายวิธี เช่น:
  1. เพิ่ม CDN link:
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
  1. ติดตั้งผ่าน npm:
npm install underscore
  1. ติดตั้งผ่าน yarn:
yarn add underscore

Q6: เอกสารอย่างเป็นทางการหาได้ที่ไหน?

A: สามารถดูได้ที่เว็บไซต์ทางการ: Underscore.js Official Site

Q7: ใช้กับโปรเจกต์ขนาดใหญ่ได้หรือไม่?

A: ใช้ได้ แต่สำหรับโปรเจกต์ขนาดใหญ่ที่ต้องการประสิทธิภาพสูงและโมดูลาร์มากกว่า แนะนำให้ใช้ Lodash

Q8: มีวิธีควบคุมการทำงานของฟังก์ชันแบบอื่นหรือไม่?

A: ใน JavaScript สมัยใหม่สามารถใช้ setTimeout(), setInterval(), Promise และ async/await ได้ แต่การใช้ _.throttle() หรือ _.debounce() ของ Underscore.js จะทำให้โค้ดสั้นและเข้าใจง่ายขึ้น

Q9: มีข้อควรระวังอะไรบ้างเมื่อใช้ Underscore.js?

A:
  1. ตรวจสอบว่าไม่พึ่งพามากเกินไป เพราะ ES6+ มีฟังก์ชันที่ทดแทนได้
  2. ควรอัปเดตเวอร์ชันล่าสุดเสมอเพื่อหลีกเลี่ยงปัญหาด้านความปลอดภัย
  3. พิจารณา Lodash หากโปรเจกต์มีความซับซ้อนมากขึ้น

Q10: ควรใช้ Underscore.js เป็น template engine หรือไม่?

A: ฟังก์ชัน _.template() ของ Underscore.js เหมาะสำหรับงานง่ายๆ แต่ถ้าต้องการความสามารถขั้นสูง แนะนำให้ใช้ Handlebars.js หรือ EJS แทน
広告