सरलता, प्रतिरूपकता, शक्तिशाली सुविधाओं और प्रदर्शन पर ध्यान देने वाली एक वर्चुअल DOM लाइब्रेरी।

पहुंच प्रदान करने के लिए Browserstack को धन्यवाद उनके महान क्रॉस-ब्राउज़र परीक्षण उपकरण।

परिचय

वर्चुअल डोम अद्भुत है. यह हमें अपने एप्लिकेशन के दृष्टिकोण को व्यक्त करने की अनुमति देता है अपने राज्य के एक कार्य के रूप में। लेकिन मौजूदा समाधान भी बहुत अच्छे थे फूला हुआ, बहुत धीमा, सुविधाओं का अभाव, एपीआई OOP के प्रति पक्षपाती था और/या मेरे लिए आवश्यक सुविधाओं का अभाव है।

स्नैबडोम में अत्यंत सरल, निष्पादन योग्य और एक्स्टेंसिबल शामिल है कोर जो केवल ≈ 200 SLOC है। यह एक मॉड्यूलर आर्किटेक्चर प्रदान करता है कस्टम मॉड्यूल के माध्यम से एक्सटेंशन के लिए समृद्ध कार्यक्षमता। रखने के लिए मूल सरल, सभी गैर-आवश्यक कार्यक्षमता मॉड्यूल को सौंपी गई है।

आप स्नैबडोम को अपनी इच्छानुसार ढाल सकते हैं! चुनें, चुनें और अपनी इच्छित कार्यक्षमता को अनुकूलित करें। वैकल्पिक रूप से आप बस उपयोग कर सकते हैं डिफ़ॉल्ट एक्सटेंशन और उच्च के साथ एक वर्चुअल DOM लाइब्रेरी प्राप्त करें प्रदर्शन, छोटा आकार और नीचे सूचीबद्ध सभी सुविधाएँ।

विशेषताएँ

सब से महत्वपूर्ण विशेषता
- लगभग 200 एसएलओसी - आप आसानी से संपूर्ण कोर और पूरी तरह से पढ़ सकते हैं समझें कि यह कैसे काम करता है.
- मॉड्यूल के माध्यम से विस्तार योग्य।
- मॉड्यूल के लिए प्रति वीनोड और विश्व स्तर पर हुक का एक समृद्ध सेट उपलब्ध है, अंतर और पैच प्रक्रिया के किसी भी भाग में शामिल होने के लिए।
- शानदार प्रदर्शन. स्नैबडॉम सबसे तेज़ वर्चुअल DOM लाइब्रेरीज़ में से एक है।
- रिड्यूस/स्कैन के समतुल्य फ़ंक्शन हस्ताक्षर के साथ पैच फ़ंक्शन समारोह। एफआरपी लाइब्रेरी के साथ आसान एकीकरण की अनुमति देता है।
मॉड्यूल में सुविधाएँ
- आसानी से वर्चुअल DOM नोड बनाने के लिए h फ़ंक्शन।
- SVG just works with the h helper।
- जटिल सीएसएस एनिमेशन करने की सुविधाएँ।
- शक्तिशाली घटना श्रोता कार्यक्षमता।
- Thunks अंतर और पैच प्रक्रिया को और भी अधिक अनुकूलित करने के लिए।
- JSX support, including TypeScript types
तृतीय पक्ष सुविधाएँ
- सर्वर-साइड HTML आउटपुट snabbdom-to-html द्वारा प्रदान किया जाता है।
- snabbdom-helpers के साथ कॉम्पैक्ट वर्चुअल DOM निर्माण।
- snabby का उपयोग करके टेम्पलेट स्ट्रिंग समर्थन।
- snabbdom-looks-like के साथ वर्चुअल डोम अभिकथन

उदाहरण

import {
  init,
  classModule,
  propsModule,
  styleModule,
  eventListenersModule,
  h
} from "snabbdom";

const patch = init([
  // Init patch function with chosen modules
  classModule, // makes it easy to toggle classes
  propsModule, // for setting properties on DOM elements
  styleModule, // handles styling on elements with support for animations
  eventListenersModule // attaches event listeners
]);

const container = document.getElementById("container");

const vnode = h(
  "div#container.two.classes",
  { on: { click: () => console.log("div clicked") } },
  [
    h("span", { style: { fontWeight: "bold" } }, "This is bold"),
    " and this is just normal text",
    h("a", { props: { href: "/foo" } }, "I'll take you places!")
  ]
);
// Patch into empty DOM element – this modifies the DOM as a side effect
patch(container, vnode);

const newVnode = h(
  "div#container.two.classes",
  { on: { click: () => console.log("updated div clicked") } },
  [
    h(
      "span",
      { style: { fontWeight: "normal", fontStyle: "italic" } },
      "This is now italic type"
    ),
    " and this is still just normal text",
    h("a", { props: { href: "/bar" } }, "I'll take you places!")
  ]
);
// Second `patch` invocation
patch(vnode, newVnode); // Snabbdom efficiently updates the old view to the new state

अधिक उदाहरण

Animated reordering of elements
Hero transitions
SVG Carousel

विषयसूची

Core documentation
- init
- patch
  - Unmounting
