Build ứng dụng tính toán dùng Javascript Closure và IIFE Style

Mục tiêu

Xây dựng một ứng dụng tính toán nhỏ, mục đích chính là giúp hiểu hơn về hai khái niệm khá là phổ biến trong Javascript, đó là Closure và IIFE.

Định nghĩa

Closure

Được hiểu là khi một hàm được viết lồng vào bên trong một hàm khác (hàm cha), nó có thể sử dụng biến toàn cục, biến cục bộ của hàm cha và biến cục bộ của chính nó (lexical scoping)

Ví dụ đơn giản

Ví dụ mở rộng

 

IIFE (Immediate Invoke Function Expression)

Nội dung thực thi script được viết theo hình thức này sẽ được chạy ngay lập tức, ngay sau khi đoạn script được load lên thành công, không cần thông qua bất kỳ lời gọi hàm nào.

Về syntax cho kiểu viết, có một mẹo nhỏ gồm các bước giúp dễ nhớ hơn cách khai báo hàm theo hình thức IIFE như sau:

Ví dụ đơn giản

Ví dụ mở rộng

 

Triển khai

Khởi tạo ban đầu

Trước tiên,  chúng ta cần phác thảo khung sườn trước cho ứng dụng tính toán.
Trong ví dụ này sẽ bao gồm hai phần: xử lý user inputs, xử lý tính toán.

Một trong những lợi ích của cách viết chia ra theo từng Object như này là giúp chúng ta tách bạch phần xử lý ở đơn vị hàm (đơn vị nhỏ nhất trong lập trình ứng dụng), giúp tăng tính tái sử dụng hàm và ứng dụng dễ bảo trì hơn.

Ngoài ra, với cách viết này, chúng ta còn có thể đảm bảo được tính đóng gói dữ liệu (áp dụng tư duy OOP) cho ứng dụng nữa, nghĩa là chỉ cho phép các Object (hiểu như Class trong OOP) truy cập lẫn nhau những gì mình muốn, tùy ý người lập trình.

 

Triển khai xử lý Inputs trong HandleInputs

Khởi tạo biến cục bộ trong HandleInputsở đây chúng ta dùng prompt để nhận giá trị user nhập vào:

Tiếp theo, chúng ta cần có một hàm xử lý giá trị input từ user, đảm bảo rằng input là định dạng số.

Kế đến, đây là phần khá đặc biệt trong cách viết ứng dụng đảm bảo được tính đóng gói dữ liệu, mục đích là chỉ public những gì mình muốn để các Object khác tái sử dụng.

Trong phần xử lý hàm get ở trên, ở đây mình chủ ý muốn kiểm tra nếu giá trị nhập vào không phải là số, thì lấy mặc định bằng 0.

Và phần hàm để trong return như này, ngầm hiểu là đang public ra cho các Object khác có thể truy cập và thực thi xử lý từ Object này. Ở phần sau chúng ta sẽ tìm hiểu kỹ hơn việc các Object khác truy cập vào đây như nào, cụ thể là Object Calculator mà chúng ta sắp triển khai bên dưới đây.

Triển khai xử lý tính toán trong Calculator

Đầu tiên, chúng ta dùng cách viết IIFE để khởi tạo Object Calculator, và import Object HandleInputs đã hoàn chỉnh ở trên vào:

Trong phần code phía trên, chúng ta để ý HandleInputs chính là Object chúng ta đã tạo, và giờ import vào sử dụng. ctrlInputs chính là instance cho Object đó.

Bắt đầu triển khai các phần trong Object Calculator, trước tiên là import và khởi tạo biến nhận kết quả:

Trong phần khai báo trên, để ý chỗ dùng hàm ctrlInputs.get(), đó chính là cách áp dụng kế thừa hàm public từ Object khác.

Kế đến là việc khai báo các hàm tính toán cộng, trừ, nhân, chia (chúng ta sẽ giữ nguyên cấu trúc tựa như ở bài viết trước mình giới thiệu về Javascript Object):

Tiếp đến, là phần điều hướng phép tính dựa theo operator mà user nhập vào:

Bước quan trọng tiếp theo là public phần xử lý thông qua hàm init(), để thực thi việc tính toán và xuất ra kết quả ở màn hình Console:

Cuối cùng, chạy thôi:


Và đây là toàn bộ phần source cho demo xây dựng ứng dụng tính toán bằng Javascript:

Kết

Trong các dự án thực tế, dĩ nhiên chúng ta sẽ còn có phần xử lý inputs từ phía frontend riêng (HTML form), và tùy vào mỗi yêu cầu ứng dụng chúng ta sẽ có cách xử lý phù hợp khác nhau.

Trên đây là hướng dẫn cơ bản việc xây dựng ứng dụng tính toán bằng javascript, tất nhiên có thể vẫn còn nhiều thiếu sót, tuy nhiên mục đích chính là giới thiệu về cách viết mà mình học hỏi được. Qua đó giúp hiểu thêm về hai khái niệm: Closure và IIFE.

Tham khảo

  • Closure definition: https://developer.mozilla.org/vi/docs/Web/JavaScript/Closures