CFSDN nhấn mạnh vào việc tạo ra giá trị thông qua mã nguồn mở. Chúng tôi cam kết xây dựng một nền tảng chia sẻ tài nguyên để mọi người làm CNTT có thể tìm thấy thế giới tuyệt vời của riêng mình tại đây.

Bài đăng trên blog CFSDN này là tập hợp các nguyên tắc triển khai Svelte đơn giản và dễ hiểu do tác giả biên soạn. Nếu bạn quan tâm đến bài viết này, vui lòng thích nó.

Xin chào mọi người, tôi là Kasong.

Svelte đã tồn tại trong một thời gian dài và tôi luôn muốn viết một bài phân tích nguyên tắc dễ hiểu. Sau khi trì hoãn quá lâu, cuối cùng tôi đã viết nó.

Bài viết này sẽ tập trung vào sơ đồ luồng và hai bản demo. Cách đọc đúng là mở bài viết này trên máy tính của bạn và theo dõi sơ đồ luồng và bản demo trong khi xem, gõ và học.

Để tôi bắt đầu nhé.

Bản trình bày1

Nguyên lý triển khai của Svelte được thể hiện trong hình:

Thành phần trong hình là thành phần do nhà phát triển viết và phần chấm bên trong được biên dịch bởi trình biên dịch Svelte. Các mũi tên trong hình biểu diễn quy trình làm việc khi chạy.

Trước tiên, hãy xem xét quá trình biên dịch. Hãy xem xét mã thành phần ứng dụng sau:

