Alpine.js là gì và bạn sử dụng nó như thế nào?
Thế giới phát triển web rất hỗn loạn—các framework xuất hiện rồi biến mất và mọi thứ có thể gây choáng ngợp cho cả nhà phát triển mới và có kinh nghiệm.
Không giống như hầu hết các khung phát triển web, Alpine.js nhằm mục đích đơn giản nhất có thể nhưng đủ mạnh để xử lý các khái niệm như phản ứng và tác dụng phụ.
Mục Lục
Bắt đầu với Alpine.js
Cài đặt Alpine.js khá đơn giản. Bạn chỉ cần bao gồm những điều sau đây kịch bản thẻ trong HTML của bạn:
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
Ngoài ra, bạn có thể cài đặt Alpine.js trong dự án của mình bằng Trình quản lý gói Node:
npm install alpinejs
Khả năng phản ứng trong Alpine.js
Tạo ra một chỉ mục.htm tệp và thêm mã soạn sẵn sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alpine.js</title>
</head>
<body>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</body>
</html>
Các hoãn lại thuộc tính trong kịch bản thẻ yêu cầu trình duyệt chỉ chạy tập lệnh sau khi hoàn tất phân tích cú pháp tài liệu.
Alpine.js cung cấp một số chỉ thị như dữ liệu x mà nó sử dụng để lưu trữ dữ liệu và văn bản x mà nó sử dụng để thiết lập nội dung của thành phần kèm theo. Để sử dụng các lệnh này, hãy thêm đoạn mã sau vào HTML của bạn.
<div x-data="{name:'David Uzondu', organisation:'Make Use Of'}">
My name is <strong x-text="name"></strong>
and <i x-text="organisation"></i> is Awesome
</div>
Lệnh x-data lưu trữ một đối tượng với các khóa tên Và tổ chức. Sau đó, bạn có thể chuyển các khóa đó vào chỉ thị x-text. Khi bạn chạy mã, Alpine.js sẽ điền các giá trị:
Cách Alpine.js so sánh với React
Alpine.js là một framework nhẹ nên phù hợp để phát triển các dự án nhỏ và nguyên mẫu.
Trong các khung lớn hơn như React, bạn sử dụng các hook như sử dụngEffect() để xử lý các tác dụng phụ trong vòng đời của thành phần. Móc này chạy hàm gọi lại bất cứ khi nào một trong các phần tử của mảng phụ thuộc thay đổi:
import {useEffect} from "React";function MyComponent() {
useEffect(() => {
}, [ ]);
}
Để xử lý các tác dụng phụ trong Alpine.js, bạn có thể sử dụng hiệu ứng x chỉ thị. Ví dụ: giả sử bạn muốn xem một biến và ghi lại giá trị bất cứ khi nào biến đó thay đổi:
<div x-data="{number: 1}" x-effect="console.log(number)">
<h1 x-text="number"></h1>
<button @click="number = number + 1">Add new number</button>
</div>
Điều đầu tiên bạn có thể nhận thấy là bạn không cần chỉ định một phụ thuộc. Alpine sẽ chỉ lắng nghe những thay đổi trong tất cả các biến được chuyển đến hiệu ứng x. Các @nhấp chuột lệnh tăng biến số lên 1.
Kết xuất có điều kiện trong Alpine.js
Kết xuất các phần tử theo điều kiện là điều bạn có thể làm trong các khung như React. Alpine.js cũng cho phép bạn kết xuất các phần tử một cách có điều kiện. Nó cung cấp một x-nếu chỉ thị và một đặc biệt bản mẫu phần tử mà bạn có thể sử dụng để kết xuất các phần tử có điều kiện.
Tạo ra một cái khác chỉ mục.htm tệp và thêm mã soạn sẵn giống như trước đây. Thêm đoạn mã sau vào phần thân của HTML.
<div x-data="{shown:true}">
<button @click="shown=!shown" x-text="shown ? 'Hide Element' : 'Show Element'">Toggle</button> <template x-if="shown">
<div>The quick brown fox jumped over the dog.</div>
</template>
</div>
Các x-nếu chỉ thị được chuyển đến bản mẫu yếu tố. Điều này rất quan trọng vì nó cho phép Alpine.js theo dõi phần tử đang được thêm hoặc xóa khỏi trang. Các bản mẫu phần tử phải chứa một phần tử cấp gốc; đoạn mã sau sẽ vi phạm quy tắc đó:
<template x-if="shown">
<div>This element will be rendered just fine.</div>
<div>This element will be ignored by Alpine.js</div>
</template>
Xây dựng ứng dụng To-Do với Alpine.js
Đã đến lúc kết hợp mọi thứ bạn đã học cho đến nay và xây dựng một ứng dụng công việc đơn giản với hỗ trợ lưu trữ cục bộ. Đầu tiên, tạo một thư mục và điền vào đó một chỉ mục.htm tập tin và một phong cách.css tài liệu. Thêm mã soạn sẵn vào tệp index.htm và bao gồm một tham chiếu đến phong cách.css tài liệu:
<link rel="stylesheet" href="style.css">
Để duy trì dữ liệu sau khi tải lại trang, bạn cần có Alpine.js kiên trì cắm vào. Thêm bản dựng CDN của plugin này dưới dạng kịch bản thẻ, ngay phía trên bản dựng CDN cốt lõi của Alpine.js:
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>
bên trong thân hình xác định một div phần tử với một dữ liệu x chỉ thị. Chỉ thị này sẽ giữ một mảng gọi là tất cả nhiệm vụ. Sau đó, thêm một h1 phần tử có nội dung “Ứng dụng việc cần làm”.
<div x-data="{allTasks:$persist([])}">
<h1>To-do Application</h1>
</div>
Các $ kiên trì plugin là một trình bao bọc cho Lưu trữ cục bộ JavaScript API. Nó yêu cầu trình duyệt lưu trữ mảng trong bộ nhớ cục bộ để dữ liệu vẫn còn nguyên ngay cả sau khi tải lại trang. thêm một hình thức với một nộp chỉ thị cũng ngăn hành động gửi mặc định.
<form @submit.prevent="
($refs.task.value.trim().length && !allTasks.map(x=>x.task).includes($refs.task.value.trim()))
? allTasks = [{task: $refs.task.value.trim(), id:Date.now(), done:false}].concat(allTasks)
: $refs.task.value.trim() === ''
? alert('Input value cannot be empty')
: alert('Task added already.');
$refs.task.value=""
">
</form>
Các $refs mệnh đề cho phép truy cập vào phần tử DOM với “tác vụ” x-ref chỉ thị. Mã này cũng xử lý một số xác thực và đảm bảo rằng nó không thêm các chuỗi rỗng hoặc các tác vụ trùng lặp vào danh sách. Trước khi kết thúc biểu mẫu, hãy thêm một đầu vào phần tử với một x-ref của “nhiệm vụ” và một trình giữ chỗ. Sau đó, thêm một nút và đặt loại của nó thành “gửi”.
<input type="text" x-ref="task">
<button type="submit">Add Task</button>
Tiếp theo, định nghĩa một div với lớp “item”. Div này phải chứa hai div khác: một với dữ liệu x đặt thành mảng “chưa hoàn thành” và mảng còn lại được đặt thành mảng “đã hoàn thành”. Cả hai div nên có một hiệu ứng x chỉ thị và mảng phải được gói trong $ kiên trì mệnh đề như đã trình bày trước đó.
<div class="items">
<div x-data="{uncompleted:$persist([])}" x-effect="uncompleted = allTasks.filter(x=>x.done===false)">
</div>
<div x-data="{completed:$persist([])}" x-effect="completed=allTasks.filter(y=>y.done===true).reverse()">
</div>
</div>
Trong div đầu tiên, thêm một h3 thẻ có nội dung “Chưa hoàn thành”. Sau đó, đối với mỗi phần tử trong chưa hoàn thành mảng, kết xuất một div chứa “điều khiển” và chính nhiệm vụ đó.
Các điều khiển cho phép người dùng xóa một mục hoặc đánh dấu mục đó là đã hoàn thành:
<h3>Uncompleted</h3><template x-for="element in uncompleted" :key="element.id">
<div x-data="{showControls:false}" @mouseover="showControls = true" @mouseout="showControls = false"
class="task"
>
<div class="controls">
<div x-show="showControls" @click="element.done=true">[M]</div>
<div x-show="showControls" @click="allTasks=allTasks.filter(x=>x.id!==element.id)">[R]</div>
</div>
<div x-text="element.task" ></div>
</div>
</template>
Bạn có thể dùng x-cho lệnh để lặp qua một mảng và kết xuất các phần tử. Nó tương tự như v-cho trong Vue và Array.map() phương thức mảng trong React. Div “điều khiển” chứa hai div với chuỗi “[M]” Và “[R]”. Các chuỗi này là viết tắt của “Đánh dấu là xong” và “Xóa”. Bạn có thể thay thế các chuỗi này bằng các biểu tượng phù hợp nếu muốn.
Các chương trình x chỉ thị đặt một phần tử trưng bày thuộc tính CSS để không có nếu giá trị trỏ đến lệnh là sai. Div thứ hai trong div “items” tương tự như div đầu tiên với một vài ngoại lệ đáng chú ý: h3 văn bản được đặt thành “Đã hoàn thành”, con đầu tiên của div “điều khiển” có văn bản “[U]” thay vì “[M]” và trong div này @nhấp chuột chỉ thị, phần tử.done được đặt thành SAI.
<div x-show="showControls" @click="element.done=false">[U]</div>
Vậy là xong, bạn đã xem qua kiến thức cơ bản về Alpine.js và sử dụng những gì bạn đã học để tạo một ứng dụng công việc cơ bản.
Làm cho mã Alpine.js dễ viết hơn
Khi bạn bắt đầu viết mã Alpine.js, bạn có thể gặp khó khăn trong đầu. May mắn thay, các trình chỉnh sửa mã như Visual Studio Code cung cấp một loạt các tiện ích mở rộng giúp việc phát triển dễ dàng hơn.
Trong Thị trường tiện ích mở rộng, bạn có thể nhận tiện ích mở rộng Alpine.js IntelliSense giúp làm việc với các lệnh dễ dàng hơn. Điều này có thể giúp cải thiện năng suất của bạn khi sử dụng Alpine.js trong các dự án của bạn.