Memento Pattern trong lập trình rất hữu ích trong những trường hợp chúng ta cần một cách để khôi phục trạng thái của một đối tượng.

Là một nhà phát triển JavaScript, chúng tôi làm việc với khái niệm này trong nhiều tình huống, đặc biệt là trong các ứng dụng web hiện đại.

Nếu bạn đã phát triển trên web một thời gian thì bạn có thể đã nghe nói về thuật ngữ hydrat hóa .

Nếu bạn không biết hydrat hóa là gì, thì đó là một kỹ thuật trong phát triển web trong đó phía máy khách lấy nội dung tĩnh được lưu trữ trong bất kỳ ngôn ngữ lập trình nào như JSON, JavaScript, HTML, v.v. và chuyển nó thành mã mà trình duyệt đang sử dụng. có thể chạy trong thời gian chạy. Ở giai đoạn đó, JavaScript được chạy và có thể thực hiện những việc như đính kèm trình xử lý sự kiện khi DOM bắt đầu chạy trên trang.

Mẫu vật lưu niệm cũng tương tự như vậy. Trong bài đăng này, chúng tôi sẽ triển khai mẫu Memento cho thời gian chạy và sẽ không lưu trữ bất kỳ thứ gì tĩnh.

Nếu bạn đã làm việc với JSON.parsevà JSON.stringifyrất có thể bạn đã vô tình thực hiện một kỷ vật trước đó.

Thông thường, có ba đối tượng triển khai toàn bộ quy trình của mẫu Memento:

1. Người khởi xướng
2. Memento
3. Giữ nhà

Memento là đại diện trạng thái bên trong của Người khởi tạo được chuyển và truy xuất từ ​​Người chăm sóc.

Người chăm sóc có một công việc: cất giữ hoặc lưu lại kỷ vật để sử dụng sau này. Nó có thể lấy lại vật lưu niệm mà nó đã lưu trữ nhưng nó không thay đổi bất cứ điều gì.

Triển khai Mẫu thiết kế Memento

Bây giờ chúng ta đã mô tả mẫu mà chúng ta sẽ triển khai nó để thành thạo thực hành này trong mã.

Chúng tôi sẽ tạo trường nhập email tương tác dưới dạng phần tử DOM. Chúng tôi sẽ thêm một hành vi thông minh vào trường nhập của mình để người dùng của chúng tôi sẽ ngay lập tức biết rằng họ cần thêm @ký hiệu trước khi gửi.

Họ sẽ biết điều này khi trường đầu vào của họ ở trạng thái lỗi sẽ giống như sau:

Đây là đánh dấu html mà chúng tôi sẽ làm việc ngay trên:

Điều này sẽ bắt đầu chúng ta với giao diện này:

Bây giờ, điều đầu tiên chúng ta sẽ làm là xác định một vài biến không đổi cho trạng thái lỗi mà chúng ta sẽ sử dụng trong suốt mã của mình để gán làm giá trị cho các kiểu lỗi. Điều này là để đảm bảo rằng chúng tôi không mắc lỗi chính tả khi viết mã của mình vì chúng tôi sẽ sử dụng lại chúng nhiều lần:

Điều này không liên quan gì đến mô hình nhưng tôi nghĩ rằng việc trượt ngẫu nhiên trong một số phương pháp hay nhất là một thói quen tốt để bạn có thể nhận thêm mẹo từ bài đăng này, tại sao lại không nhỉ? ;)

Bây giờ chúng ta sẽ tạo một hàm trợ giúp chuyển đổi giữa trạng thái lỗi và trạng thái bình thường vì chúng ta cũng sẽ sử dụng hàm này nhiều lần:

Tôi cũng có thể chỉ cần trượt vào một người trợ giúp để chuyển đổi bán kính đường viền trong khi chúng tôi chuyển đổi giữa hai cài đặt trước kiểu. Điều này là để làm cho mã của chúng tôi cảm thấy "tự nhiên" hơn như thể nó là một ứng dụng thực sự, vì vậy chúng tôi không chỉ tập trung trực tiếp vào mối quan hệ giữa màu sắc và vật lưu niệm trong bài đăng này. Đôi khi tôi nghĩ rằng chúng ta học tốt hơn khi chúng ta cũng nhìn thấy quan điểm của mã ngẫu nhiên so với mã thực tế mà chúng ta đang xem xét:

Điều tiếp theo chúng ta sẽ làm là viết Nguồn gốc .

Hãy nhớ rằng, người khởi tạo xác định giao diện kích hoạt việc tạo và lưu trữ chính nó dưới dạng vật lưu niệm.

Trên thực tế, chúng tôi chỉ tạo ra một nhà máy đơn giản sản xuất người khởi tạo cho chúng tôi.

Đây là người khởi tạo thực sự:

Trong trình khởi tạo, serializephương thức này nhận một nút DOM và trả về cho chúng tôi một biểu diễn trạng thái của nút DOM để chúng tôi có thể lưu trữ nó bên trong bộ lưu trữ cục bộ dưới dạng một chuỗi. Điều này là bắt buộc vì bộ lưu trữ cục bộ chỉ chấp nhận các chuỗi.

Ngay bây giờ chúng ta là đỉnh cao của mẫu này trong JavaScript. Việc tuần tự hóa là lý do duy nhất khiến mẫu này quan trọng đối với chúng tôi, nếu không, chúng tôi có thể lưu trữ trực tiếp các nút DOM vào bộ nhớ cục bộ và gọi nó là một ngày.

Bên trong serializephương pháp của chúng tôi, chúng tôi đã ngầm định một số quy tắc giúp chúng tôi xác định cách biểu diễn.

Đây là những dòng tôi đang đề cập đến:

Khi lưu trữ các vật lưu niệm của các phần tử đầu vào, chúng ta có thể lựa chọn triển khai theo cách đó hay cách này:

Hãy nghe lời khuyên của tôi về điều này: Một thực tiễn tốt là tạo ra ý nghĩa hữu ích từ mã của bạn , đặc biệt là trong việc triển khai mẫu thiết kế của bạn . Khi bạn mở đầu ý nghĩa trong mã của mình, nó sẽ giúp bạn nghĩ về những nội dung trừu tượng ở cấp độ cao hơn có thể hữu ích trong các lĩnh vực khác của mã của bạn.

Việc sử dụng item.isErrorđể đại diện cho một tập hợp sẵn các kiểu lỗi mở ra nhiều cơ hội hơn để tạo ra các vật lưu niệm thú vị có thể tái sử dụng mà chúng ta có thể sử dụng lại khi dự án của chúng ta ngày càng phức tạp hơn theo thời gian thay vì chỉ định các kiểu tùy ý trực tiếp.

Ví dụ: các biểu mẫu thường không gửi khi không có trường quan trọng. Biểu mẫu phải chuyển sang một số loại trạng thái cần ngăn chính nó gửi.

Nếu chúng tôi lưu một kỷ vật của một biểu mẫu, chúng tôi cần đảm bảo rằng khi chúng tôi khôi phục trạng thái này, người dùng sẽ được khôi phục về trạng thái “vô hiệu hóa”:

Thay vì trả về trực tiếp các phần tử, chúng tôi đảm bảo rằng những gì cũng được trả về là trạng thái hiện tại của việc hiển thị vật lưu niệm .

Nhìn vào điều này ở góc độ cấp cao hơn, chúng tôi tận dụng lợi thế của thực tế isErrorcó thể đại diện và tổng quan về một cái gì đó giống như một biểu mẫu. Không nên gửi biểu mẫu nếu thiếu một trong hai trường bắt buộc hoặc một giá trị không được nhập chính xác.

Trong trường hợp đó, chúng tôi đảm bảo rằng biểu mẫu không được tương tác bằng cách tắt nút gửi ngay trước khi hiển thị cho người dùng:

Nếu bạn không nhận thấy, chúng tôi restorekết thúc deserializephương pháp ban đầu của chúng tôi từ Trình khởi tạo của chúng tôi .

Những gì chúng ta có bây giờ là một vật lưu niệm trừu tượng ở cấp độ cao hơn hỗ trợ những đứa trẻ sâu sắc và trạng thái hiển thị ( isError) của toàn bộ vật lưu niệm của chúng ta.

Và điều đó kết thúc ở phần cuối của bài đăng này! Tôi hy vọng bạn thấy điều này có giá trị và tìm kiếm thêm trong tương lai!