1. {

   đếm 
2.  
3.  
4.   cho phép đếm = 0; 
5.  

Để biết mã đầy đủ, hãy xem Demo1 repl[1].

Trình duyệt sẽ hiển thị:

Mã này được trình biên dịch biên dịch để tạo ra mã sau, bao gồm ba phần:

• phương thức create_fragment
• Câu lệnh đếm
• Câu lệnh khai báo của lớp App

1. // Bỏ một số mã... 
2. Chức năng tạo_phân_mảnh(ctx) { 
3.   hãy để h1; 
4.  
5.   trở lại { 
6.     c() { 
7.       h1 = phần tử("h1"); 
8.       h1.textContent = `${đếm}`; 
9.     }, 
10.     m(mục tiêu, mỏ neo) { 
11.       chèn(mục tiêu, h1, neo); 
12.     }, 
13.     d(tách ra) { 
14.       nếu (tách ra) tách ra(h1); 
15.     } 
16.   }; 
17. } 
18.  
19. cho phép đếm = 0; 
20.  
21. lớp App mở rộng SvelteComponent { 
22.   constructor(tùy chọn) { 
23.     siêu(); 
24.     init(cái này, tùy chọn, vô giá trị, tạo_phân_phần, an_toàn không_bằng nhau, {}); 
25.   } 
26. } 
27.  
28. xuất khẩu mặc định Ứng dụng; 

tạo_phân_phần

Trước tiên, chúng ta hãy xem phương thức create_fragment, được biên dịch bởi trình biên dịch dựa trên App UI và cung cấp phương thức để thành phần tương tác với trình duyệt. Trong kết quả biên dịch ở trên, có 3 phương thức:

• c, viết tắt của create, được sử dụng để tạo Phần tử DOM tương ứng theo nội dung mẫu. Trong ví dụ này, hãy tạo phần tử DOM tương ứng với H1:

1. h1 = phần tử("h1"); 
2. h1.textContent = `${đếm}`; 

• m, viết tắt của mount, được sử dụng để chèn Phần tử DOM được tạo bởi c vào trang để hoàn tất quá trình hiển thị đầu tiên của thành phần. Trong ví dụ này, H1 sẽ được chèn vào trang:

1. chèn(mục tiêu, h1, neo); 

Phương thức insert gọi target.insertBefore:

1. Chức năng chèn(mục tiêu, nút, mỏ neo) { 
2.   target.insertBefore(nút, neo || vô giá trị); 
3. } 

• d, viết tắt của detach, được sử dụng để xóa phần tử DOM tương ứng với thành phần khỏi trang. Trong ví dụ này, H1 sẽ bị xóa:

1. nếu (tách ra) tách ra(h1); 

Phương thức tách gọi parentNode.removeChild:

1. Chức năng tách(nút) { 
2.   node.parentNode.removeChild(node); 
3. } 

Nếu bạn nhìn kỹ vào sơ đồ, bạn sẽ thấy rằng sản phẩm đã biên dịch của thành phần App không có phương thức p trong đoạn mã trong hình.

Nguyên nhân là do Ứng dụng không có logic "thay đổi trạng thái" nên phương thức tương ứng sẽ không xuất hiện trong sản phẩm đã biên dịch.

Có thể thấy rằng các phương thức c và m được trả về bởi create_fragment được sử dụng cho lần kết xuất đầu tiên của thành phần. Vậy ai là người gọi những phương pháp này?

Thành phần Svelte

Mỗi thành phần tương ứng với một lớp được kế thừa từ SvelteComponent. Khi được khởi tạo, phương thức init sẽ được gọi để hoàn tất quá trình khởi tạo thành phần. create_fragment sẽ được gọi trong init:

1. lớp App mở rộng SvelteComponent { 
2.   constructor(tùy chọn) { 
3.     siêu(); 
4.     init(cái này, tùy chọn, vô giá trị, tạo_phân_phần, an_toàn không_bằng nhau, {}); 
5.   } 
6. } 

Tóm lại, kết quả biên dịch phần chấm trong sơ đồ ở Demo1 là:

• đoạn: được biên dịch như giá trị trả về của phương thức create_fragment
• UI: Kết quả thực hiện của phương thức m trong giá trị trả về create_fragment
• ctx: biểu diễn ngữ cảnh của thành phần. Vì ví dụ chỉ chứa số đếm trạng thái không thay đổi, ctx là câu lệnh khai báo của số đếm.

Bản demo có thể thay đổi trạng thái

Bây giờ hãy sửa đổi Demo, thêm phương thức cập nhật, liên kết sự kiện nhấp chuột vào H1 và thay đổi số đếm sau khi nhấp chuột:

1. <>TRÊN:nhấp="{cập nhật}">{đếm 
2.  
3.  
4.   cho phép đếm = 0; 
5.   Chức năng cập nhật() { 
6.     đếm++; 
7.   } 
8.  

Để biết mã đầy đủ, hãy xem Demo2 repl[2].

Sản phẩm đã biên dịch thay đổi và những thay đổi trong ctx như sau:

1. // Từ khai báo cấp cao nhất của mô-đun 
2. cho phép đếm = 0; 
3.  
4. // Trở thành một phương thức thể hiện 
5. Chức năng thể hiện($$self, $$props, $$vô hiệu hóa) { 
6.   cho phép đếm = 0; 
7.  
8.   Chức năng cập nhật() { 
9.     $$vô hiệu hóa(0, đếm++, đếm); 
10.   } 
11.  
12.   trở lại [đếm, cập nhật]; 
13. } 

đếm các thay đổi từ câu lệnh khai báo ở cấp cao nhất của mô-đun thành một biến trong phương thức thể hiện. Lý do cho sự thay đổi này là ứng dụng có thể khởi tạo nhiều:

1. // Định nghĩa 3 ứng dụng trong mẫu 
2. <ứng dụng/=""> 
3. <ứng dụng/=""> 
4. <ứng dụng/=""> 
5.  
6. // khiđếmKhi không thể thay đổi, trang được hiển thị như sau:

   0

    
7. 0 
8. 0 

Khi số lượng không thay đổi, tất cả các ứng dụng có thể sử dụng lại cùng một số lượng. Nhưng khi số lượng thay đổi, tùy thuộc vào số lần nhấp vào các ứng dụng khác nhau, trang có thể được hiển thị như sau:

1. 0 
2. 3 
3. 1 

Do đó, mỗi ứng dụng cần có một ngữ cảnh độc lập để lưu số lượng, đây chính là ý nghĩa của phương thức thể hiện. Nói chung, trình biên dịch Svelte theo dõi tất cả các khai báo biến trong