js-OOP: Kiểm tra thư viện, cục bộ hóa biến, module hóa khối lệnh – Part 4

js-OOP: Kiểm tra thư viện, cục bộ hóa biến, module hóa khối lệnh – Part 4

Trong bài viết này, tôi sẽ trình bày cách cục bộ hóa biến, module hóa một khối lệnh nhằm che giấu tối ta các biến và các hàm, tránh việc truy xuất hoặc ghi đè dữ liệu không mong muốn. Đồng thời tôi trình bày về việc kiểm tra xem đã có class hay thư viện mà class đang cài đặt cần đến nó hay chưa.

Nhắc lại kỹ thuật cục bộ hóa biến

Để cục bộ hóa một biến, đơn gian ta hãy khai báo nó trong một block lệnh. Trong kỹ thuật lập trình nói chung, ta cố gắng khai báo biến trong phạm vi bé nhất có thể, nghĩa là chỉ khai báo đúng phạm vi sử dụng biến làm sao cho vòng đời của biến càng ngắn càng tốt. Nó giúp cho việc tránh dư thừa bộ nhớ, biến sớm được giải phóng và tránh việc truy cập dữ liệu không mong muốn.
Sau đây là một ví dụ khi biến không được cục bộ và bảo vệ sẽ rất dễ bị vô tình can thiệp:

<script type="text/javascript">
var x = 10;
function fn1(){
	alert(x);
	x++;
}
</script>
<script type="text/javascript">
var x = 0;
function fn2(){
	alert(x);
	x++;
}
</script>
<input type="button" value="B1" onclick="fn1()" />
<input type="button" value="B2" onclick="fn2()" />




Khi bạn click vào một trong hai button B1 hoặc B2 trên thì bạn thấy rằng thấy cả hai đều đang truy cập vào cùng một biến x.
Nếu nhìn vào ví dụ trên bạn sẽ dễ dàng nhận ra lỗi là do biến x đã bị khai báo đè trong tag script thứ 2. Nhưng lỗi trên sẽ rất khó có thể phải hiện được khi mỗi tag script tương ứng với một file js được import vào và mỗi file lại do một người khác nhau viết. Khi đó ta sẽ nhận được các lỗi hết sức bất thường và khó có thể đoán nhận được nguyên nhân.

Module hóa khối lệnh

Với ví dụ trên, ta sử dụng kỹ thuật module hóa khối lệnh giúp cục bộ hóa biến x đồng thời dùng kỹ thuật public biến, hàm thông qua đối tượng window.
Để module hóa khối lệnh ta sử dụng mẫu sau:

(function(){
	// không gian khai báo biến được bảo vệ
	// block code
})();
// không truy cập được vào không gian khai báo biến bên trên

Mấu chốt ở đây là ta khai báo một hàm function(){} và sau đó thực hiện gọi hàm và thực thi luôn.
Về các bước thực thi dòng lệnh thì không có gì khác biệt so với việc thực hiện block code nếu không khai báo hàm, nhưng về phương diện phạm vi biến thì nó tạo ra một không gian mới khi khai báo biến, bảo vệ biến không bị truy cập trái phép.

Trong không gian được bảo vệ trên, nếu bạn muốn đẩy một biến nào đó cho công khai cho bên ngoài thì bạn sử dụng đối tượng window và gắn biến đó vào đối tượng window này.

Ví dụ bên trên sẽ được viết lại như sau:

<script type="text/javascript">
(function (){
	var x = 10;
	window.fn1 = function (){
		alert(x);
		x++;
	}
})();
</script>
<script type="text/javascript">
(function (){
	var x = 0;
	window.fn2 = function (){
		alert(x);
		x++;
	}
})();
</script>
<input type="button" value="B1" onclick="fn1()" />
<input type="button" value="B2" onclick="fn2()" />




Bây giờ bạn click vào 2 button B1 và B2, bạn sẽ thấy kết quả hoàn toàn khác nhau rồi, mội button đang quản lý một biến x của riêng nó và không bị ảnh hưởng từ bên ngoài.
Như vậy việc bảo vệ biến đã được hoàn thành.

Kỹ thuật kiểm tra sự tồn tại của class hoặc thư viện

Một trong các yêu cầu thường gặp trong việc xây dựng một hệ thống lớn là việc chia nhỏ thành các module, các class. Sau đó ta tiến hành ghép nối và sử dụng các module, class này. Nhưng khi sử dụng, đôi khi class đang xây dựng cần có một class khác mà thực sự nó chưa hoặc bị quên không được import vào. Trong trường hợp đó ta cần kiểm tra sự tồn tại của chúng.
Để kiểm tra, ta sử dụng toán tử typeof mà javascipt cung cấp sẵn. Nếu typeof(x) === ‘undefined’ nghĩa là biến x chưa được khai báo.
Ví dụ:

// Kiểm tra xem đã import thư viện jQuery chưa
// nếu chưa thì tạo ra exception
if (typeof(jQuery) === 'undefined') 
	throw new Error("Cần thư viện jQuery!!!");
// Kiểm tra xem đã import class vn.eten.tek.Rectangular hay chưa
// nếu chưa thì tạo ra exception
if (typeof(vn) === 'undefined' 
		|| typeof(vn.eten) === 'undefined' 
		|| typeof(vn.eten.tek) === 'undefined' 
		|| typeof(vn.eten.tek.Rectangular) === 'undefined')
	throw new Error("Chưa khai báo class vn.eten.tek.Rectangular!!!");

Như vậy trong bài này, tôi đã trình bày về cách để bảo vệ biến (thường áp dụng cho các biến private static của class) và cách kiểm tra các thư viện cần có được sử dụng trong class hiện tại.
Trong bài viết sau, tôi sẽ tổng hợp và xây dựng ra mẫu public class đầy đủ từ các bài viết từ part1-4 giúp ta có thể dễ dàng xây dựng được class trong javascript với các tính năng tương đối đầy đủ của một class trong lập trình hướng đối tượng.

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!