Cách cấu trúc lại mã javascript

Trong các dự án React nhỏ hơn, việc giữ tất cả các phương thức thành phần của bạn trong chính các thành phần đó sẽ hoạt động tốt. Trong các dự án cỡ trung bình, bạn có thể ước mình có thể lấy các phương thức đó ra khỏi các thành phần của mình và trở thành một “người trợ giúp”. Ở đây, tôi sẽ chỉ cho bạn cách sử dụng Lớp (thay vì xuất các hàm và biến riêng lẻ) để sắp xếp mã của bạn

Ghi chú. Tôi làm việc trong React nên đó là ví dụ mà chúng ta sẽ thảo luận ở đây

tái cấu trúc điển hình

Trong một công cụ tái cấu trúc điển hình, bạn sẽ lấy một chức năng trên thành phần đó và chuyển nó sang một trình trợ giúp khác

Từ

const MyComponent = () => {
  const someFunction = () => 'Hey, I am text'
  return (
    

      {someFunction()}
    
  )
}

Đến

import { someFunction } from 'functionHelper.js'
const MyComponent = () => {
  return (
    

      {someFunction()}
    
  )
}

và

export const someFunction = () => 'Hey, I am text'

Ví dụ này thực sự ngớ ngẩn, nhưng bạn thấy chúng ta đang đi đâu

1. Lấy các chức năng của bạn và sao chép chúng vào một tệp riêng
2. Nhập chúng và gọi chúng như bình thường

Tuy nhiên, khi mọi thứ trở nên phức tạp, bạn sẽ phải chuyển một loạt nội dung cho các chức năng đó - đối tượng, chức năng để thao tác trạng thái, v.v. Hôm nay tôi gặp phải một vấn đề khi tôi muốn trích xuất ba chức năng ra khỏi một thành phần và tất cả chúng đều yêu cầu các đầu vào giống nhau (một

export const someFunction = () => 'Hey, I am text'

2 và một chức năng để cập nhật

export const someFunction = () => 'Hey, I am text'

2). Phải có một cách tốt hơn…

Tái cấu trúc với một lớp

Tôi đã tạo một bản demo lớn cho bài đăng này. Bạn có thể xem mã trên Github. Cam kết ban đầu hiển thị tất cả các chức năng bên trong thành phần chính (

export const someFunction = () => 'Hey, I am text'

4) và các cam kết tiếp theo cấu trúc lại mã để sử dụng một lớp

Bạn có thể tự chạy cái này và làm bất cứ điều gì bạn muốn với nó. Nhớ

import { someFunction } from 'functionHelper.js'
const MyComponent = () => {
  return (
    

      {someFunction()}
    
  )
}

0

Chúng tôi bắt đầu với một thành phần “tìm nạp” một đối tượng (bắt chước cách chúng tôi có thể thực hiện việc này từ một API) với các thuộc tính nhất định trên đó. lặp lại (số ô), cạnh (chiều cao và chiều rộng), văn bản, màu sắc. Sau đó, chúng tôi có một số cách để thao tác với chế độ xem — thay đổi màu sắc, cập nhật văn bản, v.v. Sau mỗi lần thay đổi, chúng tôi hiển thị một thông báo

Chẳng hạn, đây là phương pháp thay đổi chiều rộng và chiều cao của chúng tôi

changeSide = side => {
  const obj = {...this.state.obj, side}
  this.fetchObject(obj);
  this.setState({ message: `You changed the sides to ${side} pixels!` });
}

Chúng tôi có thể có một số phương thức khác yêu cầu các hành động tương tự — hoặc có thể là các phương thức rất khác. Chúng tôi có thể bắt đầu nghĩ về việc trích xuất mã này cho người trợ giúp. Sau đó, chúng tôi sẽ tạo một phương thức khác để gọi hành động

import { someFunction } from 'functionHelper.js'
const MyComponent = () => {
  return (
    

      {someFunction()}
    
  )
}

1 và chúng tôi phải chuyển nó,

import { someFunction } from 'functionHelper.js'
const MyComponent = () => {
  return (
    

      {someFunction()}
    
  )
}

