code-kits v1.1.0

code-kits

强化的你的 typescript 的编码装备, 框架啥的是不需要的.

注意!! 本人工作中只有 typescript 的工作环境, 所以只是以 typescript 的形式发布, 无法在单纯的 js 环境中运行

1. webpack 使用时需要注意ts-loader的 include 路径的问题, 需要 include 的本库, 或则直接去掉 include 的配置.
2. 只是想试一下的, 可以直接 使用 ts-node 这个库运行 typescript 的代码的方式调试.

对象方法:

1. objectEach, 遍历 object中的 值 和 键
2. objectMap, 常用于将对象中的值全部转换为新的值
3. objectFilter, 对象的键值对过滤, 常用于删除对象中的某些键

逻辑函数, 常常用于数组的 filter, 得到断言了类型后的数组.

1. notNil, 断言类型不是空(undefined | null)
2. notUndefined, 断言类型不是undefined
3. notNull, 断言类型不是 null

dom 操作

1. ele, 结构化的构建一段文档树
2. dom, 利用 ele 的构建结构化构建文档树的组件

延迟任务控制

1. delay, 一个 延迟的promise 方法.
2. schedule-task, 管理延迟任务的类, 常常用于延迟一个任务执行的时候需要取消之前执行的延迟任务

hooks 的编程, 源自于 react 的伟大发明. 这里实现了独立于 react 的 hooks.

1. Hooks 类, 生成一个用于记录钩子状态的实例.
2. useState, 用于生成一个 控制 state, 并且可以触发函数重新执行的钩子. 例如: const [s, setState] = useState(0)
3. useEffect, 用于生成一个有执行副作用任务的钩子, 可以选择返回一个析构函数用于清理. 例如: useEffect(() => {}, [deps])
4. runWithHooks, 例如: runWithHooks(() => {}), 将会自动的创建用于目标方法的 Hooks 实例, 并且使用这个Hooks 实例的环境执行目标方法.

注意!!: 1. Hooks 是依赖目标方法中的 钩子构建方法的执行顺序的, 所以不可以在不同的运行趟程中有不同的钩子使用顺序, 显然异步的生成钩子也不行. 2. 如果不懂何为 hooks 可以先学习 react hooks, 本 hooks 的实现原理和使用方式和 react 的保持一致.

ele结构化文档树的构建.

const dom = ele("dom-tree", {
  wrapper: 'div',
  title: 'p',
  content: {
    wrapper: 'div',
    welcome: 'p'
  }
})

将会得到

<div class="dom-tree">
  <p class="dom-tree-title"></p>
  <div class="dom-tree-content">
    <p class="dom-tree-content-welcome"></p>
  </div>
</div>

dom构建文档树组件

it("can init props in parent runner", () => {
  const a = dom("a", { good: "good" })(
    {
      wrapper: "div",
      content: "div",
    },
    (e, p) => {
      e.content.innerHTML = p.good
    }
  )
  const b = dom("b", { nice: "nice" })(
    {
      wrapper:"div",
      content: a,
      text: "div",
    },
    (e, p) => {
      e.content.init({ good: `${p.nice}-good` })
      e.text.innerHTML = p.nice
    }
  )

  b.init({ nice: "bb" })
  expect(b.getDom().innerHTML).toBe(
    '<div class="a b-content"><div class="a-content">bb-good</div></div><div class="b-text">bb</div>'
  )
}