1 Star 2 Fork 0

Peak Tai / wok-ui

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

wok-ui

wok-ui 是一个前端 UI 组件库,简洁易用,响应式设计,无第三方依赖,基于 Typescript 有完整的类型约束。

查看在线演示。

查看完整文档。

优缺点

优点:

  • 学习成本低,接近于裸 dom
  • 强类型推断,开发更效率,尽可能在编译期发现错误
  • 体积小,但是功能还算丰富,无第三方依赖
  • 由于无动态代理和虚拟层,坑比较少,性能还可以

缺点:

  • 不支持数据同步视图,自动化程度低,需要手动调用方法确定要渲染的时机
  • 无 dom 差异化渲染,全量渲染有时效果不是很理想,想要好的效果需要细致处理
  • 可能会有很深的嵌套,较深的代码层级,较深的 dom 层级
  • 与其它 UI 框架混用可能会冲突,为了简化,css 类名都是语义化的,嫌加前缀太繁琐了

理念

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

快速使用

正常使用 npm 安装

npm i wok-ui --save

在国内有时候会因为网络问题无法使用 npm 来安装,经常出现 ETIMEDOUT 错误, 也因为这个问题新版本可能无法及时发布到 npm 官方仓库。 若急需使用新版本,可以使用 git 仓库来安装。

npm install git+https://gitee.com/tai/wok-ui.git --save

入口文件 src/main.ts 代码示例

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)

路由

如果要使用路由,可以使用 initRouter 函数,函数返回一个 Router 实例,也是一个模块,可以直接挂载到 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)

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

MIT License Copyright (c) 2023 Peak Tai Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

wok-ui 是一个前端 UI 组件库,简洁易用,响应式设计,无第三方依赖。wok-ui is a front-end UI component library that is simple and easy to use, responsive design, and no third party dependencies. 展开 收起
TypeScript 等 3 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
TypeScript
1
https://gitee.com/tai/wok-ui.git
git@gitee.com:tai/wok-ui.git
tai
wok-ui
wok-ui
master

搜索帮助