Vue के रेंडर फ़ंक्शन का उपयोग करने का एक व्यावहारिक उदाहरण: एक डिज़ाइन सिस्टम के लिए एक टाइपोग्राफिक ग्रिड बनाना

सामग्री में, जिसका अनुवाद आज हम प्रकाशित करते हैं, हम इस बारे में बात करेंगे कि कैसे Vue रेंडर-फ़ंक्शन का उपयोग करके डिज़ाइन सिस्टम के लिए एक टाइपोग्राफिक ग्रिड बनाया जाए। यहां परियोजना का एक डेमो है जिसे हम यहां समीक्षा करने जा रहे हैं। आप इसका कोड यहां पा सकते हैं। इस सामग्री के लेखक का कहना है कि उन्होंने इस तथ्य के कारण कार्यों का उपयोग किया कि वे नियमित रूप से Vue टेम्पलेट की तुलना में HTML कोड बनाने की प्रक्रिया पर अधिक सटीक नियंत्रण की अनुमति देते हैं। हालांकि, अपने आश्चर्य के लिए, वह अपने आवेदन के व्यावहारिक उदाहरण नहीं पा सके। वह केवल अनुदेश मैनुअल भर में आया था। उन्हें उम्मीद है कि यह सामग्री यहां Vue के रेंडर कार्यों का उपयोग करने के व्यावहारिक उदाहरण के लिए बेहतर धन्यवाद के लिए एक अंतर बनाएगी।

Vue रेंडर फ़ंक्शंस

रेंडर फ़ंक्शंस मुझे हमेशा कुछ ऐसा लग रहा था जो Vue के लिए थोड़ा असामान्य था। इस ढांचे में सब कुछ सादगी की इच्छा और विभिन्न संस्थाओं के कर्तव्यों के अलगाव पर जोर देता है। लेकिन रेंडर फ़ंक्शंस HTML और जावास्क्रिप्ट का एक अजीब मिश्रण है, जिसे पढ़ना अक्सर मुश्किल होता है।

उदाहरण के लिए, यहाँ HTML मार्कअप है:

<div class="container">   <p class="my-awesome-class">Some cool text</p> </div> 

इसे बनाने के लिए, आपको निम्न फ़ंक्शन की आवश्यकता है:

 render(createElement) {  return createElement("div", { class: "container" }, [    createElement("p", { class: "my-awesome-class" }, "Some cool text")  ]) } 

मुझे संदेह है कि इस तरह के निर्माण कई बार रेंडर-फंक्शन से दूर हो जाएंगे। आखिरकार, उपयोग में आसानी बिल्कुल वही है जो डेवलपर्स को Vue के लिए आकर्षित करती है। यदि बहुत से लोग रेंडर-फ़ंक्शंस की भयावह उपस्थिति के पीछे अपनी असली खूबियाँ नहीं देखते हैं तो यह अफ़सोस की बात है। बात यह है कि कार्यों को प्रस्तुत करना और कार्यात्मक घटक दिलचस्प और शक्तिशाली उपकरण हैं। मैं, उनकी क्षमताओं और उनके वास्तविक मूल्य को प्रदर्शित करने के लिए, इस बारे में बात करूँगा कि उन्होंने वास्तविक समस्या को हल करने में मेरी मदद कैसे की।

कृपया ध्यान दें कि पड़ोसी ब्राउज़र टैब में विचाराधीन परियोजना के डेमो संस्करण को खोलने और लेख पढ़ते हुए इसे एक्सेस करने के लिए यह बहुत उपयोगी होगा।

एक डिजाइन प्रणाली के लिए मानदंड को परिभाषित करना

हमारे पास VuePress पर आधारित एक डिज़ाइन प्रणाली है। हमें इसमें एक नया पृष्ठ शामिल करने की आवश्यकता थी, जिसमें पाठ डिजाइन की विभिन्न टाइपोग्राफिक संभावनाओं का प्रदर्शन किया गया था। यह है कि डिजाइनर ने मुझे जो लेआउट दिया, वह कैसा लग रहा था।


पेज लेआउट

और यहां इस पृष्ठ के अनुरूप सीएसएस कोड का एक उदाहरण दिया गया है:

 h1, h2, h3, h4, h5, h6 {  font-family: "balboa", sans-serif;  font-weight: 300;  margin: 0; } h4 {  font-size: calc(1rem - 2px); } .body-text {  font-family: "proxima-nova", sans-serif; } .body-text--lg {  font-size: calc(1rem + 4px); } .body-text--md {  font-size: 1rem; } .body-text--bold {  font-weight: 700; } .body-text--semibold {  font-weight: 600; } 

