Hướng dẫn javascript code execution order - thứ tự thực thi mã javascript

Thiết kế trang web của bạn bằng JavaScript đòi hỏi sự chú ý đến thứ tự mã của bạn xuất hiện và liệu bạn có gói gọn mã thành các chức năng hoặc đối tượng, tất cả đều ảnh hưởng đến thứ tự mã chạy. & NBSP;

Vị trí của JavaScript trên trang web của bạn

Vì JavaScript trên trang của bạn thực thi dựa trên một số yếu tố nhất định, hãy xem xét nơi và cách thêm JavaScript vào trang web. & NBSP;

Về cơ bản có ba vị trí mà chúng ta có thể đính kèm JavaScript:

• Trực tiếp vào đầu trang
• Trực tiếp vào phần thân của trang
• Từ một người xử lý/người nghe sự kiện

Nó không tạo ra bất kỳ sự khác biệt nào cho dù JavaScript nằm trong chính trang web hoặc trong các tệp bên ngoài được liên kết với trang. Nó cũng không quan trọng & nbsp; cho dù người xử lý sự kiện được mã hóa cứng vào trang hoặc được thêm bởi chính JavaScript (ngoại trừ việc chúng không thể được kích hoạt trước khi chúng được thêm vào).

Mã trực tiếp trên trang

Có nghĩa là gì khi nói rằng JavaScript là & nbsp; trực tiếp trong đầu hoặc phần thân của trang? & Nbsp; nếu mã không được đặt trong một hàm hoặc đối tượng, nó nằm trực tiếp trong trang. Trong trường hợp này, mã chạy tuần tự ngay khi tệp chứa mã đã được tải đủ để mã đó được truy cập.

Mã nằm trong một hàm hoặc đối tượng chỉ được chạy khi hàm hoặc đối tượng đó được gọi.

Về cơ bản, điều này có nghĩa là bất kỳ mã nào bên trong đầu và phần thân của trang của bạn không nằm trong hàm hoặc đối tượng sẽ chạy vì trang đang tải & nbsp; - & nbsp; ngay khi & nbsp; trang đã tải đủ để truy cập mã đó.

Bit cuối cùng đó rất quan trọng và tác động đến thứ tự bạn đặt mã của mình trên trang: bất kỳ mã nào được đặt trực tiếp trong trang cần tương tác với các phần tử trong trang phải xuất hiện sau các phần tử trong trang mà nó phụ thuộc.

Nói chung, điều này có nghĩa là nếu bạn sử dụng mã trực tiếp để tương tác với nội dung trang của mình, mã đó sẽ được đặt ở dưới cùng của cơ thể.

Mã trong các chức năng và đối tượng

Một mã bên trong các hàm hoặc đối tượng được chạy bất cứ khi nào hàm hoặc đối tượng được gọi. Nếu nó được gọi từ mã trực tiếp trong đầu hoặc phần thân của trang, thì vị trí của nó theo thứ tự thực thi thực sự là điểm mà hàm hoặc đối tượng được gọi từ mã trực tiếp.

Mã được gán cho người xử lý sự kiện và người nghe

Việc gán một hàm cho trình xử lý sự kiện hoặc trình nghe không dẫn đến chức năng được chạy tại điểm mà nó được gán - & nbsp; với điều kiện là bạn thực sự đang gán chức năng và không chạy chức năng và gán giá trị được trả về. .() on the end of the function name when it is being assigned to an event since the addition of the parentheses runs the function and assigns the value returned rather than assigning the function itself.)

Các chức năng được gắn vào người xử lý sự kiện và người nghe chạy khi sự kiện mà chúng được gắn vào được kích hoạt. Hầu hết các sự kiện được kích hoạt bởi khách truy cập tương tác với trang của bạn. Tuy nhiên, một số ngoại lệ tồn tại như sự kiện tải trên cửa sổ, được kích hoạt khi trang hoàn thành tải.load event on the window itself, which is triggered when the page finishes loading.

Các chức năng gắn liền với các sự kiện trên các phần tử trang

Bất kỳ chức năng nào được gắn vào các sự kiện trên các phần tử trong chính trang sẽ chạy theo hành động của từng khách truy cập - mã này & NBSP; mã chỉ chạy khi một sự kiện cụ thể xảy ra để kích hoạt nó. Vì lý do này, nó không & nbsp; vấn đề nếu mã không bao giờ chạy cho một khách truy cập nhất định, vì khách truy cập đó rõ ràng đã không thực hiện tương tác yêu cầu.

Tất cả điều này, tất nhiên, giả định rằng khách truy cập của bạn đã truy cập trang của bạn với trình duyệt đã bật JavaScript.

Các tập lệnh người dùng khách truy cập tùy chỉnh

Một số người dùng đã cài đặt các tập lệnh đặc biệt có thể & nbsp; tương tác với trang web của bạn. Các tập lệnh này chạy theo tất cả mã trực tiếp của bạn, nhưng trước bất kỳ & nbsp; mã được gắn vào trình xử lý sự kiện tải.

Vì trang của bạn không biết gì về các tập lệnh người dùng này, bạn không có cách nào để biết những tập lệnh bên ngoài này có thể làm gì & nbsp; - & nbsp; & nbsp; họ & nbsp; xử lý được chỉ định. Nếu mã này ghi đè & NBSP; Trình xử lý hoặc người nghe sự kiện, phản hồi cho các kích hoạt sự kiện sẽ chạy mã được xác định bởi người dùng thay vì hoặc ngoài mã của bạn.

Điểm mang về ở đây là bạn không thể cho rằng mã được thiết kế để chạy sau khi trang được tải sẽ được phép chạy theo cách mà bạn thiết kế. Ngoài ra, hãy lưu ý rằng một số trình duyệt có các tùy chọn cho phép vô hiệu hóa một số trình xử lý sự kiện trong trình duyệt, trong trường hợp đó, một trình kích hoạt sự kiện có liên quan sẽ không khởi chạy trình xử lý/trình nghe sự kiện tương ứng trong mã của bạn.