JavaScript phía máy khách không cung cấp cách nào để quản lý nhiều tập lệnh trong trình duyệt. Nếu bạn có 20 tập lệnh, bạn phải đặt 20 thẻ tập lệnh vào một trang theo đúng thứ tự. May mắn thay, có cách giải quyết. Trong video này, Craig Buckler chứng minh ba trong số này. Kỹ thuật Ajax, bộ chuyển mã và công cụ xây dựng. Các nhà phát triển JavaScript mới làm quen nên biết từng phương pháp này, những phương pháp này rất quan trọng đối với việc quản lý các tệp và phần phụ thuộc

Học nhanh hơn. Đào sâu hơn. Xem xa hơn

Tham gia nền tảng học tập trực tuyến O'Reilly. Nhận bản dùng thử miễn phí ngay hôm nay và tìm câu trả lời nhanh chóng hoặc làm chủ một cái gì đó mới và hữu ích

Nhiều tệp Javascript có thể được tải động và thực thi theo một thứ tự nhất định bằng cách tạo phần tử cho mỗi tệp và chèn chúng .

// scripts to execute in order
let scripts = [
				'script1.js',
				'script2.js',
				'script3.js'
			];

scripts.forEach[function[url] {
	let script = document.createElement['script'];
	script.src = url;
	script.async = false;
	document.body.appendChild[script];
}];

Điều quan trọng là phải đặt async=false cho tập lệnh đã tạo. Nếu không, các trình duyệt sẽ tự động đặt thuộc tính này thành true và sau đó thứ tự thực thi sẽ không được giữ nguyên.

Biết khi nào tất cả các tập lệnh đã được tải

Sự kiện onload của phần tử . Để biết khi nào tất cả các tập lệnh đã tải xong, chúng ta có thể sử dụng khái niệm Lời hứa.

function loadScript[url] {
	return new Promise[function[resolve, reject] {
		let script = document.createElement['script'];
		script.src = url;
		script.async = false;
		script.onload = function[] {
			resolve[url];
		};
		script.onerror = function[] {
			reject[url];
		};
		document.body.appendChild[script];
	}];
}

let scripts = [
				'script1.js',
				'script2.js',
				'script3.js'
			];

// save all Promises as array
let promises = [];
scripts.forEach[function[url] {
	promises.push[loadScript[url]];
}];

Promise.all[promises]
.then[function[] {
	console.log['all scripts loaded'];
}].catch[function[script] {
	console.log[script + ' failed to load'];
}];

• Hàm loadScript[] chèn phần tử tập lệnh và trả về một Lời hứa. Lời hứa này được giải quyết khi tập lệnh được tải và bị từ chối khi tải không thành công
• Lời hứa cho tất cả các tập lệnh được lưu trong một mảng và được chuyển đến Lời hứa. all[] làm tham số. Phương thức này trả về một Lời hứa được giải quyết khi tất cả các Lời hứa đầu vào đã được giải quyết. Nó bị từ chối khi bất kỳ Lời hứa đầu vào nào bị từ chối.

Tài nguyên hữu ích

• Kiểm tra xem nhiều lời hứa Javascript đã hoàn thành chưa
• Lời hứa Javascript - Hiểu về chuỗi và xử lý lỗi

Xin chào cộng đồng, tôi thực sự chưa quen với việc phát triển và viết mã web, gần đây tôi cố gắng tạo một trang web bằng html, css và javascript và tôi có nhiều tệp html nhưng chỉ có một tệp css và một tệp javascript

Đây là vấn đề của tôi, trong tệp javascript của tôi, tôi nhận được một phần tử DOM từ trang html thứ hai và thêm một lớp vào đó nhưng khi tôi truy cập các trang khác của mình, bảng điều khiển hiển thị lỗi [Uncaught TypeError. Không thể đọc thuộc tính 'classList' của null], lỗi chỉ biến mất khi tôi truy cập trang html thứ hai, đây là nơi tôi lấy DOM từ

mục lục. html

    
        

            
Index
        
        
    

Về. html

    
        

            
About
        
        
    

tiếp xúc. html

    
        

            
Contact
        
        
    

script. js

const aboutContainer = document.querySelector['.about'];
aboutContainer.classList.add['show'];

Tôi có bỏ sót điều gì trong mã của mình hay tôi không thể chỉ sử dụng một tệp tập lệnh cho tất cả các tệp html của mình? .
something like:
chỉ mục. html -> chỉ mục. js
về. html -> về. js
liên hệ. html -> liên hệ. js

Nhưng còn nếu tôi có 10 tệp html thì tôi có cần tạo 10 tệp javascript không?
đây có phải là cách đúng không, chẳng hạn như tạo 5 trang html và cũng có 5 tệp javascript

Cảm ơn