เซมิโคลอนชั้นนำในไลบรารี JavaScript ทำอะไร

ในห้องสมุด JavaScript หลายแห่งฉันเห็นสัญลักษณ์นี้ตั้งแต่แรก:

/**
 * Library XYZ
 */
;(function () {
  // ... and so on

ในขณะที่ฉันสบายอย่างสมบูรณ์กับไวยากรณ์

(function(){...})()

ฉันสงสัยว่าเซมิโคลอนชั้นนำคืออะไร ทั้งหมดที่ฉันสามารถทำได้คือประกัน นั่นคือถ้าไลบรารีถูกฝังในโค้ด buggy อื่น ๆ มันจะทำหน้าที่เป็น "คำสั่งสุดท้ายจบลงที่นี่ด้วยการชนแบบเร็ว"

มันมีฟังก์ชั่นอื่น ๆ บ้างไหม?

มันช่วยให้คุณเชื่อมไฟล์ JavaScript หลาย ๆ ไฟล์ให้เป็นไฟล์เดียวได้อย่างปลอดภัย

คำตอบที่ดีที่สุดนั้นเป็นจริงในคำถามดังนั้นฉันจะเขียนลงไปที่นี่เพื่อความชัดเจน:

ชั้นนำในด้านหน้าของฟังก์ชั่นการแสดงออกทันที-เรียกอยู่ที่นั่นเพื่อป้องกันข้อผิดพลาดเมื่อผนวกไฟล์ระหว่างเรียงต่อกันไปยังไฟล์ที่มีการแสดงออกไม่ยกเลิกอย่างถูกต้องด้วย;;

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

โดยทั่วไปหากคำสั่งเริ่มต้นด้วย (, [, /, +, หรือ -, มีโอกาสที่จะสามารถตีความได้ว่าเป็นความต่อเนื่องของข้อความก่อนหน้านี้ข้อความที่เริ่มต้นด้วย /, + และ - ค่อนข้างหายากในทางปฏิบัติ แต่คำสั่งที่ขึ้นต้นด้วย (และ [ไม่ใช่เรื่องแปลกเลยอย่างน้อยก็ในบางรูปแบบของการเขียนโปรแกรม JavaScript) โปรแกรมเมอร์บางคนชอบที่จะใส่เซมิโคลอนการป้องกันไว้ที่จุดเริ่มต้นของคำสั่งใด ๆ เพื่อที่ว่ามันจะยังคงทำงานได้อย่างถูกต้อง ก่อนที่จะถูกแก้ไขและลบเครื่องหมายอัฒภาคก่อนหน้านี้:

var x = 0 // Semicolon omitted here
;[x,x+1,x+2].forEach(console.log) // Defensive ; keeps this statement separate

ที่มา:

JavaScript: The Definitive Guide, 6th edition

สิ่งนี้เรียกว่าเซมิโคลอนชั้นนำ

วัตถุประสงค์หลักคือเพื่อป้องกันตัวเองจากรหัสก่อนหน้าซึ่งถูกปิดอย่างไม่เหมาะสมซึ่งอาจทำให้เกิดปัญหา อัฒภาคจะป้องกันไม่ให้สิ่งนี้เกิดขึ้น หากรหัสก่อนหน้านี้ถูกปิดอย่างไม่เหมาะสมอัฒภาคของเราจะแก้ไขสิ่งนี้ หากปิดอย่างถูกต้องแล้วเครื่องหมายอัฒภาคของเราจะไม่เป็นอันตรายและจะไม่มีผลข้างเคียง

คำตอบเดียวคือการเชื่อมไฟล์ JavaScript หลาย ๆ ไฟล์อย่างปลอดภัย การใช้เครื่องหมายอัฒภาคไม่ได้ทำให้เกิดปัญหา

สมมติว่าคุณมีฟังก์ชั่นหลายอย่าง:

IIFE 1

(function(){
  // The rest of the code
})(); // Note it is an IIFE

IIFE 2

(function(){
   // The rest of the code
})(); // Note it is also an IIFE

ในการต่อข้อมูลอาจดูเหมือน:

(function(){})()(function(){})()

แต่ถ้าคุณเพิ่มเครื่องหมายอัฒภาคก่อนฟังก์ชันจะมีลักษณะดังนี้:

;(function(){})();(function(){})()

ดังนั้นโดยการเพิ่ม;มันจะดูแลถ้าการแสดงออกใด ๆ ไม่ได้ถูกยกเลิกอย่างถูกต้อง

ตัวอย่างที่ 2

สมมติว่าคุณมีไฟล์ JavaScript ที่มีตัวแปร:

var someVar = "myVar"

ไฟล์ JavaScript อื่นที่มีฟังก์ชั่นบางอย่าง:

(function(){})()

ตอนนี้มันจะมีลักษณะต่อกัน

var someVar = "myVar"(function(){})() // It may give rise to an error

ด้วยเซมิโคลอนมันจะมีลักษณะดังนี้:

var someVar = "myVar";(function(){})()

เป็นเรื่องที่ดีเมื่อคุณลดขนาดโค้ด JavaScript มันป้องกันข้อผิดพลาดทางไวยากรณ์ที่ไม่คาดคิด