Cách tổ chức mã JavaScript

Cho đến nay, chúng ta đã xem xét mã đại diện cho các hướng dẫn cơ bản từng bước. Các vòng lặp cung cấp một cách nhỏ để sử dụng lại các lệnh giống nhau, nhưng phần lớn chúng tôi tập trung vào các lệnh tuyến tính trong đó mỗi dòng thực thi một lần. Đây là cơ sở của lập trình, nhưng nó không phải là cách hiệu quả nhất để viết chương trình

Tất cả các ngôn ngữ lập trình cho phép chúng tôi tạo các nhóm mã có thể được thực thi theo yêu cầu. Điều này có nghĩa là chúng ta có thể viết các lệnh có thể được gọi để thực thi vào các thời điểm khác nhau trong chương trình của chúng ta. Bằng cách tổ chức mã của chúng tôi thành các khối có thể sử dụng lại, chúng tôi có thể viết mã hiệu quả hơn và dễ bảo trì hơn. Hầu hết các ngôn ngữ gọi dạng cơ bản của nhóm mã này là "hàm" hoặc "chương trình con"

Trong JavaScript, chúng ta thường sử dụng các "hàm" để thực hiện mục tiêu này. Hàm JavaScript là một cách mạnh mẽ để gắn nhãn và chứa một khối hướng dẫn có thể được truy cập từ khắp chương trình. Các chức năng hoạt động như các chương trình nhỏ trong chương trình lớn hơn

Tác động đến tổ chức mã

Các chức năng cho phép chúng tôi tổ chức mã theo những cách hợp lý hơn. Phần chính của chương trình của chúng tôi trở thành một tập hợp các hướng dẫn cấp cao hơn về những gì xảy ra trong thời gian chạy và sau đó mỗi chức năng sẽ xác định các hướng dẫn chi tiết hơn cho từng bước đó. Chúng tôi có thể nhóm logic thành các chức năng được đặt tên rõ ràng để cung cấp bản trình bày rõ ràng hơn về mã của chúng tôi cho chính chúng tôi và các nhà phát triển khác đọc

Không có gì lạ khi có một chức năng cho từng bước của quy trình, chẳng hạn như login() hoặc logout(). Hai chức năng đó có thể được truy cập từ nhiều nơi, nhưng chúng tôi không bao giờ cần sao chép các dòng mã trong các chức năng đó. Điều này có nghĩa là nếu tôi là nhà phát triển muốn thay đổi điều gì đó trong quá trình đăng nhập, tôi có thể tìm hàm login() và tập trung sự chú ý của mình vào đó. Không cần phải đọc qua toàn bộ chương trình để tìm các dòng giúp đăng nhập hoạt động

Điều này cũng cho phép chúng tôi nhóm logic theo cách mà chúng tôi có thể giải thích tốt hơn cho dữ liệu bị thiếu hoặc logic không nên chạy trừ khi một số tình huống phát sinh. Sẽ không thể thực thi trực tiếp mã mà cả người dùng đăng nhập và đăng xuất người dùng. Chúng ta cần thực hiện các hướng dẫn đó vào những thời điểm rất cụ thể. Nếu không có chức năng, chúng tôi sẽ không thể quản lý ngay cả những trường hợp phổ biến nhất trong ứng dụng web của mình

Tác động đến việc bảo trì và cải tiến

Như đã đề cập trước đó, các hàm giúp chúng ta loại bỏ sự trùng lặp trong mã của mình và làm rõ hơn những khối mã thực sự làm gì. Điều này có tác động rất lớn đến cả việc bảo trì dài hạn và cải tiến tòa nhà. Nếu nhà cung cấp API cho các giao dịch thương mại điện tử thay đổi API của họ, thì chúng tôi chỉ cần thay đổi các chức năng xử lý các giao dịch và chúng tôi có thể dễ dàng xác định vị trí của mã đó dựa trên tên và nhóm. Nếu không có tổ chức phù hợp, mã sẽ giống như "mì Ý". Chúng tôi không thể biết nơi một tính năng bắt đầu hoặc kết thúc và chúng tôi không thể thay đổi một phần mà không ảnh hưởng đến tất cả những thứ lộn xộn xung quanh nó. Chúng tôi tìm cách làm cho mã của mình giống một đơn vị giá đỡ được tổ chức tốt hơn. Các bộ phận đi cùng nhau sẽ tồn tại cùng nhau và chúng ta có thể dễ dàng truy cập vào một phần mã của mình mà không phải chen lấn với mọi thứ khác

