"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
ऑनलाइन उपकरण
सॉफ्टवेयर ट्यूटोरियल
साइट नेविगेशन
प्रोग्रामिंग
मुखपृष्ठ > प्रोग्रामिंग > नया फ्रंटएंड फ्रेमवर्क?

नया फ्रंटएंड फ्रेमवर्क?

2024-08-28 को प्रकाशित
ब्राउज़ करें:707

New Frontend Framework?

या दो सहायक कार्यों के साथ वेनिला जावास्क्रिप्ट?

इस लेख में, मैं फ्यूसर लाइब्रेरी का उपयोग करके पुन: प्रयोज्य वेब घटकों को कैसे विकसित किया जाए और ऐसा करने के लाभों पर चर्चा करूंगा।

ऐसे घटकों को React, Angular, Vue, Solid, Svelte, और अन्य का उपयोग करके बनाए गए पूर्ण वेब अनुप्रयोगों के बराबर बनाया जा सकता है।

फ्यूज़र एपीआई में केवल दो मुख्य कार्य शामिल हैं:

  • एक विशेष ऑब्जेक्ट में लपेटा हुआ एक DOM तत्व बनाएं।
  • अपडेट करें एक DOM तत्व जो एक विशेष ऑब्जेक्ट में लिपटा हुआ है।

साथ ही कुछ और शायद ही उपयोग किए जाने वाले फ़ंक्शन जैसे:

  • किसी विशेष ऑब्जेक्ट से एक DOM तत्व प्राप्त करें
आपको इस विशेष वस्तु के बारे में कुछ भी जानने की आवश्यकता नहीं है।

एक DOM एलिमेंट बनाएं

JSX के माध्यम से निर्माण

"@fusorjs/dom" से { getElement } आयात करें; स्थिरांक गिनती = 0; // JSX के माध्यम से बनाएं स्थिरांक संदेश =
सेकंड {गिनती} बीत गया
; document.body.append(getElement(message)); // पाना 
import { getElement } from "@fusorjs/dom";

const count = 0;

// Create via JSX
const message = 
Seconds {count} elapsed
;

document.body.append(getElement(message)); // Get
हमने

create और get API फ़ंक्शंस का उपयोग किया।

वैकल्पिक गैर-जेएसएक्स निर्माण

"@fusorjs/dom/html" से आयात { div }; स्थिरांक संदेश = div ("सेकंड", गिनती, "बीता हुआ"); // बनाएं 
import { getElement } from "@fusorjs/dom";

const count = 0;

// Create via JSX
const message = 
Seconds {count} elapsed
;

document.body.append(getElement(message)); // Get
DOM एलिमेंट अपडेट करें

"@fusorjs/dom" से आयात { getElement, update }; मान लीजिए गिनती = 0; स्थिरांक संदेश =
सेकंड {() => गिनती} बीत गया
; // बनाएं document.body.append(getElement(message)); // पाना सेटइंटरवल(() => { गिनती = 1; अद्यतन(संदेश); // अद्यतन }, 1000); 
import { getElement } from "@fusorjs/dom";

const count = 0;

// Create via JSX
const message = 
Seconds {count} elapsed
;

document.body.append(getElement(message)); // Get
हमने

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

बच्चे, गुण और गुण सभी गतिशील हो सकते हैं।


(टॉगल ? "चालू" : "बंद")} /> 
import { getElement } from "@fusorjs/dom";

const count = 0;

// Create via JSX
const message = 
Seconds {count} elapsed
;

document.body.append(getElement(message)); // Get
DOM अपडेट केवल तभी होंगे जब नए मान

मौजूदा मानों से भिन्न होंगे।

पैरामीटर्स सेट करना

ज्यादातर समय, आप हमेशा की तरह पैरामीटर सेट करेंगे:


import { getElement } from "@fusorjs/dom";

const count = 0;

// Create via JSX
const message = 
Seconds {count} elapsed
;

document.body.append(getElement(message)); // Get
हालाँकि, कभी-कभी आपको

विशेषताओं और गुणों के बीच अंतर करने की आवश्यकता होगी। उनके प्रकार को निर्दिष्ट करने के लिए, आप उनके नामों में _a या _p प्रत्यय जोड़ सकते हैं: 

import { getElement } from "@fusorjs/dom";

const count = 0;

// Create via JSX
const message = 
Seconds {count} elapsed
;

document.body.append(getElement(message)); // Get
एक

ईवेंट हैंडलर जोड़ने के लिए, आपको हमेशा _e प्रत्यय का उपयोग करना होगा:

"इवेंट हैंडलर"} /> 
import { getElement } from "@fusorjs/dom";

const count = 0;

// Create via JSX
const message = 
Seconds {count} elapsed
;

document.body.append(getElement(message)); // Get
अतिरिक्त प्रकार हैं, और उनमें से कुछ पूर्ण

W3C मानकों अनुकूलता सुनिश्चित करने के लिए अतिरिक्त विकल्प ले सकते हैं:

"इवेंट हैंडलर"} /> 
import { getElement } from "@fusorjs/dom";

const count = 0;

// Create via JSX
const message = 
Seconds {count} elapsed
;

document.body.append(getElement(message)); // Get
एक पुन: प्रयोज्य घटक बनाएँ

फ़्यूसर की विशेष वस्तुओं का उपयोग करके अपने घटकों की रचना करें। फ़ंक्शंस के अंदर स्थिति और पैरामीटर को एनकैप्सुलेट करें। अपने घटक नामों को बड़े अक्षरों में लिखें।

यहां गिनती बटन घटक का एक उदाहरण दिया गया है:


"@fusorjs/dom" से आयात { getElement, update }; कॉन्स्ट काउंटिंगबटन = (प्रॉप्स) => { लेट काउंट = प्रॉप्स.काउंट ?? 0; //इनिट स्टेट स्थिरांक स्वयं = ( { गिनती = 1; अद्यतन(स्वयं); }} > {() => गिनती} बार क्लिक किया बटन> ); स्वयं लौटें; }; कॉन्स्ट ऐप = () => (

गिनती के तीन बटन

); document.body.append(getElement(App())); 
import { getElement } from "@fusorjs/dom";

const count = 0;

// Create via JSX
const message = 
Seconds {count} elapsed
;

document.body.append(getElement(message)); // Get
काउंटिंगबटन घटक शेष एप्लिकेशन को प्रभावित किए बिना अपने स्वयं के DOM तत्व के केवल

भाग को अपडेट करता है।

एक बार जब आप पूरी तरह से समझ जाते हैं कि उपरोक्त घटक कैसे काम करता है, तो आप समान परिणाम प्राप्त करते हुए इसे थोड़े

छोटे तरीके से फिर से लिख सकते हैं:

const काउंटिंगबटन = ({ गिनती = 0 }) => ( { गिनती = 1; अद्यतन(स्वयं); }} > {() => गिनती} बार क्लिक किया बटन> ); 
import { getElement } from "@fusorjs/dom";

const count = 0;

// Create via JSX
const message = 
Seconds {count} elapsed
;

document.body.append(getElement(message)); // Get
प्रत्येक ईवेंट हैंडलर कॉलबैक फ़ंक्शन को दो तर्क प्राप्त होते हैं: मानक ईवेंट ऑब्जेक्ट और वर्तमान विशेष ऑब्जेक्ट।

एक बार फिर, यदि आप उपरोक्त उदाहरण को समझते हैं, तो उसी घटक का

सबसे छोटा संस्करण देखें:

const काउंटिंगबटन = ({ गिनती = 0 }) => ( (गिनती = 1)}> {() => गिनती} बार क्लिक किया बटन> ); 
import { getElement } from "@fusorjs/dom";

const count = 0;

// Create via JSX
const message = 
Seconds {count} elapsed
;

document.body.append(getElement(message)); // Get
ईवेंट हैंडलर कॉलबैक कॉल के बाद घटक को रीफ्रेश करने के लिए हमने अपडेट विकल्प जोड़ा, जो पिछले उदाहरण के बराबर है।

जीवन चक्र

वास्तविक दुनिया के अनुप्रयोगों को विकसित करने से पहले हमें जिस आखिरी पहलू को समझने की जरूरत है वह घटक जीवनचक्र है।

