使用”亢奋HTML”开发apps - 1
使用”亢奋HTML”开发apps - 1
hyper what? An introduction to a blazing fast, lightweight JS library.
Easy apps with hyperHTML
使用说明
介绍, 引用/绑定
Events and components(事件和组件)
Moar about components and simple state management(更多关于组件和简单的情况管理)
引用类型和自定义类型
自定义元素
定制”我的自定义元素”
测试demo!
异步加载, 占位符 和 代码自动补齐.
Handling routes
第三方类库
第一部分:
作者 IvanTorres (唐华)和 PaulThompson.(保罗.汤普森)
翻译人: Hades
每个人都对虚拟DOM框架很着迷甚至疯狂,就像likeReact 和Vue一样,但是我总感觉少了点什么.我们不得不在内存中维护一个DOM的副本,这点我不太喜欢.我曾将尝试过一些其他的框架,然后发现了Mithril —它拥有vanillaJS 函数的优势简单易懂 —但是我还没有发现哪个框架是完美的.
Thenfound the work of AndreaGiammarchi.Andrea 致力于工具的编写,就像vitamer一样,然后他发布了一个全新的轻量级框架,被称作: hyperHTML.在读了他的博客之后发表了 TheDOM Is NOT Slow, Your Abstraction Is,我被深深的吸引了.我开始明白用它工作有多简单,并且我喜欢它的一切,任何事都是JS函数,就像API中只有两个函数需要学习的Mithril 一样,!Add to that the simplicity of template literals for the templating,并且你拥有一个能够快速构建并呈现出UI变化的类库.
And no virtual DOM.
让我们初步了解一下hyperHTML,然后我们把学到的知识运用一下做一个简单的例子.只要会运用HTML,并且对JS有一个很好的理解即可.
基本要素 — 模板
hyperHTML中的模板是基于 templateliterals(字符串字面量).它们非常容易使用,仅仅是一个字符串在两个引号之间,例如:
`somestring `
但是你也可以放一个函数在里面,然后会自动被编译器编译检查是否正确:
`myvarvalue is ${myvar}`
如果myvar= 8; 你将得到“myvarvalue is 8”.这就是关于hyperHTML我们所有需要了解的入门内容.
基本要素 — 绑定
Bind()函数是两个你需要学习的函数之一.It renders the template described to the DOM element provided. Bind()函数不同于wire()函数(稍后会讲解这个函数),你使用bind()函数去添加内容到一个已经存在的DOM节点中.Bind函数会返回一个可以反复修改内容的一个回调函数.例如:
const render = bind(document.getElementById('app'));
通过绑定id为app的元素节点到这个函数,所以每次调用带有一个字面量的 “render”函数时,它的内容都会被更新.了解更多请查看: theofficial docs.
hyperHTML中一个特别酷的特性是响应速度非常快,当然它只会更新需要变化的部分,让我们做一个简单的时钟的列子.
如果你查看了代码,你将发现只有h2这个标签每秒会被更新.
基本要素 — 引用
另一个你需要掌握的函数是wire().Wire()函数返回了一个字符串字面量参数的html引用.你可以在你想创建新DOM节点的地方使用wire()函数去创建新节点.你也能生成一个元素或者一个元素的数组.你也可以传入一个对象或者数组,作为wire第二个参数的类型.默认的wire函数是html, 但它也可以是一个svg或者一个特定的id,所以hyperHTML不会重新渲染它.了解更多请点击: theofficial docs.
在这个简单的例子中,wire() 函数返回了h1标签的引用:
对于下一个元素,第一个数组每次都会重新渲染(查看元素检查器),但是要注意that当给传递一个对象参数给wire 的时候 ,wire(obj) 这个对象再次被点击的时候不会重新渲染.这是很了不起的特性.
一个小问题… 来自其他的框架就像Vue,你可能期望这个元素有局部参数.就像:
<divclass="myclass ${classvar}"></div>
HyperHTML不允许这么做,因为它不是必须的,但是你可以这样做:
<divclass="${`mylcass ${classvar}`}"></div>
嵌套的backticks能很好的解决这个问题!关于为什么部门参数不被使用,点击如下地址:theofficial docs.
Simpletable — 1
让我们学以致用,通过一个数组去做个简单的例子.第一步创建一个基础的HTML.然后创建一个绑定函数,并完成模板.我们将用迭代器去迭代map,并创建行和列!非常简单!在EditingEasy Apps 中用hyperHTML的第二部分,我们将给我们的数组添加排序.