Việc sử dụng JavaScript ở đâu trong giao diện người dùng?

Tìm hiểu cách xây dựng ứng dụng web mặt trước bằng JavaScript đơn giản với nỗ lực tối thiểu. Không sử dụng bất kỳ khung hoặc thư viện (của bên thứ ba) nào, chẳng hạn như jQuery hoặc Angular, tạo ra các phần phụ thuộc hộp đen và chi phí hoạt động, đồng thời ngăn cản bạn tự học cách thực hiện

• Tải xuống ứng dụng tối thiểu. zip-9. 2KB

Giới thiệu

Bài viết này đã được trích xuất từ ​​cuốn sách Xây dựng ứng dụng web giao diện người dùng bằng JavaScript đơn giản, có sẵn dưới dạng sách trực tuyến truy cập mở. Nó chỉ ra cách xây dựng ứng dụng giao diện người dùng với nỗ lực tối thiểu, không sử dụng bất kỳ khung hoặc thư viện (bên thứ ba) nào. Mặc dù các thư viện và khung có thể giúp tăng năng suất, nhưng chúng cũng tạo ra các phụ thuộc hộp đen và chi phí hoạt động, đồng thời ngăn cản bạn tự học cách thực hiện

Nếu trước tiên bạn muốn xem nó hoạt động như thế nào và nó trông như thế nào, bạn có thể chạy ứng dụng tối thiểu được thảo luận trong bài viết này từ máy chủ của chúng tôi

Ứng dụng web mặt trước có thể được cung cấp bởi bất kỳ máy chủ web nào, nhưng nó được thực thi trên thiết bị máy tính của người dùng (điện thoại thông minh, máy tính bảng hoặc máy tính xách tay) chứ không phải trên máy chủ web từ xa, như được minh họa bằng sơ đồ kiến ​​trúc sau

Thông thường, nhưng không nhất thiết, ứng dụng web giao diện người dùng là ứng dụng một người dùng, không được chia sẻ với những người dùng khác

Phiên bản tối thiểu của ứng dụng quản lý dữ liệu đầu cuối JavaScript được thảo luận trong hướng dẫn này chỉ bao gồm tối thiểu chức năng tổng thể cần thiết cho một ứng dụng hoàn chỉnh. Nó chỉ xử lý một loại đối tượng (_______01) và hỗ trợ bốn thao tác quản lý dữ liệu tiêu chuẩn (Tạo/Đọc/Cập nhật/Xóa), nhưng nó cần được nâng cao bằng cách tạo kiểu cho giao diện người dùng bằng các quy tắc CSS và bằng cách thêm các phần quan trọng khác

• Phần 2. Chăm sóc xác thực ràng buộc đáp ứng (HTML5)

• Phần 3. Xử lý phép liệt kê

• Phần 4. Quản lý các hiệp hội một chiều chỉ định tác giả và nhà xuất bản cho sách

• Phần 5. Quản lý các hiệp hội hai chiều cũng chỉ định sách cho tác giả và nhà xuất bản

• Phần 6. Xử lý các mối quan hệ kiểu con (kế thừa) trong hệ thống phân cấp lớp

Lý lịch

Phần này cung cấp một cuộc thảo luận ngắn gọn về HTML và một số yếu tố của JavaScript, giả sử rằng người đọc đã quen thuộc với các khái niệm lập trình cơ bản và có một số kinh nghiệm về lập trình, chẳng hạn như PHP, Java hoặc C#

HTML

Chúng tôi áp dụng phương trình ký hiệu

HTML = HTML5 = XHTML5

tuyên bố rằng khi chúng tôi chỉ nói "HTML" hoặc "HTML5", chúng tôi thực sự muốn nói đến XHTML5, bởi vì chúng tôi thích cú pháp rõ ràng của các tài liệu XML hơn là cú pháp kiểu HTML4 tự do và khó hiểu cũng được HTML5 cho phép

Đối tượng JavaScript

Các đối tượng JavaScript khác với các đối tượng OO/UML cổ điển. Đặc biệt, họ không cần khởi tạo một lớp. Và chúng có thể có các phương thức (cấp độ thể hiện) của riêng chúng ở dạng các vị trí phương thức, vì vậy chúng không chỉ có các vị trí thuộc tính (thông thường) mà còn có các vị trí phương thức. Ngoài ra, chúng cũng có thể có các vị trí khóa-giá trị. Vì vậy, chúng có thể có ba loại vị trí khác nhau, trong khi các đối tượng cổ điển (được gọi là "đặc tả cá thể" trong UML) chỉ có các vị trí thuộc tính

Các đối tượng JavaScript có thể được sử dụng theo nhiều cách khác nhau cho các mục đích khác nhau. Dưới đây là năm trường hợp sử dụng khác nhau hoặc ý nghĩa có thể có của các đối tượng JavaScript

1. Ví dụ, một bản ghi là một tập hợp các vị trí thuộc tính, chẳng hạn như

   JavaScript

   var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

2. Bản đồ (hoặc 'bản đồ băm' hoặc 'mảng kết hợp') là một tập hợp các vị trí khóa-giá trị. Ví dụ, nó hỗ trợ tra cứu các giá trị dựa trên các khóa như

   JavaScript

   var numeral2number = { "one":1, "two":2, "three":3}

   liên kết giá trị số 1 với khóa "một", 2 với "hai", v.v. Khóa không nhất thiết phải là mã định danh JavaScript hợp lệ mà có thể là bất kỳ loại chuỗi nào (e. g. nó có thể chứa khoảng trống)

