Thực tiễn tốt nhất về cấu trúc tệp JavaScript

Trong suốt phần này, chúng ta sẽ xây dựng một ứng dụng có tên là Shape Tracker dựa trên dự án Triangle Tracker từ khóa học Nhập môn lập trình. Rất có thể bạn có một repo với dự án tam giác của riêng mình, nhưng ngay cả khi bạn không (hoặc nó không hoạt động), đừng lo lắng. Chúng tôi sẽ đi qua dự án từng bước

Phần khóa học này không phải là về việc học JavaScript. Mặc dù chúng ta sẽ tìm hiểu về một số tính năng mới của JavaScript, nhưng mục tiêu chính của chúng ta là học cách sử dụng thư viện JavaScript và các công cụ bên ngoài để xây dựng dự án của mình. Đây là những gì chúng ta sẽ xây dựng, từng bước một

1. Chúng ta sẽ bắt đầu với việc xây dựng một môi trường phát triển chính thức cho ứng dụng của mình
2. Sau đó, chúng tôi sẽ tạo logic kinh doanh bằng cách sử dụng phát triển dựa trên thử nghiệm. Chúng tôi sẽ sử dụng Jest để viết các bài kiểm tra tự động
3. Cuối cùng, chúng ta sẽ cập nhật logic giao diện người dùng và tìm hiểu các công cụ để quản lý hình ảnh và các tệp khác

Bạn có thể viết mã cùng với bài tập về nhà cuối tuần, hoặc chỉ đọc qua các bài học. Trong lớp, bài học đầu tiên sẽ nhắc bạn thực hiện các bài học này để xây dựng môi trường phát triển cho dự án Shape Tracker

Đừng thực hiện bất kỳ cam kết hoặc đẩy mã của bạn. Chúng ta sẽ học thêm một số phương pháp hay nhất về Git chỉ trong một vài bài học về Các phương pháp hay nhất về Git và Thêm tệp

  
  
  
  Shape Tracker


  
Enter three lengths to determine if they can make a triangle.
  
    Enter a number:
    
    Enter a number:
    
    Enter a number:
    
    Submit
  
  

4. Trong bài học đó, chúng tôi sẽ nhắc bạn thực hiện cam kết đầu tiên

---

Trước tiên, chúng tôi sẽ cần một số mã khởi động. Chúng ta sẽ bắt đầu với một cấu trúc tương tự như những gì chúng ta đã sử dụng trong quá khứ. Hãy tiếp tục và tạo một dự án với cấu trúc sau

shape-tracker/
├── index.html
├── src
│   ├── index.js
│   └── triangle.js
└── css
    └── styles.css

Chúng tôi có tệp

  
  
  
  Shape Tracker


  
Enter three lengths to determine if they can make a triangle.
  
    Enter a number:
    
    Enter a number:
    
    Enter a number:
    
    Submit
  
  

5, biểu định kiểu CSS và hai tệp logic JavaScript, một cho giao diện người dùng và một cho logic nghiệp vụ. Tuy nhiên, một vài điều khác nhau

• Chúng tôi gọi đây là

  
  
  
    
    
    
    Shape Tracker
  
  
    
  Enter three lengths to determine if they can make a triangle.
    
      Enter a number:
      
      Enter a number:
      
      Enter a number:
      
      Submit
    
    
  
  
  

  6, không phải

  
  
  
    
    
    
    Shape Tracker
  
  
    
  Enter three lengths to determine if they can make a triangle.
    
      Enter a number:
      
      Enter a number:
      
      Enter a number:
      
      Submit
    
    
  
  
  

  7, bởi vì cuối cùng chúng tôi sẽ mở rộng ứng dụng của mình để bao gồm các hình dạng khác
• Chúng tôi đang sử dụng một vài quy ước đặt tên mới
  • Logic giao diện người dùng của chúng tôi sẽ có trong một tệp có tên là

    
    
    
      
      
      
      Shape Tracker
    
    
      
    Enter three lengths to determine if they can make a triangle.
      
        Enter a number:
        
        Enter a number:
        
        Enter a number:
        
        Submit
      
      
    
    
    

    0. Đây là quy ước đặt tên phổ biến cho các tệp điểm đầu vào với webpack. Nhưng điều đó đang vượt lên trên chính chúng ta — chúng ta chưa cần biết về webpack. Chỉ cần biết rằng chúng tôi hiện đang sử dụng quy ước đặt tên để giúp quá trình chuyển đổi sang webpack diễn ra suôn sẻ
  • Chúng tôi gọi thư mục chứa các tệp JavaScript của chúng tôi là

    
    
    
      
      
      
      Shape Tracker
    
    
      
    Enter three lengths to determine if they can make a triangle.
      
        Enter a number:
        
        Enter a number:
        
        Enter a number:
        
        Submit
      
      
    
    
    

    1 thay vì

    
    
    
      
      
      
      Shape Tracker
    
    
      
    Enter three lengths to determine if they can make a triangle.
      
        Enter a number:
        
        Enter a number:
        
        Enter a number:
        
        Submit
      
      
    
    
    

    2. Cả hai đều ổn nhưng

    
    
    
      
      
      
      Shape Tracker
    
    
      
    Enter three lengths to determine if they can make a triangle.
      
        Enter a number:
        
        Enter a number:
        
        Enter a number:
        
        Submit
      
      
    
    
    

    1 là quy ước đặt tên phổ biến trong ngành