- h
- fragment (experimental)
- tovnode
- Hooks
- Creating modules
Modules documentation
SVG
- Classes in SVG Elements
Thunks
JSX
- TypeScript
- Babel
Virtual Node
Structuring applications
Common errors
Opportunity for community feedback

मूल दस्तावेज़ीकरण

स्नैबडॉम का मूल केवल सबसे आवश्यक कार्यक्षमता प्रदान करता है। इसे तेज़ होने के साथ-साथ यथासंभव सरल बनाने के लिए डिज़ाइन किया गया है विस्तार योग्य.

`init`

कोर केवल एक एकल फ़ंक्शन init को उजागर करता है। यह init मॉड्यूल की एक सूची लेता है और एक patch फ़ंक्शन लौटाता है जो इसका उपयोग करता है मॉड्यूल का निर्दिष्ट सेट।

import { classModule, styleModule } from "snabbdom";

const patch = init([classModule, styleModule]);

`patch`

init द्वारा लौटाया गया patch फ़ंक्शन दो तर्क लेता है। पहला एक DOM तत्व या एक vnode है जो वर्तमान दृश्य का प्रतिनिधित्व करता है। दूसरा एक vnode नए, अद्यतन दृश्य का प्रतिनिधित्व करता है।

यदि पैरेंट वाला DOM तत्व पास हो जाता है, तो newVnode चालू हो जाएगा एक DOM नोड में, और पारित तत्व को प्रतिस्थापित कर दिया जाएगा DOM नोड बनाया गया. यदि कोई पुराना vnode पारित किया जाता है, तो Snabbdom कुशलतापूर्वक पारित हो जाएगा नए vnode में विवरण से मेल खाने के लिए इसे संशोधित करें।

पास किया गया कोई भी पुराना वीनोड पिछली कॉल का परिणामी वीनोड होना चाहिए patch करने के लिए. यह आवश्यक है क्योंकि स्नैबडॉम जानकारी संग्रहीत करता है vnode. इससे सरल और अधिक कार्यान्वित करना संभव हो जाता है निष्पादक वास्तुकला. इससे नये पुराने के निर्माण से भी बचा जा सकता है व्नोड वृक्ष.

patch(oldVnode, newVnode);

`अनमाउंट`

हालाँकि इसके माउंट पॉइंट तत्व से VNode ट्री को हटाने के लिए विशेष रूप से कोई API नहीं है, इसे लगभग प्राप्त करने का एक तरीका patch के दूसरे तर्क के रूप में एक टिप्पणी VNode प्रदान करना है, जैसे:

patch(
  oldVnode,
  h("!", {
    hooks: {
      post: () => {
        /* patch complete */
      }
    }
  })
);

निःसंदेह, माउंट बिंदु पर अभी भी एक टिप्पणी नोड है।

`h`

यह अनुशंसा की जाती है कि आप vnodes बनाने के लिए h का उपयोग करें। यह एक स्वीकार करता है एक स्ट्रिंग के रूप में टैग/चयनकर्ता, एक वैकल्पिक डेटा ऑब्जेक्ट और एक वैकल्पिक स्ट्रिंग या बच्चों की सरणी।

import { h } from "snabbdom";

const vnode = h("div", { style: { color: "#000" } }, [
  h("h1", "Headline"),
  h("p", "A paragraph")
]);

`fragment` (प्रयोगात्मक)

सावधानी: यह सुविधा अभी प्रायोगिक है और इसे शामिल किया जाना चाहिए। इसके एपीआई को बिना किसी बड़े संस्करण के बदलाव के बदला जा सकता है।

const patch = init(modules, undefined, {
  experimental: {
    fragments: true
  }
});

एक वर्चुअल नोड बनाता है जिसे दिए गए बच्चों वाले दस्तावेज़ खंड में परिवर्तित किया जाएगा।

import { fragment, h } from "snabbdom";

const vnode = fragment(["I am", h("span", [" a", " fragment"])]);

`tovnode`

DOM नोड को वर्चुअल नोड में परिवर्तित करता है। पहले से मौजूद, सर्वर-साइड जेनरेट की गई सामग्री पर पैचिंग के लिए विशेष रूप से अच्छा है।

import {
  init,
  classModule,
  propsModule,
  styleModule,
  eventListenersModule,
  h,
  toVNode
} from "snabbdom";

const patch = init([
  // Init patch function with chosen modules
  classModule, // makes it easy to toggle classes
  propsModule, // for setting properties on DOM elements
  styleModule, // handles styling on elements with support for animations
  eventListenersModule // attaches event listeners
]);

const newVNode = h("div", { style: { color: "#000" } }, [
  h("h1", "Headline"),
  h("p", "A paragraph")
]);

patch(toVNode(document.querySelector(".container")), newVNode);

Hooks (हुक्स)

हुक DOM नोड्स के जीवनचक्र से जुड़ने का एक तरीका है। छीना-झपटी हुक का एक समृद्ध चयन प्रदान करता है। हुक का उपयोग मॉड्यूल द्वारा दोनों के लिए किया जाता है Snabbdom का विस्तार करें, और सामान्य कोड में मनमाना कोड निष्पादित करने के लिए वर्चुअल नोड के जीवन में वांछित बिंदु।