इसमें केवल चार चरण होते हैं:

  1. घटक बनाएं
    2. कनेक्ट करें
  2. को DOM से
    3. अपडेट करें
  3. DOM
    4. DOM से डिस्कनेक्ट करें
    5. "@fusorjs/dom" से आयात { getElement, update }; स्थिरांक अंतराल काउंटर = ({ गिनती = 0 }) => { कंसोल.लॉग ("1. घटक बनाएं"); वापस करना (
    { कंसोल.लॉग ("2. DOM से कनेक्ट करें"); स्थिरांक टाइमरआईडी = सेटइंटरवल(() => { गिनती करना ; अद्यतन(स्वयं); कंसोल.लॉग ("3. DOM अपडेट करें"); }, 1000); वापसी () => { क्लियरइंटरवल(टाइमरआईडी); कंसोल.लॉग ("4. DOM से डिस्कनेक्ट करें"); }; }} > माउंट किए जाने के बाद से {() => count} सेकंड बीत गए
    ); }; स्थिरांक उदाहरण = ; स्थिरांक तत्व = getElement (उदाहरण); दस्तावेज़.शरीर.जोड़ें(तत्व); सेटटाइमआउट(() => element.remove(), 15000); 
import { getElement, update } from "@fusorjs/dom";

const IntervalCounter = ({ count = 0 }) => {
  console.log("1. Create the component");

  return (
    
 {
        console.log("2. Connect to the DOM");

        const timerId = setInterval(() => {
          count  ;
          update(self);
          console.log("3. Update the DOM");
        }, 1000);

        return () => {
          clearInterval(timerId);
          console.log("4. Disconnect from the DOM");
        };
      }}
    >
      Since mounted {() => count} seconds elapsed
    

  );
};

const instance = ;
const element = getElement(instance);

document.body.append(element);
setTimeout(() => element.remove(), 15000);

हम जीवनचक्र के इन चार चरणों को पूरी तरह से नियंत्रित करते हैं। यह हमें अलग-अलग रणनीतियों और एनीमेशन फ़्रेमों को ध्यान में रखते हुए, कस्टम

एसिंक्रोनस

या समवर्ती तरीकों का उपयोग करके घटकों को बनाने, अपडेट करने और तुलना करने देता है। यह ट्यूटोरियल का समापन करता है

जैसा कि आप इस ट्यूटोरियल से देख सकते हैं, फ्यूसर सरल, संक्षिप्त और स्पष्ट है। अधिकांश समय, आप केवल इसके

दो

एपीआई फ़ंक्शन का उपयोग करेंगे। हालाँकि, जरूरत पड़ने पर यह काफी नियंत्रण और लचीलापन भी प्रदान करता है।

तो, शीर्षक में प्रश्न का उत्तर देने के लिए, फ्यूसर एक छोटी जावास्क्रिप्ट लाइब्रेरी है, कोई ढांचा नहीं, लेकिन यह अन्य ढांचे के समान परिणाम प्राप्त कर सकता है।

कोडिंग प्रारंभ करें

उपरोक्त सभी उदाहरण CodeSandbox पर उपलब्ध हैं।

इसके अलावा, एसवीजी एनालॉग घड़ी का उदाहरण देखें।

यहां एक वास्तविक दुनिया का एप्लिकेशन है।

बॉयलरप्लेट स्टार्टर परियोजनाएं:

जावास्क्रिप्ट स्टार्टर
  • टाइपस्क्रिप्ट स्टार्टर
  • धन्यवाद

विज्ञप्ति वक्तव्य यह आलेख यहां पुन: प्रस्तुत किया गया है: https://dev.to/isumix/new-frontend-framework-5ain?1 यदि कोई उल्लंघन है, तो कृपया इसे हटाने के लिए स्टडी_गोलंग@163.com से संपर्क करें।
नवीनतम ट्यूटोरियल अधिक>
वर्गीकरणअधिक>
जापानी सीखें कोरियाई सीखो चीनी सीखें विदेशी भाषा सीखें खेल आम समस्या प्रौद्योगिकी परिधीय ऐ सॉफ्टवेयर ट्यूटोरियल प्रोग्रामिंग लेख

चीनी भाषा का अध्ययन करें

औजारअधिक>
छवि बेस64 डिकोडिंग
चीनी पिनयिन
यूनिकोड एन्कोडिंग
जेएस ऑबफस्केशन एन्क्रिप्शन संपीड़न
यूआरएल हेक्साडेसिमल एन्क्रिप्शन उपकरण
UTF-8 एन्कोडिंग रूपांतरण उपकरण
ऑनलाइन Ascii एन्कोडिंग और डिकोडिंग उपकरण
MD5 एन्क्रिप्शन उपकरण
हैश/हैश टेक्स्ट ऑनलाइन एन्क्रिप्शन और डिक्रिप्शन टूल
ऑनलाइन SHA एन्क्रिप्शन

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3