दो छोटी विशेषताएं जो जीवन को आसान बनाती हैं

मैं Backbone.js और Knockout.js के बारे में जानता हूं
बस कभी-कभी आप कुछ कम चाहते हैं।

1. परिचय। हम किस विषय पर बात कर रहे हैं, विषय क्षेत्र क्या है। क्या समस्या है

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

var obj = new Object(); var obj = {}; 

क्रमशः गुण कहां हैं:

 obj.prop = 111; obj = { "prop1" : "value1" "prop2" : 2 } 

क्या समस्या है:

1. यहां ऐसी वस्तुएं हैं, उनके पास ये बहुत गुण हैं।
2. मैं जानना चाहता हूं कि संपत्ति कब बदली गई (MVVM पैटर्न का हिस्सा)
3. और, तदनुसार, इस परिवर्तन की सदस्यता लें।

UPD 1 - काम में एक उदाहरण , बहुत बहुत धन्यवाद, मेरी राय में, नीचे महत्वपूर्ण टिप्पणी ।



2. विस्तार से, आपको किस तरह के कार्य को हल करने की आवश्यकता है।

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

यहां तक ​​कि इस तरह के सरल गुणों के लिए एक सरल "कॉलबैक के साथ साइन-अप" पहले से ही विकास के समय को काफी कम कर सकता है। उदाहरण के लिए, आप सॉकेट से नया डेटा प्राप्त करने के लिए ट्रिगर लटका सकते हैं, या मॉडल में कुछ संपत्ति में परिवर्तन की सदस्यता ले सकते हैं जो नेत्रहीन पृष्ठ पर प्रदर्शित होती है।

3. एनालॉग। समस्या के मौजूदा समाधान, उनके पक्ष और विपक्ष क्या हैं

मैंने बहुत कुछ नहीं देखा, Backgone.js और Knockout.js के लिए भारी चीजों के लिए पर्याप्त हैं।

तो इसका मतलब यह नहीं है कि उनके लिए एक एनालॉग है, इसलिए, प्राथमिक संचालन के लिए एक स्टब, या बस अगर ये लाइब्रेरी कोड में "शामिल" नहीं हैं।

4. समस्या के समाधान का विवरण।

रात को घुटने पर, मैंने दो कार्यों को फिर से किया, जो क्रमशः एक ही समस्या के समाधान के लिए अपने स्वयं के पेशेवरों और विपक्षों के साथ एक या दूसरे तरीके से सक्षम हैं।

ताना (ओब्ज, प्रॉप, सेटकॉलबैक, इंटरवल)

निरीक्षण करें (मान, सेटलैकबैक)

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

प्लस ताना (): वास्तव में एक वास्तविक संपत्ति की सदस्यता लेता है, अर्थात्। आप बस किसी ऑब्जेक्ट के अंदर एक संपत्ति के लिए नए मान निर्दिष्ट कर सकते हैं।
ताना के साथ ():
- वॉल्यूमिनस सिंटैक्स।
- यदि ब्राउज़र गेटर्स के बिना "पुराना" है, और बसता है, तो परिवर्तन ट्रैकिंग अंतराल इसे लापता "अंतराल" के साथ भारी लोड करेगा।
- मैंने यह नहीं जांचा कि क्या सिद्धांत में संपत्ति को हटाए जाने पर अंतराल रीसेट हो गया है - यह होना चाहिए।

5. निष्कर्ष। यह प्रयोग करने लायक क्यों है और कब, और कब नहीं।

इसका उपयोग तब किया जा सकता है जब आपको कुछ सरल करने की आवश्यकता होती है जिसमें "अवधारणा" की आवश्यकता नहीं होती है।

सब कुछ बहुत स्पष्ट है:

ताना - सेट पर कॉलबैक के साथ संपत्तियों की सदस्यता लेता है।

अवलोकन - कॉलबैक से सेट करने के लिए एक फ़ंक्शन के साथ संपत्ति को बदलता है।

इस कोड ब्लॉक के तहत थोड़ा स्पष्टीकरण।

एक उदाहरण एक खाली HTML फ़ाइल में डालने के लिए पर्याप्त है।

 <textarea id = "context" cols = "70" rows = "15"></textarea> 

 try{ var info = function(str){ var x = document.getElementById('context'); if(str !== undefined){ x.value += str + '\n'; } else{ x.value = ' '; } try{ x.scrollTop = x.scrollHeight;; }catch(e){ } } var warp = function( obj, prop, setcallback, interval ){ try{ var val = obj[prop]; if( !obj ){ obj = window; } if(Object.defineProperty){ Object.defineProperty( obj, prop, { get : function () { try{ return obj[prop]; }catch(e){ return; } } , set : function ( value ) { try{ val = value; if(setcallback){ if(interval) { window.setTimeout( function(){ setcallback( value, prop, obj ); }, interval); }else{ setcallback( value, prop, obj ); } } return val; }catch(e){ return; } } }); }else{ if(!interval){ interval = 1000; } var intvl = window.setInterval( function(){ if(obj[prop] !== undefined){ if( val != obj[prop] ){ val = obj[ prop ]; if( setcallback ){ setcallback( val, prop, obj ); } } }else{ window.clearInterval( intvl ); } }, interval); } }catch(e){ return; } } var observe = function( value , setcallback ){ return function( val ){ try{ if( val !== undefined ){ if( val != value ){ value = val; if( setcallback ){ setcallback( value ); } } }else{ return value; } }catch(er){ alert(er); } }; } var obj = { prop : 111, observe : observe ( 222, function( val ){ info( 'observe : ' + val ); } ) }; warp( obj, 'prop', function( val ){ info( 'callback for prop : ' + val ) }, 100 ); var count1 = 0; window.setInterval( function(){ count1++; obj.prop = count1; }, 5000 ); var count2 = 0; window.setInterval( function(){ count2++; obj.observe( count2 ); }, 1000 ); window.setInterval( function(){ info( 'observer lookup : ' + obj.observe() ); } , 2000 ); }catch(e){ alert(e); } 

UPD 0 एक त्वरित संदर्भ है।

मैं आपको यह बताने की कोशिश करूँगा कि मैं इसका उपयोग कैसे करता हूँ, चरण दर चरण।
1. किसी प्रकार की वस्तु हो।
2. इसमें किसी प्रकार की संपत्ति, स्ट्रिंग, संख्या या बूलियन है।
3. मैं जानना चाहता हूं कि यह कब बदल जाएगा, और कॉलबैक के साथ इस बदलाव की सदस्यता लें, जो नए मूल्य को स्वीकार करेगा।

इसके लिए, मैं ताना (obj, सहारा, setcallback, अंतराल) का उपयोग करता हूं

जहां:
obj एक ही वस्तु है
सहारा वह संपत्ति है
setcallback - वही कॉलबैक जो परिवर्तित मूल्य प्राप्त करेगा।
अंतराल - अगर मैं चाहता हूं कि कॉलबैक देरी से काम करे।

इस बारे में सभी ताना था।

अवलोकन के लिए: स्थिति समान है, लेकिन मेरे लिए यह वास्तव में संपत्ति को सुनने के लिए नहीं बल्कि इसे एक समारोह के साथ बदलने के लिए पर्याप्त है।
तब:
1. एक वस्तु है
2. एक संपत्ति है
3. मैं इसके कार्य को प्रतिस्थापित करता हूं
निरीक्षण करें (मान, सेटलैकबैक)

जिसके बाद एक नया मान सेट करने जैसा दिखेगा
obj.my_property ('नया मान');
और obj.my_property () के समान मान पढ़ना;

गेटर्स और सेटर के बारे में पढ़ने योग्य प्रकार:
http://robertnyman.com/javascript/javascript-getters-setters.html#regular-getters-and-setters

https://developer.mozilla.org/en/JavaScript/Reference/Operators/get

https://developer.mozilla.org/en/JavaScript/Guide/Working_with_Objects#Defining_Getters_and_Setters

लेकिन सब कुछ इन सुविधा के बिना काम करना चाहिए।