Overview

Name	Triggered when	Arguments to callback
`pre`	पैच प्रक्रिया शुरू होती है	none
`init`	एक vnode जोड़ा गया है	`vnode`
`create`	Vnode के आधार पर एक DOM तत्व(element) बनाया गया है	`emptyVnode, vnode`
`insert`	DOM में एक तत्व डाला गया है	`vnode`
`prepatch`	एक तत्व पैच होने वाला है	`oldVnode, vnode`
`update`	एक तत्व अद्यतन किया जा रहा है	`oldVnode, vnode`
`postpatch`	एक तत्व को पैच कर दिया गया है	`oldVnode, vnode`
`destroy`	किसी तत्व को प्रत्यक्ष या अप्रत्यक्ष रूप से हटाया जा रहा है	`vnode`
`remove`	एक तत्व को सीधे DOM से हटाया जा रहा है	`vnode, removeCallback`
`post`	पैच प्रक्रिया पूरी हो गई है	none

मॉड्यूल के लिए निम्नलिखित हुक उपलब्ध हैं: pre, create, update, destroy, remove, post।

निम्नलिखित हुक व्यक्ति की hook संपत्ति में उपलब्ध हैं तत्व: init, create, insert, prepatch, update, postpatch, destroy, remove।

Usage (प्रयोग)

हुक का उपयोग करने के लिए, उन्हें डेटा के hook फ़ील्ड में एक ऑब्जेक्ट के रूप में पास करें वस्तु तर्क.

h("div.row", {
  key: movie.rank,
  hook: {
    insert: (vnode) => {
      movie.elmHeight = vnode.elm.offsetHeight;
    }
  }
});

The `init` hook (`init` हुक)

यह हुक पैच प्रक्रिया के दौरान लागू किया जाता है जब एक नया वर्चुअल नोड होता है मिल गया है। Snabbdom द्वारा नोड को किसी भी तरह से संसाधित करने से पहले हुक को कॉल किया जाता है। यानी, इससे पहले इसने vnode के आधार पर एक DOM नोड बनाया है।

The `insert` hook (`insert` हुक)

एक बार vnode के लिए DOM तत्व हो जाने के बाद यह हुक लागू हो जाता है दस्तावेज़ में डाला गया और शेष पैच चक्र पूरा हो गया है। इसका मतलब है कि आप DOM मापन (जैसे उपयोग करना) कर सकते हैं getBoundingClientRect इस हुक में सुरक्षित रूप से, यह जानते हुए कि कोई भी तत्व नहीं बदला जाएगा बाद में यह सम्मिलित तत्वों की स्थिति को प्रभावित कर सकता है।

The `remove` hook (`remove` हुक)

आपको किसी तत्व को हटाने में शामिल होने की अनुमति देता है। हुक कहा जाता है एक बार एक vnode को DOM से हटाया जाना है। हैंडलिंग फ़ंक्शन vnode और कॉलबैक दोनों प्राप्त करता है। आप इसे नियंत्रित और विलंबित कर सकते हैं कॉलबैक के साथ हटाना. कॉलबैक एक बार लागू किया जाना चाहिए हुक ने अपना काम पूरा कर लिया है, और तत्व केवल हटा दिया जाएगा एक बार सभी remove हुक ने अपना कॉलबैक लागू कर दिया।

हुक केवल तभी चालू होता है जब किसी तत्व को उससे हटाया जाना हो अभिभावक - यदि यह हटाए गए तत्व का बच्चा है तो नहीं। के लिए वह, destroy हुक देखें।

The `destroy` hook (`destroy` हुक)

यह हुक वर्चुअल नोड पर तब लागू होता है जब इसका DOM तत्व हटा दिया जाता है DOM से या यदि उसके पैरेंट को DOM से हटाया जा रहा है।

इस हुक और remove हुक के बीच अंतर देखने के लिए, एक उदाहरण पर विचार करें.

const vnode1 = h("div", [h("div", [h("span", "Hello")])]);
const vnode2 = h("div", []);
patch(container, vnode1);
patch(vnode1, vnode2);

यहां नष्ट को आंतरिक div तत्व और दोनों के लिए ट्रिगर किया गया है इसमें span तत्व शामिल है। दूसरी ओर, 'हटाएं' ही है div तत्व पर ट्रिगर किया गया क्योंकि यह एकमात्र तत्व है अपने माता-पिता से अलग हो गया।

उदाहरण के लिए, आप किसी एनीमेशन को ट्रिगर करने के लिए remove का उपयोग कर सकते हैं तत्व को हटाया जा रहा है और अतिरिक्त रूप से destroy हुक का उपयोग करें हटाए गए तत्व के बच्चों के गायब होने को चेतन करें।

Creating modules (मॉड्यूल बनाना)

मॉड्यूल hooks के लिए वैश्विक श्रोताओं को पंजीकृत करके काम करता है। एक मॉड्यूल बस एक शब्दकोश है जो कार्यों के लिए हुक नामों को मैप करता है।

const myModule = {
  create: (oldVnode, vnode) => {
    // invoked whenever a new virtual node is created
  },
  update: (oldVnode, vnode) => {
    // invoked whenever a virtual node is updated
  }
};

