সমস্ত ব্রাউজারের জন্য অবজেক্ট.ওয়াচ ()?

118

দয়া করে নোট করুন Object.Watchএবং Object.Observeউভয়ই এখন অবহেলিত (জুন 2018 হিসাবে)।

আমি পরিবর্তনের জন্য কোনও অবজেক্ট বা ভেরিয়েবল পর্যবেক্ষণ করার একটি সহজ উপায় খুঁজছিলাম এবং আমি পেয়েছি Object.watch(), এটি মজিলা ব্রাউজারগুলিতে সমর্থিত, তবে আইই নয়। সুতরাং আমি আশেপাশে অনুসন্ধান শুরু করেছি যে কেউ কোনও সমমানের কিছু লিখেছেন কিনা।

আমি যে একমাত্র জিনিসটি পেয়েছি সে সম্পর্কে একটি jQuery প্লাগইন হয়েছে তবে আমি নিশ্চিত নই যে এটি যাওয়ার সর্বোত্তম উপায় কিনা। আমি অবশ্যই আমার বেশিরভাগ প্রকল্পে jQuery ব্যবহার করি, তাই আমি jQuery দিক সম্পর্কে চিন্তিত নই ...

যাইহোক, প্রশ্ন: কেউ আমাকে সেই jQuery প্লাগইনটির কার্যকারী উদাহরণ দেখিয়ে দিতে পারেন? এটি কাজ করতে আমার সমস্যা হচ্ছে ...

বা, ক্রস ব্রাউজারে কাজ করবে এমন আরও ভাল বিকল্পের কথা কি কেউ জানেন?

উত্তরের পরে আপডেট করুন :

প্রতিক্রিয়া জন্য সবাইকে ধন্যবাদ! আমি কোডটি এখানে পোস্ট চেষ্টা: http://webreflection.blogspot.com/2009/01/internet-explorer-object-watch.html

তবে আমি মনে করি না যে এটি IE দিয়ে কাজ করে। ফায়ারফক্সে নীচের কোডটি সূক্ষ্মভাবে কাজ করে, তবে IE তে কিছুই করে না। ফায়ারফক্স, প্রত্যেক সময় watcher.status, পরিবর্তিত হয় document.write()মধ্যে watcher.watch()বলা হয় এবং আপনি পৃষ্ঠাতে আউটপুট দেখতে পারেন। আই-তে, এটি ঘটে না, তবে আমি দেখতে পাচ্ছি যে watcher.statusমানটি আপডেট হচ্ছে because কারণ শেষ document.write()কলটি সঠিক মান দেখায় (আইআই এবং এফএফ উভয় ক্ষেত্রে)। তবে, যদি কলব্যাক ফাংশন না বলা হয়, তবে তা সেই ধরণের অর্থহীন ... :)

আমি কিছু অনুপস্থিত করছি?

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>");

javascript jquery dom-events

— SeanW
সূত্র

2

আইআইআরসি আপনি আইপিতে প্রোপার্টি চেঞ্জ ব্যবহার করতে পারেন

— সানলিফ

1

ডকুমেন্ট.রেইট () সতর্কতা () সহ প্রতিস্থাপন করুন। এটি ঠিক কাজ করা উচিত।

— আয়নু জি স্টান

113

(ক্রস-পোস্টিংয়ের জন্য দুঃখিত, তবে একটি অনুরূপ প্রশ্নের আমি এই উত্তরটি দিয়েছি এখানে ভাল কাজ করে)

কিছুক্ষণ আগে আমি একটি ছোট অবজেক্ট তৈরি করেছি atch এটি আইই 8, সাফারি, ক্রোম, ফায়ারফক্স, অপেরা ইত্যাদিতে কাজ করে

— এলি গ্রে
সূত্র

10

এটি কীভাবে ব্যবহার করতে হয় এবং কীভাবে এটি অভ্যন্তরীণভাবে কাজ করে তার একটি ব্যাখ্যা জেএস মাস্টার নয় এমন আমাদের জন্য এটি দুর্দান্ত হবে thanks

— মারাজোপ

3

বিকাশকারী.মোজিলা.আর.ইন

— এলি গ্রে

jsfiddle.net/kSWxP HINT: ফায়ারফক্স ব্যবহার করুন (পরবর্তী বিবরণটি ক্রোমে ছাপা হয় না)

— মঙ্গল রবার্টসন

1

বিকাশকারী.মোজিলা.আর.আর

— ডকস

আমি জানি ধারণা Object.defineProperty()বিদ্যমান ছিল। এটি এমডিএন রেফারেন্সটি দেখে কীভাবে এটি কাজ করে তা শেষ করেছিলাম ।

— জাম্পনেট

19

এই প্লাগইনটি কোনও বস্তুর পরিবর্তনগুলি বারবার যাচাই করতে কেবল টাইমার / বিরতি ব্যবহার করে। হয়তো যথেষ্ট ভাল তবে ব্যক্তিগতভাবে আমি একজন পর্যবেক্ষক হিসাবে আরও নকল করতে চাই।

আইই watch/ এ: এখানে আনার চেষ্টা করা হয়েছে unwatch: 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);

মিষ্টি হিসাবে নয়, তবে একজন পর্যবেক্ষক হিসাবে আপনাকে অবিলম্বে অবহিত করা হবে।

— ক্রিসেন্ট ফ্রেশ
সূত্র

