Dấu chấm phẩy JavaScript ở đầu mã: vẫn là phương pháp hay?

Question

Tôi đã được dạy rằng đó là một thực hành tốt để luôn luôn chèn một dấu chấm phẩy vào đầu mã JavaScript, như sau:

;(function(){ 

})(); 

Tuy nhiên, nhiều thư viện phổ biến JavaScript/khung không sử dụng này, chẳng hạn như jQuery , Backbone, vv

Tôi tin rằng dấu chấm phẩy lúc đầu được cho là ngăn chặn mã xấu phá vỡ mã được nén/nén, vv Nhưng vẫn còn, tại sao không ai sử dụng nó nữa?

Dấu chấm phẩy lúc đầu hóa ra là vô dụng vì một lý do nào đó?

Answer 1

Lý tưởng việc thu nhỏ và hợp nhất nhiều tệp sẽ không ảnh hưởng đến kiểu mã hóa của bạn. Bạn sẽ có thể viết chương trình của bạn như bạn muốn và sau đó sử dụng một công cụ tự động để hợp nhất chính xác và rút gọn dự án của bạn.

Có rất nhiều công cụ tự động thực hiện việc này. Hãy xem ví dụ UglifyJS 2. Tôi chắc rằng bạn sẽ có thể tìm thấy nhiều công cụ như vậy hơn nếu bạn nhìn xung quanh.

Quay lại câu hỏi, điều quan trọng là chèn dấu chấm phẩy sau khi biểu thức hàm được gọi ngay lập tức như Daff đã chỉ ra. Tuy nhiên không có lý do gì để đặt dấu chấm phẩy trước nó. Nếu bạn là một cậu bé tốt và đặt một dấu chấm phẩy sau mỗi tuyên bố và biểu hiện sau đó bạn sẽ không bao giờ có bất kỳ vấn đề.

Đừng để JavaScript bao giờ tự động chèn dấu chấm phẩy cho bạn.

Nơi duy nhất mà nó cho phép để không đặt một dấu chấm phẩy là sau phần khai báo hàm:

function foo() {} // it's alright to not put a semicolon here 

Tuy nhiên nếu bạn đang sử dụng một biểu hiện chức năng sau đó luôn đặt một dấu chấm phẩy.

(function foo() {})(); // you should put a semicolon here 

Đặt dấu chấm phẩy ở bất kỳ nơi nào khác chỉ gây nhầm lẫn. Đặc biệt là ở đầu của một dòng. Những người từ các nền tảng lập trình khác cũng có thể nghĩ rằng đó là sự bắt đầu của một kết thúc dòng bình luận.

Answer 2

Thực tiễn phổ biến hơn là thêm dấu chấm phẩy ở cuối tệp. Vấn đề là, khi bạn nối hai tập tin như thế này:

// file1.js 
(function() { 
})() 

// file2.js 
(function() { 
})() 

Nếu không đặt một dấu chấm phẩy vào cuối file1, nó sẽ cố gắng để gọi giá trị trả về từ hàm trong file1 với các chức năng trong file2. Đặt dấu chấm phẩy ở cuối mỗi tệp sẽ giải quyết vấn đề này (như sẽ đặt chúng ở đầu).

Một cách khác là để biến chức năng gọi vào một tuyên bố như thế này:

!function() { 
}(); 

Tôi nghĩ rằng đây cũng là khuyến cáo của JSLint, bởi vì trong trường hợp này bạn không cần phải lo lắng về dấu chấm phẩy (mặc dù bạn nên sử dụng chúng anyway nhưng đó là một cuộc thảo luận khác nhau hoàn toàn;).