इस तंत्र से आप आसानी से स्नैबडॉम के व्यवहार को बढ़ा सकते हैं। प्रदर्शन के लिए, डिफ़ॉल्ट के कार्यान्वयन पर एक नज़र डालें मॉड्यूल.

Modules documentation (मॉड्यूल दस्तावेज़ीकरण)

यह मुख्य मॉड्यूल का वर्णन करता है। सभी मॉड्यूल वैकल्पिक हैं. JSX उदाहरण मानते हैं कि आप इस लाइब्रेरी द्वारा प्रदान किए गए jsx pragma का उपयोग कर रहे हैं।

The class module (क्लास मॉड्यूल)

क्लास मॉड्यूल तत्वों पर कक्षाओं को गतिशील रूप से टॉगल करने का एक आसान तरीका प्रदान करता है। यह class डेटा प्रॉपर्टी में एक ऑब्जेक्ट की अपेक्षा करता है।

ऑब्जेक्ट को क्लास नामों को बूलियन में मैप करना चाहिए जो इंगित करता है कि या क्लास को वीनोड पर रुकना या जाना नहीं चाहिए।

h("a", { class: { active: true, selected: false } }, "Toggle");

In JSX, you can use class like this:

<div class={{ foo: true, bar: true }} />
// Renders as: <div class="foo bar"></div>

The props module (प्रॉप्स मॉड्यूल)

Allows you to set properties on DOM elements.

h("a", { props: { href: "/foo" } }, "Go to Foo");

In JSX, you can use props like this:

<input props={{ name: "foo" }} />
// Renders as: <input name="foo" /> with input.name === "foo"

गुण केवल सेट किए जा सकते हैं, हटाए नहीं जा सकते. भले ही ब्राउज़र कस्टम गुणों को जोड़ने और हटाने की अनुमति देते हैं, यह मॉड्यूल हटाने का प्रयास नहीं करेगा। यह समझ में आता है क्योंकि मूल DOM गुणों को हटाया नहीं जा सकता। और यदि आप DOM पर मूल्यों को संग्रहीत करने या ऑब्जेक्ट को संदर्भित करने के लिए कस्टम गुणों का उपयोग कर रहे हैं, तो कृपया उपयोग करने पर विचार करें data-* attributes बजाय। शायद the dataset module के माध्यम से।

The attributes module (गुण मॉड्यूल)

प्रॉप्स के समान, लेकिन DOM तत्वों पर गुणों के बजाय विशेषताएँ सेट करें।

h("a", { attrs: { href: "/foo" } }, "Go to Foo");

In JSX, you can use attrs like this:

<div attrs={{ "aria-label": "I'm a div" }} />
// Renders as: <div aria-label="I'm a div"></div>

विशेषताएँ setAttribute का उपयोग करके जोड़ी और अद्यतन की जाती हैं। एक के मामले में वह विशेषता जो पहले जोड़ी/सेट की गई थी और अब मौजूद नहीं है attrs ऑब्जेक्ट में, इसे DOM तत्व की विशेषता से हटा दिया जाता है removeAttribute का उपयोग करके सूची बनाएं।

बूलियन विशेषताओं के मामले में (उदाहरण के लिए disabled, hidden, selected ...), अर्थ विशेषता मान पर निर्भर नहीं करता है ('सही' या 'गलत') लेकिन इसके बजाय की उपस्थिति/अनुपस्थिति पर निर्भर करता है DOM तत्व में स्वयं को विशेषता दें। उन विशेषताओं को संभाला जाता है मॉड्यूल द्वारा अलग-अलग: यदि एक बूलियन विशेषता को सेट किया गया है falsy value ('0', '-0', 'शून्य', 'गलत', 'NaN', 'अपरिभाषित', या खाली स्ट्रिंग (`````)), तो विशेषता को विशेषता सूची से हटा दिया जाएगा DOM तत्व.

The dataset module (डेटासेट मॉड्यूल)

आपको DOM तत्वों पर कस्टम डेटा विशेषताएँ (data-*) सेट करने की अनुमति देता है। फिर इन्हें HTMLElement.dataset प्रॉपर्टी से एक्सेस किया जा सकता है।

h("button", { dataset: { action: "reset" } }, "Reset");

In JSX, you can use dataset like this:

<div dataset={{ foo: "bar" }} />
// Renders as: <div data-foo="bar"></div>

The style module (स्टाइल मॉड्यूल)

स्टाइल मॉड्यूल आपके HTML को आकर्षक और सुचारू रूप से जीवंत बनाने के लिए है। पर इसका मूल यह आपको तत्वों पर सीएसएस गुण सेट करने की अनुमति देता है।

h(
  "span",
  {
    style: {
      border: "1px solid #bada55",
      color: "#c0ffee",
      fontWeight: "bold"
    }
  },
  "Say my name, and every colour illuminates"
);

In JSX, you can use style like this:

<div
  style={{
    border: "1px solid #bada55",
    color: "#c0ffee",
    fontWeight: "bold"
  }}
/>
// Renders as: <div style="border: 1px solid #bada55; color: #c0ffee; font-weight: bold"></div>

Custom properties (कस्टम गुण) (CSS variables)

सीएसएस कस्टम गुण (उर्फ सीएसएस चर) समर्थित हैं, उन्हें उपसर्ग किया जाना चाहिए -- के साथ

h(
  "div",
  {
    style: { "--warnColor": "yellow" }
  },
  "Warning"
);

Delayed properties (विलंबित गुण)

आप संपत्तियों को विलंबित होने के रूप में निर्दिष्ट कर सकते हैं। जब भी ये गुण बदलते हैं, तो परिवर्तन अगले फ़्रेम के बाद तक लागू नहीं होता है।

h(
  "span",
  {
    style: {
      opacity: "0",
      transition: "opacity 1s",
      delayed: { opacity: "1" }
    }
  },
  "Imma fade right in!"
);

इससे तत्वों की प्रविष्टि को घोषणात्मक रूप से एनिमेट करना आसान हो जाता है।

transition-property का all मान समर्थित नहीं है।

गुणों को `remove` पर सेट करें

remove गुण में सेट की गई शैलियाँ तत्व के समाप्त होते ही प्रभावी हो जाएंगी DOM से हटाया जाने वाला है. लागू शैलियाँ होनी चाहिए सीएसएस बदलावों के साथ एनिमेटेड। केवल एक बार सभी शैलियाँ पूरी हो जाती हैं एनिमेट करने पर तत्व DOM से हटा दिया जाएगा।

h(
  "span",
  {
    style: {
      opacity: "1",
      transition: "opacity 1s",
      remove: { opacity: "0" }
    }
  },
  "It's better to fade out than to burn away"
);

This makes it easy to declaratively animate the removal of elements. इससे तत्वों को हटाने को घोषणात्मक रूप से एनिमेट करना आसान हो जाता है।

transition-property का all मान समर्थित नहीं है।

गुणों को `destroy` पर सेट करें

h(
  "span",
  {
    style: {
      opacity: "1",
      transition: "opacity 1s",
      destroy: { opacity: "0" }
    }
  },
  "It's better to fade out than to burn away"
);

transition-property का all मान समर्थित नहीं है।

इवेंटलिस्टर्स मॉड्यूल

इवेंट श्रोता मॉड्यूल संलग्न करने के लिए शक्तिशाली क्षमताएं देता है घटना श्रोता.

आप एक आपूर्ति करके vnode पर किसी ईवेंट में एक फ़ंक्शन संलग्न कर सकते हैं इवेंट के नाम के अनुरूप गुण के साथ on पर ऑब्जेक्ट आप सुनना चाहते हैं. इवेंट होने पर फ़ंक्शन बुलाया जाएगा होता है और उस ईवेंट ऑब्जेक्ट को पास कर दिया जाएगा जो उससे संबंधित है।

function clickHandler(ev) {
  console.log("got clicked");
}
h("div", { on: { click: clickHandler } });

In JSX, you can use on like this:

<div on={{ click: clickHandler }} />

Snabbdom रेंडरर्स के बीच ईवेंट हैंडलर की अदला-बदली की अनुमति देता है। ऐसा बिना होता है वास्तव में DOM से जुड़े इवेंट हैंडलर को छूना।

हालाँकि, ध्यान दें कि ईवेंट साझा करते समय आपको सावधान रहना चाहिए इस मॉड्यूल द्वारा उपयोग की जाने वाली तकनीक के कारण, vnodes के बीच हैंडलर ईवेंट हैंडलर को DOM से पुनः बाइंडिंग से बचने के लिए। (और सामान्य तौर पर, Vnodes के बीच डेटा साझा करना काम करने की गारंटी नहीं है, क्योंकि मॉड्यूल दिए गए डेटा को बदलने की अनुमति है)।

In particular, you should not do something like this:

// Does not work
const sharedHandler = {
  change: (e) => {
    console.log("you chose: " + e.target.value);
  }
};
h("div", [
  h("input", {
    props: { type: "radio", name: "test", value: "0" },
    on: sharedHandler
  }),
  h("input", {
    props: { type: "radio", name: "test", value: "1" },
    on: sharedHandler
  }),
  h("input", {
    props: { type: "radio", name: "test", value: "2" },
    on: sharedHandler
  })
]);

ऐसे कई मामलों के लिए, आप इसके बजाय सरणी-आधारित हैंडलर का उपयोग कर सकते हैं (ऊपर वर्णित)। वैकल्पिक रूप से, बस यह सुनिश्चित करें कि प्रत्येक नोड को अद्वितीय on मान पारित किया गया है:

// Works
const sharedHandler = (e) => {
  console.log("you chose: " + e.target.value);
};
h("div", [
  h("input", {
    props: { type: "radio", name: "test", value: "0" },
    on: { change: sharedHandler }
  }),
  h("input", {
    props: { type: "radio", name: "test", value: "1" },
    on: { change: sharedHandler }
  }),
  h("input", {
    props: { type: "radio", name: "test", value: "2" },
    on: { change: sharedHandler }
  })
]);

SVG

वर्चुअल बनाने के लिए h फ़ंक्शन का उपयोग करते समय एसवीजी बस काम करता है नोड्स एसवीजी तत्व स्वचालित रूप से उपयुक्त के साथ बनाए जाते हैं नामस्थान.

const vnode = h("div", [
  h("svg", { attrs: { width: 100, height: 100 } }, [
    h("circle", {
      attrs: {
        cx: 50,
        cy: 50,
        r: 40,
        stroke: "green",
        "stroke-width": 4,
        fill: "yellow"
      }
    })
  ])
]);

SVG example और SVG Carousel example भी देखें।

SVG तत्वों में Classes

कुछ ब्राउज़र (जैसे IE <=11) SVG तत्वों में classList प्रॉपर्टी का समर्थन नहीं करते। क्योंकि class मॉड्यूल आंतरिक रूप से classList का उपयोग करता है, यह इस मामले में तब तक काम नहीं करेगा जब तक कि आप classList polyfill का उपयोग नहीं करते। (यदि आप पॉलीफ़िल का उपयोग नहीं करना चाहते हैं, तो आप attributes मॉड्यूल के साथ `क्लास' विशेषता का उपयोग कर सकते हैं)।

Thunks

thunk फ़ंक्शन एक चयनकर्ता लेता है, एक थंक की पहचान करने के लिए एक कुंजी, एक फ़ंक्शन जो एक vnode और स्थिति की एक परिवर्तनीय मात्रा लौटाता है पैरामीटर. यदि लागू किया जाता है, तो रेंडर फ़ंक्शन राज्य प्राप्त करेगा तर्क.

thunk(selector, key, renderFn, [stateArguments])

renderFn को केवल तभी लागू किया जाता है जब renderFn को बदल दिया जाता है या [stateArguments] सरणी की लंबाई या उसके तत्वों को बदल दिया जाता है।

key वैकल्पिक है. इसकी आपूर्ति तब की जानी चाहिए जब selector हो थंक्स भाई-बहनों के बीच अद्वितीय नहीं। यह सुनिश्चित करता है कि थंक है अंतर करते समय हमेशा सही ढंग से मेल खाता है।

थंक्स एक अनुकूलन रणनीति है जिसका उपयोग तब किया जा सकता है जब कोई हो अपरिवर्तनीय डेटा से निपटना।

किसी संख्या के आधार पर वर्चुअल नोड बनाने के लिए एक सरल फ़ंक्शन पर विचार करें।

function numberView(n) {
  return h("div", "Number is: " + n);
}

दृश्य केवल n पर निर्भर करता है। इसका मतलब यह है कि यदि n अपरिवर्तित है, फिर वर्चुअल DOM नोड बनाना और उसे पुराने के विरुद्ध पैच करना vnode बेकार है. ओवरहेड से बचने के लिए हम thunk सहायक का उपयोग कर सकते हैं समारोह।

function render(state) {
  return thunk("num", numberView, [state.number]);
}

वास्तव में numberView फ़ंक्शन को लागू करने के बजाय यह केवल होगा वर्चुअल ट्री में एक डमी वीनोड रखें। जब स्नैबडॉम इसे पैच करता है पिछले vnode के विरुद्ध डमी vnode, यह के मूल्य की तुलना करेगा n. यदि n अपरिवर्तित है तो यह पुराने vnode का पुन: उपयोग करेगा। यह संख्या दृश्य और भिन्न प्रक्रिया को पूरी तरह से दोबारा बनाने से बचा जाता है।

यहां व्यू फ़ंक्शन केवल एक उदाहरण है। व्यवहार में थंक्स ही होते हैं यदि आप एक जटिल दृश्य प्रस्तुत कर रहे हैं तो यह प्रासंगिक है उत्पन्न करने के लिए महत्वपूर्ण कम्प्यूटेशनल समय।

JSX

ध्यान दें कि JSX टुकड़े अभी भी प्रयोगात्मक हैं और इन्हें चुना जाना चाहिए। विवरण के लिए fragment अनुभाग देखें।

TypeScript

अपने tsconfig.json में निम्नलिखित विकल्प जोड़ें:

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "jsx",
    "jsxFragmentFactory": "Fragment"
  }
}

