Svelte Framework là gì và bạn sử dụng nó như thế nào?
Svelte là một trong những khung JavaScript hấp dẫn nhất xung quanh. Trong Khảo sát dành cho nhà phát triển StackOverflow năm 2022, nó nổi lên như khung JavaScript được yêu thích thứ hai trong số các nhà phát triển web. Trong hướng dẫn này, bạn sẽ tìm hiểu các nguyên tắc cơ bản và cách xây dựng một ứng dụng công việc đơn giản bằng Svelte.
Mục Lục
Bắt đầu với Svelte
Bạn sẽ thiết lập mọi thứ bằng công cụ xây dựng Vite. Mở terminal và chạy các lệnh bên dưới theo thứ tự. Đặt tên dự án là “ứng dụng svelte” (hoặc lựa chọn của bạn), chọn Svelte làm khung và đặt JavaScript làm biến thể.
yarn create vite
cd svelte-app
yarn
yarn dev
Mở dự án trong trình chỉnh sửa mã, xóa lib thư mục và xóa nội dung của thư mục app.css tập tin và Ứng dụng.svelte tài liệu.
Svelte so với React như thế nào
DOM là cấu trúc dạng cây được tạo từ HTML của trang web, hiển thị mối quan hệ giữa các phần tử khác nhau tạo nên trang.
Không giống như React sử dụng DOM ảo, Svelte là một trình biên dịch hiểu tại thời điểm xây dựng, mọi thứ trong ứng dụng của bạn có thể thay đổi như thế nào. Bởi vì Svelte hoạt động trong thời gian xây dựng nên nó tạo ra JavaScript vanilla hiệu suất cao và được tối ưu hóa.
Khả năng phản ứng và hoạt hình trong Svelte
Cấu trúc của hầu hết các ứng dụng Svelte được minh họa bên dưới. Bạn có thể chọn không bao gồm phong cách các thẻ chỉ để lại kịch bản và đánh dấu:
<script>
</script><!-- Markup -->
<style>
</style>
Trong Svelte, phản ứng dựa trên các bài tập. Hãy xem đoạn mã sau:
<script>
let count = 0;
const handleClick = () => {
count += 2;
}
</script><main>
You have clicked:
<button on:click={handleClick}>
{count} {count === 1 ? 'time' : 'times'}
</button>
</main>
Các kịch bản thẻ xác định đếm biến và xử lýClick hàm tăng dần đếm bằng 2. Các chủ yếu phần tử có một nút với trong một cái nhấp chuột chỉ thị để chạy xử lýClick chức năng. Các cái nút cập nhật khi nào đếm thay đổi.
Svelte giúp dễ dàng tạo hoạt ảnh cho các phần tử. Giả sử bạn có một bức ảnh có thể điều chỉnh chiều rộng bằng cách nhấn một nút, mô-đun svelte/motion tween tiện ích có thể được sử dụng để đạt được hiệu ứng này.
<script>
import { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';
let src="https://images.pexels.com/photos/718752/pexels-photo-718752.jpeg";
let size=tweened(30, {
duration: 900,
easing: cubicOut
})
</script><button on:click={()=>size.set($size+30)}>
Increase Photo Size
</button>
<button on:click={()=>size.set($size-30)}>
Decrease Photo Size
</button>
<br />
<img src={src} width={$size} />
Mã này sử dụng tween cho giao tiếp thành phần và hình ảnh động và một lập phương nới lỏng để tạo ra một hình ảnh động trơn tru. size.set(…) trả lại lời hứa đã giải quyết sau khi tween đã được hoàn thành.
Xây dựng một ứng dụng việc cần làm đơn giản với Svelte
Hãy thêm chức năng để xác thực các mục trước khi chúng được thêm vào danh sách việc cần làm, xóa mục, cảnh báo người dùng nếu đầu vào không hợp lệ và lưu trữ danh sách việc cần làm trong bộ nhớ cục bộ.
Tạo ra một src/thành phần/Item.svelte tập tin và trong Ứng dụng.svelte tệp, xác định phần tử