3. Một đối tượng chưa được gõ không khởi tạo một lớp. Ví dụ, nó có thể có các vị trí thuộc tính và các vị trí phương thức như,

   JavaScript

   var person1 = {  
     lastName: "Smith",  
     firstName: "Tom",
     getInitials: function () {
       return this.firstName.charAt(0) + this.lastName.charAt(0); 
     }  
   };

4. Một không gian tên có thể được xác định dưới dạng một đối tượng chưa được nhập được tham chiếu bởi một biến đối tượng toàn cục, tên của nó đại diện cho một tiền tố không gian tên. Chẳng hạn, biến đối tượng sau đây cung cấp không gian tên chính của một ứng dụng dựa trên mô hình kiến ​​trúc Model-View-Controller (MVC) trong đó chúng ta có ba không gian tên con tương ứng với ba phần của ứng dụng MVC

   JavaScript

   var myApp = { model:{}, view:{}, ctrl:{} };

5. Một đối tượng đã nhập

   var o = new C(...)

   2 khởi tạo một lớp được xác định bởi hàm tạo JavaScript

   var o = new C(...)

   3 được tạo bằng biểu thức

   JavaScript

   var o = new C(...)

   Loại/lớp của một đối tượng đã nhập như vậy có thể được truy xuất bằng biểu thức nội tại

   JavaScript

   ________số 8

bản đồ

Bản đồ được xử lý với sự trợ giúp của một vòng lặp đặc biệt trong đó chúng tôi lặp qua tất cả các khóa của bản đồ bằng cách sử dụng hàm được xác định trước

var o = new C(...)

4, trả về một mảng gồm tất cả các khóa của bản đồ

var o = new C(...)

5. Ví dụ,

JavaScript

var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

1

Để thêm một phần tử mới vào bản đồ, chúng ta chỉ cần tạo một mục nhập khóa-giá trị mới như trong

JavaScript

var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

2

Để xóa một phần tử khỏi bản đồ, chúng ta có thể sử dụng toán tử JavaScript

var o = new C(...)

6 được xác định trước như trong

JavaScript

var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

4

JavaScript hỗ trợ ba loại cấu trúc dữ liệu

Ba loại cấu trúc dữ liệu (hoặc kiểu dữ liệu phức tạp) là

1. các bản ghi, là các đối tượng JS đặc biệt, như đã thảo luận ở trên,
2. bản đồ, cũng là các đối tượng JS đặc biệt, như đã thảo luận ở trên,
3. danh sách mảng, là các đối tượng JS đặc biệt được gọi là 'mảng', nhưng vì chúng là động nên chúng là danh sách mảng (như được định nghĩa bởi Java)

Định nghĩa và khởi tạo một lớp

Một lớp có thể được định nghĩa trong hai bước. Đầu tiên, xác định hàm xây dựng xác định các thuộc tính của lớp và gán cho chúng các giá trị của các tham số của hàm tạo

JavaScript

var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

5

Tiếp theo, xác định các phương thức cấp thể hiện của lớp dưới dạng các khe hàm của thuộc tính đối tượng nguyên mẫu của hàm tạo

JavaScript

var numeral2number = { "one":1, "two":2, "three":3}

0

Cuối cùng, các phương thức cấp độ lớp ("tĩnh") có thể được định nghĩa là các khe hàm của hàm tạo, như trong

JavaScript

var numeral2number = { "one":1, "two":2, "three":3}

1

Một thể hiện của một lớp được tạo bằng cách áp dụng toán tử

var o = new C(...)

7 cho hàm tạo

JavaScript

var numeral2number = { "one":1, "two":2, "three":3}

2

Phương thức

var o = new C(...)

8 được gọi trên đối tượng

var o = new C(...)

9

o.constructor.name  // returns "C" 

0 bằng cách sử dụng 'ký hiệu dấu chấm'

JavaScript

var numeral2number = { "one":1, "two":2, "three":3}

3

Mã hóa ứng dụng

Mục đích của ứng dụng ví dụ của chúng tôi là quản lý thông tin về sách. Đó là, chúng tôi xử lý một loại đối tượng duy nhất.

var o = new C(...)

1, như mô tả trong hình dưới đây

Chúng ta cần gì cho một ứng dụng quản lý thông tin như vậy?

1. Tạo ra. Nhập dữ liệu của một cuốn sách sẽ được thêm vào bộ sưu tập sách được quản lý

2. Đọc. Hiển thị danh sách tất cả các sách trong bộ sưu tập sách được quản lý

3. Cập nhật dữ liệu của một cuốn sách

4. Xóa một bản ghi sách

Để nhập dữ liệu với sự trợ giúp của bàn phím và màn hình máy tính, chúng tôi có thể sử dụng các biểu mẫu HTML, cung cấp công nghệ giao diện người dùng cho các ứng dụng web

Để duy trì một bộ sưu tập các đối tượng dữ liệu, chúng ta cần một công nghệ lưu trữ cho phép lưu giữ các đối tượng dữ liệu trong các bản ghi liên tục trên thiết bị lưu trữ thứ cấp, chẳng hạn như đĩa cứng hoặc đĩa trạng thái rắn. Các trình duyệt web hiện đại cung cấp hai công nghệ như vậy. cái đơn giản hơn được gọi là Bộ nhớ cục bộ và cái mạnh hơn được gọi là IndexedDB. Đối với ứng dụng ví dụ tối thiểu của chúng tôi, chúng tôi sử dụng Bộ nhớ cục bộ

