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" 麻省理工學院
