Views: 659
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ố
avàb, 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
var SimpleCalculate = { /** * List các thuộc tính */ a = 0, b = 0, result = 0, operator = '', /** * List các phương thức */ // khởi tạo đầu vào init: function() {}, // điều hướng phép tính tương ứng calculate: function() {}, // phép cộng sumNumbers: function() {}, // phép trừ subNumbers: function() {}, // phép nhân multiNumbers: function() {}, // phép chia divNumbers: function() {}, } |
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()
|
1 2 3 4 5 6 7 |
init: function(a, b, operator) { this.a = a; this.b = b; this.operator = operator; this.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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
calculate: function() { switch (this.operator) { case '+': this.result = this.sumNumbers(); break; case '-': this.result = this.subNumbers(); break; case '*': this.result = this.multiNumbers(); break; case '/': this.result = this.divNumbers(); break; } return this.result; }, |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
sumNumbers: function() { return this.a + this.b; }, subNumbers: function() { return this.a - this.b; }, multiNumbers: function() { return this.a * this.b; }, divNumbers: function() { return this.a / this.b; } |
Như các bạn thấy ở trên, chúng ta sử dụng các thuộc tính a và b 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ị a và b 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ờ.
|
1 2 |
SimpleCalculate.init(10, 6, '+'); console.log(SimpleCalculate.result); |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
var SimpleCalculate = { /** * List các thuộc tính */ a: 0, b: 0, result: 0, operator: '', /** * List các phương thức */ // khởi tạo đầu vào init: function(a, b, operator) { this.a = a; this.b = b; this.operator = operator; this.calculate(); }, // điều hướng phép tính tương ứng calculate: function() { switch (this.operator) { case '+': this.result = this.sumNumbers(); break; case '-': this.result = this.subNumbers(); break; case '*': this.result = this.multiNumbers(); break; case '/': this.result = this.divNumbers(); break; } return this.result; }, // phép cộng sumNumbers: function() { return this.a + this.b; }, // phép trừ subNumbers: function() { return this.a - this.b; }, // phép nhân multiNumbers: function() { return this.a * this.b; }, // phép chia divNumbers: function() { return this.a / this.b; } }; SimpleCalculate.init(11, 6, '+'); console.log(SimpleCalculate.result); // một cách thể hiện console khác // console.table([SimpleCalculate.result]); |
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.