Bước 1 - Thiết lập cấu trúc thư mục

Ở bước đầu tiên, chúng tôi thiết lập cấu trúc thư mục cho ứng dụng. Chúng tôi chọn tên cho ứng dụng của mình, chẳng hạn như "Thư viện công cộng" và tên tương ứng (có thể viết tắt) cho thư mục ứng dụng, chẳng hạn như "publicLibrary". Sau đó, chúng tôi tạo thư mục này trên đĩa máy tính của mình và thư mục con "src" cho các tệp mã nguồn JavaScript của chúng tôi. Trong thư mục này, chúng tôi tạo các thư mục con "model", "view" và "ctrl", theo mô hình Model-View-Controller cho kiến ​​trúc ứng dụng phần mềm. Và cuối cùng chúng tôi tạo một chỉ mục. html cho trang bắt đầu của ứng dụng, như được thảo luận bên dưới. Vì vậy, chúng tôi kết thúc với cấu trúc thư mục sau

var numeral2number = { "one":1, "two":2, "three":3}

4

Trang bắt đầu của ứng dụng tải Sách. js và cung cấp một menu để chọn một trong các thao tác quản lý dữ liệu CRUD được thực hiện bởi một trang tương ứng, chẳng hạn như createBook. html hoặc để tạo dữ liệu thử nghiệm với sự trợ giúp của quy trình

o.constructor.name  // returns "C" 

2 hoặc xóa tất cả dữ liệu bằng

o.constructor.name  // returns "C" 

3

Chỉ mục trang bắt đầu của ứng dụng tối thiểu. html

HTML

var numeral2number = { "one":1, "two":2, "three":3}

5

Bước 2 - Viết mã mẫu

Trong bước thứ hai, chúng tôi viết mã của lớp mô hình của mình trong một tệp JavaScript cụ thể. Trong mô hình thiết kế thông tin ở trên, chỉ có một lớp, đại diện cho loại đối tượng

var o = new C(...)

1. Vì vậy, trong thư mục src/model, chúng ta tạo một tệp Book. js ban đầu chứa đoạn mã sau

JavaScript

var numeral2number = { "one":1, "two":2, "three":3}

6

Lớp mô hình

var o = new C(...)

1 được mã hóa dưới dạng một hàm tạo JavaScript với một tham số duy nhất là

o.constructor.name  // returns "C" 

6, được coi là một đối tượng bản ghi có các thuộc tính

o.constructor.name  // returns "C" 

7,

o.constructor.name  // returns "C" 

8 và

o.constructor.name  // returns "C" 

9, biểu thị các giá trị cho ISBN, tiêu đề và các thuộc tính năm của lớp

var o = new C(...)

1. Do đó, trong hàm tạo, các giá trị của thuộc tính

o.constructor.name  // returns "C" 

6 được gán cho các thuộc tính tương ứng bất cứ khi nào một đối tượng mới được tạo như một thể hiện của lớp này

Ngoài việc định nghĩa lớp mô hình dưới dạng hàm khởi tạo, chúng ta còn định nghĩa các mục sau trong Sách. tập tin js

1. Thuộc tính cấp lớp

   var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

   12 đại diện cho tập hợp tất cả các trường hợp

   var o = new C(...)

   1 được quản lý bởi ứng dụng dưới dạng bản đồ

2. Phương thức cấp lớp

   var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

   14 để tải tất cả các phiên bản

   var o = new C(...)

   1 được quản lý từ kho lưu trữ dữ liệu liên tục

3. Phương thức cấp lớp

   var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

   16 để lưu tất cả các phiên bản

   var o = new C(...)

   1 được quản lý vào kho lưu trữ dữ liệu liên tục

4. Phương thức cấp lớp

   var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

   18 để tạo và lưu trữ bản ghi

   var o = new C(...)

   1 mới

5. Một phương thức cấp lớp

   var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

   20 để cập nhật bản ghi

   var o = new C(...)

   1 hiện có

6. Một phương thức cấp lớp

   var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

   22 để xóa một thể hiện

   var o = new C(...)

   1

7. Một phương thức cấp lớp

   var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

   24 để tạo một vài bản ghi sách ví dụ được sử dụng làm dữ liệu thử nghiệm

8. Một phương thức cấp lớp

   var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

   25 để xóa kho dữ liệu sách

1. Đại diện cho bộ sưu tập của tất cả các phiên bản Sách

Để đại diện cho tập hợp của tất cả các trường hợp

var o = new C(...)

1 được quản lý bởi ứng dụng, chúng tôi xác định và khởi tạo thuộc tính cấp lớp

var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

12 theo cách sau

JavaScript

var numeral2number = { "one":1, "two":2, "three":3}

7

Vì vậy, ban đầu bộ sưu tập sách của chúng tôi trống rỗng. Trên thực tế, nó được định nghĩa là một đối tượng trống, vì chúng tôi muốn biểu diễn nó dưới dạng bản đồ (một tập hợp các vị trí khóa-giá trị, còn được gọi là 'bản đồ băm') trong đó ISBN là khóa để truy cập đối tượng sách tương ứng ( . Chúng ta có thể hình dung cấu trúc của một bản đồ như vậy dưới dạng bảng tra cứu, như trong Bảng 1

Bảng 1. Một bản đồ đại diện cho một bộ sưu tập sách

KeyValue006251587X{ isbn. "006251587X," tiêu đề. "Dệt web", năm. 2000 }0465026567{ isbn. "0465026567," tiêu đề. "Gödel, Escher, Bach", năm. 1999 }0465030793{ isbn. "0465030793," tiêu đề. "I Am A Strange Loop", năm. 2008 }

Lưu ý rằng các giá trị của bản đồ này là các đối tượng bản ghi đơn giản tương ứng với các hàng của bảng. Do đó, chúng ta cũng có thể biểu diễn chúng trong một bảng đơn giản, như trong Bảng 2

ban 2. Một tập hợp các đối tượng sách được biểu diễn dưới dạng bảng

ISBNTitleYear006251587XWeaving the Web20000465026567Gödel, Escher, Bach19990465030793I Am A Strange Loop2008

2. Đang tải tất cả các phiên bản Sách

Để lưu trữ dữ liệu liên tục, chúng tôi sử dụng Bộ nhớ cục bộ, là API JavaScript HTML5 được các trình duyệt web hiện đại hỗ trợ. Tải bản ghi sách từ Bộ nhớ cục bộ bao gồm ba bước

1. Truy xuất bảng sách đã được lưu trữ dưới dạng

   var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

   28 lớn bằng khóa "

   var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

   29" từ Bộ nhớ cục bộ với sự trợ giúp của bài tập

   JavaScript

   var numeral2number = { "one":1, "two":2, "three":3}

   8

   Việc truy xuất này được thực hiện trong dòng 5 của danh sách chương trình bên dưới

2. Chuyển đổi chuỗi bảng sách thành bản đồ tương ứng

   var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

   29 với các hàng sách làm phần tử, với sự trợ giúp của hàm tích hợp sẵn

   var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

   41

   JavaScript

   var numeral2number = { "one":1, "two":2, "three":3}

   9

   Chuyển đổi này, được thực hiện trong dòng 11 của danh sách chương trình bên dưới, được gọi là khử lưu huỳnh

3. Chuyển đổi từng hàng của

   var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

   29 (đại diện cho một đối tượng bản ghi chưa được nhập) thành một đối tượng tương ứng thuộc loại

   var o = new C(...)

   1 được lưu trữ dưới dạng một thành phần của bản đồ

   var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

   12, với sự trợ giúp của thủ tục

   var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

   45 được định nghĩa là một phương thức "

   var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

   46" (cấp lớp) trong

   var o = new C(...)

   1

   JavaScript

   var person1 = {  
     lastName: "Smith",  
     firstName: "Tom",
     getInitials: function () {
       return this.firstName.charAt(0) + this.lastName.charAt(0); 
     }  
   };

   0

Đây là mã đầy đủ của thủ tục

JavaScript

var person1 = {  
  lastName: "Smith",  
  firstName: "Tom",
  getInitials: function () {
    return this.firstName.charAt(0) + this.lastName.charAt(0); 
  }  
};

1

Lưu ý rằng vì thao tác nhập như

var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

48 có thể không thành công, nên chúng tôi thực hiện thao tác đó trong khối

var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

49-

var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

50, nơi chúng tôi có thể theo dõi thông báo lỗi bất cứ khi nào thao tác nhập không thành công

3. Lưu tất cả các phiên bản Sách

Lưu tất cả các đối tượng sách từ bộ sưu tập

var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

12 trong bộ nhớ chính vào Bộ nhớ cục bộ trong bộ nhớ phụ bao gồm hai bước

1. Chuyển đổi bản đồ

   var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

   12 thành

   var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

   28 với sự trợ giúp của hàm JavaScript được xác định trước

   var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

   54

   JavaScript

   var person1 = {  
     lastName: "Smith",  
     firstName: "Tom",
     getInitials: function () {
       return this.firstName.charAt(0) + this.lastName.charAt(0); 
     }  
   };

   2

   Chuyển đổi này được gọi là tuần tự hóa

2. Viết kết quả

   var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

   28 dưới dạng giá trị của khóa "

   var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

   29" vào Bộ nhớ cục bộ

   JavaScript

   var person1 = {  
     lastName: "Smith",  
     firstName: "Tom",
     getInitials: function () {
       return this.firstName.charAt(0) + this.lastName.charAt(0); 
     }  
   };

   3

Hai bước này được thực hiện ở dòng 5 và dòng 6 của danh sách chương trình sau

JavaScript

var person1 = {  
  lastName: "Smith",  
  firstName: "Tom",
  getInitials: function () {
    return this.firstName.charAt(0) + this.lastName.charAt(0); 
  }  
};

4

4. Tạo một phiên bản Sách mới

Thủ tục

var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

18 đảm nhiệm việc tạo một phiên bản

var o = new C(...)

1 mới và thêm nó vào bộ sưu tập

var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

12

JavaScript

var person1 = {  
  lastName: "Smith",  
  firstName: "Tom",
  getInitials: function () {
    return this.firstName.charAt(0) + this.lastName.charAt(0); 
  }  
};

5

5. Cập nhật một phiên bản Sách hiện có

Để cập nhật một phiên bản

var o = new C(...)

1 hiện có, trước tiên chúng tôi truy xuất nó từ

var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

12, sau đó gán lại các thuộc tính đó mà giá trị của nó đã thay đổi

JavaScript

var person1 = {  
  lastName: "Smith",  
  firstName: "Tom",
  getInitials: function () {
    return this.firstName.charAt(0) + this.lastName.charAt(0); 
  }  
};

6

Lưu ý rằng trong trường hợp thuộc tính số (chẳng hạn như

o.constructor.name  // returns "C" 

9), chúng ta phải đảm bảo rằng giá trị của tham số đầu vào tương ứng (

var numeral2number = { "one":1, "two":2, "three":3}

03), thường được lấy từ đầu vào của người dùng thông qua biểu mẫu HTML, được chuyển đổi từ

var numeral2number = { "one":1, "two":2, "three":3}

04 sang

var numeral2number = { "one":1, "two":2, "three":3}

05 với một

6. Xóa một phiên bản Sách hiện có

Trường hợp

var o = new C(...)

1 bị xóa khỏi bộ sưu tập

var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

12 bằng cách kiểm tra trước nếu bản đồ có một phần tử với khóa đã cho (dòng 2), sau đó áp dụng toán tử

var o = new C(...)

6 tích hợp trong JavaScript. , xóa một vị trí khỏi một đối tượng hoặc, trong trường hợp của chúng tôi, một phần tử khỏi bản đồ

JavaScript

var person1 = {  
  lastName: "Smith",  
  firstName: "Tom",
  getInitials: function () {
    return this.firstName.charAt(0) + this.lastName.charAt(0); 
  }  
};

7

7. Tạo dữ liệu thử nghiệm

Để có thể kiểm tra mã của chúng tôi, chúng tôi có thể tạo một số dữ liệu thử nghiệm và lưu nó vào cơ sở dữ liệu Bộ nhớ cục bộ của chúng tôi. Chúng ta có thể sử dụng thủ tục sau đây cho việc này

JavaScript

var person1 = {  
  lastName: "Smith",  
  firstName: "Tom",
  getInitials: function () {
    return this.firstName.charAt(0) + this.lastName.charAt(0); 
  }  
};

8

8. Xóa tất cả dữ liệu

Quy trình sau đây xóa tất cả dữ liệu khỏi Bộ nhớ cục bộ

JavaScript

var person1 = {  
  lastName: "Smith",  
  firstName: "Tom",
  getInitials: function () {
    return this.firstName.charAt(0) + this.lastName.charAt(0); 
  }  
};

9

Bước 3 - Khởi tạo ứng dụng

Chúng tôi khởi tạo ứng dụng bằng cách xác định không gian tên và không gian con MVC. Không gian tên là một khái niệm quan trọng trong công nghệ phần mềm và nhiều ngôn ngữ lập trình, bao gồm Java và PHP, cung cấp hỗ trợ cụ thể cho các không gian tên, giúp nhóm các đoạn mã có liên quan và tránh xung đột tên. Vì không có hỗ trợ cụ thể cho không gian tên trong JavaScript, nên chúng tôi sử dụng các đối tượng đặc biệt cho mục đích này (chúng tôi có thể gọi chúng là "đối tượng không gian tên"). Đầu tiên, chúng tôi xác định một không gian tên gốc (đối tượng) cho ứng dụng của mình, sau đó chúng tôi xác định ba không gian tên con, một cho mỗi phần trong số ba phần của mã ứng dụng. mô hình, xem và điều khiển. Trong trường hợp ứng dụng ví dụ của chúng tôi, chúng tôi có thể sử dụng đoạn mã sau cho việc này

JavaScript

var myApp = { model:{}, view:{}, ctrl:{} };

0

Ở đây, không gian tên chính được xác định là

var numeral2number = { "one":1, "two":2, "three":3}

11, viết tắt của "Public Library", với ba không gian tên con

var numeral2number = { "one":1, "two":2, "three":3}

12,

var numeral2number = { "one":1, "two":2, "three":3}

13 và

var numeral2number = { "one":1, "two":2, "three":3}

14 ban đầu là các đối tượng trống. Chúng tôi đặt mã này trong một tệp khởi tạo riêng. js trong thư mục ctrl, vì định nghĩa không gian tên như vậy thuộc về phần điều khiển của mã ứng dụng

Bước 4 - Triển khai ca sử dụng đối tượng danh sách

Trường hợp sử dụng này tương ứng với "Đọc" từ bốn trường hợp sử dụng quản lý dữ liệu cơ bản Tạo-Đọc-Cập nhật-Xóa (CRUD)

Giao diện người dùng cho trường hợp sử dụng này được cung cấp bởi trang HTML sau có chứa bảng HTML để hiển thị các đối tượng sách. Đối với ứng dụng ví dụ của chúng tôi, trang này sẽ được gọi là listBooks. html (trong thư mục chính publicLibrary) và sẽ chứa mã HTML sau

HTML

var myApp = { model:{}, view:{}, ctrl:{} };

1

Lưu ý rằng tệp HTML này tải ba tệp JavaScript. tệp điều khiển src/ctrl/khởi tạo. js, tệp mô hình src/model/Book. js và tệp xem src/view/listBooks. js. Hai tệp đầu tiên chứa mã để khởi chạy ứng dụng và cho lớp mô hình

var o = new C(...)

1 như đã giải thích ở trên và tệp thứ ba, đại diện cho mã giao diện người dùng của hoạt động "danh sách sách", hiện được phát triển. Trên thực tế, đối với thao tác này, chúng ta chỉ cần một thủ tục để thiết lập bối cảnh quản lý dữ liệu và giao diện người dùng, được gọi là

var numeral2number = { "one":1, "two":2, "three":3}

16

JavaScript

var myApp = { model:{}, view:{}, ctrl:{} };

2

Logic đơn giản của thủ tục này bao gồm hai bước

1. Đọc bộ sưu tập của tất cả các đối tượng từ kho lưu trữ dữ liệu liên tục (ở dòng 6)

2. Hiển thị từng đối tượng dưới dạng một hàng trong bảng HTML trên màn hình (trong vòng lặp bắt đầu từ dòng 9)

Cụ thể hơn, quy trình

var numeral2number = { "one":1, "two":2, "three":3}

16 trước tiên tạo các đối tượng sách từ các hàng tương ứng được truy xuất từ ​​Bộ nhớ cục bộ bằng cách gọi

var numeral2number = { "one":1, "two":2, "three":3}

18 và sau đó tạo bảng dạng xem trong một vòng lặp trên tất cả các vị trí khóa-giá trị của bản đồ

var myRecord = { firstName:"Tom", lastName:"Smith", age:26} 

12 trong đó mỗi giá trị đại diện cho một đối tượng

var numeral2number = { "one":1, "two":2, "three":3}

20. Trong mỗi bước của vòng lặp này, một hàng mới được tạo trong thành phần nội dung bảng với sự trợ giúp của thao tác DOM JavaScript

var numeral2number = { "one":1, "two":2, "three":3}

21, sau đó ba ô được tạo trong hàng này với sự trợ giúp của thao tác DOM

var numeral2number = { "one":1, "two":2, "three":3}

22. cái đầu tiên cho giá trị thuộc tính

o.constructor.name  // returns "C" 

7 của đối tượng sách và cái thứ hai và thứ ba cho giá trị thuộc tính

o.constructor.name  // returns "C" 

8 và

o.constructor.name  // returns "C" 

9 của nó. Cả

var numeral2number = { "one":1, "two":2, "three":3}

26 và

var numeral2number = { "one":1, "two":2, "three":3}

27 đều phải được gọi với đối số

var numeral2number = { "one":1, "two":2, "three":3}

28 để đảm bảo rằng các phần tử mới được thêm vào danh sách các hàng và ô

Bước 5 - Triển khai Ca sử dụng Tạo đối tượng

Đối với thao tác quản lý dữ liệu với đầu vào của người dùng, chẳng hạn như thao tác "tạo đối tượng", trang HTML có biểu mẫu HTML được yêu cầu làm giao diện người dùng. Biểu mẫu có một trường biểu mẫu cho từng thuộc tính của lớp

var o = new C(...)

1. Đối với ứng dụng ví dụ của chúng tôi, trang này sẽ được gọi là createBook. html (trong thư mục ứng dụng publicLibrary) và sẽ chứa mã HTML sau

HTML

var myApp = { model:{}, view:{}, ctrl:{} };

3

Tệp mã xem src/view/createBook. js chứa hai thủ tục

1. var numeral2number = { "one":1, "two":2, "three":3}

   16 đảm nhận việc truy xuất bộ sưu tập của tất cả các đối tượng từ kho lưu trữ dữ liệu liên tục và thiết lập trình xử lý sự kiện (

   var numeral2number = { "one":1, "two":2, "three":3}

   31) trên nút lưu để xử lý các sự kiện nút nhấp bằng cách lưu dữ liệu đầu vào của người dùng;

2. var numeral2number = { "one":1, "two":2, "three":3}

   31 đọc dữ liệu đầu vào của người dùng từ các trường biểu mẫu và sau đó lưu dữ liệu này bằng cách gọi thủ tục

   var numeral2number = { "one":1, "two":2, "three":3}

   33

JavaScript

var myApp = { model:{}, view:{}, ctrl:{} };

4

Bước 6 - Triển khai Trường hợp sử dụng đối tượng cập nhật

Một lần nữa, chúng ta có một trang giao diện người dùng (

var numeral2number = { "one":1, "two":2, "three":3}

34) và một tệp mã xem (src/view/updateBook. js). Biểu mẫu HTML cho giao diện người dùng của thao tác "đối tượng cập nhật" có trường lựa chọn để chọn sách sẽ được cập nhật và trường biểu mẫu cho từng thuộc tính của lớp

var o = new C(...)

1. Tuy nhiên, trường biểu mẫu cho thuộc tính số nhận dạng tiêu chuẩn (ISBN) ở dạng chỉ đọc vì chúng tôi không cho phép thay đổi số nhận dạng tiêu chuẩn của một đối tượng hiện có

HTML

var myApp = { model:{}, view:{}, ctrl:{} };

5

Quy trình

var numeral2number = { "one":1, "two":2, "three":3}

16 hiện phải thiết lập trường lựa chọn bằng cách truy xuất bộ sưu tập tất cả các đối tượng sách từ kho lưu trữ dữ liệu liên tục để điền vào danh sách tùy chọn của phần tử ________ 237

JavaScript

var myApp = { model:{}, view:{}, ctrl:{} };

6

Bước 7 - Thực hiện Ca sử dụng Xóa đối tượng

Đối với trường hợp sử dụng "xóa đối tượng", biểu mẫu giao diện người dùng chỉ có một trường lựa chọn để chọn sách sẽ bị xóa

HTML

var myApp = { model:{}, view:{}, ctrl:{} };

7

Mã xem trong src/view/deleteBook. js bao gồm hai thủ tục sau

JavaScript

var myApp = { model:{}, view:{}, ctrl:{} };

8

Chạy ứng dụng và lấy mã

Bạn có thể chạy ứng dụng tối thiểu từ máy chủ của chúng tôi và tìm thêm tài nguyên về kỹ thuật web, bao gồm sách truy cập mở, về kỹ thuật web. thông tin

Các biến thể và tiện ích mở rộng có thể

Sử dụng IndexDB thay vì LocalStorage

Thay vì sử dụng API lưu trữ cục bộ, API IndexDB có thể được sử dụng để lưu trữ cục bộ dữ liệu ứng dụng. Với Bộ nhớ cục bộ , bạn chỉ có một cơ sở dữ liệu (bạn có thể phải chia sẻ cơ sở dữ liệu này với các ứng dụng khác trong cùng một miền) và không có hỗ trợ cho các bảng cơ sở dữ liệu ( . Với IndexedDB , bạn có thể thiết lập cơ sở dữ liệu cụ thể cho ứng dụng của mình và bạn có thể xác định các bảng cơ sở dữ liệu, được gọi là 'kho lưu trữ đối tượng', có thể có các chỉ mục để truy cập . Ngoài ra, vì IndexedDB hỗ trợ cơ sở dữ liệu lớn hơn nên các phương thức truy cập của nó không đồng bộ và chỉ có thể được gọi trong ngữ cảnh giao dịch cơ sở dữ liệu.

Ngoài ra, để lưu trữ từ xa dữ liệu ứng dụng với sự trợ giúp của API web (REST), người ta có thể sử dụng thành phần giải pháp phụ trợ hoặc . Phương pháp lưu trữ từ xa cho phép quản lý cơ sở dữ liệu lớn hơn và hỗ trợ các ứng dụng nhiều người dùng.

Expressing Date/Time Information with the Element

Giả sử rằng lớp mô hình

var o = new C(...)

1 của chúng tôi có một thuộc tính bổ sung

var numeral2number = { "one":1, "two":2, "three":3}

39, các giá trị của thuộc tính này phải được đưa vào các bảng và biểu mẫu HTML. Mặc dù các mục thông tin ngày/giờ phải được định dạng dưới dạng chuỗi ở dạng con người có thể đọc được trên các trang web, tốt nhất là ở dạng được bản địa hóa dựa trên cài đặt trình duyệt của người dùng, không nên lưu trữ giá trị ngày/giờ ở dạng này. Thay vào đó, chúng tôi sử dụng các phiên bản của lớp JavaScript được xác định trước

var numeral2number = { "one":1, "two":2, "three":3}

40 để biểu diễn và lưu trữ các giá trị ngày/giờ. Trong biểu mẫu này, các hàm được xác định trước

var numeral2number = { "one":1, "two":2, "three":3}

41 và

var numeral2number = { "one":1, "two":2, "three":3}

42 có thể được sử dụng để chuyển các giá trị

var numeral2number = { "one":1, "two":2, "three":3}

40 thành các chuỗi ngày/giờ theo tiêu chuẩn ISO (có dạng "2015-01-27") hoặc thành các chuỗi ngày/giờ được bản địa hóa (như "27. 1. 2015"). Lưu ý rằng, để đơn giản, chúng tôi đã bỏ qua phần thời gian của chuỗi ngày/giờ

Tóm lại, một giá trị ngày/giờ được thể hiện dưới ba dạng khác nhau

1. Nội bộ, để lưu trữ và tính toán, dưới dạng giá trị

   var numeral2number = { "one":1, "two":2, "three":3}

   40

2. Bên trong, để chú thích chuỗi ngày/giờ được bản địa hóa hoặc bên ngoài, để hiển thị giá trị ngày/giờ ở dạng chuẩn, dưới dạng chuỗi ngày/giờ theo tiêu chuẩn ISO, e. g. , với sự giúp đỡ của

   var numeral2number = { "one":1, "two":2, "three":3}

   41

3. Bên ngoài, để hiển thị giá trị ngày/giờ ở dạng được bản địa hóa, dưới dạng chuỗi ngày/giờ được bản địa hóa, e. g. , với sự giúp đỡ của

   var numeral2number = { "one":1, "two":2, "three":3}

   42

Khi một giá trị ngày/giờ được đưa vào một trang web, chúng ta có thể sử dụng phần tử

var numeral2number = { "one":1, "two":2, "three":3}

47 cho phép hiển thị một biểu diễn mà con người có thể đọc được (thường là một chuỗi ngày/giờ được bản địa hóa) được chú thích bằng một tiêu chuẩn (có thể đọc được bằng máy)

Chúng tôi minh họa việc sử dụng phần tử

var numeral2number = { "one":1, "two":2, "three":3}

47 bằng ví dụ sau về trang web bao gồm hai phần tử

var numeral2number = { "one":1, "two":2, "three":3}

47. một để hiển thị một ngày cố định và một phần tử khác (ban đầu trống) để hiển thị ngày hôm nay, được tính toán với sự trợ giúp của hàm JavaScript. Trong cả hai trường hợp, chúng tôi sử dụng thuộc tính

var numeral2number = { "one":1, "two":2, "three":3}

50 để chú thích ngày hiển thị mà con người có thể đọc được với biểu diễn tương ứng có thể đọc được bằng máy

HTML

var myApp = { model:{}, view:{}, ctrl:{} };

9

Trang web này tải và thực thi hàm JavaScript sau để tính toán ngày hôm nay dưới dạng giá trị

var numeral2number = { "one":1, "two":2, "three":3}

40 và gán biểu diễn tiêu chuẩn ISO và biểu diễn được bản địa hóa của nó cho phần tử

var numeral2number = { "one":1, "two":2, "three":3}

47

JavaScript

var o = new C(...)

0

Điểm chú ý

Mã của ứng dụng này nên được mở rộng bởi

• thêm một số kiểu dáng CSS cho các trang giao diện người dùng và
• thêm xác nhận ràng buộc

Chúng tôi chỉ ra cách thực hiện việc này trong hướng dẫn tiếp theo Hướng dẫn ứng dụng web JavaScript mặt trước Phần 2. Thêm xác thực ràng buộc

Một vấn đề khác với mã do-it-yourself của ứng dụng ví dụ này là mã soạn sẵn cần thiết cho mỗi lớp đối với các phương pháp quản lý lưu trữ dữ liệu

var numeral2number = { "one":1, "two":2, "three":3}

53,

var numeral2number = { "one":1, "two":2, "three":3}

54, v.v. Mặc dù viết mã này một vài lần để học cách phát triển ứng dụng là tốt, nhưng bạn không muốn viết đi viết lại mã này sau này khi bạn làm việc trên các dự án thực tế. Trong một bài viết khác, Xác thực ràng buộc khai báo và đáp ứng với mODELcLASSjs, chúng tôi trình bày một cách tiếp cận làm thế nào để đặt các phương thức này ở dạng chung, sao cho chúng có thể được sử dụng lại cho tất cả các lớp của ứng dụng

Dự án thực hành

Vui lòng đặt bất kỳ câu hỏi nào về các dự án này trong phần nhận xét CodeProject bên dưới

Dự án 1 - Phát triển ứng dụng JavaScript Front-End để quản lý dữ liệu phim

Mục đích của ứng dụng là quản lý thông tin về phim. Giống như trong ứng dụng quản lý dữ liệu sách được thảo luận trong hướng dẫn, bạn có thể đặt giả định đơn giản hóa rằng tất cả dữ liệu có thể được lưu trong bộ nhớ chính. Vì vậy, khi khởi động ứng dụng, dữ liệu phim được đọc từ kho lưu trữ dữ liệu liên tục. Khi người dùng thoát khỏi ứng dụng, dữ liệu phải được lưu vào kho lưu trữ dữ liệu liên tục, kho dữ liệu này sẽ được triển khai với API lưu trữ cục bộ của JavaScript, như trong hướng dẫn

Ứng dụng chỉ xử lý một loại đối tượng.

var numeral2number = { "one":1, "two":2, "three":3}

55, như được mô tả trong Hình bên dưới. Trong các phần tiếp theo của hướng dẫn, bạn sẽ mở rộng ứng dụng đơn giản này bằng cách thêm các ràng buộc toàn vẹn, diễn viên và đạo diễn dưới dạng các lớp mô hình khác và các liên kết giữa chúng

Lưu ý rằng trong hầu hết các phần của dự án này, bạn có thể theo dõi hoặc thậm chí sao chép mã của ứng dụng quản lý dữ liệu sách, ngoại trừ việc hiện tại có một thuộc tính có phạm vi Ngày, vì vậy bạn phải sử dụng phần tử HTML

var numeral2number = { "one":1, "two":2, "three":3}

47 . list objects table, as discussed in the Section “Possible Variations and Extensions” above.

Để phát triển ứng dụng, chỉ cần làm theo trình tự bảy bước được mô tả trong hướng dẫn

1. Bước 1 - Thiết lập cấu trúc thư mục

2. Bước 2 - Viết mã mẫu

3. Bước 3 - Khởi tạo ứng dụng

4. Bước 4 - Triển khai Danh sách đối tượng Trường hợp sử dụng

5. Bước 5 - Thực hiện Tạo đối tượng Trường hợp sử dụng

6. Bước 6 - Triển khai Cập nhật đối tượng Trường hợp sử dụng

7. Bước 7 - Thực hiện Xóa đối tượng Trường hợp sử dụng

Dự án 2 - Quản lý dữ liệu liên tục với IndexedDB

Cải thiện ứng dụng của bạn được phát triển trong dự án 1 bằng cách thay thế việc sử dụng API lưu trữ cục bộ để lưu trữ dữ liệu liên tục bằng cách sử dụng API IndexedDB mạnh mẽ hơn

Môn lịch sử

• 2 Tháng tư 2014. Phiên bản đầu tiên được tạo
• 3 Tháng tư 2014. Đã sửa lỗi chính tả, thêm liên kết, thêm tiểu mục mới "HTML" và mục mới "Điểm biến đổi"
• 11 Tháng tư 2014. Cải thiện định dạng bảng, cập nhật mã, giải quyết sự không khớp giữa bài viết và mã
• 12 Tháng năm 2014. Cập nhật siêu liên kết
• 6 tháng mười 2014. Đã cập nhật các siêu liên kết, tải lên hình ảnh sơ đồ, thêm phần cuối cùng "Điểm chú ý"
• 7 tháng một 2015. Đã thêm phần "JavaScript hỗ trợ ba loại cấu trúc dữ liệu", sửa các siêu liên kết
• 28 January 2015: Extended the section "Points of Variation" (and changed title to "Possible Variations and Extensions") by adding two subsections: 1) Using IndexDB instead of LocalStorage, and 2) Expressing Date/Time Information with the Element. Improved teaser.
• 15 Tháng hai 2015. Đã cấu trúc lại phần khai báo sai của các biến bộ đếm trong vòng lặp for, chẳng hạn như trong (var i=0;. )
• 17 Tháng sáu 2015. Đã thêm phần mới "Dự án thực hành"
• 1 Tháng mười hai 2015. Đã thêm sơ đồ kiến ​​trúc ứng dụng giao diện người dùng

Giấy phép

Bài viết này, cùng với bất kỳ mã nguồn và tệp liên quan nào, được cấp phép theo Giấy phép Mở Dự án Mã (CPOL)