Build ứng dụng tính toán nhỏ bằng Javascript theo Object style

Mục tiêu

Tự xây dựng một ứng dụng tính toán 2 số với các phép toán cơ bản (cộng, trừ, nhân, chia), sử dụng cách viết library đóng gói dạng Object trong Javascript.

Mục đích chia sẻ một cách đơn giản phương pháp chia nhỏ code, đóng gói code sao cho dễ đọc, dễ maintain bằng Javascript Object.

Ý tưởng

Xây dựng một ứng dụng tính toán 2 số, với các phép toán cơ bản: + (cộng), – (trừ), * (nhân), / (chia).

Áp dụng tư duy OOP, chúng ta sẽ xem ứng dụng là một Object, bao gồm các properties và methods:

  • Properties: các số ab, phương thức tính toán (operator)
  • Methods: phương thức khởi tạo, các phép tính cộng, trừ, nhân, chia

Thực hiện

Khởi tạo ban đầu

Đầu tiên chúng ta sẽ phác hoạ tổng quan các thuộc tính và phương thức cần thiết cho ứng dụng

Implement init() method

Chúng ta sẽ khởi tạo những giá trị đầu vào cần thiết trong hàm init(), đồng thời thực thi phương thức tính toán calculate()

Từ khoá this ở đây có ý nghĩa là Object SimpleCalculate chúng ta đã khai báo.

Khi chúng ta dùng this.a, nghĩa là đang sử dụng thuộc tính a của Object SimpleCalculate, và ở đây chúng ta đang gán giá trị cho các thuộc tính của Object từ các tham số tương ứng được truyền vào hàm init().

Implement calculate() method

Tiếp theo chúng ta sẽ triển khai phương thức calculate(), nhằm điều hướng việc chọn phép tính phù hợp từ giá trị input operator được truyền vào.

Trong phương thức calculate() này, chúng ta thấy kết quả trả về sẽ được gán vào thuộc tính result mà chúng ta đã khởi tạo ở đầu Object SimpleCalculate thông qua việc sử dụng this ở dòng lệnh return cuối.

Implement các methods tính toán

Như các bạn thấy ở trên, chúng ta sử dụng các thuộc tính ab của Object SimpleCalculate để thực hiện tính toán.

Có thể các bạn sẽ thắc mắc 2 giá trị ab này truyền vào từ đâu? Hãy nhớ lại lúc chúng ta triển khai phương thức init(), chúng ta đã gán giá trị cho các thuộc tính của Object SimpleCalculate rồi.

Triển thôi

Đến đây thì công đoạn chuẩn bị đã xong, giờ là lúc xài những gì đã được dựng từ đầu đến giờ.

Do ở đây mình sử dụng phương pháp Object không khởi tạo constructor, nên khi xài các bạn chỉ việc gọi tên Object, sau đó gọi đến thuộc tính, phương thức muốn gọi là được (Ở một bài viết khác mình sẽ thực hiện việc build ứng dụng bằng cách dùng Object constructor kết hợp với Closure – một khái niệm rất phổ biến trong lập trình Javascript).


Và đây là phần source code hoàn chỉnh trong demo trên:

 

Vậy là chúng ta đã hoàn thành việc build một ứng dụng hết sức đơn giản sử dụng Object trong Javascript để đóng gói, chia nhỏ code để dễ đọc, dễ bảo trì.
Tuy nhiên phương pháp này vẫn chưa tối ưu, vì các bạn có thể dễ dàng truy xuất vào các key nội tại của Object, điều này thì không tốt cho lắm, mình sẽ giới thiệu với các bạn phương pháp dùng Closure để đóng gói Object lại sau.