HTML

Trước tiên, hãy thêm HTML

  
  
  
  Shape Tracker


  
Enter three lengths to determine if they can make a triangle.
  
    Enter a number:
    
    Enter a number:
    
    Enter a number:
    
    Submit
  
  

Không có gì nhiều để xem ở đây — một biểu mẫu để nhận ba giá trị độ dài và một div sẽ hiển thị phản hồi từ ứng dụng

Một điều đáng chú ý là chúng tôi hiện có hai thẻ tập lệnh cho JavaScript — cộng với việc chúng tôi cũng đang liên kết với một tệp CSS. Điều gì sẽ xảy ra nếu ứng dụng của chúng tôi cũng đang xử lý mười hình dạng khác và mỗi hình dạng đều có tệp riêng? . Và nếu chúng ta có nhiều stylesheet thì sao? . Cho đến nay, chúng tôi hầu như không có bất kỳ mã nào nên thật dễ dàng để thấy mọi thứ có thể trở nên lộn xộn rất nhanh như thế nào. Nhưng đó là một trong nhiều lý do khiến chúng tôi chuyển sang sử dụng môi trường phát triển — môi trường này giúp việc quản lý nhiều tệp trở thành một quy trình dễ dàng và tự động hơn

JS

Tiếp theo, chúng ta sẽ thêm JS vào thư mục

  
  
  
  Shape Tracker


  
Enter three lengths to determine if they can make a triangle.
  
    Enter a number:
    
    Enter a number:
    
    Enter a number:
    
    Submit
  
  

1. Đây là logic kinh doanh cho

  
  
  
  Shape Tracker


  
Enter three lengths to determine if they can make a triangle.
  
    Enter a number:
    
    Enter a number:
    
    Enter a number:
    
    Submit
  
  

5

________số 8

Chúng tôi thêm mã vừa đủ để có thể tạo đối tượng

  
  
  
  Shape Tracker


  
Enter three lengths to determine if they can make a triangle.
  
    Enter a number:
    
    Enter a number:
    
    Enter a number:
    
    Submit
  
  

6 và gọi phương thức

  
  
  
  Shape Tracker


  
Enter three lengths to determine if they can make a triangle.
  
    Enter a number:
    
    Enter a number:
    
    Enter a number:
    
    Submit
  
  

7. Hiện tại, phương thức

  
  
  
  Shape Tracker


  
Enter three lengths to determine if they can make a triangle.
  
    Enter a number:
    
    Enter a number:
    
    Enter a number:
    
    Submit
  
  

7 chỉ trả về

  
  
  
  Shape Tracker


  
Enter three lengths to determine if they can make a triangle.
  
    Enter a number:
    
    Enter a number:
    
    Enter a number:
    
    Submit
  
  

9. Sau này, chúng tôi sẽ cập nhật mã này khi chúng tôi bắt đầu khám phá sự phát triển dựa trên thử nghiệm với Jest

Đây là logic giao diện người dùng của chúng tôi mà chúng tôi sẽ thêm vào

  
  
  
  Shape Tracker


  
Enter three lengths to determine if they can make a triangle.
  
    Enter a number:
    
    Enter a number:
    
    Enter a number:
    
    Submit
  
  

0

  
  
  
  Shape Tracker


  
Enter three lengths to determine if they can make a triangle.
  
    Enter a number:
    
    Enter a number:
    
    Enter a number:
    
    Submit
  
  

4

Bạn có thể thấy ngạc nhiên khi chúng ta có thể tách logic giao diện người dùng và logic nghiệp vụ thành hai tệp riêng biệt và ứng dụng của chúng ta vẫn hoạt động như mong đợi. Ví dụ, làm thế nào để hàm

function Triangle(side1, side2, side3) {
  this.side1 = side1;
  this.side2 = side2;
  this.side3 = side3;
}

Triangle.prototype.checkType = function() {
  return "I can't answer that yet!";
}

1 biết hàm tạo

function Triangle(side1, side2, side3) {
  this.side1 = side1;
  this.side2 = side2;
  this.side3 = side3;
}

