許多 UI 函式庫和 CSS 框架用於透過求助於 CSS 類別來啟用特殊功能。這在 jQuery 插件時代尤其流行。
儘管是一個非常受歡迎的選擇，但它絕對是一種程式反模式。
今天我們有幾種替代方法。功能反應領域的一種方法使得將功能「合併」到現有元素中成為可能。沒有 CSS 類，沒有 id 屬性濫用。
假設我們想要透過一個單獨的可重複使用模組在 HTML 清單中啟用拖放功能，我們可以隨意新增或刪除。
<ul ...${Sortable({onOrderChange: todoList.move})}>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
Sortable 將在所謂的 Mixin 中實作。它的作用是在所謂的「DOM 物件」中導出屬性、樣式、類別、事件處理程序：它包含的任何內容都會合併到目標元素中。
// sortable.ts
import { Subject, map, withLatestFrom } from 'rxjs';
export const Sortable = ({ onOrderChange }) => {
const dragStart = new Subject<HTMLLIElement>();
const drop = new Subject<HTMLLIElement>();
drop.pipe(
withLatestFrom(dragStart),
map(([dropEvt, dragEvt]) => {
const list = [...dragEvt.target.closest('ol,ul').children];
return [ list.indexOf(dragEvt.target), list.indexOf(dropEvt.target.closest('li')) ]
}),
).subscribe(([src, dst])=>onOrderChange(src, dst));
// Export a DOM Object for a framework or UI library
// to take care of and merge into the target element
return {
ondragstart: dragStart,
ondragover: e=>e.preventDefault(),
ondrop: drop,
};
};
因此，最終的應用程式程式碼將如下所示：
import { rml } from 'rimmel';
const List = () => {
return rml`
<ul ...${Sortable({onOrderChange: todoList.move})}>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
`;
}
在這裡玩一個完整的工作範例：
以上是使用 ObservableTypes 在沒有 CSS 類別的情況下拖放的詳細內容。更多資訊請關注PHP中文網其他相關文章！
