superfine
8.2.0
SuperFine是用于构建Web接口的最小视图层。在没有框架的情况下（无状态机器，效果或订阅）认为HyperApp只是绝对裸露的最小值（1 kb kinified+gzpipped）。将其与您喜欢的州管理库混合，或使用它独立使用，以最大程度地灵活性。
这是让您入门的第一个示例。在这里尝试 - 无需构建步骤！
<!DOCTYPE html >
< html lang =" en " >
< head >
< script type =" module " >
import { h , text , patch } from "https://unpkg.com/superfine"
const setState = ( state ) =>
patch (
document . getElementById ( "app" ) ,
h ( "main" , { } , [
h ( "h1" , { } , text ( state ) ) ,
h ( "button" , { onclick : ( ) => setState ( state - 1 ) } , text ( "-" ) ) ,
h ( "button" , { onclick : ( ) => setState ( state + 1 ) } , text ( "+" ) ) ,
] )
)
setState ( 0 )
</ script >
</ head >
< body >
< main id =" app " > </ main >
</ body >
</ html >在描述“超级精”中的页面外观时，我们不会编写标记。取而代之的是，我们使用h()和text()函数来创建DOM（或简称虚拟DOM）的轻巧表示，而patch()实际渲染了DOM。
每当我们使用patch()时，SuperFine不会重新创建整个DOM。通过比较旧的和新的虚拟DOM，我们只能更改DOM的部分需要更改的部分，而不是从头开始渲染所有内容。
接下来，让我们看一下一个简单的TODO应用程序。您只能与它一起添加或杂交。您能否稍微浏览代码来弄清楚发生了什么？去这里。
< script type =" module " >
import { h , text , patch } from "https://unpkg.com/superfine"
const updateValue = ( state , value ) => ( { ... state , value } )
const addTodo = ( state ) => ( {
... state ,
value : "" ,
todos : state . todos . concat ( state . value ) . filter ( any => any ) ,
} )
const setState = ( state ) => {
patch (
document . getElementById ( "app" ) ,
h ( "main" , { } , [
h ( "h2" , { } , text ( "To-do list" ) ) ,
h ( "ul" , { } ,
state . todos . map ( ( todo ) =>
h ( "li" , { } , [
h ( "label" , { } , [
h ( "input" , { type : "checkbox" } ) ,
h ( "span" , { } , text ( todo ) )
] ) ,
] )
)
) ,
h ( "section" , { } , [
h ( "input" , {
type : "text" ,
value : state . value ,
oninput : ( { target } ) =>
setState ( updateValue ( state , target . value ) ) ,
} ) ,
h ( "button" ,
{ onclick : ( ) => setState ( addTodo ( state ) ) } ,
text ( "Add todo" )
) ,
] ) ,
] )
)
}
setState ( { todos : [ "Learn Quantum Physics" ] , value : "" } )
</ script >查看更多示例
现在，轮到您要服用超级精灵了。您可以添加一个按钮清除所有戒酒吗？做散装标记怎么样？如果您陷入困境或想问一个问题，只需提出问题，我将尽力帮助您 - 玩得开心！
npm install superfine h(type, props, [children])创建它们虚拟dom节点！ h()采用节点类型； HTML或SVG属性的对象，以及一系列子节点（或仅一个子节点）。
h ( "main" , { class : "relative" } , [
h ( "label" , { for : "outatime" } , text ( "Destination time:" ) ) ,
h ( "input" , { id : "outatime" , type : "date" , value : "2015-10-21" } ) ,
] )text(string)创建一个虚拟DOM文本节点。
h ( "h1" , { } , text ( "1.21 Gigawatts!?!" ) )patch(node, vdom)有效地在DOM上渲染虚拟DOM。 patch()取一个现有的DOM节点，一个虚拟DOM，并返回新鲜修补的DOM。
const node = patch (
document . getElementById ( "app" ) ,
h ( "main" , { } , [
// ...
] )
) 超级节点可以使用任何HTML属性，SVG属性，DOM事件以及密钥。
class:要指定一个或多个CSS类，请使用class属性。这适用于所有常规DOM和SVG元素。 class属性期望一个字符串。
const mainView = h ( "main" , { class : "relative flux" } , [
// ...
] )style:使用style属性将任意CSS规则应用于您的DOM节点。 style属性期望一个字符串。
重要的是：我们不建议将
style属性作为样式元素的主要手段。在大多数情况下，应该使用class用于在外部CSS样式表中定义的类别。
const alertView = h ( "h1" , { style : "color:red" } , text ( "Great Scott!" ) )key:每当我们更新DOM时，键都可以帮助识别节点。通过在虚拟DOM节点上设置key属性，您可以声明该节点应与特定的DOM元素相对应。如果位置更改，这使我们可以将元素重新列为其新位置，而不是冒着破坏它的风险。
重要的是：键在兄弟节点之间必须是独一无二的。
import { h } from "superfine"
export const imageGalleryView = ( images ) =>
images . map ( ( { hash , url , description } ) =>
h ( "li" , { key : hash } , [
h ( "img" , {
src : url ,
alt : description ,
} ) ,
] )
) SuperFine将修补服务器端渲染的HTML，回收现有内容，而不是创建新元素。该技术可以使SEO更好，因为搜索引擎爬网将更容易看到完全渲染的页面。在慢速互联网或慢速设备上，在下载和执行JavaScript之前，用户将享受更快的时间。
<!DOCTYPE html >
< html lang =" en " >
< head >
< script type =" module " >
import { h , text , patch } from "https://unpkg.com/superfine"
const setState = ( state ) =>
patch (
document . getElementById ( "app" ) ,
h ( "main" , { } , [
h ( "h1" , { } , text ( state ) ) ,
h ( "button" , { onclick : ( ) => setState ( state - 1 ) } , text ( "-" ) ) ,
h ( "button" , { onclick : ( ) => setState ( state + 1 ) } , text ( "+" ) ) ,
] )
)
setState ( 0 )
</ script >
</ head >
< body >
< main id =" app " > < h1 > 0 </ h1 > < button > - </ button > < button > + </ button > </ main >
</ body >
</ html >请注意，所有必要的HTML已与该文档一起提供。
Superfine希望在服务器和客户端之间标记相同。将不匹配视为错误并修复它们！现在，您只需要一种将内容发送给浏览器的方法。
JSX是一种语言语法扩展名，可让您编写与JavaScript散布的HTML标签。要编译JSX到JavaScript，请安装JSX Transform插件，然后在您的项目根部创建.babelrc文件：
{
"plugins" : [[ " transform-react-jsx " , { "pragma" : " h " }]]
}SuperFine不支持JSX开箱即用，但是将其添加到您的项目中很容易。
import { h , text } from "superfine"
const jsx = ( type , props , ... children ) =>
typeof type === "function"
? type ( props , children )
: h ( type , props || { } , children . flatMap ( ( any ) =>
typeof any === "string" || typeof any === "number" ? text ( any ) : any
)
)导入您在使用JSX的任何地方，您都会好起来的。这是一个有效的例子。
import jsx from "./jsx.js"
import { patch } from "superfine" 麻省理工学院
