``` Snabbdom रेंडरर्स के बीच ईवेंट हैंडलर की अदला-बदली की अनुमति देता है। ऐसा बिना होता है वास्तव में DOM से जुड़े इवेंट हैंडलर को छूना। हालाँकि, ध्यान दें कि **ईवेंट साझा करते समय आपको सावधान रहना चाहिए इस मॉड्यूल द्वारा उपयोग की जाने वाली तकनीक के कारण, vnodes** के बीच हैंडलर ईवेंट हैंडलर को DOM से पुनः बाइंडिंग से बचने के लिए। (और सामान्य तौर पर, Vnodes के बीच डेटा साझा करना काम करने की गारंटी नहीं है, क्योंकि मॉड्यूल दिए गए डेटा को बदलने की अनुमति है)। In particular, you should **not** do something like this: ```mjs // 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` मान पारित किया गया है: ```mjs // 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` फ़ंक्शन का उपयोग करते समय एसवीजी बस काम करता है नोड्स एसवीजी तत्व स्वचालित रूप से उपयुक्त के साथ बनाए जाते हैं नामस्थान. ```mjs 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](./examples/svg) और [SVG Carousel example](./examples/carousel-svg/) भी देखें। ### SVG तत्वों में Classes कुछ ब्राउज़र (जैसे IE <=11) [SVG तत्वों में `classList` प्रॉपर्टी का समर्थन नहीं करते](http://caniuse.com/#feat=classlist)। क्योंकि _class_ मॉड्यूल आंतरिक रूप से `classList` का उपयोग करता है, यह इस मामले में तब तक काम नहीं करेगा जब तक कि आप [classList polyfill](https://www.npmjs.com/package/classlist-polyfill) का उपयोग नहीं करते। (यदि आप पॉलीफ़िल का उपयोग नहीं करना चाहते हैं, तो आप _attributes_ मॉड्यूल के साथ `क्लास' विशेषता का उपयोग कर सकते हैं)। ## Thunks `thunk` फ़ंक्शन एक चयनकर्ता लेता है, एक थंक की पहचान करने के लिए एक कुंजी, एक फ़ंक्शन जो एक vnode और स्थिति की एक परिवर्तनीय मात्रा लौटाता है पैरामीटर. यदि लागू किया जाता है, तो रेंडर फ़ंक्शन राज्य प्राप्त करेगा तर्क. `thunk(selector, key, renderFn, [stateArguments])` `renderFn` को केवल तभी लागू किया जाता है जब `renderFn` को बदल दिया जाता है या `[stateArguments]` सरणी की लंबाई या उसके तत्वों को बदल दिया जाता है। `key` वैकल्पिक है. इसकी आपूर्ति तब की जानी चाहिए जब `selector` हो थंक्स भाई-बहनों के बीच अद्वितीय नहीं। यह सुनिश्चित करता है कि थंक है अंतर करते समय हमेशा सही ढंग से मेल खाता है। थंक्स एक अनुकूलन रणनीति है जिसका उपयोग तब किया जा सकता है जब कोई हो अपरिवर्तनीय डेटा से निपटना। किसी संख्या के आधार पर वर्चुअल नोड बनाने के लिए एक सरल फ़ंक्शन पर विचार करें। ```mjs function numberView(n) { return h("div", "Number is: " + n); } ``` दृश्य केवल `n` पर निर्भर करता है। इसका मतलब यह है कि यदि `n` अपरिवर्तित है, फिर वर्चुअल DOM नोड बनाना और उसे पुराने के विरुद्ध पैच करना vnode बेकार है. ओवरहेड से बचने के लिए हम `thunk` सहायक का उपयोग कर सकते हैं समारोह। ```mjs function render(state) { return thunk("num", numberView, [state.number]); } ``` वास्तव में `numberView` फ़ंक्शन को लागू करने के बजाय यह केवल होगा वर्चुअल ट्री में एक डमी वीनोड रखें। जब स्नैबडॉम इसे पैच करता है पिछले vnode के विरुद्ध डमी vnode, यह के मूल्य की तुलना करेगा `n`. यदि `n` अपरिवर्तित है तो यह पुराने vnode का पुन: उपयोग करेगा। यह संख्या दृश्य और भिन्न प्रक्रिया को पूरी तरह से दोबारा बनाने से बचा जाता है। यहां व्यू फ़ंक्शन केवल एक उदाहरण है। व्यवहार में थंक्स ही होते हैं यदि आप एक जटिल दृश्य प्रस्तुत कर रहे हैं तो यह प्रासंगिक है उत्पन्न करने के लिए महत्वपूर्ण कम्प्यूटेशनल समय। ## JSX ध्यान दें कि JSX टुकड़े अभी भी प्रयोगात्मक हैं और इन्हें चुना जाना चाहिए। विवरण के लिए [`fragment`](#fragment-experimental) अनुभाग देखें। ### TypeScript अपने `tsconfig.json` में निम्नलिखित विकल्प जोड़ें: ```json { "compilerOptions": { "jsx": "react", "jsxFactory": "jsx", "jsxFragmentFactory": "Fragment" } } ``` फिर सुनिश्चित करें कि आप `.tsx` फ़ाइल एक्सटेंशन का उपयोग करें और फ़ाइल के शीर्ष पर `jsx` फ़ंक्शन और `Fragment` फ़ंक्शन आयात करें: ```tsx import { Fragment, jsx, VNode } from "snabbdom"; const node: VNode = ( ); const fragment: VNode = ( <> JSX fragments are experimentally supported ); ``` ### Babel अपने बेबल कॉन्फ़िगरेशन में निम्नलिखित विकल्प जोड़ें: ```json { "plugins": [ [ "@babel/plugin-transform-react-jsx", { "pragma": "jsx", "pragmaFrag": "Fragment" } ] ] } ``` फिर फ़ाइल के शीर्ष पर `jsx` फ़ंक्शन और `Fragment` फ़ंक्शन आयात करें: ```jsx import { Fragment, jsx } from "snabbdom"; const node = ( ); const fragment = ( <> JSX fragments are experimentally supported ); ``` ## Virtual Node **गुण** - [sel](#sel--string) - [data](#data--object) - [children](#children--array) - [text](#text--string) - [elm](#elm--element) - [key](#key--string--number) ### sel : String वर्चुअल नोड की `.sel` संपत्ति सीएसएस चयनकर्ता को दी जाती है [`h()`](#snabbdomh) निर्माण के दौरान। उदाहरण के लिए: `h('div#container', {}, [...])` एक वर्चुअल नोड बनाएगा जिसमें `div#container` होगा इसकी `.sel` संपत्ति। ### data : Object वर्चुअल नोड की `.data` प्रॉपर्टी जानकारी जोड़ने का स्थान है [modules](#modules-documentation) तक पहुंचने और हेरफेर करने के लिए वास्तविक DOM तत्व जब इसे बनाया जाता है; शैलियाँ, सीएसएस कक्षाएं जोड़ें, गुण, आदि डेटा ऑब्जेक्ट [`h()`](#snabbdomh) का (वैकल्पिक) दूसरा पैरामीटर है उदाहरण के लिए `h('div', {props: {className: 'container'}}, [...])` एक वर्चुअल नोड तैयार करेगा ```mjs ({ props: { className: "container" } }); ``` as its `.data` object. ### children : Array वर्चुअल नोड की `.children` संपत्ति तीसरी (वैकल्पिक) है निर्माण के दौरान [`h()`](#snabbdomh) का पैरामीटर। `.children` है बस आभासी नोड्स की एक सरणी जिसे बच्चों के रूप में जोड़ा जाना चाहिए निर्माण पर मूल DOM नोड। उदाहरण के लिए `h('div', {}, [ h('h1', {}, 'Hello, World') ])` होगा के साथ एक वर्चुअल नोड बनाएं ```mjs [ { 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](#hooks) में गणना के साथ-साथ [modules](#modules-documentation).। ### key : string | number `.key` प्रॉपर्टी तब बनती है जब आपके अंदर एक कुंजी प्रदान की जाती है [`.data`](#data--object) ऑब्जेक्ट। `.key` प्रॉपर्टी का उपयोग रखने के लिए किया जाता है DOM नोड्स की ओर संकेत जो पहले से मौजूद थे ताकि उन्हें दोबारा बनाने से बचा जा सके यदि यह अनावश्यक है. यह सूची जैसी चीजों के लिए बहुत उपयोगी है पुन: व्यवस्थित करना। अनुमति देने के लिए कुंजी या तो एक स्ट्रिंग या एक संख्या होनी चाहिए उचित लुकअप क्योंकि इसे आंतरिक रूप से कुंजी/मूल्य जोड़ी के रूप में संग्रहीत किया जाता है एक ऑब्जेक्ट, जहां `.key` कुंजी है और मान है [`.elm`](#elm--element) संपत्ति बनाई गई। यदि प्रदान किया गया है, तो `.key` संपत्ति सहोदर तत्वों के बीच अद्वितीय होनी चाहिए। उदाहरण के लिए: `h('div', {key: 1}, [])` एक वर्चुअल नोड बनाएगा `.key` गुण वाली वस्तु जिसका मान `1` है। ## अनुप्रयोगों की संरचना करना स्नैबडॉम एक निम्न-स्तरीय वर्चुअल DOM लाइब्रेरी है। इसके साथ कोई राय नहीं है आपको अपने आवेदन की संरचना किस प्रकार करनी चाहिए इसके संबंध में। यहां स्नैबडॉम के साथ एप्लिकेशन बनाने के कुछ दृष्टिकोण दिए गए हैं। - [functional-frontend-architecture](https://github.com/paldepind/functional-frontend-architecture) – एक भंडार जिसमें कई उदाहरण अनुप्रयोग शामिल हैं एक ऐसी वास्तुकला को प्रदर्शित करता है जो स्नैबडॉम का उपयोग करती है। - [Cycle.js](https://cycle.js.org/) – "क्लीनर कोड के लिए एक कार्यात्मक और प्रतिक्रियाशील जावास्क्रिप्ट ढांचा" स्नैबडोम का उपयोग करता है - [Vue.js](http://vuejs.org/) use a fork of snabbdom. - [scheme-todomvc](https://github.com/amirouche/scheme-todomvc/) स्नैबडॉम बाइंडिंग के शीर्ष पर रिडक्स-जैसी वास्तुकला का निर्माण करें। - [kaiju](https://github.com/AlexGalays/kaiju) - स्नैबडॉम के शीर्ष पर स्टेटफुल घटक और अवलोकन - [Tweed](https://tweedjs.github.io) – प्रतिक्रियाशील इंटरफेस के लिए एक ऑब्जेक्ट ओरिएंटेड दृष्टिकोण। - [Cyclow](http://cyclow.js.org) - "जावास्क्रिप्ट के लिए एक प्रतिक्रियाशील फ्रंटएंड ढांचा" स्नैबडोम का उपयोग करता है - [Tung](https://github.com/Reon90/tung) – HTML प्रस्तुत करने के लिए एक जावास्क्रिप्ट लाइब्रेरी। तुंग एचटीएमएल और जावास्क्रिप्ट विकास को विभाजित करने में मदद करता है। - [sprotty](https://github.com/theia-ide/sprotty) - "एक वेब-आधारित आरेखण ढाँचा" स्नैबडॉम का उपयोग करता है। - [Mark Text](https://github.com/marktext/marktext) - "रियलटाइम प्रीव्यू मार्कडाउन एडिटर" स्नैबडॉम पर निर्मित है। - [puddles](https://github.com/flintinatux/puddles) - "छोटा वीडोम ऐप फ्रेमवर्क। शुद्ध रिडक्स। कोई बॉयलरप्लेट नहीं।" - दिल से निर्मित: स्नैबडॉम पर। - [Backbone.VDOMView](https://github.com/jcbrand/backbone.vdomview) - A [Backbone](http://backbonejs.org/) स्नैबडॉम के माध्यम से वर्चुअलडोम क्षमता के साथ देखें। - [Rosmaro Snabbdom starter](https://github.com/lukaszmakuch/rosmaro-snabbdom-starter) - राज्य मशीनों और स्नैबडोम के साथ यूजर इंटरफेस का निर्माण। - [Pureact](https://github.com/irony/pureact) - "रिएक्ट का 65 लाइनों का कार्यान्वयन जिसमें केवल एक निर्भरता के साथ Redux और हुक शामिल हैं - Snabbdom" - [Snabberb](https://github.com/tobymao/snabberb) - प्रतिक्रियाशील विचारों के निर्माण के लिए [Opal](https://github.com/opal/opal) और स्नैबडोम का उपयोग करते हुए एक न्यूनतम रूबी ढांचा। - [WebCell](https://github.com/EasyWebApp/WebCell) - JSX और TypeScript पर आधारित वेब कंपोनेंट इंजन यदि आप किसी अन्य तरीके से एप्लिकेशन बना रहे हैं तो इसे साझा करना सुनिश्चित करें स्नैबडोम का उपयोग करना। ## आम त्रुटियों ```text 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. ``` इस त्रुटि का कारण पैच के बीच वीनोड्स का पुन: उपयोग करना है (कोड उदाहरण देखें), स्नैबडॉम प्रदर्शन में सुधार के रूप में पास किए गए वर्चुअल डोम नोड्स के अंदर वास्तविक डोम नोड्स को संग्रहीत करता है, इसलिए पैच के बीच नोड्स का पुन: उपयोग समर्थित नहीं है। ```mjs 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); ``` आप ऑब्जेक्ट की एक उथली प्रतिलिपि बनाकर इस समस्या को ठीक कर सकते हैं (यहां ऑब्जेक्ट स्प्रेड सिंटैक्स के साथ): ```mjs const vnode2 = h("div", [ h("div", {}, ["One"]), h("div", {}, [{ ...sharedNode }]), h("div", {}, ["Three"]) ]); ``` एक अन्य समाधान फ़ैक्टरी फ़ंक्शन में साझा vnodes को लपेटना होगा: ```mjs const sharedNode = () => h("div", {}, "Selected"); const vnode1 = h("div", [ h("div", {}, ["One"]), h("div", {}, ["Two"]), h("div", {}, [sharedNode()]) ]); ``` ## सामुदायिक प्रतिक्रिया का अवसर पुल अनुरोध, जिन पर समुदाय प्रतिक्रिया देने में रुचि रखता है, उन्हें कुछ दिनों का अवसर प्रदान किए जाने के बाद विलय कर दिया जाना चाहिए।