फिर सुनिश्चित करें कि आप .tsx फ़ाइल एक्सटेंशन का उपयोग करें और फ़ाइल के शीर्ष पर jsx फ़ंक्शन और Fragment फ़ंक्शन आयात करें:

import { Fragment, jsx, VNode } from "snabbdom";

const node: VNode = (
  <div>
    <span>I was created with JSX</span>
  </div>
);

const fragment: VNode = (
  <>
    <span>JSX fragments</span>
    are experimentally supported
  </>
);

Babel

अपने बेबल कॉन्फ़िगरेशन में निम्नलिखित विकल्प जोड़ें:

{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "jsx",
        "pragmaFrag": "Fragment"
      }
    ]
  ]
}

फिर फ़ाइल के शीर्ष पर jsx फ़ंक्शन और Fragment फ़ंक्शन आयात करें:

import { Fragment, jsx } from "snabbdom";

const node = (
  <div>
    <span>I was created with JSX</span>
  </div>
);

const fragment = (
  <>
    <span>JSX fragments</span>
    are experimentally supported
  </>
);

Virtual Node

गुण

sel
data
children
text
elm
key

sel : String

वर्चुअल नोड की .sel संपत्ति सीएसएस चयनकर्ता को दी जाती है h() निर्माण के दौरान। उदाहरण के लिए: h('div#container', {}, [...]) एक वर्चुअल नोड बनाएगा जिसमें div#container होगा इसकी .sel संपत्ति।

