लाइटवेट एक तरफ डेटा बाध्यकारी के लिए सबसे अच्छा समाधान

Question

मेरे पास एक एकल पृष्ठ एप्लिकेशन है जिस पर मैं काम कर रहा हूं जिसमें एक चर एक्स कई कारणों से बदल सकता है। मैं चाहता हूं कि डोम (नीचे div) में प्रदर्शित मूल्य हमेशा जावास्क्रिप्ट चर के मान से मेल खाता हो।

मैं समझता हूं कि कोणीय जैसे फ्रेमवर्क इस के लिए अच्छे हैं, लेकिन मैं अधिक हल्के और सरल समाधान की तलाश में हूं। मैं पृष्ठ पर JQuery और underscore.js का उपयोग कर रहा हूं यदि यह मदद करता है।

<script> 
    var x = 100 
    </script> 

    <div id="value_display">100</div> 

आदर्श रूप से मुझे ऐसा कुछ चाहिए जहां मुझे चर और तत्व को तर्क के रूप में प्रदान करने की आवश्यकता हो। उदाहरण के लिए:

bind(x,'#value_display') 

Answer 1

आप, एक पर्यवेक्षक पैटर्न का एक सरल कार्यान्वयन (कोई बड़ी चौखटे) के लिए पूछने के आदर्श सिर्फ चर नाम और तर्क के रूप में तत्व की आईडी प्रदान करके।

जो आप पूछते हैं वह संभव है, यदि हम bind() फ़ंक्शन को x पर बार-बार मतदान करने के लिए परिभाषित करते हैं तो यह देखने के लिए कि क्या यह बदल गया है। ध्यान दें कि bind तो इस तरह के नाम से जाना है:

bind('x','value_display'); 

एक काम कर उदाहरण:

var x = 100; 
 

 
function bind(varName, elementId){ 
 
    var lastValue; 
 
    function check(){ 
 
    if(lastValue !== window[varName]){ 
 
     lastValue = window[varName]; 
 
     document.getElementById(elementId).innerHTML = lastValue; 
 
    } 
 
    } 
 
    //poll for changes every 50 milliseconds 
 
    setInterval(check, 50); 
 
} 
 

 
//bind x to value_display 
 

 
bind('x','value_display'); 
 

 
//test function by changing x every 100th millisecond 
 

 
setInterval(function(){ 
 
    x = +new Date; 
 
    }, 
 
    100 
 
);

<div id="value_display"></div>

व्यक्तिगत रूप से, मैं एक मतदान का उपयोग करने पर एक हल्के प्रकाशक/सदस्य के मॉड्यूल पसंद करेंगे फ़ंक्शन, लेकिन उसे फ़ंक्शन/विधि (किसी प्रकार का सेटर) द्वारा नियंत्रित करने के लिए चर x को असाइनमेंट की आवश्यकता होगी। यदि आप शोध (Google) पर्यवेक्षक पैटर्न या पब/उप पैटर्न का शोध करते हैं, तो आपको बड़े ढांचे — की तुलना में बहुत कम कोड में इसे लागू करने के आसान तरीके मिलेंगे, लेकिन संभवतः मतदान दृष्टिकोण के रूप में हल्के वजन के रूप में नहीं।

Answer 2

मेरा प्रस्ताव उन चरों को समाहित करने के लिए विशेष कक्षा बनाना है। यह बहुत हल्का समाधान नहीं है अंतराल और मूल्य देख रहा है।

var ViewModel=function(selector){ 

    this.dom=document.querySelector(selector);//here DOM element 
    this.value=null; 

}; 

//method sets value 
ViewModel.prototype.set=function(value){ 

    if (value===this.value) 
    return;//the same value 

    this.value=value;//new value 


    this.dom.innerText=this.value; //most important changing in DOM 

}; 

//method gets value 
ViewModel.prototype.get=function(){ 

    return this.value; 

}; 

उपयोग: jsFiddle में

var x=new ViewModel("#selector"); 

x.set(100); 

चेक उदाहरण - https://jsfiddle.net/maciejsikora/wrd14kwk/