Bằng cách sử dụng các chức năng để giúp chúng tôi tổ chức mã, chúng tôi thực hiện tất cả các nhiệm vụ phát triển của mình dễ dàng hơn và chúng tôi tăng độ tin cậy của ứng dụng cho người dùng cuối của chúng tôi

Viết mã KHÔ

Một tiên đề phổ biến giữa các nhà phát triển là "Giữ nó KHÔ" hoặc "Viết mã KHÔ. " Trong những câu nói này, các nhà phát triển đang đề cập đến từ viết tắt D-R-Y, viết tắt của "Don't Repeat Yourself". Nhãn bắt nguồn từ cuốn sách The Pragmatic Programmer (1999) của Andy Hunt và Dave Thomas, trong đó họ viết, "Mỗi phần kiến ​​thức phải có một biểu diễn duy nhất, rõ ràng, có thẩm quyền trong một hệ thống. " Chỉ thị này giải quyết vấn đề tạo ra các hệ thống dữ liệu hoặc mã khó hiểu, dư thừa trở nên mơ hồ và logic bị rối với nhau

Lý tưởng nhất là chúng ta có thể thay đổi bất kỳ phần nào trong chương trình của mình mà không phải thay đổi mọi phần khác. Đây là cốt lõi của nguyên tắc DRY. Điều này cũng liên quan đến "sự tách biệt của các mối quan tâm" mà chúng ta thỉnh thoảng thảo luận. Mỗi tính năng của một chương trình phải càng độc lập càng tốt và chúng ta nên cố gắng xây dựng các điểm tích hợp rõ ràng để cho phép các phần khác nhau của chúng ta hoạt động hiệu quả cùng nhau

Các hàm là các khối mã nhỏ nhận một số đầu vào và có thể trả về một số đầu ra hoặc có tác dụng phụ, điều đó có nghĩa là nếu sửa đổi một số biến bên ngoài hàm. Chúng ta cần các chức năng để sắp xếp mã thành các khối nhỏ có thể tái sử dụng. Không có chức năng, nếu muốn chạy lại một đoạn mã, chúng ta phải sao chép nó ở nhiều nơi khác nhau. Các chức năng rất quan trọng đối với bất kỳ chương trình JavaScript nào

Với đoạn mã trên, chúng tôi biết rằng chúng tôi cần tính tổng phụ trước khi có thể sử dụng số đó để tính thuế

Sau đó, chúng ta cần cả hai để tính tổng

Ngoài ra, tham số cho calcTaxes

const length = calcLength();
const width = calcWidth();
if (length >= 0 && width >= 0) {
let area = length * width;
}
0 để chúng tôi biết rằng chúng tôi biết rằng
const length = calcLength();
const width = calcWidth();
if (length >= 0 && width >= 0) {
let area = length * width;
}
0 là một phụ thuộc cho calcTaxes

Tài liệu phụ thuộc không rõ ràng với bình luận

Nếu các phụ thuộc không rõ ràng, thì chúng ta cần làm rõ chúng bằng các nhận xét

Chẳng hạn, nếu chúng tôi không có tham số cho calcTaxes thì chúng tôi có thể phải giải thích điều đó trong phần nhận xét

chúng tôi có thể viết

/*
1. calculate subtotal
2. calculate taxes
3. calculate total
*/
const subtotal = calcSubtotal();
const taxes = calcTaxes();
const total = subtotal + taxes;
Kiểm tra các phần phụ thuộc với Xác nhận hoặc Mã xử lý lỗi

Nếu chuỗi mã của chúng tôi có các phụ thuộc, thì chúng tôi muốn kiểm tra chúng trước khi chuyển sang bước tiếp theo

Chẳng hạn, chúng tôi có thể muốn viết các xác nhận hoặc mã xử lý lỗi để kiểm tra xem các giá trị được yêu cầu có sẵn hay không trước khi tiếp tục

Chúng tôi có thể viết một cái gì đó như

const length = calcLength();
const width = calcWidth();
if (length >= 0 && width >= 0) {
let area = length * width;
}

Chúng tôi kiểm tra xem

const length = calcLength();
const width = calcWidth();
if (length >= 0 && width >= 0) {
let area = length * width;
}
4 và
/*
1. calculate subtotal
2. calculate taxes
3. calculate total
*/
const subtotal = calcSubtotal();
const taxes = calcTaxes();
const total = subtotal + taxes;
0 có bằng 0 hoặc lớn hơn trước khi tính diện tích bằng cách nhân
const length = calcLength();
const width = calcWidth();
if (length >= 0 && width >= 0) {
let area = length * width;
}
4 và
/*
1. calculate subtotal
2. calculate taxes
3. calculate total
*/
const subtotal = calcSubtotal();
const taxes = calcTaxes();
const total = subtotal + taxes;
0

Nếu chúng tôi đang viết một ứng dụng Node, chúng tôi cũng có thể sử dụng mô-đun

/*
1. calculate subtotal
2. calculate taxes
3. calculate total
*/
const subtotal = calcSubtotal();
const taxes = calcTaxes();
const total = subtotal + taxes;
3 để kiểm tra các điều kiện mà chúng tôi muốn kiểm tra thay thế

Làm cho mã đọc từ trên xuống dưới

Nếu chúng tôi có mã trong đó thứ tự quan trọng, thì chúng tôi có thể làm cho mã được đọc từ trên xuống dưới

Bằng cách này, chúng ta có thể đọc mã dễ dàng mà không cần nhảy lên xuống trang

Ví dụ, chúng ta có thể viết một cái gì đó như

travelData.calcQuarterlyRevenue();
salesData.calcQuarterlyRevenue();
marketingData.calcQuarterlyRevenue();
travelData.calcAnnualRevenue();
salesData.calcAnnualRevenue();
marketingData.calcAnnualRevenue();

Bằng cách này, chúng ta có thể đọc chúng theo trình tự bằng cách nhóm các phép tính hàng quý và hàng năm lại với nhau

Ảnh của Dan Azzopardi trên Unsplash Grouping

Nhóm các tuyên bố liên quan cũng rất quan trọng. Đặt các câu có liên quan lại với nhau để chúng ta cùng đọc chúng

Đọc các mã không liên quan chồng lên nhau rất khó vì chúng ta phải nhảy xung quanh để đọc nó

Sự kết luận

Chúng ta nên tổ chức mã của mình theo cách để chúng ta không phải nhảy khắp trang để đọc mã của mình

Ngoài ra, chúng ta nên nhóm các câu liên quan lại với nhau để chúng ta có thể đọc các câu liên quan cùng nhau

Các xác nhận và mã xử lý lỗi cũng nên được thêm vào để chúng tôi biết những gì cần thiết để chạy mã xuất hiện sau các xác nhận

Một ghi chú từ tiếng Anh thuần túy

Bạn có biết rằng chúng tôi đã ra mắt một kênh YouTube không? . Hãy xem chúng tôi bằng cách nhấp vào đây và nhớ đăng ký kênh nhé 😎

Cấu trúc của chương trình JavaScript là gì?

Các câu lệnh JavaScript là các lệnh dành cho trình duyệt Mã JavaScript là một chuỗi các câu lệnh Các câu lệnh JavaScript được phân tách bằng dấu chấm phẩy cho phép nhiều câu lệnh trên một dòng .

Các chức năng JavaScript nên được đặt ở đâu?

Tập lệnh có thể được đặt trong .

Tệp JavaScript là gì?

Tệp JS là gì? . Các tệp JavaScript được lưu trữ với. tiện ích mở rộng js. Bên trong tài liệu HTML, bạn có thể nhúng mã JavaScript bằng các thẻ hoặc bao gồm tệp JS. files that contain JavaScript code for execution on web pages. JavaScript files are stored with the . js extension. Inside the HTML document, you can either embed the JavaScript code using the tags or include a JS file.