data : Object

वर्चुअल नोड की .data प्रॉपर्टी जानकारी जोड़ने का स्थान है modules तक पहुंचने और हेरफेर करने के लिए वास्तविक DOM तत्व जब इसे बनाया जाता है; शैलियाँ, सीएसएस कक्षाएं जोड़ें, गुण, आदि

डेटा ऑब्जेक्ट h() का (वैकल्पिक) दूसरा पैरामीटर है

उदाहरण के लिए h('div', {props: {className: 'container'}}, [...]) एक वर्चुअल नोड तैयार करेगा

({
  props: {
    className: "container"
  }
});

as its .data object.

children : Array

वर्चुअल नोड की .children संपत्ति तीसरी (वैकल्पिक) है निर्माण के दौरान h() का पैरामीटर। .children है बस आभासी नोड्स की एक सरणी जिसे बच्चों के रूप में जोड़ा जाना चाहिए निर्माण पर मूल DOM नोड।

उदाहरण के लिए h('div', {}, [ h('h1', {}, 'Hello, World') ]) होगा के साथ एक वर्चुअल नोड बनाएं

[
  {
    sel: "h1",
    data: {},
    children: undefined,
    text: "Hello, World",
    elm: Element,
    key: undefined
  }
];

as its .children property.

text : string

.text प्रॉपर्टी तब बनाई जाती है जब एक वर्चुअल नोड बनाया जाता है केवल एक ही बच्चा जिसके पास पाठ है और केवल उसकी आवश्यकता है document.createTextNode() का उपयोग किया जाना है।

उदाहरण के लिए: h('h1', {}, 'Hello') एक वर्चुअल नोड बनाएगा हैलो इसकी .text संपत्ति के रूप में।

elm : Element

वर्चुअल नोड की .elm संपत्ति वास्तविक DOM का सूचक है स्नैबडोम द्वारा बनाया गया नोड। यह संपत्ति करने में बहुत उपयोगी है hooks में गणना के साथ-साथ modules.।

key : string | number

.key प्रॉपर्टी तब बनती है जब आपके अंदर एक कुंजी प्रदान की जाती है .data ऑब्जेक्ट। .key प्रॉपर्टी का उपयोग रखने के लिए किया जाता है DOM नोड्स की ओर संकेत जो पहले से मौजूद थे ताकि उन्हें दोबारा बनाने से बचा जा सके यदि यह अनावश्यक है. यह सूची जैसी चीजों के लिए बहुत उपयोगी है पुन: व्यवस्थित करना। अनुमति देने के लिए कुंजी या तो एक स्ट्रिंग या एक संख्या होनी चाहिए उचित लुकअप क्योंकि इसे आंतरिक रूप से कुंजी/मूल्य जोड़ी के रूप में संग्रहीत किया जाता है एक ऑब्जेक्ट, जहां .key कुंजी है और मान है .elm संपत्ति बनाई गई।

यदि प्रदान किया गया है, तो .key संपत्ति सहोदर तत्वों के बीच अद्वितीय होनी चाहिए।

उदाहरण के लिए: h('div', {key: 1}, []) एक वर्चुअल नोड बनाएगा .key गुण वाली वस्तु जिसका मान 1 है।

अनुप्रयोगों की संरचना करना

स्नैबडॉम एक निम्न-स्तरीय वर्चुअल DOM लाइब्रेरी है। इसके साथ कोई राय नहीं है आपको अपने आवेदन की संरचना किस प्रकार करनी चाहिए इसके संबंध में।

यहां स्नैबडॉम के साथ एप्लिकेशन बनाने के कुछ दृष्टिकोण दिए गए हैं।

functional-frontend-architecture – एक भंडार जिसमें कई उदाहरण अनुप्रयोग शामिल हैं एक ऐसी वास्तुकला को प्रदर्शित करता है जो स्नैबडॉम का उपयोग करती है।
Cycle.js – "क्लीनर कोड के लिए एक कार्यात्मक और प्रतिक्रियाशील जावास्क्रिप्ट ढांचा" स्नैबडोम का उपयोग करता है
Vue.js use a fork of snabbdom.
scheme-todomvc स्नैबडॉम बाइंडिंग के शीर्ष पर रिडक्स-जैसी वास्तुकला का निर्माण करें।
kaiju - स्नैबडॉम के शीर्ष पर स्टेटफुल घटक और अवलोकन
Tweed – प्रतिक्रियाशील इंटरफेस के लिए एक ऑब्जेक्ट ओरिएंटेड दृष्टिकोण।
Cyclow - "जावास्क्रिप्ट के लिए एक प्रतिक्रियाशील फ्रंटएंड ढांचा" स्नैबडोम का उपयोग करता है
Tung – HTML प्रस्तुत करने के लिए एक जावास्क्रिप्ट लाइब्रेरी। तुंग एचटीएमएल और जावास्क्रिप्ट विकास को विभाजित करने में मदद करता है।
sprotty - "एक वेब-आधारित आरेखण ढाँचा" स्नैबडॉम का उपयोग करता है।
Mark Text - "रियलटाइम प्रीव्यू मार्कडाउन एडिटर" स्नैबडॉम पर निर्मित है।
puddles - "छोटा वीडोम ऐप फ्रेमवर्क। शुद्ध रिडक्स। कोई बॉयलरप्लेट नहीं।" - दिल से निर्मित: स्नैबडॉम पर।
Backbone.VDOMView - A Backbone स्नैबडॉम के माध्यम से वर्चुअलडोम क्षमता के साथ देखें।
Rosmaro Snabbdom starter - राज्य मशीनों और स्नैबडोम के साथ यूजर इंटरफेस का निर्माण।
Pureact - "रिएक्ट का 65 लाइनों का कार्यान्वयन जिसमें केवल एक निर्भरता के साथ Redux और हुक शामिल हैं - Snabbdom"
Snabberb - प्रतिक्रियाशील विचारों के निर्माण के लिए Opal और स्नैबडोम का उपयोग करते हुए एक न्यूनतम रूबी ढांचा।
WebCell - JSX और TypeScript पर आधारित वेब कंपोनेंट इंजन