टैग नामों के आधार पर हेडर फॉर्मेट किए जाते हैं। अन्य तत्वों को प्रारूपित करने के लिए, वर्ग नामों का उपयोग किया जाता है। इसके अलावा, समृद्धि और फ़ॉन्ट आकार के लिए अलग-अलग वर्ग हैं।

इससे पहले कि मैंने कोड लिखना शुरू किया, मैंने कुछ नियम बनाए:

• चूंकि इस पृष्ठ का मुख्य उद्देश्य डेटा विज़ुअलाइज़ेशन है, इसलिए डेटा को एक अलग फ़ाइल में संग्रहीत किया जाना चाहिए।
• शीर्षकों को प्रारूपित करने के लिए, सिमेंटिक हेडर टैग का उपयोग किया जाना चाहिए (अर्थात <h1> , <h2> और इसी तरह), उनका स्वरूपण वर्ग पर आधारित नहीं होना चाहिए।
• पैरा टैग ( <p> ) वर्ग नामों के साथ (उदाहरण के लिए, <p class="body-text--lg"> ) पृष्ठ के शरीर में उपयोग किया जाना चाहिए।
• विभिन्न तत्वों से युक्त सामग्रियों को रूट <p> में लपेटकर या किसी अन्य उपयुक्त रूट तत्व में समूहित किया जाना चाहिए जिसमें एक शैलीकरण वर्ग असाइन नहीं किया गया है। बाल तत्वों को एक <span> में लपेटा जाना चाहिए, जो वर्ग नाम सेट करता है। यहाँ इस नियम की तरह लग सकता है:
  
  

   <p>  <span class="body-text--lg">Thing 1</span>  <span class="body-text--lg">Thing 2</span> </p> 

• सामग्री, जिसके उत्पादन में कोई विशेष आवश्यकताएं नहीं हैं, को <p> में लपेटा जाना चाहिए, जिसे वांछित वर्ग नाम सौंपा गया है। बाल तत्वों को एक <span> में संलग्न किया जाना चाहिए:
  
  

   <p class="body-text--semibold">  <span>Thing 1</span>  <span>Thing 2</span> </p> 

• प्रत्येक स्टाइल सेल को स्टाइल करने के लिए, क्लास के नाम केवल एक बार लिखे जाने चाहिए।

समस्या को हल करने के लिए विकल्प

काम शुरू करने से पहले, मैंने अपने सामने निर्धारित कार्य को हल करने के लिए कई विकल्पों पर विचार किया। यहाँ उनका अवलोकन है।

▍ मैन्युअल रूप से HTML कोड लिखना

मुझे मैन्युअल रूप से HTML कोड लिखना पसंद है, लेकिन केवल जब यह हमें मौजूदा समस्या को पर्याप्त रूप से हल करने की अनुमति देता है। हालाँकि, मेरे मामले में, मैनुअल कोड लेखन का अर्थ होगा विभिन्न दोहराई जाने वाली कोड अंशों में प्रवेश करना जिसमें कुछ भिन्नताएं मौजूद हैं। मुझे यह पसंद नहीं आया इसके अलावा, इसका मतलब यह होगा कि डेटा को एक अलग फ़ाइल में संग्रहीत नहीं किया जा सकता है। नतीजतन, मैंने इस दृष्टिकोण से इनकार कर दिया।

यदि मैंने प्रश्न में पृष्ठ को उसी तरह बनाया है, तो मुझे निम्नलिखित जैसा कुछ मिलेगा:

 <div class="row">  <h1>Heading 1</h1>  <p class="body-text body-text--md body-text--semibold">h1</p>  <p class="body-text body-text--md body-text--semibold">Balboa Light, 30px</p>  <p class="group body-text body-text--md body-text--semibold">    <span>Product title (once on a page)</span>    <span>Illustration headline</span>  </p> </div> 

पारंपरिक Vue पैटर्न का उपयोग करना

सामान्य परिस्थितियों में, इस दृष्टिकोण का उपयोग सबसे अधिक बार किया जाता है। हालांकि, इस उदाहरण पर एक नज़र डालें।


