सभी ब्राउज़रों के लिए Object.watch ()?

Question

कृपया ध्यान दें कि Object.Watchऔर Object.Observeदोनों अब (जून २०१ both के अनुसार) पदावनत हो गए हैं।

---

मैं किसी वस्तु या परिवर्तन की निगरानी के लिए एक आसान तरीका खोज रहा था, और मैंने पाया Object.watch(), यह मोज़िला ब्राउज़रों में समर्थित है, लेकिन IE के लिए नहीं। इसलिए मैंने यह देखने के लिए चारों ओर खोज शुरू कर दी कि क्या किसी ने किसी प्रकार की समकक्षता लिखी है।

केवल एक चीज के बारे में मैंने पाया है कि एक jQuery प्लगइन है , लेकिन मुझे यकीन नहीं है कि यह जाने का सबसे अच्छा तरीका है। मैं निश्चित रूप से अपने अधिकांश प्रोजेक्ट्स में jQuery का उपयोग करता हूं, इसलिए मुझे jQuery पहलू की चिंता नहीं है ...

वैसे भी, सवाल: क्या कोई मुझे उस jQuery प्लगइन का काम करने का उदाहरण दिखा सकता है? मुझे काम करने में समस्या हो रही है ...

या, किसी को भी किसी भी बेहतर विकल्प के बारे में पता है जो क्रॉस ब्राउज़र काम करेगा?

उत्तर के बाद अपडेट करें :

प्रतिक्रियाओं के लिए सभी का धन्यवाद! मैंने यहां पोस्ट किए गए कोड को आज़माया: http://webreflection.blogspot.com/2009/01/internet-explorer-object-watch.html

लेकिन मैं इसे IE के साथ काम करने के लिए प्रतीत नहीं कर सकता। नीचे दिया गया कोड फ़ायरफ़ॉक्स में ठीक काम करता है, लेकिन IE में कुछ भी नहीं करता है। फ़ायरफ़ॉक्स में, हर बार watcher.statusबदल दिया जाता है, document.write()में watcher.watch()कहा जाता है और आप पृष्ठ पर आउटपुट देख सकते हैं। IE में, ऐसा नहीं होता है, लेकिन मैं देख सकता हूं कि watcher.statusमूल्य अपडेट हो रहा है, क्योंकि अंतिम document.write()कॉल सही मान (IE और FF दोनों में) दिखाता है। लेकिन, यदि कॉलबैक फ़ंक्शन को कॉल नहीं किया जाता है, तो यह बेकार की तरह है ... :)

क्या मैं कुछ भूल रहा हूँ?

var options = {'status': 'no status'},
watcher = createWatcher(options);

watcher.watch("status", function(prop, oldValue, newValue) {
  document.write("old: " + oldValue + ", new: " + newValue + "<br>");
  return newValue;
});

watcher.status = 'asdf';
watcher.status = '1234';

document.write(watcher.status + "<br>");

Comments

IIRC आप IE में

— onPropertyChange

डॉक्यूमेंट बदलें। () अलर्ट के साथ ()। यह ठीक काम करना चाहिए।

— इओनु 12: जी। स्टेन

Answer 1

(क्रॉस-पोस्टिंग के लिए खेद है, लेकिन यह जवाब मैंने इसी तरह के प्रश्न के लिए दिया था, यहाँ ठीक है)

मैंने थोड़ी देर पहले इसके लिए एक छोटी वस्तु बनाई है । यह IE8, Safari, Chrome, Firefox, Opera, आदि में काम करता है।

Comments

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

— माराजोप

developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…

— एली ग्रे

jsfiddle.net/kSWxP HINT: फ़ायरफ़ॉक्स का उपयोग करें (उत्तरार्द्ध विवरण क्रोम में मुद्रित नहीं है)

— मंगल राबर्टसन

developer.mozilla.org/ru/docs/Web/JavaScript/Reference/…

— zloctb

मुझे पता था कि विचार Object.defineProperty()अस्तित्व में है। मैंने एमडीएन संदर्भ को देखते हुए समाप्त किया कि यह कैसे काम करता है।

— जंपनेट

Answer 2

वह प्लगइन बस किसी वस्तु पर बदलाव के लिए बार-बार जाँच करने के लिए एक टाइमर / अंतराल का उपयोग करता है। शायद काफी अच्छा है, लेकिन व्यक्तिगत रूप से मैं एक पर्यवेक्षक के रूप में अधिक immediacy चाहूंगा।

यहाँ पर watch/ unwatchIE लाने के लिए एक प्रयास किया गया है : http://webreflection.blogspot.com/2009/01/internet-explorer-object-watch.html ।

यह पर्यवेक्षकों को जोड़ने के फ़ायरफ़ॉक्स तरीके से वाक्य रचना को बदलता है। के बजाय :

var obj = {foo:'bar'};
obj.watch('foo', fooChanged);

तुम करो:

var obj = {foo:'bar'};
var watcher = createWatcher(obj);
watcher.watch('foo', fooChanged);

मिठाई के रूप में नहीं, लेकिन एक पर्यवेक्षक के रूप में आपको तुरंत सूचित किया जाता है।

Comments

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

— शॉनव

Answer 3

इस सवाल के जवाब थोड़े पुराने हैं। Object.watch और Object.observe दोनों को हटा दिया गया है और इसका उपयोग नहीं किया जाना चाहिए।

