Các khung JavaScript hiện đại như Angular, React và Vue. js giúp dễ dàng xây dựng các ứng dụng web một trang phức tạp. Tuy nhiên, việc sử dụng các khung đó là không bắt buộc và bạn cũng có thể sử dụng JavaScript đơn giản và thuần túy. Hướng dẫn này hướng dẫn bạn từng bước xây dựng một ứng dụng web bằng JavaScript thuần túy
Những gì chúng ta sẽ xây dựngỨng dụng chúng ta sẽ xây dựng trong hướng dẫn này trông giống như sau
Đây là một ứng dụng theo dõi vấn đề đơn giản và bạn có thể thấy giao diện người dùng được chia thành hai phần. Trên cùng một biểu mẫu đầu vào có thể nhìn thấy. Bằng cách sử dụng các trường đầu vào cho Mô tả, Mức độ nghiêm trọng và Được gán cho người dùng có thể nhập các sự cố mới. Các sự cố được lưu trữ trong Bộ nhớ cục bộ của trình duyệt. Danh sách các vấn đề hiện có được in ra ở khu vực dưới cùng. Tại đây, bạn có thể thấy rằng mỗi vấn đề được in ra với các chi tiết về mô tả, mức độ nghiêm trọng và được chỉ định cho. Ngoài ra, bạn có thể thấy rằng vấn đề được xác định bởi một id vấn đề duy nhất. Sự cố là một GUID được tạo khi sự cố cũng được tạo và lưu trữ trong Bộ nhớ cục bộ.
Hơn nữa, mỗi vấn đề có một trạng thái được chỉ định. Theo mặc định, trạng thái là “Mở”. Nếu sự cố được giải quyết, người dùng có thể đặt trạng thái thành “Đã đóng” bằng cách sử dụng nút Đóng. Có thể xóa sự cố khỏi danh sách [và khỏi Bộ nhớ cục bộ] bằng cách nhấp vào nút Xóa.
Thiết lập dự án thực sự đơn giản. Bởi vì chúng tôi chỉ muốn sử dụng JavaScript thuần túy, chúng tôi không cần cài đặt các khung hoặc phụ thuộc. Bắt đầu bằng cách tạo một thư mục dự án mới và bên trong thư mục mới đó, tạo hai tệp mới trống. mục lục. html và chính. js.
Chỉ mục tệp. html là điểm vào cho ứng dụng của chúng tôi và chứa mã HTML. tập tin chính. js sẽ được đưa vào chỉ mục. html chứa mã JavaScript tương ứng cần thiết để triển khai ứng dụng mẫu.
Chúng tôi đang bắt đầu bằng cách tạo cấu trúc HTML cơ bản trong chỉ mục. html như bạn có thể thấy trong danh sách sau
JS Issue Tracker
Chúng tôi sẽ sử dụng các lớp Bootstrap CSS để áp dụng kiểu dáng cho các thành phần giao diện người dùng. Cách dễ nhất để thêm Bootstrap là thêm nó từ CDN.
Trước tiên, hãy thêm phần sau vào phần đầu.
Sau đó, thêm phần sau vào phần nội dung [ngay trước thẻ đóng
3]
Chúng tôi sẽ sử dụng một thư viện JS nhỏ [ChanceJS] để tạo các mã định danh duy nhất cho các vấn đề. Bao gồm thư viện đó bằng cách thêm dòng sau
Sử dụng máy chủ trực tiếp
Là một máy chủ web phát triển, chúng tôi đang sử dụng máy chủ trực tiếp trong hướng dẫn này. live-server là một máy chủ web nhỏ có khả năng tải lại. Nó có sẵn dưới dạng gói npm, vì vậy việc cài đặt có thể được thực hiện với
$ npm install -g live-serverCài đặt xong lệnh live-server đã có. Nếu bạn thực hiện lệnh này trong thư mục dự án, máy chủ web sẽ khởi động và ứng dụng của chúng tôi sẽ mở trong trình duyệt
Triển khai giao diện người dùngHãy thêm mã HTML vào chỉ mục. html cần thiết để triển khai giao diện người dùng
JS Issue Tracker
JS Issue Tracker by CodingTheSmartWay.com
Add New Issue:
Description
Severity
Low
Medium
High
Add
Assigned To
© CodingTheSmartWay.com
Thông báo đầu tiên rằng chúng tôi đã đính kèm trình xử lý sự kiện onload fetchIssues[] vào phần tử
4. Điều này đảm bảo rằng hàm JavaScript fetchIssues[] được gọi mỗi khi ứng dụng tải. fetchIssues[] sẽ được triển khai sau trong tệp chính. js và sẽ tải tất cả các sự cố từ Bộ nhớ cục bộ, tạo đầu ra HTML cho danh sách sự cố và đính kèm đầu ra vào DOM.
Trong phần nội dung, một phần tử
Hãy xem triển khai biểu mẫu. Điều quan trọng cần lưu ý là tất cả các phần tử đầu vào và chính phần tử
5 đều được gán một id. Bằng cách sử dụng mã định danh đó, sau này chúng ta có thể truy xuất tham chiếu đến phần tử đó trong mã JavaScript.
Hơn nữa, điều quan trọng cần lưu ý là mã HTML cần thiết để xuất danh sách các sự cố hiện có không được đưa vào chỉ mục. html. Lý do là rõ ràng. HTML cần thiết cho đầu ra danh sách là mã động và phụ thuộc vào các bản ghi sự cố được truy xuất từ Bộ nhớ cục bộ. Vì vậy, thứ duy nhất bạn có thể tìm thấy ở đây là phần tử
6 với id problemsList. Phần tử này cho chúng ta khả năng tạo mã HTML cần thiết bằng JavaScript và sau đó đặt kết quả vào phần tử đó. Tìm nạp dữ liệu sự cố từ bộ nhớ cục bộ
Hãy chuyển sang chính. js và bắt đầu triển khai phần JavaScript của ứng dụng của chúng tôi. Dữ liệu sự cố phải được lưu trong Bộ nhớ cục bộ của trình duyệt. Điều đầu tiên chúng tôi sẽ triển khai là mã cần thiết để truy xuất các sự cố từ Bộ nhớ cục bộ. Chúng tôi làm điều đó bằng cách thêm hàm fetchIssues[]
0
Dòng mã đầu tiên đang truy xuất sự cố từ Bộ nhớ cục bộ. Điều này được thực hiện bằng cách thực thi
7 và phân tích kết quả chuỗi thành một đối tượng JSON.
Với dòng mã thứ hai, chúng tôi đang truy xuất tham chiếu đến phần tử
6 với id problemsList. Nội dung HTML của phần tử đó có thể được truy cập bởi thuộc tính innerHTML. Trước tiên, chúng tôi đang sử dụng thuộc tính đó để đặt nội dung thành một chuỗi trống. Tiếp theo, chúng tôi sẽ lặp lại các phần tử trong các vấn đề bằng cách sử dụng vòng lặp for và thêm đầu ra HTML cho phần tử đó vào problemsList. bên trongHTML. Lưu dữ liệu vấn đề vào bộ nhớ cục bộ sau khi gửi biểu mẫu
Trước tiên, chúng ta cần đính kèm một trình xử lý sự kiện vào sự kiện gửi biểu mẫu. Điều đó được thực hiện bằng cách sử dụng dòng mã sau
3
Tham chiếu đến phần tử biểu mẫu được truy xuất bằng cách sử dụng getElementById. Chúng tôi đang chuyển vào chuỗi issueInputForm là id của phần tử
5. Phương thức addEventListener được gọi để đính kèm sự kiện gửi biểu mẫu vào hàm xử lý sự kiện saveIssue. Hãy thực hiện chức năng này tiếp theo
5
Đầu tiên, các giá trị đầu vào từ các điều khiển biểu mẫu được truy xuất và lưu trữ trong các biến cục bộ. issueStatus được đặt thành Open và issueId được tạo bằng cách gọi hàm Chance. hướng dẫn[]. Tiếp theo, đối tượng vấn đề mới được chèn vào đối tượng vấn đề trong Bộ nhớ cục bộ.
Sau khi chèn đối tượng problems vào Bộ nhớ cục bộ, chúng ta cần làm trống biểu mẫu bằng cách gọi phương thức reset[]. Chúng tôi đang gọi lại hàm fetchIssues[] để đảm bảo rằng đầu ra danh sách được tạo lại và mục sự cố mới sẽ hiển thị.
Cuối cùng, chúng ta cần thực thi e. preventDefault[] để tránh việc gửi biểu mẫu mặc định đang diễn ra.
Đầu ra HTML được tạo cho từng mục vấn đề trong hàm fetchIssues chứa một nút có thể được sử dụng để đặt trạng thái vấn đề thành Đã đóng
6
Ở đây, chúng tôi đang đính kèm sự kiện nhấp vào phương thức xử lý sự kiện setStatusClosed. Việc thực hiện phương pháp này có sẵn trong danh sách sau
0
Id của mục vấn đề hiện tại được chuyển vào dưới dạng tham số. Để truy xuất mục tương ứng từ Bộ nhớ cục bộ, trước tiên chúng tôi cần truy xuất các mục sự cố ở định dạng JSON. Điều này được thực hiện bằng cách gọi
7 và chuyển kết quả cho phương thức
Một nút khác được tạo cho từng mục vấn đề
1
Bằng cách nhấp vào nút này, người dùng sẽ có thể xóa mục sự cố hiện tại khỏi danh sách và khỏi Bộ nhớ cục bộ. Sự kiện nhấp chuột được liên kết với chức năng xử lý sự kiện xóaIssue. Việc thực hiện phương pháp này có thể được nhìn thấy trong những điều sau đây
2
Việc triển khai tương tự như việc triển khai hàm setStatusClosed mà chúng ta đã thấy trước đây. Sự khác biệt chính là chúng tôi đang sử dụng phương thức nối để xóa mục hiện tại khỏi các vấn đề về mảng. Sau khi đã xóa mục vấn đề hiện tại khỏi mảng, chúng tôi đang ghi lại mục đó vào Bộ nhớ cục bộ và thực hiện lại hàm fetchIssues để cập nhật đầu ra danh sách