الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

رقيق

Superfine هي طبقة عرض أدنى لبناء واجهات الويب. فكر في Hyperapp بدون إطار عمل - لا توجد آلات أو آثار أو اشتراكات - فقط الحد الأدنى المطلق (1 كيلو بايت مُعجَّل+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 فقط التي تحتاج إلى تغيير بدلاً من تقديم كل شيء من نقطة الصفر.

بعد ذلك ، دعنا نلقي نظرة على تطبيق TODO بسيط. يمكنك فقط إضافة أو عبور 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])

أنشئها عقد دوم الافتراضية! 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

يمكن للعقد الفائقة استخدام أي من سمات 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. من خلال تعيين خاصية 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 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"

رخصة

معهد ماساتشوستس للتكنولوجيا

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل