DOM ảo Python

IDOM kết nối khung web Python bạn chọn với giao diện người dùng ReactJS, cho phép bạn tạo các trang web tương tác mà không cần JavaScript

Theo phong cách ReactJS, các phần tử web được kết hợp thành. Các thành phần này có thể sử dụng móc và để tạo các trang web vô cùng phức tạp

Khi cần, IDOM có thể. Để linh hoạt hơn, các thành phần cũng có thể được

Bất kỳ khung web Python nào có Websockets đều có thể hỗ trợ IDOM. Xem bên dưới để biết những khung nào được hỗ trợ ngoài hộp

Hyperpython là một phiên bản Python của Hyperscript. Nếu bạn không quen thuộc với Hyperscript, hãy coi nó như một Javascript thuần túy thay thế cho JSX. Hyperpython cho phép chúng tôi tạo, thao tác và truy vấn các tài liệu HTML bằng một DSL nhỏ được nhúng trong Python. Cũng giống như Hyperscript, điểm vào mặc định là hyperpython. chức năng h

>>> from hyperpython import h
>>> elem = h['p', {'class': 'hello'}, ['Hello World!']]

Điều này có thể được chuyển đổi sang HTML bằng cách gọi str[] trên phần tử

>>> print[elem]
Hello World!

Nó chấp nhận chữ ký h[thẻ, thuộc tính, danh sách_của_trẻ em] của Hyperscript, nhưng chúng tôi khuyến khích sử dụng phiên bản Python thành ngữ hơn sử dụng các đối số từ khóa để biểu thị các thuộc tính thay vì từ điển. Nếu danh sách con chứa một phần tử duy nhất, chúng ta cũng có thể bỏ dấu ngoặc

>>> h['p', 'Hello World!', class_='hello'] == elem
True

Lưu ý trong đoạn mã trên rằng chúng ta phải thoát khỏi thuộc tính “class” vì nó là một từ dành riêng trong Python. Hyperpython ánh xạ các đối số từ khóa Python bằng cách thay thế dấu gạch dưới bằng dấu gạch ngang và bằng cách thoát khỏi các từ dành riêng cho Python như “lớp”, “cho” “từ”, v.v. bằng dấu gạch dưới ở cuối

Các yếu tố có thể được tạo thuận tiện hơn với các chức năng độc lập đại diện cho các thẻ cụ thể

>>> print[p['Hello World!', class_='hello']]
Hello World!

Trong Python, đối số từ khóa không thể xuất hiện sau đối số vị trí. Điều này có nghĩa là các thuộc tính được đặt sau danh sách con, điều này không tự nhiên khi đại diện cho HTML. Đối với các yếu tố đơn giản như ở trên, nó không cản trở mức độ rõ ràng, nhưng đối với các cấu trúc lớn hơn thì đó có thể là một vấn đề thực sự. Hyperpython cung cấp hai lựa chọn thay thế. Cái đầu tiên sử dụng ký hiệu chỉ mục

>>> from hyperpython import div, p, h1
>>> fragment = \
..     div[class_="alert-box"][
..         h1['Hello Python'],
..         p['Now you can write HTML in Python!'],
..     ]

Giải pháp thay thế thứ hai là sử dụng thuộc tính giả "trẻ em". Đây là cách tiếp cận được thực hiện bởi một số thư viện Javascript như React

>>> fragment = \
..     div[class_="alert-box",
..         children = [
..             h1['Hello Python'],
..             p['Now you can write HTML in Python!'],
..         ]]

Hyper Python trả về một cấu trúc giống như DOME mà chúng ta có thể xem xét nội tâm, truy vấn và sửa đổi sau này. Tất nhiên, cách sử dụng chính là hiển thị các chuỗi mã nguồn HTML. Chúng tôi hy vọng rằng mục đích sử dụng chính của Hyperpython sẽ là bổ sung [hoặc thậm chí thay thế] ngôn ngữ tạo khuôn mẫu trong ứng dụng web Python. Điều đó nói rằng, Hyperpython tạo ra một HTML rất nhỏ gọn, hiệu quả để tạo và truyền qua dây. Để có được đầu ra thân thiện với con người hơn [và giữ sự tỉnh táo của bạn trong khi gỡ lỗi], hãy sử dụng. phương pháp đẹp []

Bài viết này ban đầu được xuất bản tại. https. //www. Blog. ngẫu nhiên. com/cái-là-sự-khác-biệt-giữa-bóng-dom-và-ảo-dom/

DOM [Document Object Model] là một khái niệm cơ bản trong front-end, và chắc hẳn ai học lập trình cũng đã hơn một lần nghe về nó. Đối với người mới bắt đầu, nó không dễ hiểu chính xác nó là gì và cách thao tác với nó. Thao tác DOM không dễ dàng và thoải mái, và quan trọng nhất, nó gây ra nhiều vấn đề về hiệu suất

Ngày nay, có hai khái niệm cơ bản về DOM đi kèm với các framework web lũy tiến như Angular, React. js hoặc Vue. js, Shadow DOM và Virtual DOM

Trong bài viết này, tôi muốn giải thích

• Mô hình Đối tượng Tài liệu [DOM] là gì,
• Shadow DOM là gì,
• DOM ảo là gì,
• sự khác biệt giữa Shadow DOM và Virtual DOM là gì

Tôi cũng sẽ cố gắng cho bạn biết về sự khác biệt giữa chúng và những ưu điểm và nhược điểm mà mỗi chúng mang lại

Hãy bắt đầu với việc giải thích DOM là gì

1. DOM là gì?

Những người mới bắt đầu thường đánh lừa DOM với những gì họ tạo ra dưới dạng cấu trúc HTML của trang web hoặc ứng dụng của họ. Nhưng HTML trở thành DOM sau khi trình duyệt phân tích nó, sau đó nó trở thành DOM
Định nghĩa nói rằng DOM là một API cho các tài liệu HTML hoặc XML và nó tạo ra một cấu trúc logic có thể được truy cập và thao tác. Nói cách khác, Javascript có thể truy cập và thực hiện các thay đổi trong Mô hình đối tượng tài liệu. Lý do triển khai Mô hình Đối tượng Tài liệu là để cung cấp một giao diện lập trình tiêu chuẩn, có thể được sử dụng với bất kỳ ngôn ngữ lập trình nào trong các môi trường khác nhau
Bằng cách sửa đổi DOM, chúng ta có thể hiểu thêm, xóa hoặc sửa đổi các thành phần của trang web, gán cho chúng các hành vi khác nhau, v.v.

Mọi trình duyệt đều có đối tượng chung của nó, được gọi là cửa sổ. Bên trong cửa sổ có các thuộc tính và phương thức khác nhau. Một trong những thuộc tính trong đối tượng cửa sổ là một tài liệu mà chúng ta có thể tìm thấy rất nhiều thuộc tính và phương thức có thể được sử dụng để truy cập các phần tử DOM để tương tác với chúng

Biểu diễn đồ họa của DOM trông giống như trong ví dụ bên dưới

As you can see, it’s created as a tree. It starts from the main document object, then the object is created, and element leads to and , and so on.
Mỗi đối tượng đại diện cho một phần tử HTML từ trang web dưới dạng một đối tượng, với các thuộc tính, thuộc tính và phương thức cho phép sửa đổi nó

2. Bóng DOM

Shadow DOM là một công cụ được sử dụng để xây dựng các ứng dụng và trang web dựa trên thành phần. Shadow DOM có nhiều phần nhỏ và nó không đại diện cho toàn bộ Mô hình đối tượng tài liệu. Chúng ta có thể xem nó như một cây con hoặc như một DOM riêng cho một phần tử. Shadow DOM có thể được mô phỏng như những viên gạch mà từ đó DOM được tạo ra

Sự khác biệt chính giữa DOM và Shadow DOM là cách nó được tạo ra và cách nó hoạt động. Thông thường các nút DOM mà chúng ta tạo được đặt bên trong các phần tử khác, giống như trong cây mà chúng ta đã thấy trước đây. Trong trường hợp của Shadow DOM, chúng tôi tạo một cây có phạm vi, được kết nối với phần tử nhưng tách biệt với các phần tử con. Nó được gọi là cây bóng tối và phần tử mà nó gắn vào được gọi là máy chủ bóng tối. Và ở đây chúng ta có một lợi thế lớn của Shadow DOM, mọi thứ mà chúng ta sẽ thêm vào Shadow DOM đều là kiểu cục bộ, thậm chí