2, đối tượng ở trạng thái và

import { someFunction } from 'functionHelper.js'
const MyComponent = () => {
  return (
    

      {someFunction()}
    
  )
}

3 mà chúng tôi đang nhận làm đối số cho phương thức. Nếu chúng ta có một số phương thức tương tự, thì đó là rất nhiều tham số được truyền và có thể nó không thực sự hữu ích (hoặc có thể đọc được)

Thay vào đó, chúng ta có thể sử dụng một lớp, hoàn thành với một phương thức khởi tạo

________số 8

Điều này cho phép chúng tôi tạo một đối tượng có các chức năng mà chúng tôi có thể gọi bên trong thành phần chính của chúng tôi

const manipulator = new ObjectManipulator({
  object,
  fetchObject: this.fetchObject,
  markResettable: this.markResettable,
  updateMessage: this.updateMessage,
  updateStateValue: this.updateStateValue,
});

Điều này tạo ra một đối tượng

import { someFunction } from 'functionHelper.js'
const MyComponent = () => {
  return (
    

      {someFunction()}
    
  )
}

4 — một thể hiện của lớp

import { someFunction } from 'functionHelper.js'
const MyComponent = () => {
  return (
    

      {someFunction()}
    
  )
}

5 của chúng ta. Khi chúng ta gọi

import { someFunction } from 'functionHelper.js'
const MyComponent = () => {
  return (
    

      {someFunction()}
    
  )
}

6, nó sẽ chạy phương thức

import { someFunction } from 'functionHelper.js'
const MyComponent = () => {
  return (
    

      {someFunction()}
    
  )
}

7 mà chúng ta đã xác định ở trên. Không cần phải truyền vào

import { someFunction } from 'functionHelper.js'
const MyComponent = () => {
  return (
    

      {someFunction()}
    
  )
}

8 hoặc bất kỳ phương thức nào khác — chúng tôi chọn chúng từ hàm tạo, khi chúng tôi tạo thể hiện

Bạn có thể tưởng tượng rằng điều này sẽ trở nên thực sự hữu ích nếu chúng ta có nhiều phương pháp này để giải quyết. Trong trường hợp của tôi, tôi cần gọi

import { someFunction } from 'functionHelper.js'
const MyComponent = () => {
  return (
    

      {someFunction()}
    
  )
}

9es) sau mọi thứ tôi đang cố trích xuất. Defini

export const someFunction = () => 'Hey, I am text'

0ion trên thể hiện của lớp thay vì chuyển nó tới từng hàm giúp tôi tiết kiệm được rất nhiều mã

Giữ mọi thứ ngăn nắp

Phương pháp tổ chức này có thể thực sự hữu ích để giữ mọi thứ ở đúng vị trí của nó. Chẳng hạn, tôi có một mảng màu mà tôi ánh xạ để có các nút màu mà bạn thấy trong ví dụ. Bằng cách di chuyển hằng số này vào

import { someFunction } from 'functionHelper.js'
const MyComponent = () => {
  return (
    

      {someFunction()}
    
  )
}

5, tôi có thể đảm bảo rằng nó không xung đột với bất kỳ

export const someFunction = () => 'Hey, I am text'

2 nào khác trong phần còn lại của ứng dụng của tôi

import { someFunction } from 'functionHelper.js'
const MyComponent = () => {
  return (
    

      {someFunction()}
    
  )
}

9

Tôi có thể sử dụng

export const someFunction = () => 'Hey, I am text'

3 để lấy đúng màu cho trang này, trong khi có thể có hằng số

export const someFunction = () => 'Hey, I am text'

2 chung được sử dụng cho mục đích khác

Người giới thiệu

Tài liệu Mozilla Class cũ tốt

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

hổ phách Wilkie

Nhà phát triển phần mềm, chủ yếu là Ruby và Javascript. Yogi, Khách du lịch, Người đam mê. Tất cả các bức ảnh của tôi

---

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Tái cấu trúc tập lệnh là gì?

Mã VS có tái cấu trúc không?

Tái cấu trúc được thực hiện như thế nào?