Nếu bạn học được bất kỳ phần nào chính về triết lý kiến trúc giao diện người dùng từ loạt bài này, hãy tìm hiểu phần này. Chỉ cần thay đổi lớp học. Trong video này, chúng tôi bắt đầu đi xuống một lỗ hổng lớn của JavaScript chỉ để dừng lại, bắt chính mình và thay vào đó sử dụng CSS. Khi bạn đang thay đổi thứ gì đó một cách trực quan, đó là miền của CSS. Nó không chỉ tốt về nó, nó còn hoạt động hiệu quả hơn và duy trì “sự tách biệt các mối quan tâm” lành mạnh giúp tạo ra một trang web lành mạnh lâu dài.
Sau khi tỉnh táo lại, chúng tôi chỉ cần hoán đổi 1) văn bản nút 2) một data-statethuộc tính trên vùng chứa.
$(".bigger").on("click", function() ( var el = $(this); var module = el.parent(); // Swap expanded state module.attr("data-state") == "expanded" ? module.attr("data-state", "") : module.attr("data-state", "expanded"); // Swap button text. el.text() == el.data("text-swap") ? el.text(el.data("text-original")) : el.text(el.data("text-swap")); ));Đây là nơi chúng tôi đã kết thúc:
Xem Pen quFCo của Chris Coyier (@chriscoyier) trên CodePen
Đúng, video này (và cả cảm nhận) là “chỉ thay đổi các lớp!” Và chúng tôi đang thay đổi thuộc tính translate = "no"> data- * chỉ vì tôi thích chúng. Tôi nghĩ về chúng như các lớp có khoảng cách tên hoặc các lớp có giá trị. Có thể cho rằng trong CSS hữu ích hơn các lớp và chúng có cùng giá trị tính cụ thể.
Có phải không? /: cú pháp trông kỳ lạ? Nếu vậy, đó được gọi là toán tử bậc ba (hoặc "có điều kiện").
Dòng đầu tiên là một kiểm tra, dòng tiếp theo (hoặc bit sau dấu?) Là điều gì xảy ra nếu kiểm tra đó nếu đúng, dòng cuối cùng (hoặc bit sau dấu :) là điều gì xảy ra nếu kiểm tra đó là sai. Có lẽ điều này sẽ giúp:
// The boolean (true/false) test module.attr("data-state") == "expanded" // Do this if the test is true ? module.attr("data-state", "") // Do this is the test if false : module.attr("data-state", "expanded");Đừng né tránh chúng chỉ vì chúng trông kỳ lạ, chúng có thể hiệu quả hơn (và cuối cùng là đọc tốt, miễn là bạn không trở nên điên rồ) như thể / khác logic.
Doug Neiner có một bài báo hay về ý tưởng “chỉ cần thay đổi lớp học”. Các lớp có rất nhiều sức mạnh trong CSS. Bạn có thể ẩn / hiện mọi thứ, di chuyển mọi thứ, thay đổi diện mạo của mọi thứ, kích hoạt hoạt ảnh… bầu trời là giới hạn. Và bạn áp dụng lớp trong “cây” (DOM) càng cao, bạn càng có nhiều sức mạnh phân tầng. Thay đổi lớp trên nội dung có nghĩa là bạn có thể kiểm soát bất kỳ thứ gì trên toàn bộ trang với một lớp duy nhất. Và tất cả chỉ với một lượng rất nhỏ JavaScript.
Khi bạn mua nó, bạn sẽ trở thành một nhà phát triển hạnh phúc hơn.