Triangle.prototype.checkType = function() {
  return "I can't answer that yet!";
}

2 là gì, nếu nó không được khai báo trong cùng một hàm?

Chà, khi trình duyệt của chúng tôi tải tệp

  
  
  
  Shape Tracker


  
Enter three lengths to determine if they can make a triangle.
  
    Enter a number:
    
    Enter a number:
    
    Enter a number:
    
    Submit
  
  

5 của chúng tôi, nó sẽ tải tất cả các liên kết và tập lệnh được liệt kê trong thẻ

  
  
  
  Shape Tracker


  
Enter three lengths to determine if they can make a triangle.
  
    Enter a number:
    
    Enter a number:
    
    Enter a number:
    
    Submit
  
  

7

Và nội dung của các tệp này cuối cùng được thêm vào đối tượng

function Triangle(side1, side2, side3) {
  this.side1 = side1;
  this.side2 = side2;
  this.side3 = side3;
}

Triangle.prototype.checkType = function() {
  return "I can't answer that yet!";
}

4 và chúng có sẵn trên toàn cầu trong dự án. Đây là những gì cho phép chúng tôi gọi

function Triangle(side1, side2, side3) {
  this.side1 = side1;
  this.side2 = side2;
  this.side3 = side3;
}

Triangle.prototype.checkType = function() {
  return "I can't answer that yet!";
}

5 trong

  
  
  
  Shape Tracker


  
Enter three lengths to determine if they can make a triangle.
  
    Enter a number:
    
    Enter a number:
    
    Enter a number:
    
    Submit
  
  

0 mặc dù hàm tạo

function Triangle(side1, side2, side3) {
  this.side1 = side1;
  this.side2 = side2;
  this.side3 = side3;
}

Triangle.prototype.checkType = function() {
  return "I can't answer that yet!";
}

2 được khai báo trong một tệp khác

Sau này khi sử dụng webpack, chúng ta sẽ thấy hành vi này thay đổi vì JavaScript của chúng ta sẽ không được thêm trực tiếp vào đối tượng toàn cầu

function Triangle(side1, side2, side3) {
  this.side1 = side1;
  this.side2 = side2;
  this.side3 = side3;
}

Triangle.prototype.checkType = function() {
  return "I can't answer that yet!";
}

4. Nhưng chúng tôi sẽ đợi để thảo luận sâu về vấn đề đó cho đến khi chúng tôi nhận được mã có liên quan

CSS

Cuối cùng, đây là tệp CSS của chúng tôi. Chỉ có đủ mã để cho chúng tôi biết rằng nó đã được kết nối và đang hoạt động

  
  
  
  Shape Tracker


  
Enter three lengths to determine if they can make a triangle.
  
    Enter a number:
    
    Enter a number:
    
    Enter a number:
    
    Submit
  
  

3

À, xanh nhạt. Rất thư giãn. Đừng quên chăm sóc bản thân và hít một hơi thật sâu trong những khoảnh khắc khi việc giải quyết vấn đề trở nên khó khăn và bực bội

Chúng tôi tạo môi trường phát triển để xử lý các cơ sở mã phức tạp

Bây giờ chúng tôi có thể mở dự án của mình trong trình duyệt và xem những gì chúng tôi có

Chà, đó thực sự không phải là nhiều. Nhưng chúng tôi cần bốn tệp và gần năm mươi dòng mã để không phải làm gì cả. Liệu cách làm này có hiệu quả với một ứng dụng như Flickr không?

Hãy tưởng tượng ứng dụng nhỏ của chúng ta cuối cùng trở thành một ứng dụng chính thức dạy trẻ em về các loại hình dạng khác nhau — một ứng dụng có thể dễ dàng chạy tới hàng nghìn dòng mã

Hãy tiến thêm một bước nữa. Điều gì sẽ xảy ra nếu nó là một phần của ứng dụng toán học cho các trường từ mẫu giáo đến lớp 12, từ phép cộng và hình đơn giản đến đại số và giải tích? . Vâng, bạn có được hình ảnh. Ứng dụng đó sẽ rất lớn. Nó chỉ đơn giản là không hoạt động để sử dụng cấu trúc mã mà chúng tôi đã sử dụng cho đến nay

Trong bài học tiếp theo, chúng ta sẽ bắt đầu quá trình chuyển đổi ứng dụng của mình sang một ứng dụng có môi trường phát triển hoạt động đầy đủ — loại môi trường mà chúng ta thường thấy ở các công ty công nghệ

Các phương pháp hay nhất về JavaScript là gì?

Cấu trúc thư mục trong JavaScript là gì?

Làm cách nào để viết mã JavaScript hiệu quả?

Làm cách nào để viết JavaScript sạch?