DevOps研发效能
媒体矩阵
开源中国APP
授权协议 MIT
开发语言 TypeScript
操作系统 跨平台
软件类型 开源软件
所属分类 程序开发UI组件库
开源组织
地区 国产
投 递 者 peak-tai
适用人群 未知
收录时间 2023-12-15

软件简介

wok-ui 是一个基于 Typescript 开发的前端 UI 组件库,简洁易用,响应式设计,支持国际化,无第三方依赖。

优点:
 
  • 学习成本低,接近于裸 dom
  • 强类型推断,开发更效率,尽可能在编译期发现错误
  • 体积小,但是功能还算丰富,无第三方依赖
  • 由于无动态代理和虚拟层,坑比较少,性能还可以
缺点:
 
  • 不支持数据同步视图,自动化程度低,需要手动调用方法确定要渲染的时机
  • 无 dom 差异化渲染,全量渲染有时效果不是很理想,想要好的效果需要细致处理
  • 可能会有很深的嵌套,较深的代码层级,较深的 dom 层级
  • 与其它 UI 框架混用可能会冲突,为了简化,css 类名都是语义化的,没有加前缀

理念:

  • 不承诺不负责,没有太多的精力投入到这个项目,无法保证后续的更新
  • 不追求大而全,保持克制,只实现必要的基础功能,保持简单
  • 面向对象,易于理解,方便封装和抽象,同时也很灵活
  • 模块化,利于复杂业务拆分,职责单一,保持专注
  • 不兼容老旧浏览器,不在无意义的事情上浪费时间

安装:

npm i wok-ui --save

快速使用示例:

import 'wok-ui/dist/style.css'
import { DivModule, Text } from 'wok-ui'
// 页面模块,可以继承 Module 或 DivModule 来构建一个新的模块
class Page extends DivModule {
  constructor() {
    super()
    this.addChild(new Text('Hello world !'))
  }
}
// 创建页面模块的实例,然后挂载到 body 上
new Page().mount(document.body)

使用路由示例:

import 'wok-ui/dist/style.css'
import { DivModule, Text } from 'wok-ui'
// 首页模块,对于复杂度高的项目,页面需要分拆到不同的文件中
class HomePage extends DivModule {
  constructor() {
    super()
    this.addChild(new Text('Hello world !'))
  }
}

initRouter({
  mode: 'hash',
  rules: [{ path: '/', module: () => new HomePage() }]
}).mount(document.body)

更多使用方法, 请查看文档

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击引领话题📣 发布并加入讨论🔥
暂无内容
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
0 评论
2 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部