首页
前端开发
Typescript
Isotope简洁直观的JavaScript UI库

Isotope简洁直观的JavaScript UI库

0 次浏览 0 条评论
zip
zip

简洁语义的组件写法，加上直接操作 DOM 的方式，Isotope 的用法看着就舒服。UI 层不搞花活，一眼能看懂逻辑，写起来也挺顺手。

用 createDOMView 创建视图，再往里面塞组件函数。比如下面这段：

const SaySth = (message) => (node) => {
  node.span({
    styles: {
      color: "orange",
      fontSize: "4rem",
      fontWeight: "bold",
    }
  }).text(message);
};


const view = createDOMView(document.body);
view.$(SaySth("Hello World!"));

嗯，这种 “函数返回函数操作节点” 的思路还挺清晰，基本不怎么绕弯。写习惯了 React 那套再来看 Isotope，会觉得轻得有点不像话。

更好的是，它不靠虚拟 DOM，也不折腾状态管理那些事。你想怎么组织结构、怎么下样式，全都自己说了算。拿来写个交互强但结构页面，比如活动页、单页应用，合适。

不过要注意，Isotope 目前生态还在长，文档和插件不多，比较适合有经验的开发者自己摸索着玩。如果你喜欢用函数拼装 UI，对 JSX 不太感冒，那这个库真的可以试试。

想了解其他风格类似的库，也可以看看 Web UI 组件库：简洁易用 或 JavaScript web 开发指南，可以多对比一下再上手。

zip 文件大小：1.07MB