Là đối tượng JavaScript hoặc chức năng?

Sự khác biệt giữa hai mô hình này là gì?

Sự khác biệt giữa OOP và lập trình chức năng là gì? . Cách tiếp cận đầu tiên sử dụng lập trình chức năng, cách tiếp cận thứ hai OOP

Giới thiệu

Trước khi chúng ta bắt đầu viết mã, tôi muốn giới thiệu nhanh với bạn về lập trình hướng đối tượng và chức năng

Cả hai đều là các mô hình lập trình khác nhau về kỹ thuật mà chúng cho phép và cấm

Có những ngôn ngữ lập trình chỉ hỗ trợ một mô hình e. g. Haskell [chức năng thuần túy]

Cũng như các ngôn ngữ hỗ trợ nhiều mô hình như JavaScript, bạn có thể sử dụng JavaScript để viết mã hướng đối tượng hoặc mã chức năng hoặc thậm chí kết hợp cả hai

Cài đặt

Trước khi chúng ta có thể đi sâu vào sự khác biệt giữa hai mô hình này, chúng ta cần thiết lập dự án

Để làm được điều đó, trước tiên chúng tôi tạo tất cả các tệp và thư mục chúng tôi cần như thế này

$ mkdir func-vs-oop
$ cd ./func-vs-oop
$ cat index.html
$ cat functional.js
$ cat oop.js

Tôi đang sử dụng lệnh cat vì nó hoạt động trên cả hệ thống Linux và Windows Powershell

Tiếp theo, chúng ta cần tạo một biểu mẫu đơn giản cho máy tính giai thừa bên trong chỉ mục. html

Để cung cấp cho biểu mẫu này giao diện đẹp hơn, chúng tôi sử dụng bootstrap làm Khung CSS. Nếu bạn hiển thị HTML này trong trình duyệt, nó sẽ trông như thế này

Hiện tại, hình thức này sẽ không làm bất cứ điều gì

Mục tiêu của chúng tôi là triển khai logic trong đó bạn có thể nhập số lên tới 100. Sau khi nhấp vào nút "Tính toán", nó sẽ hiển thị kết quả trong div kết quả. Chúng tôi sẽ triển khai điều này theo cả cách hướng đối tượng và cách chức năng

thực hiện chức năng

Trước hết, chúng tôi sẽ tạo một tệp cho phương pháp lập trình chức năng

$ cat functional.js

Để bắt đầu, chúng ta cần một chức năng được gọi khi tải tệp này vào trình duyệt. Hàm này sẽ lấy biểu mẫu và sau đó thêm chức năng chúng ta cần vào sự kiện gửi biểu mẫu

function addSubmitHandler[tag, handler] {
  const form = getElement[tag];
  form.addEventListener['submit', handler];
}addSubmitHandler['#factorial-form', factorialHandler];

Đầu tiên, chúng ta khai báo hàm có tên là addSubmitHandler

Hàm này có hai tham số, tham số đầu tiên là thẻ chúng tôi muốn tìm kiếm trong HTML của mình, tham số thứ hai là chức năng chúng tôi muốn liên kết với sự kiện gửi của Phần tử của chúng tôi

Tiếp theo, chúng ta gọi hàm này bằng cách chuyển vào #factorial-form và tên hàm factorialHandler. Dấu thăng ở phía trước thẻ cho biết rằng chúng tôi đang tìm kiếm thuộc tính id trong HTML

Mã này sẽ báo lỗi nếu bạn cố chạy nó ngay bây giờ vì cả hàm getElement và factorialHandler đều không được xác định ở bất kỳ đâu

Vì vậy, trước tiên hãy xác định hàm get Element phía trên quảng cáo của bạn SubmitHandler như thế này

function getElement[tag] {
  return document.querySelector[tag];
}

Chức năng này thực sự đơn giản và chỉ trả về Phần tử HTML mà chúng tôi đã tìm thấy theo thẻ mà chúng tôi đã chuyển vào

Nhưng chúng ta sẽ sử dụng lại chức năng này sau

Bây giờ, hãy bắt đầu tạo logic cốt lõi bằng cách thêm hàm factorialHandler phía trên addSubmitHandler

function factorialHandler[event] {
  event.preventDefault[];
  const inputNumber = getValueFromElement['#factorial'];
  try {
    const result = calculateFactorial[inputNumber];
    displayResult[result];
  } catch [error] {
    alert[error.message];
  }
}

Chúng tôi vượt qua sự kiện và gọi ngay lập tức preventDefault. Điều này sẽ ngăn hành vi mặc định của sự kiện gửi, bạn có thể thử xem điều gì xảy ra khi nhấp vào nút mà không cần gọi preventDefault

Sau đó, chúng tôi lấy giá trị do người dùng nhập từ trường đầu vào bằng cách gọi hàm getValueFromElement. Khi nhận được số, chúng tôi cố gắng tính giai thừa bằng cách sử dụng hàm tính toán và sau đó hiển thị kết quả cho trang bằng cách chuyển kết quả cho hàm displayResult

Nếu giá trị không đúng định dạng hoặc số lớn hơn 100, chúng tôi sẽ báo lỗi và hiển thị dưới dạng cảnh báo. Đây là lý do sử dụng khối thử bắt trong trường hợp cụ thể này

Trong bước tiếp theo, chúng tôi tạo thêm hai hàm trợ giúp, getValueFromElement và displayResult. Hãy thêm chúng bên dưới hàm getElement

function getValueFromElement[tag] {
  return getElement[tag].value;
}function displayResult[result] {
  getElement['#factorial-result'].innerHTML = result;
}

Cả hai chức năng này đều sử dụng chức năng getElement của chúng tôi. Khả năng sử dụng lại này là một phần lý do tại sao lập trình chức năng lại hiệu quả đến vậy

Để làm cho điều này có thể tái sử dụng nhiều hơn, chúng ta có thể thêm đối số thứ hai vào displayResult, được gọi là thẻ. Để chúng ta có thể tự động thiết lập phần tử sẽ hiển thị kết quả. Nhưng trong ví dụ này, tôi đã sử dụng cách mã hóa cứng

Tiếp theo, chúng tôi tạo hàm tính toán của chúng tôi ngay trên factorialHandler

function calculateFactorial[number] {
  if [validate[number, REQUIRED] && validate[number, MAX_LENGTH, 100] && validate[number, IS_TYPE, 'number']] {
    return factorial[number];
  } else {
    throw new Error['Invalid input — either the number is to big or it is not a number'];
  }
}

Chúng tôi xác thực nếu đối số 'số' không trống, không cao hơn 100 và thuộc loại số. Để làm được điều đó, chúng tôi sử dụng một chức năng có tên là xác thực mà chúng tôi sẽ cần tạo tiếp theo. Nếu kiểm tra vượt qua, chúng tôi gọi hàm giai thừa và trả về kết quả của nó. Nếu các kiểm tra này không vượt qua, chúng tôi sẽ đưa ra lỗi mà chúng tôi gặp phải trong hàm factorialHandler

Trước tiên, hãy tạo hàm xác thực ngay bên dưới displayResult và ba hằng số MAX_LENGTH, IS_TYPE và REQUIRED

const MAX_LENGTH = 'MAX_LENGTH';
const IS_TYPE = 'IS_TYPE';
const REQUIRED = 'REQUIRED';function validate[value, flag, compareValue] {
  switch [flag] {
    case REQUIRED:
      return value.trim[].length > 0;
    case MAX_LENGTH:
      return value