js-OOP: Xây dựng static class và cài đặt Singleton trong javascript – Part 7

js-OOP: Xây dựng static class và cài đặt Singleton trong javascript – Part 7

Ở các bài viết trước, tôi đã đưa ra mẫu cho phép xây dựng được một class tương đối hoàn chỉnh. Trong bài viết này tôi sẽ trình bày cách xây dựng một static class và cài đặt design pattern Singleton.
 

Static Class

Một class được khai báo là static thì tất cả các phương thức và thuộc tính của nó đều phải được khai báo là static. Do đó việc sử dụng các thuộc tính, phương thức của nó không cần phải sử dụng toán tử new để tạo thể hiện.
 

Design pattern Singleton

Design pattern Singleton quy định rằng một lớp chỉ được tạo ra không quá một thể hiện. Tất cả các biến của lớp đó đều tham chiếu đến một thể hiện duy nhất được cấp phát bộ nhớ đúng một lần. Để tìm hiểu thêm về Singleton, bạn có thể tham khảo bài viết trước đây trên về Singleton trên tek.
 

Cách xây dựng

Trong trường hợp này, tôi xây dựng static class dựa trên singleton. Tôi tạo ra một private static construction và thực hiện tạo thể hiện duy nhất cho class đó ngay khi khai báo class này. Khi đó toàn bộ việc sử dụng class này về sau sẽ là việc gọi thuộc tính và phương thức của thể hiện duy nhất kia.

Để cài đặt trong javascript, tôi làm như sau:

(function(){
	/// Định nghĩa NAMESPACE
	window.vn = window.vn || {};
	vn.eten = vn.eten || {};
	vn.eten.tek = vn.eten.tek || {};

	// khai báo static class, singleton
	vn.eten.tek.StaticClass = new StaticClass();
	
	// private static construction
	function StaticClass(){
		// thực hiện định nghĩa class ở đây
		// mẫu cài đặt giống như public class
	}
})();

Một ví dụ

Tôi lấy một ví dụ xây dựng lớp Detector cho biết browser có hỗ trợ Canvas không (supportCanvas) có hỗ trợ Cookie không (supportCookie), hệ điều hành gì (os), chiều rộng và chiều cao của màn hình (width, height):

(function(){
	/// Định nghĩa NAMESPACE
	window.vn = window.vn || {};
	vn.eten = vn.eten || {};
	vn.eten.tek = vn.eten.tek || {};

	// khai báo static class, singleton
	vn.eten.tek.Detector = new Detector();
	
	// private static construction
	function Detector(){
		var os, width, height, cookie, canvas;
		
		// property os: readonly
		this.os() = function () { return os; };
		// property width: readonly
		this.width() = function () { return width; };
		// property height: readonly
		this.height() = function () { return height; };
		
		this.supportCanvas = function () { return canvas; };
		this.supportCookie = function () { return cookie; };
		
		(function(){
			width = window.screen.width;
			height = window.screen.height;
			
			if (navigator.appVersion.indexOf("Win") != -1) os = "Windows";
			else if (navigator.appVersion.indexOf("Mac") != -1) os = "MacOS";
			else if (navigator.appVersion.indexOf("X11") != -1) os = "UNIX";
			else if (navigator.appVersion.indexOf("Linux") != -1) os = "Linux";
			else if (navigator.userAgent.indexOf("iPhone")) os = "iPhone/iPod";
			else os = "Unknown";
			
			cookie = window.navigator.cookieEnabled;
			canvas = !!document.createElement('canvas').getContext;
		})();
	}
})();

Khi sử dụng sẽ như sau:

alert("OS = " + vn.eten.tek.Detector.os());
alert("Width x Height = " + vn.eten.tek.Detector.width() + " x " + vn.eten.tek.Detector.height());
alert("Support Canvas: " + vn.eten.tek.Detector.supportCanvas());
alert("Support Cookie: " + vn.eten.tek.Detector.supportCookie());

Kết quả nhận được sẽ tương tự như sau:

OS = Win
Width x Height = 1366 x 768
Support Canvas: true
Support Cookie: true
Khi trích dẫn bài viết từ tek.eten.vn, xin vui lòng ghi rõ nguồn. Chúng tôi sẽ rất cảm ơn bạn!