Vue टेम्पलेट्स का उपयोग करने का एक उदाहरण

पहले कॉलम में निम्नलिखित है:

• <h1> , जिसे उस रूप में प्रस्तुत किया जाता है जिसमें ब्राउज़र इसे प्रदर्शित करता है।
• <p> ग्रूपिंग कई <span> टेक्स्ट वाले बच्चे। इन तत्वों में से प्रत्येक को एक वर्ग सौंपा गया है (लेकिन कोई विशेष वर्ग <p> टैग को ही नहीं सौंपा गया है)।
• <p> जिसमें नेस्टेड नहीं है <span> तत्व जिन्हें क्लास सौंपा गया है।

यह सब लागू करने के लिए, v-if और v-if-else if- v-if-else निर्देशों के कई उदाहरणों की आवश्यकता होगी। और यह, मुझे पता है, इस तथ्य को जन्म देगा कि कोड बहुत जल्द भ्रमित हो जाएगा। इसके अलावा, मुझे मार्कअप में इस सभी सशर्त तर्क का उपयोग पसंद नहीं है।

▍Render कार्य

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

डेटा मॉडल

जैसा कि मैंने कहा, मैं एक अलग JSON फ़ाइल में टाइपोग्राफिक डेटा संग्रहीत करना चाहता था। यदि आवश्यक हो, तो मार्कअप को छूने के बिना उनमें परिवर्तन करने की अनुमति होगी। ये डेटा हैं।

फ़ाइल में प्रत्येक JSON ऑब्जेक्ट एक अलग लाइन का विवरण है:

 {  "text": "Heading 1",  "element": "h1", //  .  "properties": "Balboa Light, 30px", //   .  "usage": ["Product title (once on a page)", "Illustration headline"] //   .   -   . } 

इस ऑब्जेक्ट को संसाधित करने के बाद आने वाला HTML है:

 <div class="row">  <h1>Heading 1</h1>  <p class="body-text body-text--md body-text--semibold">h1</p>  <p class="body-text body-text--md body-text--semibold">Balboa Light, 30px</p>  <p class="group body-text body-text--md body-text--semibold">    <span>Product title (once on a page)</span>    <span>Illustration headline</span>  </p> </div> 

अब अधिक जटिल उदाहरण पर विचार करें। ऐरे बच्चों के समूह का प्रतिनिधित्व करते हैं। classes ऑब्जेक्ट्स के गुण, जो स्वयं ऑब्जेक्ट हैं, क्लास डिस्क्रिप्शन को स्टोर कर सकते हैं। classes ऑब्जेक्ट की base संपत्ति में उन classes विवरण शामिल है जो सेल में सभी नोड्स के लिए सामान्य हैं। variants प्रॉपर्टी में मौजूद प्रत्येक वर्ग को समूह में एकल तत्व पर लागू किया जाता है।

 {  "text": "Body Text - Large",  "element": "p",  "classes": {    "base": "body-text body-text--lg", //     .    "variants": ["body-text--bold", "body-text--regular"] //    ,       .        .  },  "properties": "Proxima Nova Bold and Regular, 20px",  "usage": ["Large button title", "Form label", "Large modal text"] } 

यह ऑब्जेक्ट निम्न HTML में बदल जाता है:

 <div class="row">  <!--  1 -->  <p class="group">    <span class="body-text body-text--lg body-text--bold">Body Text - Large</span>    <span class="body-text body-text--lg body-text--regular">Body Text - Large</span>  </p>  <!--  2 -->  <p class="group body-text body-text--md body-text--semibold">    <span>body-text body-text--lg body-text--bold</span>    <span>body-text body-text--lg body-text--regular</span>  </p>  <!--  3 -->  <p class="body-text body-text--md body-text--semibold">Proxima Nova Bold and Regular, 20px</p>  <!--  4 -->  <p class="group body-text body-text--md body-text--semibold">    <span>Large button title</span>    <span>Form label</span>    <span>Large modal text</span>  </p> </div> 

परियोजना की मूल संरचना

हमारे पास एक मूल घटक है, TypographyTable.vue , जिसमें टेबल बनाने के लिए मार्कअप है। हमारे पास एक चाइल्ड कंपोनेंट, TypographyRow.vue , जो टेबल रो बनाने के लिए जिम्मेदार है और इसमें हमारा रेंडर फंक्शन है।

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

 <template>  <section>    <!--         -->    <div class="row">      <p class="body-text body-text--lg-bold heading">Hierarchy</p>      <p class="body-text body-text--lg-bold heading">Element/Class</p>      <p class="body-text body-text--lg-bold heading">Properties</p>      <p class="body-text body-text--lg-bold heading">Usage</p>    </div>     <!--             -->    <typography-row      v-for="(rowData, index) in $options.typographyData"      :key="index"      :row-data="rowData"    />  </section> </template> <script> import TypographyData from "@/data/typography.json"; import TypographyRow from "./TypographyRow"; export default {  //     ,        typographyData: TypographyData,  name: "TypographyTable",  components: {    TypographyRow }; </script> 

यहां मैं एक सुखद ट्रिफ़ल को नोट करना चाहूंगा: एक Vue उदाहरण में टाइपोग्राफिक डेटा को एक संपत्ति के रूप में दर्शाया जा सकता है। आप $options.typographyData निर्माण का उपयोग करके उन्हें एक्सेस कर सकते हैं, क्योंकि वे नहीं बदलते हैं और प्रतिक्रियाशील नहीं होना चाहिए ( एंटोन कोश्यख के लिए धन्यवाद)।

एक कार्यात्मक घटक बनाना

TypographyRow घटक जो डेटा को संसाधित करता है वह एक कार्यात्मक घटक है। कार्यात्मक घटक ऐसी संस्थाएं हैं जिनके पास राज्य और उदाहरण नहीं हैं। इसका मतलब है कि उनके पास यह नहीं है, और वे Vue घटक जीवन चक्र विधियों तक पहुंच नहीं रखते हैं।

यहाँ एक समान घटक का "कंकाल" है जिसके साथ हम अपने घटक पर काम शुरू करेंगे:

 //  <template> <script> export default {  name: "TypographyRow",  functional: true, //       props: {    rowData: { //          type: Object     },  render(createElement, { props }) {    //    } </script> 

render घटक विधि एक context तर्क लेती है जिसमें एक संपत्ति है। यह संपत्ति विनाशकारी के अधीन है और इसका उपयोग दूसरे तर्क के रूप में किया जाता है।

पहला तर्क createElement । यह एक फ़ंक्शन है जो Vue को बताता है कि कौन सा नोड बनाना है। संक्षिप्तता और कोड के मानकीकरण के लिए, मैं createElement लिए संक्षिप्त नाम h उपयोग करता createElement । आप इस बारे में पढ़ सकते हैं कि मैंने यहां ऐसा क्यों किया।

तो h तीन तर्क लेता है:

1. HTML टैग (जैसे div )।
2. एक डेटा ऑब्जेक्ट जिसमें टेम्पलेट विशेषताएँ हैं (उदाहरण के लिए, { class: 'something'} )।
3. पाठ स्ट्रिंग्स (यदि हम सिर्फ पाठ जोड़ते हैं) या h का उपयोग करके बनाए गए बच्चे के नोड्स।

यहाँ यह कैसा दिखता है:

 render(h, { props }) {  return h("div", { class: "example-class" }, "Here's my example text") } 

आइए संक्षेप में बताएं कि हमने पहले से क्या बनाया है। अर्थात्, अब हमारे पास निम्नलिखित हैं:

1. डेटा के साथ एक फ़ाइल जिसे पेज बनाते समय उपयोग करने की योजना है।
2. एक नियमित Vue घटक जो डेटा फ़ाइल आयात करता है।
3. कार्यात्मक घटक की रूपरेखा जो तालिका की पंक्तियों को प्रदर्शित करने के लिए जिम्मेदार है।

तालिका पंक्तियाँ बनाने के लिए, JSON प्रारूप के डेटा को h तर्क के रूप में पास किया जाना चाहिए। आप ऐसे सभी डेटा को एक बार में स्थानांतरित कर सकते हैं, लेकिन इस दृष्टिकोण के साथ आपको बड़ी मात्रा में सशर्त तर्क की आवश्यकता होगी, जो कोड की समझ को कम कर देगा। इसके बजाय, मैंने ऐसा करने का फैसला किया:

1. डेटा को एक मानकीकृत प्रारूप में बदलना।
2. रूपांतरित डेटा प्रदर्शित करें।

डेटा परिवर्तन

मैं चाहूंगा कि मेरा डेटा एक ऐसे प्रारूप में प्रस्तुत किया जाए जो h द्वारा स्वीकार किए गए तर्कों से मेल खाता हो। लेकिन उन्हें परिवर्तित करने से पहले, मैंने योजना बनाई कि उन्हें JSON फाइल में क्या संरचना होनी चाहिए:

 //   {  tag: "", // HTML-    cellClass: "", //   .       -   null  text: "", // ,     children: [] //   ,     .     ,    . } 

प्रत्येक ऑब्जेक्ट तालिका के एक सेल का प्रतिनिधित्व करता है। चार कोशिकाएं तालिका की प्रत्येक पंक्ति बनाती हैं (वे एक सरणी में एकत्र की जाती हैं):

 //   [ { cell1 }, { cell2 }, { cell3 }, { cell4 } ] 

इनपुट बिंदु निम्नलिखित की तरह एक कार्य हो सकता है:

 function createRow(data) { //      ,         let { text, element, classes = null, properties, usage } = data;  let row = [];  row[0] = createCellData(data) //         row[1] = createCellData(data)  row[2] = createCellData(data)  row[3] = createCellData(data)  return row; } 

आइए लेआउट को फिर से देखें।


पेज लेआउट

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

 {  tag: "",  cellClass: "",  text: "",  children: [] } 

इस दृष्टिकोण के साथ, प्रत्येक कोशिका का वर्णन करने के लिए एक पेड़ जैसी संरचना का उपयोग किया जाएगा। यह ठीक है क्योंकि कुछ कोशिकाओं में बच्चों के समूह होते हैं। हम सेल बनाने के लिए निम्नलिखित दो कार्यों का उपयोग करते हैं:

• createNode फ़ंक्शन उन गुणों में से प्रत्येक लेता है जिन्हें हम एक तर्क के रूप में रुचि रखते हैं।
• createCell फ़ंक्शन createCell चारों ओर एक आवरण की भूमिका निभाता है, इसकी मदद से हम createNode कि तर्क text सरणी है या नहीं। यदि हां, तो हम बच्चों की एक सरणी बनाते हैं।

 //    function createCellData(tag, text) {  let children;  //  ,         const nodeClass = "body-text body-text--md body-text--semibold";  //   text   -   ,    span.  if (Array.isArray(text)) {    children = text.map(child => createNode("span", null, child, children));   return createNode(tag, nodeClass, text, children); } //    function createNode(tag, nodeClass, text, children = []) {  return {    tag: tag,    cellClass: nodeClass,    text: children.length ? null : text,    children: children  }; } 

अब हम ऐसा कुछ कर सकते हैं:

 function createRow(data) {  let { text, element, classes = null, properties, usage } = data;  let row = [];  row[0] = ""  row[1] = createCellData("p", ?????) //         row[2] = createCellData("p", properties) //    row[3] = createCellData("p", usage) //    return row; } 

तीसरे और चौथे कॉलम को बनाते समय, हम टेक्स्ट तर्कों के रूप में properties और usage को पास करते properties । हालांकि, दूसरा कॉलम तीसरे और चौथे से अलग है। यहां हम कक्षाओं के नाम प्रदर्शित करते हैं, जो स्रोत डेटा में, इस रूप में संग्रहीत हैं:

 "classes": {  "base": "body-text body-text--lg",  "variants": ["body-text--bold", "body-text--regular"] }, 

इसके अलावा, यह मत भूलो कि हेडर के साथ काम करते समय, कक्षाओं का उपयोग नहीं किया जाता है। इसलिए, हमें संबंधित पंक्तियों (जो कि, h1 , h2 , और इसी तरह) के लिए हेडर टैग नाम बनाने की आवश्यकता है।

हम सहायक फ़ंक्शन बनाते हैं जो हमें इस डेटा को एक प्रारूप में बदलने की अनुमति देता है जो text तर्क के रूप में उनके उपयोग की सुविधा देता है।

 //          function displayClasses(element, classes) {  //   ,     (   )  return getClasses(classes) ? getClasses(classes) : element; } //       (    )     (   ),   null (  ,   ) // : "body-text body-text--sm" or ["body-text body-text--sm body-text--bold", "body-text body-text--sm body-text--italic"] function getClasses(classes) {  if (classes) {    const { base, variants = null } = classes;    if (variants) {      //             return variants.map(variant => base.concat(`${variant}`));       return base;   return classes; } 

अब हम निम्नलिखित कर सकते हैं:

 function createRow(data) {  let { text, element, classes = null, properties, usage } = data;  let row = [];  row[0] = ""  row[1] = createCellData("p", displayClasses(element, classes)) //    row[2] = createCellData("p", properties) //    row[3] = createCellData("p", usage) //    return row; } 

शैलियों को प्रदर्शित करने के लिए उपयोग किए गए डेटा का परिवर्तन

हमें यह निर्धारित करने की आवश्यकता है कि शैलियों के आवेदन के उदाहरण दिखाते हुए, तालिका के पहले कॉलम के साथ क्या करना है। यह कॉलम दूसरों से अलग है। यहां हम शेष स्तंभों द्वारा उपयोग की जाने वाली कक्षाओं के संयोजन का उपयोग करने के बजाय प्रत्येक सेल पर नए टैग और कक्षाएं लागू करते हैं:

 <p class="body-text body-text--md body-text--semibold"> 

createCellData या createNodeData में इस कार्यक्षमता को लागू करने की कोशिश करने के बजाय, मैं एक नया फ़ंक्शन बनाने का प्रस्ताव करता हूं जो इन बुनियादी कार्यों की क्षमताओं का लाभ createNodeData जो डेटा परिवर्तन करते हैं। यह एक नया डाटा प्रोसेसिंग तंत्र लागू करेगा:

 function createDemoCellData(data) {  let children;  const classes = getClasses(data.classes);  //   ,       ,               if (Array.isArray(classes)) {    children = classes.map(child =>      //    "data.text"      ,   ,            createNode("span", child, data.text, children)    );   //   ,       if (typeof classes === "string") {    return createNode("p", classes, data.text, children);   //  ,    ( )  return createNode(data.element, null, data.text, children); } 

अब स्ट्रिंग डेटा एक सामान्यीकृत प्रारूप में कम हो गया है और रेंडर फ़ंक्शन को पास किया जा सकता है:

 function createRow(data) {  let { text, element, classes = null, properties, usage } = data  let row = []  row[0] = createDemoCellData(data)  row[1] = createCellData("p", displayClasses(element, classes))  row[2] = createCellData("p", properties)  row[3] = createCellData("p", usage)  return row } 

डेटा रेंडरिंग

पृष्ठ पर प्रदर्शित डेटा को प्रस्तुत करने का तरीका यहां बताया गया है:

 //   ,    "props" const rowData = props.rowData; //   ,     const row = createRow(rowData); //    "div"     return h("div", { class: "row" }, row.map(cell => renderCells(cell))); //    function renderCells(data) {  //  ,      if (data.children.length) {    return renderCell(      data.tag, //          { //            class: {          group: true, //    ""               [data.cellClass]: data.cellClass //      ,                  },      //        data.children.map(child => {        return renderCell(          child.tag,          { class: child.cellClass },          child.text        );      })    );   //     -     return renderCell(data.tag, { class: data.cellClass }, data.text); } // -  "h"     function renderCell(tag, classArgs, text) {  return h(tag, classArgs, text); } 

अब सब कुछ तैयार है ! यहां , फिर से, स्रोत कोड।

परिणाम

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

इस तथ्य के बावजूद कि इस परियोजना के विकास में बहुत समय लगा, डेटा अब प्रस्तुति से पूरी तरह से अलग है। अब, यदि हमारे डिज़ाइनर तालिका में कुछ पंक्तियों को जोड़ने के लिए आते हैं, या इसमें से कोई मौजूदा पंक्तियाँ निकालते हैं, तो मुझे भ्रमित करने वाले HTML कोड को रेक नहीं करना पड़ेगा। ऐसा करने के लिए, मेरे लिए JSON फ़ाइल में कई गुण बदलने के लिए पर्याप्त होगा।

क्या परिणाम प्रयास के लायक है? मुझे लगता है कि परिस्थितियों को देखना आवश्यक है। यह, हालांकि, प्रोग्रामिंग की बहुत विशेषता है। मैं कहना चाहता हूं कि मेरे सिर में, इस परियोजना पर काम करने की प्रक्रिया में, निम्नलिखित चित्र लगातार दिखाई दिया।


शायद यह मेरे सवाल का जवाब है कि क्या यह परियोजना इसके विकास पर खर्च किए गए प्रयास के लायक है।

प्रिय पाठकों! ? ?