หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

ซุปเปอร์

Superfine เป็นเลเยอร์มุมมองที่น้อยที่สุดสำหรับการสร้างอินเตอร์เฟสเว็บ คิดว่า Hyperapp โดยไม่ต้องใช้กรอบ - ไม่มีเครื่องจักรของรัฐเอฟเฟกต์หรือการสมัครสมาชิก - เพียงขั้นต่ำเปล่าที่สมบูรณ์ (1 kb minified+gzipped) ผสมกับห้องสมุดการจัดการสถานะที่คุณชื่นชอบหรือใช้มันแบบสแตนด์อโลนเพื่อความยืดหยุ่นสูงสุด

นี่คือตัวอย่างแรกที่คุณเริ่มต้น ลองที่นี่ - ไม่ต้องสร้างขั้นตอน! 

 <!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 >

เมื่ออธิบายว่าหน้าเว็บมีลักษณะอย่างไรใน superfine เราไม่ได้เขียนมาร์กอัป แต่เราใช้ฟังก์ชั่น h() และ text() เพื่อสร้างการแสดงน้ำหนักเบาของ DOM (หรือเสมือน DOM สั้น ๆ ) และ patch() เพื่อแสดงผล DOM จริง

Superfine จะไม่สร้าง DOM ทั้งหมดใหม่ทุกครั้งที่เราใช้ patch() ด้วยการเปรียบเทียบ DOM เสมือนเก่าและใหม่เราสามารถเปลี่ยนเฉพาะส่วนของ DOM ที่ต้องเปลี่ยนแทนการแสดงผลทุกอย่างตั้งแต่เริ่มต้น

ถัดไปมาดูแอพที่เรียบง่าย คุณสามารถเพิ่มหรือข้าม Todos ด้วยเท่านั้น คุณคิดได้ไหมว่าเกิดอะไรขึ้นเพียงแค่โผล่ไปรอบ ๆ รหัสเล็กน้อย? ไปที่นี่ 

 < 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 >

ตรวจสอบตัวอย่างเพิ่มเติม

ตอนนี้ถึงตาคุณที่จะใช้ Superfine สำหรับการหมุน คุณสามารถเพิ่มปุ่มเพื่อล้าง Todos ทั้งหมดได้หรือไม่? การทำเครื่องหมายจำนวนมากเป็นอย่างไร? หากคุณติดอยู่หรือต้องการถามคำถามเพียงแค่ยื่นปัญหาและฉันจะพยายามช่วยคุณ - สนุก!

การติดตั้ง 

 npm install superfine

API ระดับบนสุด

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" , { } , [
    // ...
  ] )
)

แอตทริบิวต์ API

โหนด Superfine สามารถใช้แอตทริบิวต์ 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:

Keys ช่วยระบุโหนดเมื่อใดก็ตามที่เราอัปเดต DOM โดยการตั้งค่าคุณสมบัติ key บนโหนด DOM เสมือนคุณประกาศว่าโหนดควรสอดคล้องกับองค์ประกอบ 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 ดีขึ้นเนื่องจากเครื่องมือรวบรวมข้อมูลของเครื่องมือค้นหาจะเห็นหน้าแสดงผลอย่างสมบูรณ์ได้ง่ายขึ้น และบนอินเทอร์เน็ตที่ช้าหรืออุปกรณ์ที่ช้าผู้ใช้จะเพลิดเพลินไปกับเวลาที่เร็วขึ้นเนื่องจาก HTML แสดงผลก่อนที่จะดาวน์โหลดและดำเนินการ 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

JSX เป็นส่วนขยายทางไวยากรณ์ภาษาที่ให้คุณเขียนแท็ก HTML สลับกับ JavaScript ในการรวบรวม JSX เป็น JavaScript ให้ติดตั้งปลั๊กอินการแปลง JSX และสร้างไฟล์ .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"

ใบอนุญาต

มิกซ์

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด