defi.js Object.defineProperty पर आधारित एक प्रतिक्रियाशील पुस्तकालय है

defi.js एक पुस्तकालय है जिसमें एक दर्जन फ़ंक्शंस शामिल हैं जो गेटर्स और सेटर का उपयोग करके किसी भी जावास्क्रिप्ट ऑब्जेक्ट में दिलचस्प सुविधाएँ जोड़ते हैं।

ध्यान Gif (3.5MB)
कोष

हैलो वर्ल्ड के रूप में, हम पहले नाम, अंतिम नाम और ग्रीटिंग ( डेमो ) क्षेत्र से मिलकर एक छोटा विजेट बनाते हैं।

<input class="first"> <input class="last"> <output class="greeting"></output> 

 //    const obj = { first: 'John', last: 'Doe' }; //     first  last //   ,      defi.on(obj, 'change:first', () => console.log('First name is changed')); defi.on(obj, 'change:last', () => console.log('Last name is changed')); //    ( greeting)  , //  first  last  defi.calc(obj, 'greeting', ['first', 'last'], (first, last) => `Hello, ${first} ${last}`); //      //      defi.bindNode(obj, { first: '.first', last: '.last', greeting: '.greeting' }); 

नतीजतन, यदि first या last बदलाव हुआ है, तो ईवेंट हैंडलर कंसोल को रिपोर्ट करते हैं, greeting प्रॉपर्टी स्वचालित रूप से अपडेट हो जाती है, और इसके तत्व को एक नया मान मिलता है (डिफ़ॉल्ट रूप से, "हैलो, जॉन डो")। ऐसा हर बार होता है जब गुण बदलते हैं, और इससे कोई फर्क नहीं पड़ता कि कैसे। आप कोड का उपयोग कर मान सेट कर सकते हैं obj.first = 'Jane' , या फ़ील्ड का मान बदलकर, और अन्य सभी परिवर्तन स्वचालित रूप से घटित होंगे।

मामले में वस्तु की संपत्ति और मनमाने ढंग से HTML तत्व (उदाहरण में हमने output टैग का उपयोग किया है) की संपत्ति को सिंक्रनाइज़ करने की आवश्यकता है, bindNode तथाकथित "बाइंडर" को बाइंडोड फ़ंक्शन को पास करने की आवश्यकता है, जो ज़िम्मेदार है कि तत्व की स्थिति और ऑब्जेक्ट की संपत्ति को कैसे सिंक्रनाइज़ किया जाए। डिफ़ॉल्ट रूप से, bindNode को पता नहीं है कि कैसे नोड्स के साथ काम करना है जो फार्म तत्व नहीं हैं।

 const htmlBinder = { setValue: (value, binding) => binding.node.innerHTML = value, }; //   obj.greeting  innerHTML   defi.bindNode(obj, 'greeting', '.greeting', htmlBinder) 

इसके अलावा, आप सामान्य-बाइंडर्स लाइब्रेरी से html उपयोग कर सकते हैं (यह सामान्य-उद्देश्य बाइंडरों का एक संग्रह है)।

 const { html } = require('common-binders'); //   obj.greeting  innerHTML   defi.bindNode(obj, 'greeting', '.greeting', html()) 

एपीआई तरीके

सभी तरीकों के लिए विस्तृत दस्तावेज, उपलब्ध कॉल विविधताएं, झंडे, आदि defi.js.org पर देखे जा सकते हैं। यह ध्यान देने योग्य है कि नीचे दिए गए तरीकों के अलावा, defi.js में रूटिंग के लिए एक पुस्तकालय है: डिफ़ाइ -राउटर ।

• bindNode - दो-तरफ़ा बाइंडिंग के लिए एक ऑब्जेक्ट प्रॉपर्टी और एक DOM नोड बाँधता है ।

 //   // (  HTML5  , . defaultBunders) defi.bindNode(obj, 'myKey', '.my-element'); //   defi.bindNode(obj, 'myKey', '.my-element', { // ,      // (    -DOM ) on: 'click', //     ? getValue: ({ node }) => someLibraryGetValue(node), //       ? setValue: (v, { node }) => someLibrarySetValue(node, v), //    (  )? //      //  'initialize'     initialize: ({ node }) => someLibraryInit(node), }); obj.myKey = 'some value'; //   

• कैल्क - अन्य गुणों पर एक वस्तु की एक संपत्ति की निर्भरता बनाता है (अन्य वस्तुओं से भी)।

 defi.calc(obj, 'a', ['b', 'c'], (b, c) => b + c); obj.b = 1; obj.c = 2; console.log(obj.a); // 3 

• मध्यस्थता - जब यह बदलता है तो एक संपत्ति का मूल्य संशोधित करता है।

 defi.mediate(obj, 'x', value => String(value)); obj.x = 1; console.log(obj.x); // "1" console.log(typeof obj.x); // "string" 

• ऑन - एक इवेंट हैंडलर जोड़ता है। प्रलेखन साइट पर एक छोटा लेख है जो सभी संभावित घटनाओं का वर्णन करता है।

 defi.on(obj, 'change:x', () => { alert(`obj.x now equals ${obj.x}`); }); obj.x = 1; 

• बंद - एक घटना हैंडलर हटाता है।

 defi.off(obj, 'change:x bind'); 

• ट्रिगर - ट्रिगर एक घटना।

 defi.on(obj, 'foo bar', (a, b, c) => { alert(a + b + c); }); defi.trigger(obj, 'foo', 1, 2, 3); //  alert(6) 

• unbindNode - नोड के तत्व और DOM के बंधन को निष्क्रिय करता है।

 defi.bindNode(obj, 'myKey', '.my-element'); defi.unbindNode(obj, 'myKey', '.my-element'); 

• बाध्य - दी गई संपत्ति से जुड़े DOM तत्व को लौटाता है।

 defi.bindNode(obj, 'myKey', '.my-element'); const node = defi.bound(obj, 'myKey'); //  document.querySelector('.my-element') 

• श्रृंखला - श्रृंखला defi.js. फ़ंक्शन के लिए प्रयुक्त

 defi.chain(obj) .calc('a', 'b', b => b * 2) .set('b', 3) .bindNode('c', '.node'); 

• defaultBinder - संबंधित बाइंडर या अपरिभाषित वापस करने वाले कार्यों की एक सरणी। स्पष्ट रूप से एक बाइंडर को निर्दिष्ट किए बिना कस्टम तत्वों और गुणों को बांधने की अनुमति देता है।

 defi.defaultBinders.unshift(element => { //      "foo" if(element.classList.contains('foo')) { // ,     return { on: ..., getValue: ..., setValue: ... }; } }); // ... defi.bindNode(obj, 'myKey', '.foo.bar'); 

• LookForBinder - अगर defaultBinders फ़ंक्शन एक में से एक वापस आए तो तत्व के अनुरूप बाइंडर लौटाता है।

 const element = document.createElement('input'); element.type = 'text'; console.log(defi.lookForBinder(element)); 

• निकालें - एक वस्तु संपत्ति और संबंधित घटना संचालकों को हटाता है।

 defi.remove(obj, 'myKey'); 

• सेट - वस्तु की संपत्ति को सेटर की तरह सेट करता है, लेकिन change:KEY लिए कुछ डेटा पास करना संभव बनाता है change:KEY ईवेंट हैंडलर। आप संपत्ति मूल्य की सेटिंग को "चुप" भी बना सकते हैं, अर्थात, कॉल को कॉल न करें change:KEY बिल्कुल भी।

 defi.set(obj, 'myKey', 3, { silent: true }); 

defi.js Matreshka.js फ्रेमवर्क का एक संशोधित और सरलीकृत कठिन कांटा है, जिसमें रेंडरिंग एरे, कई कक्षाएं, और अधिक विधियां शामिल हैं। कुछ विधियाँ जो संभावित रूप से डिफीज़ में शामिल हो सकती हैं। अन्य तरीकों के लिए विकल्पों के साथ प्रतिस्थापित किया गया है, उदाहरण के लिए, once और onDebounce बजाय onDebounce आप once: true पास करके विधि का उपयोग कर सकते हैं once: true या debounce: number विकल्प।

अंत तक पढ़ने के लिए धन्यवाद। आपका दिन शुभ हो