হ্যাঁ, সেই টাইমস্ট্যাম্পগুলি দেখুন ... ডাউনভোট করার দরকার নেই, ক্রিসেন্টফ্রেশ পোস্টটিতে আরও তথ্য যুক্ত করেছে, যদিও এটি একই লিঙ্কটি ছিল। ইতিমধ্যে, আমি সেই পৃষ্ঠাটিতে পাওয়া কোডটি চেষ্টা করেছি এবং এখনও একটি সমস্যা দেখতে পাচ্ছি। যদিও আমি কিছু উপেক্ষা করছি। আমি আরও তথ্যের সাথে আমার আসল পোস্টটি আপডেট করেছি ...

— সানডাব্লু

13

এই প্রশ্নের উত্তরগুলি কিছুটা পুরানো। অবজেক্ট.ওয়াচ এবং অবজেক্ট.ওবাইজার উভয়ই অবহিত এবং ব্যবহার করা উচিত নয়।

আজ, আপনি এখন কোনও সামগ্রীতে করা পরিবর্তনগুলি (এবং ইন্টারসেপ্ট) পর্যবেক্ষণ করতে প্রক্সি অবজেক্টটি ব্যবহার করতে পারেন । এখানে একটি প্রাথমিক উদাহরণ:

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'

যদি আপনার কোনও নেস্টেড অবজেক্টে করা পরিবর্তনগুলি পর্যবেক্ষণ করতে হয় তবে আপনার একটি বিশেষ পাঠাগার ব্যবহার করা উচিত to আমি পর্যবেক্ষণযোগ্য স্লিম প্রকাশ করেছি এবং এটি এর মতো কাজ করে:

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}}]

— এলিয়ট বি।
সূত্র

12

বর্তমান উত্তর

নতুন প্রক্সি অবজেক্টটি ব্যবহার করুন , এটি লক্ষ্যবস্তুতে পরিবর্তনগুলি দেখতে পারে।

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

২০১৫ সাল থেকে পুরানো উত্তর

আপনি ES7 থেকে অবজেক্ট.ওব্রিজ () ব্যবহার করতে পারেন । এখানে একটি পলিফিল দেওয়া আছে। তবে অবজেক্ট.ওবজার () এখন বাতিল করা হয়েছে । দুঃখিত মানুষ!

— mikemaccana
সূত্র

এইচএম, আমি এই পলিফিলটি আইওএস সাফারিতে কাজ করতে পারি না। আমি ত্রুটি পেয়েছি: অপরিজ্ঞাত করা কোনও ফাংশন নয় ('অবজেক্ট.ওবাইজার (a.imgTouch, ফাংশন (ক) {কনসোল.দেবগ ("লাস্টএক্স:" + এ)}))')

— ইনফোমফো

@ ইনফোমো হাই, আপনি যে সমস্ত বিবরণ দিতে পারেন তা দিয়ে কি আপনি প্রকল্পের পৃষ্ঠায় একটি সমস্যা খুলতে চান? আমি এটি আইওএস-তে পরীক্ষা করে দেখিনি, তবে আমি সমস্যাটি সন্ধান করব।

— ম্যাক্সআর্ট

6

নোট করুন যে ক্রোম ৩ 36 এবং এর চেয়ে বেশি এর মধ্যে আপনিও ব্যবহার করতে পারেন Object.observe। এটি আসলে ভবিষ্যতের ECMAScript স্ট্যান্ডার্ডের একটি অংশ, এবং মজিলার মতো ব্রাউজার-নির্দিষ্ট বৈশিষ্ট্য নয় Object.watch।

Object.observeকেবলমাত্র অবজেক্টের বৈশিষ্ট্যগুলিতে কাজ করে, তবে এটির চেয়ে অনেক বেশি পারফরম্যান্ট Object.watch(যা ডিবাগিংয়ের উদ্দেশ্যে, উত্পাদন ব্যবহার নয়)।

var options = {};

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

options.foo = 'bar';

— বলবান
সূত্র

1

2018 এর মতো এটিকে অবজ্ঞা করা হয়েছে এবং আর সমস্ত বড় ব্রাউজারগুলি দ্বারা এটি সমর্থন করে না

— সের্গেই পানফিলভ

4

আপনি অবজেক্ট.ডিফাইনপ্রোপার্টি ব্যবহার করতে পারেন ।

সম্পত্তি ঘড়ি 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
  }
})

— স্যুপর্ণ মজুমদার der
সূত্র

এটা অসাধারণ! তবে আমি এটি এডিটি সংশোধন করব :) আসল সেটার ওভাররাইট না করার জন্য। আমি রেফারেন্স foo._someObject = foo.someObject

— Calmbird

সহজ এবং ইজেজেন্ট

— ßãlãjî

1

আমি আমার একটি প্রকল্পে Watch.js ব্যবহার করেছি । এবং এটি সূক্ষ্মভাবে কাজ করছে this এই গ্রন্থাগারটি ব্যবহারের অন্যতম প্রধান সুবিধা হ'ল:

"ওয়াচ.জেএস এর সাহায্যে আপনার বিকাশের উপায় পরিবর্তন করতে হবে না।"

উদাহরণটি নীচে দেওয়া হল

//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>

স্নিপেট প্রসারিত করুন

এটি এত সহজ!

— নিখিল মুখ্যমন্ত্রী
সূত্র

-2

আমি আরও মনে করি যে এখনই সেরা সমাধান হ'ল ওয়াচ.জেএস ব্যবহার করা, একটি সুন্দর টিউটোরিয়ালটি এখানে সন্ধান করুন: জাভাস্ক্রিপ্টে অবজেক্ট বা অ্যারে পরিবর্তনের জন্য শুনুন / দেখুন (জাভাস্ক্রিপ্টের সামগ্রীতে সম্পত্তি পরিবর্তিত ইভেন্ট)

— FidEliO
সূত্র