आज, आप किसी ऑब्जेक्ट में किए गए परिवर्तनों की निगरानी (और अवरोधन) के लिए प्रॉक्सी ऑब्जेक्ट का उपयोग कर सकते हैं । यहाँ एक मूल उदाहरण दिया गया है:

var targetObj = {};
var targetProxy = new Proxy(targetObj, {
  set: function (target, key, value) {
      console.log(`${key} set to ${value}`);
      target[key] = value;
  }
});

targetProxy.hello_world = "test"; // console: 'hello_world set to test'

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

var test = {testing:{}};
var p = ObservableSlim.create(test, true, function(changes) {
    console.log(JSON.stringify(changes));
});

p.testing.blah = 42; // console:  [{"type":"add","target":{"blah":42},"property":"blah","newValue":42,"currentPath":"testing.blah",jsonPointer:"/testing/blah","proxy":{"blah":42}}]

Answer 4

वर्तमान उत्तर

नई प्रॉक्सी ऑब्जेक्ट का उपयोग करें , जो इसे लक्षित करने के लिए परिवर्तन देख सकता है।

let validator = {
    set: function(obj, prop, value) {
        if (prop === 'age') {
            if (!Number.isInteger(value)) {
                throw new TypeError('The age is not an integer');
            }
            if (value > 200) {
                throw new RangeError('The age seems invalid');
            }
        }

        // The default behavior to store the value
        obj[prop] = value;

        // Indicate success
        return true;
    }
};

let person = new Proxy({}, validator);

person.age = 100;
console.log(person.age); // 100
person.age = 'young'; // Throws an exception
person.age = 300; // Throws an exception

2015 से पुराना जवाब

आप ES7 से Object.observe () का उपयोग कर सकते थे । यहाँ एक पॉलीफ़िल है। लेकिन Object.observe () अब रद्द हो गया है । क्षमा करें लोग!

Comments

हम्म, मैं आईओएस सफारी पर काम करने के लिए इस पॉलीफ़िल को प्राप्त नहीं कर सका। मैं त्रुटि मिलती है: अपरिभाषित एक समारोह (का मूल्यांकन Object.observe (a.imgTouch, समारोह (क) {console.debug ( "lastX:" + एक)}) ') नहीं है

— infomofo

@infomofo हाय, क्या आप परियोजना के पृष्ठ पर एक मुद्दा खोलना चाहेंगे, सभी विवरणों के साथ जो आप दे सकते हैं? मैंने इसे iOS पर टेस्ट नहीं किया है, लेकिन मैं इस समस्या पर ध्यान दूंगा।

— मैक्सआर्ट

Answer 5

ध्यान दें कि क्रोम 36 और उच्चतर में भी आप उपयोग कर सकते हैं Object.observe। यह वास्तव में भविष्य के ECMAScript मानक का एक हिस्सा है, और मोज़िला की तरह ब्राउज़र-विशिष्ट सुविधा नहीं है Object.watch।

Object.observeकेवल वस्तु गुणों पर काम करता है, लेकिन बहुत अधिक प्रदर्शन करने वाला है Object.watch(जो कि डिबगिंग के उद्देश्यों के लिए है, न कि उत्पादन उपयोग के लिए)।

var options = {};

Object.observe(options, function(changes) {
    console.log(changes);
});

options.foo = 'bar';

Comments

2018 के रूप में यह पदावनत है और सभी प्रमुख ब्राउज़रों द्वारा समर्थित नहीं है

— सर्गेई पैनफिलोव

Answer 6

आप Object.defineProperty का उपयोग कर सकते हैं ।

संपत्ति घड़ी barमेंfoo

Object.defineProperty(foo, "bar", {
  get: function (val){
      //some code to watch the getter function
  },

  set: function (val) {
      //some code to watch the setter function
  }
})

Comments

यह भी खूब रही! लेकिन मैं इसे संशोधित करूंगा :) मूल सेटर को अधिलेखित नहीं करना। मैं रेफरेंस foo._someObject = foo.someObject

— calmbird

सरल और

— सुंदर

Answer 7

मैंने अपने एक प्रोजेक्ट में Watch.js का इस्तेमाल किया है । और यह ठीक काम कर रहा है। इस पुस्तकालय का उपयोग करने का मुख्य लाभ यह है:

"Watch.JS के साथ आपको अपने विकसित होने के तरीके को बदलना नहीं होगा।"

उदाहरण नीचे दिया गया है

//defining our object however we like
var ex1 = {
	attr1: "initial value of attr1",
	attr2: "initial value of attr2"
};

//defining a 'watcher' for an attribute
watch(ex1, "attr1", function(){
	alert("attr1 changed!");
});

//when changing the attribute its watcher will be invoked
ex1.attr1 = "other value";

<script src="https://cdn.jsdelivr.net/npm/melanke-watchjs@1.5.0/src/watch.min.js"></script>

यह उतना ही सरल है!

Answer 8

मुझे यह भी लगता है कि अभी सबसे अच्छा समाधान Watch.JS का उपयोग करना है, यहाँ एक अच्छा ट्यूटोरियल ढूंढें: सुनो / जावास्क्रिप्ट में वस्तु या सरणी परिवर्तन के लिए घड़ी / देखें (जावास्क्रिप्ट ऑब्जेक्ट्स पर संपत्ति परिवर्तित घटना)