Hàm tải một loạt danh sách các file javascript

Sáng sớm dạo quanh một vòng facebook thấy có bạn đăng code "Callback Hell"

Callback Hell laugh

Hồi sinh viên mình cũng code như thế đấy frown. Trước code cũng copy và copy. Hầu như không có tư duy kế thừa và  tạo hàm tái sử dụng. Giờ các bạn muốn code tốt, chắc chắn những hàm như vậy phải viết lại và không có cách nào khác phải tối ưu. Một là để cho code gọn hơn, hai là để sau này dùng còn gọi lại được. Các bạn có thể đọc lại bài Tại sao code của tôi thường ngắn gọn như vậy để nắm bắt được cách code của tôi.

Quay trở lại việc tải một loạt các file js. Điều này chính là đã và đang được áp dụng trong phần mềm của tôi đang phát triển. Trong hệ thống của tôi, các module được tải, chuyển trang là Single Page. Chính vì vậy mỗi lần vào module thường phải tải các file js cần thiết của module đó (Mỗi module có yêu cầu một tập các file js cần tải). Nếu mà vẫn áp dụng như cách của bạn "Callback Hell" thì chắc không thể thực hiện được. Dưới đây là ví dụ một module của tôi.

Module quản lý chuyên mục cần phải tải 2 file js. ManageCategories.js và ManageCategoryNews.js

Lúc này khi tải module, server sẽ yêu cầu client tải 2 file js trước khi thực hiện chức năng trong module

Và đây là hàm tôi viết để thực hiện tải một danh sách các file js

Core.loadScripts = function (scripts, onFinish)
{
	var length = scripts == null ? 0 : scripts.length;
	if (length == 0)
	{
		onFinish();
		return;
	}
	var fLoad = function (i) {
		$.cachedScript(scripts[i], {
			success: function (js, status) {
				i++;
				if (i >= length) onFinish();
				else fLoad(i);
			}
		});
	};
	fLoad(0);
};

Ở đây gọi đệ quy và load tới khi file cuối cùng thì gọi hàm callback onFinish. Đến đây là đã có thể đáp ứng được nhu cầu của bạn "Callback Hell". Tuy nhiên tại phần mềm của tôi còn viết thêm để tối ưu hơn. Đó là nếu các file mà đã tải rồi thì sẽ không cần thực hiện tải nữa. Vì vậy tôi đã viết thêm đoạn code sau:

Core.cacheScripts = [];
Core.getScriptsNeedLoad = function (scripts, callback)
{
	var paths = Enumerable.From(scripts).GroupJoin(Core.cacheScripts, function (s) { return s.Src; }, function ($) { return $; },
		function (s, cs) { return { s: s, cs: cs }; })
		.Where(function ($) { return $.cs.Count() == 0; }).Select(function ($) { return $.s.Src; }).Distinct().ToArray();

	Core.loadScripts(paths, function () {
		Core.cacheScripts = Enumerable.From(Core.cacheScripts).Concat(paths).ToArray();
		callback();
	});
};

Ở đoạn code này có sử dụng linq.js mà tôi đã giới thiệu ở bài Thư viện Linq.js trong javascript. Core.cacheScripts là để lưu trữ các file đã được tải. Trong hàm Core.getScriptNeedLoad sẽ loại trừ những file đã tải rồi và chỉ thực hiện các file đã tải.

Như vậy tôi đã có hàm để tải nhiều file js và đã được sử dụng trong hệ thống phần mềm của mình. Chia sẻ để các bạn có thêm kinh nghiệm. 

Sơn 20

Nếu bạn thấy nội dung chia sẻ này có ích với bạn hãy Donate để tạo động lực cho tôi viết các bài viết tiếp theo nhé. Cảm ơn nhiều !!!!

Bài viết cùng chuyên mục

Hướng dẫn gửi email bằng code C#. Cấu hình tài khoản gmail để gửi email từ phần mềm.

Sử dụng thư viện SmtpClient để gửi email. Cấu hình tài khoản gmail ở trạng thái kém bảo mật để có thể gửi email từ phần mềm.

02/12/2020 Xem chi tiết
Các hướng đi cho lập trình viên khi lựa chọn ngôn ngữ lập trình.

Mình thì lựa chọn phát triển web nên đã chọn chuyên sâu về HTML, Css, Javascript, ASP.NET, SQL

23/11/2020 Xem chi tiết
Mật khẩu kém bảo mật được sử dụng phổ biến trong năm 2020

Bất ngờ với mật khẩu 123456 lại đứng top đầu danh sách. Cứ bảo sao tài khoản hay bị hack. Đúng là sai lầm và chủ quan.

20/11/2020 Xem chi tiết
Xây dựng khung phần mềm trên nền Web giao diện Desktop Window

Đã xây dựng gần như xong khung, chỉ việc viết module business để phát triển phần mềm trên nền tảng Web giao diện Window.

30/10/2020 Xem chi tiết
Tôi đã thiết kế ra design pattern Trứng có trước hay Gà có trước như thế nào

Về ý tưởng này tôi đã thực hiện khoảng 5,6 năm trước do tham gia vào dự án mà xây dựng các khối độc lập nhưng lại có tính năng tương tự nhau

19/10/2020 Xem chi tiết
Chia sẻ một số hiệu ứng Hover hữu ích khi làm Frontend viết bằng css

Gồm các hiệu ứng Hover ZoomIn, Hover Fade, Hover Blur, Hover Zoomout, Hover Mask, Hover Over Text, Hover Fall, Hover Blurout

16/10/2020 Xem chi tiết

Bài viết khác

Tại sao code của tôi thường ngắn gọn như vậy

Khi bắt tay vào thực hiện các yêu cầu tôi thường phân tích kỹ và code trừu tượng.

15/09/2020 Xem chi tiết
Hướng dẫn sử dụng bootstrap tourist để làm trợ giúp cho phần mềm

Làm trợ giúp, hướng dẫn cho khách hàng sử dụng website một cách đơn giản nhất. Tôi cũng đã ứng dụng cho phần mềm của mình.

12/09/2020 Xem chi tiết
Hướng dẫn sử dụng Jquery plugin Lazy Load everything

Đây là plugin tôi chỉnh sửa lại từ thư viện jquery.lazyload.js để từ đó có thể lazy với mọi phần tử và không chỉ riêng cho sử dụng lazy image.

10/09/2020 Xem chi tiết
Thư viện Linq.js trong javascript

Thư viện này cung cấp đầy đủ các phương thức như .NET 4.0 và mở rộng thêm nhiều phương thức khác

10/09/2020 Xem chi tiết
Hướng dẫn sử dụng Jquery Plugin Hotkeys - Tạo phím nóng trên trình duyệt web

Thư viện của tác giả Tzury Bar Yochay được viết từ năm 2010

06/09/2020 Xem chi tiết
Hướng dẫn sử dụng Timer trong Javascript

Định nghĩa đối tượng Timer tương tự như trong WinForm C# để thực hiện task vụ theo chu kỳ bằng Javascript

01/09/2020 Xem chi tiết
{"nalias":"ham-tai-mot-loat-danh-sach-cac-file-javascript","lang":"2","cattype":"0","catId":"3","UrlEngine":"UrlNewsEngine","site":"1"}