यदि आप किसी अन्य तरीके से एप्लिकेशन बना रहे हैं तो इसे साझा करना सुनिश्चित करें स्नैबडोम का उपयोग करना।

आम त्रुटियों

Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node':
    The node before which the new node is to be inserted is not a child of this node.

इस त्रुटि का कारण पैच के बीच वीनोड्स का पुन: उपयोग करना है (कोड उदाहरण देखें), स्नैबडॉम प्रदर्शन में सुधार के रूप में पास किए गए वर्चुअल डोम नोड्स के अंदर वास्तविक डोम नोड्स को संग्रहीत करता है, इसलिए पैच के बीच नोड्स का पुन: उपयोग समर्थित नहीं है।

const sharedNode = h("div", {}, "Selected");
const vnode1 = h("div", [
  h("div", {}, ["One"]),
  h("div", {}, ["Two"]),
  h("div", {}, [sharedNode])
]);
const vnode2 = h("div", [
  h("div", {}, ["One"]),
  h("div", {}, [sharedNode]),
  h("div", {}, ["Three"])
]);
patch(container, vnode1);
patch(vnode1, vnode2);

आप ऑब्जेक्ट की एक उथली प्रतिलिपि बनाकर इस समस्या को ठीक कर सकते हैं (यहां ऑब्जेक्ट स्प्रेड सिंटैक्स के साथ):

const vnode2 = h("div", [
  h("div", {}, ["One"]),
  h("div", {}, [{ ...sharedNode }]),
  h("div", {}, ["Three"])
]);

एक अन्य समाधान फ़ैक्टरी फ़ंक्शन में साझा vnodes को लपेटना होगा:

const sharedNode = () => h("div", {}, "Selected");
const vnode1 = h("div", [
  h("div", {}, ["One"]),
  h("div", {}, ["Two"]),
  h("div", {}, [sharedNode()])
]);

सामुदायिक प्रतिक्रिया का अवसर

पुल अनुरोध, जिन पर समुदाय प्रतिक्रिया देने में रुचि रखता है, उन्हें कुछ दिनों का अवसर प्रदान किए जाने के बाद विलय कर दिया जाना चाहिए।

Files

README-in_HN.md

Latest commit

History

README-in_HN.md

File metadata and controls

परिचय

विशेषताएँ

उदाहरण

अधिक उदाहरण

विषयसूची

मूल दस्तावेज़ीकरण

init

patch

अनमाउंट

h

fragment (प्रयोगात्मक)

tovnode

Hooks (हुक्स)

Overview

Usage (प्रयोग)

The init hook (init हुक)

The insert hook (insert हुक)

The remove hook (remove हुक)

The destroy hook (destroy हुक)

Creating modules (मॉड्यूल बनाना)

Modules documentation (मॉड्यूल दस्तावेज़ीकरण)

The class module (क्लास मॉड्यूल)

The props module (प्रॉप्स मॉड्यूल)

The attributes module (गुण मॉड्यूल)

The dataset module (डेटासेट मॉड्यूल)

The style module (स्टाइल मॉड्यूल)

Custom properties (कस्टम गुण) (CSS variables)

Delayed properties (विलंबित गुण)

गुणों को remove पर सेट करें

गुणों को destroy पर सेट करें

इवेंटलिस्टर्स मॉड्यूल

SVG

SVG तत्वों में Classes

Thunks

JSX

TypeScript

Babel

Virtual Node

sel : String

data : Object

children : Array

text : string

elm : Element

key : string | number

अनुप्रयोगों की संरचना करना

आम त्रुटियों

सामुदायिक प्रतिक्रिया का अवसर

`init`

`patch`

`अनमाउंट`

`h`

`fragment` (प्रयोगात्मक)

`tovnode`

The `init` hook (`init` हुक)

The `insert` hook (`insert` हुक)

The `remove` hook (`remove` हुक)

The `destroy` hook (`destroy` हुक)

गुणों को `remove` पर सेट करें

गुणों को `destroy` पर सेट करें