Hãy giải thích tại sao Shadow DOM lại hữu ích như vậy và nó giải quyết được những vấn đề gì. Trước hết, nó cô lập DOM, vì vậy DOM của thành phần là một phần tử riêng biệt sẽ không xuất hiện trong DOM toàn cầu. Một vấn đề khác mà nó giúp giải quyết là phạm vi của CSS, có nghĩa là các kiểu được tạo bên trong phần tử Shadow DOM duy nhất được tách biệt và nằm trong phạm vi của Shadow DOM đó. Nó đơn giản hóa rất nhiều việc tạo kiểu vì chúng ta không phải lo lắng nhiều về việc đặt tên cho không gian và chúng ta có thể sử dụng các bộ chọn và tên lớp đơn giản. Ngoài ra, chúng ta có thể nghĩ về ứng dụng vì nó được xây dựng từ các khối [thực ra nó dựa trên các thành phần] chứ không phải là một đối tượng toàn cầu, đồ sộ.

Shadow DOM có thể ảnh hưởng đến hiệu suất của ứng dụng. Như đã nói ở đầu bài viết, có rất nhiều vấn đề về hiệu suất khi chúng ta muốn thao tác với DOM, bởi vì mỗi thay đổi sẽ khiến toàn bộ đối tượng phải render lại. Trong trường hợp Shadow DOM trình duyệt biết nên cập nhật phần nào

3. DOM ảo

Virtual DOM là một khái niệm về DOM được sử dụng bởi React. js và Vue. js. Trong khái niệm DOM ảo, bản sao của DOM được lưu trong bộ nhớ và trong khi bất kỳ thay đổi nào được thực hiện trong DOM, nó sẽ được so sánh để tìm ra sự khác biệt. Sau đó, trình duyệt biết phần tử nào đã được thay đổi và chỉ có thể cập nhật phần đó của ứng dụng để tránh kết xuất lại tất cả DOM. Nó được thực hiện để cải thiện hiệu suất của các thư viện giao diện người dùng. Như chúng ta đã biết, tạo thành đoạn trước trong DOM, mọi phần tử đều được kết xuất lại, bất kể nó có bị thay đổi hay không

Hãy kiểm tra chi tiết cách Virtual DOM hoạt động từng bước. Vì vậy, trước tiên, thay đổi được thực hiện và nó được thực hiện với Virtual DOM, không phải DOM ban đầu, sau đó Virtual DOM được so sánh với Mô hình đối tượng tài liệu và quá trình này được gọi là "sự khác biệt". Trong khi tìm thấy sự khác biệt thì trình duyệt sẽ biết phần tử nào trong DOM ban đầu sẽ được cập nhật và quá trình cập nhật đã hoàn tất. Trong khái niệm Virtual DOM, có thể áp dụng nhiều thay đổi cùng một lúc để tránh kết xuất lại cho mỗi thay đổi thành phần đơn lẻ

Vấn đề lớn nhất mà Virtual DOM giải quyết là cải thiện hiệu suất khi thao tác DOM

4. Sự khác nhau giữa Shadow DOM và Virtual DOM

Điểm chung duy nhất của cả hai là chúng giúp giải quyết các vấn đề về hiệu suất. Cả hai đều tạo một thể hiện riêng biệt của Mô hình Đối tượng Tài liệu; . Virtual DOM đang tạo một bản sao của toàn bộ đối tượng DOM và Shadow DOM tạo ra các phần nhỏ của đối tượng DOM có phạm vi riêng, biệt lập cho phần tử mà chúng đại diện

Phần kết luận

Khái niệm DOM rất quan trọng trong lập trình front-end, nhưng với sự phát triển của công nghệ và các thư viện mới, Mô hình đối tượng tài liệu cũng đã có những cải tiến. Với các framework web lũy tiến, chúng ta có thể sử dụng Shadow DOM và Virtual DOM để tránh các sự cố về hiệu suất và sửa đổi DOM nhanh hơn và hiệu quả hơn. Giờ đây, không còn phải lo lắng nữa, tương tác với đối tượng DOM như thế nào để hiệu năng không bị mê hoặc, khi sự phát triển của công nghệ đi kèm với sự trợ giúp

Tôi hy vọng bạn thấy bài viết này hữu ích trong việc hiểu DOM là gì và cách hoạt động của các khái niệm Virtual và Shadow DOM. Ngoài ra, tôi đã giải thích sự khác biệt chính giữa chúng và các vấn đề mà chúng đã giải quyết