@hopejs/hope v0.6.7
Hope
一个用原生 JavaScript 编写 UI 的库，支持组件化和基于 @vue/reactivity 的响应式，且不需要虚拟 DOM，所以整体代码非常精简。状态更新后，直接更新相应 DOM，高性能更新 UI。
快速开始
目前仅支持在script标签的src属性中引入hope.global.js，该文件存放在packages/hope/dist目录下。所有API都存放在一个全局对象Hope中。
例如用hopejs写一个 Hello World 是这样的：
const { div, $div, hText } = Hope
div()
hText('hello hope!')
$div()
mount(document.body)不要怀疑，虽然上面的写法有些“古怪”，不过这可是纯原生 JavaScript ！
我把 html 的版本写出来对比一下就很容易看明白：
// html 版本
<div>
hello hope!
</div>
// hopejs 版本
div()
hText('hello hope!')
$div()怎么样，是不是很相似？这是我故意模仿 html 的语法设计的，便于使用者的理解，降低学习成本。
用 JavaScript 编写 HTML
用 js 写 HTML 的好处是可以实现模块化，响应式，组件化开发页面，相比 HTML 更灵活。虽然有这些好处，但如何用 js 写 HTML 是个难题。可以用函数传参的形式，类似于虚拟 DOM 中的 h 函数。
// 描述一个 div 元素
h('div', props, ...children);如上所示，单个函数的形式可以完备的描述一个 DOM 树的整体结构，但当 DOM 树比较复杂时，这种写法的可读性比较低，写起来也不方便，对习惯了 HTML 语法的初学者来说不是很友好。
于是我想到了下面的这种类似于 HTML 语法的写法。
const { div, $div, hText } = Hope
// 描述一个 div 元素
div()
hText('hello')
$div()上面的这种写法比较类似于 HTML 的语法，有“开始标签”和“结束标签”，并且还可以在“标签”之间写其它的元素，如下所示：
// 描述一个拥有一个 span 子元素的 div 元素
div()
span()
$span()
$div()
// HTML 版本
<div>
<span>
</span>
</div>通过上面简单的比较，可以发现这种写法像 HTML 的写法，所以对习惯 HTML 语法的初学者来说比较容易入门，在写复杂的 DOM 结构的时候也会像 HTML 一样富有层次感。以后还会支持自动缩进和语法补全（通过 vscode 插件支持）。
HTML attribute 和 DOM property
如何设置元素的 class 或者 DOM 的属性呢？
请看下面的例子：
// 设置 div 的 class name
div({ class: 'class-name' })
hText('hello')
$div()
// HTML 版本
<div class="class-name">
hello
</div>可以看出，我是尽可能的模仿 HTML 的语法，便于更快的上手使用。有一点与 HTML 不同的是 hopejs 会自动判断设置的属性是 attribute 还是 property，所以如果想设置 DOM 元素的 property，也可以直接写到开始标签参数中。
例如：
// 设置 div 的 innerHTML 属性
div({ innerHTML: 'hello hope!' })
hText('hello')
$div()
// HTML 这样写是无效的，并不会设置其 DOM 元素的 innerHTML
<div innerHTML="hello hope!">
hello
</div>绑定事件
如何绑定事件呢，很简单，如下所示：
// 绑定 div 的 click 事件，'on' 后面的首字母需要大写
div({ onClick: () => console.log('Say hello!') })
hText('hello')
$div()
// HTML 版本，'on' 后面的首字母不需要大写
<div onclick="hello hope!">
hello
</div>这里要注意 onClick 中的 Click 的首字母是需要大写的，其底层使用的是 DOM 元素的 addEventListener 属性设置的。
组件
前端的组件化已经深入人心，所以 hopejs 也支持组件化开发。hopejs 暴露的有一个生成组件的 API：defineComponent，用该 API 可以封装自己的组件。
const { defineComponent, div, $div, hText, s } = Hope
// 接收一个函数作为参数，在该函数中书写该组件的 HTML 结构和 CSS 样式
const [com, $com] = defineComponent(({ props, slot, emit }) => {
// 直接写 “HTML"，不用 return
div({ class: 'class-name' })
hText('Hello Component!')
$div()
// hopejs 暴露了一个 s 接口，s 是 style 的缩写，用来写 CSS
// 该语法也是模仿的 CSS 的语法，CSS 的版本是这样的：
// .class-name {
// width: 100px;
// height: 100px;
// }
s('.class-name', {
width: '100px',
height: '100px'
})
})
// 然后就像普通标签一样使用组件
com()
$com()
// 最后需要挂在到 DOM 树中
mount(document.body)生命周期
在组件中可以使用三个生命周期函数，分别是：
onMounted
当组件被挂在到 DOM 树中时被触发。
onUnmounted
当组件被卸载时触发该生命周期函数。
onUpdated
当组件的视图更新时触发该生命周期函数。
事件
我比较喜欢 单向数据流 的概念，父组件与子组件通过子组件的 props 通信，子组件与父组件通过发出一个事件的方式进行通信，这样的代码更易于维护。
在 hopejs 中组件也可以发出一个事件，供用户使用的时候监听该事件，处理一些逻辑。事件是通过 emit 在组件中发出的。
const { defineComponent, div, $div, hText, s } = Hope
const [com, $com] = defineComponent(({ props, slot, emit }) => {
const handler = () => {
// 使用 emit 发出一个事件
emit('clickText', '这里可以传参数')
}
// 监听组件根元素的 click 事件
div({ onClick: handler })
hText('Hello Component!')
$div()
})
// 监听事件时注意字母的大小写，必须要 'on' 开头
com({ onClickText: (param) => console.log(param) })
$com()
// 最后需要挂在到 DOM 树中
mount(document.body)插槽
插槽在组件中也是很重要的，可以更灵活的使用组件。现在来看一下 hopejs 中组件的插槽是如何实现的。
const { defineComponent, div, $div, hText, hSlot, s } = Hope
const [com, $com] = defineComponent(({ props, slot, emit }) => {
// 通过 slot 参数，在组件中可以获取到插入到组件中的插槽，
// 所谓插槽就是一个函数，直接在某个位置上调用即可，default
// 表示的是没有提供具体名字的插槽，如果提供了具体的名字，
// 则需要更改为那个具体的名字，如 slot.name()
div()
slot.default()
$div()
})
// 使用组件时，需要通过 hSlot 指令来指定组件的插槽
com()
hSlot(() => {
div()
hText('这里是插槽中的内容')
$div()
})
$com()
// 也可以指定插槽的名字，使用时这样用 slot.name()
com()
hSlot('name', () => {
div()
hText('这里是插槽中的内容')
$div()
})
$com()
// 最后需要挂在到 DOM 树中
mount(document.body)更新 DOM 树的结构
有时候我们会根据某个状态值的不同，去显示不同的 DOM 结构，比如根据路由的不同渲染不同的组件。hopejs 提供了 block API 来进行 DOM 树的结构更新。如下所示：
const { div, $div, hText, reactive, block } = Hope
const state = reactive({ show: true })
div()
// 在 block 中声明 DOM 结构与状态之间的关系，
// 当状态更新时，DOM 树结构也会自动进行更新
block(() => {
if (state.show) {
hText('show 为 true 时显示')
} else {
hText('show 为 false 时显示')
}
})
$div()响应式
响应式在现在的前端开发中已经是不可缺少的一部分了，它极大的简化了前端页面的开发难度。来看一下 hopejs 的响应式是怎么写的。
const { div, $div, reactive } = Hope
const state = reactive({ color: 'red' })
// HTML
// 在 hopejs 中，只要把属性的值写成函数的形式，并返回，
// 当状态值更改时，对应的 UI 也会自动更新
div({style: {
color: () => state.color
}})
$div()
// 挂在到 DOM 树
mount(document.body)可以看到，在 hopejs 中响应式需要满足两个条件，一个是响应式对象，就是用 reactive API 生成的对象，一个是属性值是一个返回状态值的函数，这两个条件缺一不可，否则就不会状态值更改时自动更新 UI。
Demos
demo1: elastic-header
demo2: markdown
demo3: todomvc