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
- 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
- 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
- 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ênTrướ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à
6, không phảiShape 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ácShape Tracker
Enter three lengths to determine if they can make a triangle.
Enter a number: Enter a number: Enter a number: Submit - 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à
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ẻShape Tracker
Enter three lengths to determine if they can make a triangle.
Enter a number: Enter a number: Enter a number: Submit - Chúng tôi gọi thư mục chứa các tệp JavaScript của chúng tôi là
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ưngShape 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ànhShape Tracker
Enter three lengths to determine if they can make a triangle.
Enter a number: Enter a number: Enter a number: Submit
- 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à
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ố 8Chú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
4Bạ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
7Và 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ácSau 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 quanCSS
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ệ