Underscore.JS - คู่มือฉบับย่อ
Underscore.JS เป็นไลบรารีที่ใช้จาวาสคริปต์ยอดนิยมซึ่งมีฟังก์ชันมากกว่า 100 ฟังก์ชันเพื่ออำนวยความสะดวกในการพัฒนาเว็บ มันมีฟังก์ชั่นตัวช่วยเช่นแผนที่ตัวกรองเรียกใช้รวมถึงการผูกฟังก์ชันการสร้างเทมเพลตจาวาสคริปต์การตรวจสอบความเท่าเทียมกันอย่างลึกซึ้งการสร้างดัชนีและอื่น ๆ สามารถใช้ Underscore.JS ได้โดยตรงภายในเบราว์เซอร์และกับ Node.js
การทำงานกับออบเจ็กต์โดยใช้ JavaScript อาจเป็นเรื่องที่ค่อนข้างท้าทายโดยเฉพาะอย่างยิ่งหากคุณมีการปรับแต่งมากมายที่ต้องทำ ขีดล่างมาพร้อมกับคุณสมบัติมากมายที่ช่วยให้งานของคุณง่ายขึ้น
Underscore.JS เป็นโครงการโอเพ่นซอร์สและคุณสามารถมีส่วนร่วมในไลบรารีและเพิ่มคุณสมบัติในรูปแบบของปลั๊กอินได้อย่างง่ายดายและทำให้พร้อมใช้งานบน GitHub และใน Node.js
คุณสมบัติ
แจ้งให้เราเข้าใจโดยละเอียดเกี่ยวกับคุณสมบัติที่สำคัญทั้งหมดที่มีให้กับขีดล่าง -
คอลเลกชัน
Underscore.JS มีฟังก์ชันต่างๆสำหรับคอลเลกชันเช่นแต่ละรายการแผนที่ลดซึ่งใช้เพื่อใช้การดำเนินการกับแต่ละรายการของคอลเลกชัน มีวิธีการเช่น groupBy, countBy, max, min ซึ่งประมวลผลคอลเลกชันและทำให้งานง่ายขึ้น
อาร์เรย์
Underscore.JS มีฟังก์ชันต่างๆสำหรับอาร์เรย์ที่ต้องการทำซ้ำและประมวลผลอาร์เรย์เช่น first, initial, lastIndexOf, จุดตัด, ความแตกต่าง ฯลฯ
ฟังก์ชั่น
Underscore.JS มีฟังก์ชันต่างๆเช่นการผูกการหน่วงเวลาก่อนหลังเป็นต้น
วัตถุ
Underscore.JS มีฟังก์ชันในการจัดการกับวัตถุเพื่อแมปวัตถุและเปรียบเทียบวัตถุ ตัวอย่างเช่นคีย์ค่าขยายขยายขอบเขต isEqual isEmpty เป็นต้น
ยูทิลิตี้
Underscore.JS มีวิธีการยูทิลิตี้ต่างๆเช่น noConflict, random, iteratee, escape เป็นต้น
โซ่
Underscore.JS มีวิธีการผูกมัดเช่นเดียวกับห่วงโซ่มูลค่า
ในบทต่อ ๆ ไปเราจะกล่าวถึงฟังก์ชันที่สำคัญของ 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 4Underscore.JS มีวิธีการใช้งานที่ง่ายมากมายซึ่งช่วยในการทำซ้ำ Collections บทนี้จะกล่าวถึงรายละเอียด
Underscore.JS มีวิธีการต่างๆในการวนซ้ำ Collections ตามรายการด้านล่าง -
| ซีเนียร์ | วิธีการและไวยากรณ์ |
|---|---|
| 1 | แต่ละ _.each (รายการ iteratee [บริบท]) |
| 2 | แผนที่ _.map (รายการ iteratee [บริบท]) |
| 3 | ลด _.reduce (รายการ, iteratee, [บันทึก], [บริบท]) |
| 4 | ลดขวา _.reduceRight (รายการ iteratee [บันทึก] [บริบท]) |
| 5 | หา _.find (รายการเพรดิเคต [บริบท]) |
| 6 | กรอง _.filter (รายการเพรดิเคต [บริบท]) |
| 7 | ที่ไหน _.where (รายการคุณสมบัติ) |
| 8 | findWhere _.findWhere (รายการคุณสมบัติ) |
| 9 | ปฏิเสธ _.reject (รายการเพรดิเคต [บริบท]) |
| 10 | ทุก _.every (รายการ [เพรดิเคต] [บริบท]) |
| 11 | บาง _.some (รายการ, [เพรดิเคต], [บริบท]) |
Underscore.JS มีวิธีการใช้งานง่ายมากมายที่ช่วยในการประมวลผลคอลเล็กชัน บทนี้จะกล่าวถึงรายละเอียด
Underscore.JS มีวิธีการต่างๆในการประมวลผลคอลเล็กชันตามรายการด้านล่าง
| ซีเนียร์ | วิธีการและไวยากรณ์ |
|---|---|
| 1 | ประกอบด้วย _.contains (รายการค่า [fromIndex]) |
| 2 | เรียก _.invoke (รายการ methodName, * อาร์กิวเมนต์) |
| 3 | ถอนขน _.pluck (รายการ propertyName) |
| 4 | สูงสุด _.max (รายการ [iteratee] [บริบท]) |
| 5 | นาที _.min (รายการ [iteratee], [บริบท]) |
| 6 | sortBy _.sortBy (รายการ iteratee [บริบท]) |
| 7 | groupBy _.groupBy (รายการ iteratee [บริบท]) |
| 8 | ดัชนีโดย _.indexBy (รายการ iteratee [บริบท]) |
| 9 | countBy _.countBy (รายการ iteratee [บริบท]) |
| 10 | สับเปลี่ยน _.shuffle (รายการ) |
| 11 | ตัวอย่าง _.sample (รายการ [n]) |
| 12 | toArray _.toArray (รายการ) |
| 13 | ขนาด _.size (รายการ) |
| 14 | พาร์ติชัน _.partition (รายการเพรดิเคต) |
| 15 | กะทัดรัด _.compact (รายการ) |
Underscore.JS มีวิธีการใช้งานง่ายมากมายที่ช่วยในการทำซ้ำ Arrays บทนี้จะกล่าวถึงรายละเอียด
Underscore.JS มีวิธีการต่างๆในการทำซ้ำ Arrays ตามรายการด้านล่าง -
| ซีเนียร์ | วิธีการและไวยากรณ์ |
|---|---|
| 1 | อันดับแรก _.first (อาร์เรย์ [n]) |
| 2 | เริ่มต้น _.initial (อาร์เรย์ [n]) |
| 3 | ล่าสุด _.last (อาร์เรย์ [n]) |
| 4 | พักผ่อน _.rest (อาร์เรย์ [ดัชนี]) |
| 5 | ดัชนีของ _.indexOf (อาร์เรย์, ค่า, [isSorted]) |
| 6 | lastIndexOf _.lastIndexOf (อาร์เรย์ค่า [fromIndex]) |
| 7 | sortedIndex _.sortedIndex (อาร์เรย์, ค่า, [iteratee], [บริบท]) |
| 8 | findIndex _.findIndex (อาร์เรย์เพรดิเคต [บริบท]) |
| 9 | findLastIndex _.findLastIndex (อาร์เรย์เพรดิเคต [บริบท]) |
Underscore.JS มีวิธีการใช้งานง่ายมากมายที่ช่วยในการประมวลผล Arrays บทนี้จะกล่าวถึงรายละเอียด
Underscore.JS มีวิธีการต่างๆในการประมวลผล Arrays ตามรายการด้านล่าง -
| ซีเนียร์ | วิธีการและไวยากรณ์ |
|---|---|
| 1 | เรียบ _.flatten (อาร์เรย์ [ตื้น]) |
| 2 | ไม่มี _.without (อาร์เรย์ * ค่า) |
| 3 | สหภาพแรงงาน _.union (* อาร์เรย์) |
| 4 | สี่แยก _. จุดตัด (* อาร์เรย์) |
| 5 | ความแตกต่าง _.difference (อาร์เรย์ * อื่น ๆ ) |
| 6 | uniq _.uniq (อาร์เรย์, [isSorted], [iteratee]) |
| 7 | ซิป _.zip (* อาร์เรย์) |
| 8 | เปิดเครื่องรูด _.unzip (อาร์เรย์) |
| 9 | วัตถุ _.object (รายการ [ค่า]) |
| 10 | ก้อน _.chunk (อาร์เรย์ความยาว) |
| 11 | พิสัย _.range ([เริ่ม], หยุด, [ขั้นตอน]) |
Underscore.JS มีวิธีการใช้งานง่ายมากมายที่ช่วยในการจัดการฟังก์ชั่น บทนี้จะกล่าวถึงรายละเอียด
Underscore.JS มีวิธีการต่างๆในการจัดการฟังก์ชั่นตามรายการด้านล่าง
| ซีเนียร์ | วิธีการและไวยากรณ์ |
|---|---|
| 1 | ผูก _.bind (ฟังก์ชันวัตถุ * อาร์กิวเมนต์) |
| 2 | บางส่วน _.partial (ฟังก์ชัน * อาร์กิวเมนต์) |
| 3 | บันทึก _.memoize (ฟังก์ชัน [hashFunction]) |
| 4 | ล่าช้า _.delay (ฟังก์ชันรอ * อาร์กิวเมนต์) |
| 5 | ครั้งเดียว _.once (ฟังก์ชัน) |
| 6 | ก่อน _.before (นับฟังก์ชัน) |
| 7 | ห่อ _.wrap (ฟังก์ชันกระดาษห่อหุ้ม) |
| 8 | ลบล้าง _.negate (เพรดิเคต) |
| 9 | เขียน _.compose (* ฟังก์ชัน) |
Underscore.JS มีวิธีการใช้งานง่ายมากมายที่ช่วยในการทำแผนที่วัตถุ บทนี้จะกล่าวถึงรายละเอียด
Underscore.JS มีวิธีการต่างๆในการจัดการกับการแมปวัตถุตามรายการด้านล่าง -
| ซีเนียร์ | วิธีการและไวยากรณ์ |
|---|---|
| 1 | คีย์ _.keys (วัตถุ) |
| 2 | allKeys _.allKeys (วัตถุ) |
| 3 | ค่า _.values (วัตถุ) |
| 4 | mapObject _.mapObject (วัตถุ iteratee [บริบท]) |
| 5 | คู่ _.pairs (วัตถุ) |
| 6 | กลับด้าน _.invert (วัตถุ) |
| 7 | สร้าง _.create (ต้นแบบอุปกรณ์ประกอบฉาก) |
| 8 | ฟังก์ชั่น _.functions (วัตถุ) |
| 9 | findKey _.findKey (วัตถุเพรดิเคต [บริบท]) |
Underscore.JS มีวิธีการใช้งานง่ายมากมายที่ช่วยในการอัปเดตวัตถุ บทนี้จะกล่าวถึงรายละเอียด
Underscore.JS มีวิธีการต่างๆในการจัดการการอัปเดตออบเจ็กต์ตามรายการด้านล่าง -
| ซีเนียร์ | วิธีการและไวยากรณ์ |
|---|---|
| 1 | ขยาย _.extend (ปลายทาง * แหล่งที่มา) |
| 2 | เลือก _.pick (วัตถุ * คีย์) |
| 3 | ละเว้น _.omit (วัตถุ * คีย์) |
| 4 | ค่าเริ่มต้น _.defaults (วัตถุ * ค่าเริ่มต้น) |
| 5 | โคลน _.clone (วัตถุ) |
| 6 | แตะ _.tap (วัตถุตัวสกัดกั้น) |
| 7 | มี _.has (วัตถุคีย์) |
| 8 | ทรัพย์สิน _.property (เส้นทาง) |
| 9 | คุณสมบัติของ _.propertyOf (วัตถุ) |
Underscore.JS มีวิธีการใช้งานง่ายมากมายที่ช่วยในการเปรียบเทียบวัตถุ บทนี้จะกล่าวถึงรายละเอียด
Underscore.JS มีวิธีการต่างๆในการจัดการการเปรียบเทียบวัตถุตามรายการด้านล่าง -
| ซีเนียร์ | วิธีการและไวยากรณ์ |
|---|---|
| 1 | ผู้จับคู่ _.matcher (ผู้เข้าร่วม) |
| 2 | isEqual _.isEqual (วัตถุอื่น ๆ ) |
| 3 | isMatch _.isMatch (วัตถุคุณสมบัติ) |
| 4 | มันว่างเปล่า _.isEmpty (วัตถุ) |
| 5 | isArray _.isArray (วัตถุ) |
| 6 | isObject _.isObject (ค่า) |
| 7 | isArguments _.isArguments (วัตถุ) |
| 8 | isFunction _.isFunction (วัตถุ) |
| 9 | isString _.isString (วัตถุ) |
| 10 | isNumber _.isNumber (วัตถุ) |
| 11 | isFinite _.isFinite (วัตถุ) |
| 12 | isBoolean _.isBoolean (วัตถุ) |
| 13 | isDate _.isDate (วัตถุ) |
| 14 | isRegExp _.isRegExp (วัตถุ) |
| 15 | isError _.isError (วัตถุ) |
| 16 | isSymbol _.isSymbol (วัตถุ) |
| 17 | isMap _.isMap (วัตถุ) |
| 18 | isWeakMap _.isWeakMap (วัตถุ) |
| 19 | isSet _.isSet (วัตถุ) |
| 20 | isWeakSet _.isWeakSet (วัตถุ) |
| 21 | isNaN _.isNaN (วัตถุ) |
| 22 | isNull _.isNull (วัตถุ) |
| 23 | isUndefined _.isUndefined (ค่า) |
Underscore.JS มีวิธียูทิลิตี้ที่ใช้งานง่ายมากมาย บทนี้จะกล่าวถึงรายละเอียด
Underscore.JS มีวิธีการยูทิลิตี้ต่างๆตามรายการด้านล่าง -
| ซีเนียร์ | วิธีการและไวยากรณ์ |
|---|---|
| 1 | เอกลักษณ์ _.identity (มูลค่า) |
| 2 | คงที่ _.constant (ค่า) |
| 3 | noop _.noop () |
| 4 | ครั้ง _.times (n, iteratee, [บริบท]) |
| 5 | สุ่ม _.random (ต่ำสุดสูงสุด) |
| 6 | มิกซ์อิน _.mixin (วัตถุ) |
| 7 | iteratee _.iteratee (ค่า, [บริบท]) |
| 8 | ID ไม่ซ้ำกัน _.uniqueId ([คำนำหน้า]) |
| 9 | หนี _.escape (สตริง) |
| 10 | unescape _.unescape (สตริง) |
| 11 | ผลลัพธ์ _.result (วัตถุคุณสมบัติ [defaultValue]) |
| 12 | ตอนนี้ _. ตอนนี้ () |
| 13 | แม่แบบ _.template (templateString, [การตั้งค่า]) |
Underscore.JS มีวิธีการสร้างห่วงโซ่ของวิธีการจากนั้นเรียกคืนผลลัพธ์ที่มีประสิทธิภาพ บทนี้จะกล่าวถึงรายละเอียด
Underscore.JS มีวิธีการยูทิลิตี้ต่างๆตามรายการด้านล่าง -
| ซีเนียร์ | วิธีการและไวยากรณ์ |
|---|---|
| 1 | เชื่อมต่อ _.chain (วัตถุ) |
| 2 | มูลค่า _.chain (obj) .value () |