Underscore.JS - การตั้งค่าสภาพแวดล้อม
ในบทนี้คุณจะได้เรียนรู้รายละเอียดเกี่ยวกับการตั้งค่าสภาพแวดล้อมการทำงานของ Underscore.JS บนเครื่องคอมพิวเตอร์ของคุณ ก่อนที่คุณจะเริ่มทำงานกับ Underscore.JS คุณต้องมีสิทธิ์เข้าถึงไลบรารี คุณสามารถเข้าถึงไฟล์ได้ด้วยวิธีการใด ๆ ต่อไปนี้ -
วิธีที่ 1: การใช้ไฟล์ Underscore.JS ในเบราว์เซอร์
ในวิธีนี้เราจะต้องใช้ไฟล์ Underscore.JS จากเว็บไซต์ทางการและจะใช้โดยตรงในเบราว์เซอร์
ขั้นตอนที่ 1
ขั้นแรกให้ไปที่เว็บไซต์ทางการของ Underscore.JS https://underscorejs.org/.
สังเกตว่ามีตัวเลือกให้ดาวน์โหลดซึ่งจะช่วยให้คุณล่าสุดขีด-min.js ไฟล์UMD (การผลิต)ที่มีอยู่ คลิกขวาที่ลิงค์แล้วเลือกบันทึกเป็น โปรดทราบว่าไฟล์สามารถใช้ได้ทั้งแบบและไม่มีการย่อขนาด
ขั้นตอนที่ 2
ตอนนี้รวม underscore-min.js ข้างใน scriptแท็กและเริ่มทำงานกับ Underscore.JS สำหรับสิ่งนี้คุณสามารถใช้รหัสที่ระบุด้านล่าง -
<script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>ให้นี่คือตัวอย่างการทำงานและผลลัพธ์เพื่อความเข้าใจที่ดีขึ้น -
ตัวอย่าง
<html>
<head>
<title>Underscore.JS - Working Example</title>
<script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>
<style>
div {
border: solid 1px #ccc;
padding:10px;
font-family: "Segoe UI",Arial,sans-serif;
width: 50%;
}
</style>
</head>
<body>
<div style = "font-size:25px" id = "list">
</div>
<script type = "text/JavaScript">
var numbers = [1, 2, 3, 4];
var listOfNumbers = '';
_.each(numbers, function(x) { listOfNumbers += x + ' ' });
document.getElementById("list").innerHTML = listOfNumbers;
</script>
</body>
</html>เอาต์พุต
วิธีที่ 2: การใช้ Node.js
หากคุณเลือกใช้วิธีนี้ตรวจสอบให้แน่ใจว่าคุณมี Node.js และ npmติดตั้งในระบบของคุณ คุณสามารถใช้คำสั่งต่อไปนี้เพื่อติดตั้ง Underscore.JS -
npm install underscoreคุณสามารถสังเกตผลลัพธ์ต่อไปนี้เมื่อติดตั้ง Underscore.JS สำเร็จ -
+ [email protected]
added 1 package from 1 contributor and audited 1 package in 6.331s
found 0 vulnerabilitiesตอนนี้เพื่อทดสอบว่า Underscore.JS ทำงานได้ดีกับ Node.js หรือไม่ให้สร้างไฟล์ tester.js และเพิ่มรหัสต่อไปนี้ -
var _ = require('underscore');
var numbers = [1, 2, 3, 4];
var listOfNumbers = '';
_.each(numbers, function(x) { listOfNumbers += x + ' ' });
console.log(listOfNumbers);บันทึกโปรแกรมข้างต้นใน tester.js. คำสั่งต่อไปนี้ใช้เพื่อคอมไพล์และรันโปรแกรมนี้
คำสั่ง
\>node tester.jsเอาต์พุต
1 2 3 4