你可以为特定的静态变量创建自己的回调吗？

huangapple
go评论99阅读模式
英文:

Is it possible to make my own callback for a certain static variable?

问题

以下是您要翻译的内容：

有时函数内置了callback函数，“当发生某些事情时调用此函数”

在我的情况下，我想创建一个callback函数，当某个静态值更改后调用

例如，

  1. class MyVariable(){
  2.     static myVal = 1;
  3. }
  6. const FileUploader = (props) =>{
  7.     myAlert(){
  8.        console.log("val is changed!"); 
  9.     }
  10.     changeValue2(){
  11.       MyVariable.myVal = 2;
  12.       myAlert();
  13.       
  14.     }
  15.     changeValue3(){
  16.       MyVariable.myVal = 3; 
  17.       myAlert();
  18.     } 
  19.     changeValue4(){
  20.       MyVariable.myVal = 4; 
  21.       myAlert();
  22.     } 
  23. }

我想在myVal更改后调用myAlert()。

所以目前我写了myAlert()三次。

我想知道是否有可能像制作回调函数一样自动执行此操作当myVal更改时调用

有没有这个想法的方法？我正在使用React

英文:

Sometimes function has built-in callback function, "This function is called when something happens"

In my case, I want to make callback function which is called after a certain static value is changed

For example,

  1. class MyVariable(){
  2.     static myVal = 1;
  3. }
  6. const FileUploader = (props) =>{
  7.     myAlert(){
  8.        console.log("val is changed!"); 
  9.     }
  10.     changeValue2(){
  11.       MyVariable.myVal = 2;
  12.       myAlert();
  13.       
  14.     }
  15.     changeValue3(){
  16.       MyVariable.myVal = 3; 
  17.       myAlert();
  18.     } 
  19.     changeValue4(){
  20.       MyVariable.myVal = 4; 
  21.       myAlert();
  22.     } 
  23. }

I want to call myAlert() after myVal is changed.

so currently I write myAlert() third times.

I wonder is it possible to do this automatically like making the callback which is called when myVal is changed

Is there any way for this idea? I am using React

答案1

得分: 2

你可以定义一个 setter 并使用一个私有字段来存储该值。

英文:

You could define a setter and use a private field to store the value.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. class MyVariable {
  2.     static #myVal = 1;
  3.     static get myVal() {
  4.         return MyVariable.#myVal;
  5.     }
  6.     static set myVal(newVal) {
  7.         if (newVal !== MyVariable.#myVal) {
  8.             console.log(&#39;changing myVal to&#39;, newVal); // or call myAlert()
  9.             MyVariable.#myVal = newVal;
  10.         }
  11.     }
  12. }
  13. console.log(MyVariable.myVal);
  14. MyVariable.myVal = 2;
  15. console.log(MyVariable.myVal);

<!-- end snippet -->

答案2

得分: 1

你可以将myVal更改为setter，并允许注册_监听器_或_订阅者_。然后，当值发生更改时，在setter内部调用监听器。

  1. class MyVariable {
  2.   static #subscribers = [];
  3.   static #myVal = 1;
  4.   
  5.   static set myVal(newVal) {
  6.     const oldVal = this.#myVal;
  7.     
  8.     if (newVal !== oldVal) {
  9.       this.#myVal = newVal;
  10.       this.#subscribers.forEach((listener) => {
  11.         listener(oldVal, newVal);
  12.       });
  13.     }
  14.   }
  15.   
  16.   static get myVal() {
  17.     return this.#myVal;
  18.   }
  19.   
  20.   static subscribe(listener) {
  21.     const idx = this.#subscribers.push(listener) - 1;
  22.     
  23.     // return an unsubscribe function
  24.     return () => {
  25.       this.#subscribers.splice(idx, 1);
  26.     };
  27.   }
  28. }
  30. const unsub = MyVariable.subscribe((oldVal, newVal) => {
  31.   console.log(`val is changed! From ${oldVal} to ${newVal}`);
  32. });
  34. MyVariable.myVal = 2;
  35. MyVariable.myVal = 3;
  37. unsub();
  38. MyVariable.myVal = 4; // no alert after unsubscribe
英文:

You can change myVal to a setter and also allow registering of listeners or subscribers. Then, when the value is changed, call the listeners from within the setter.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. class MyVariable {
  2.   static #subscribers = [];
  3.   static #myVal = 1;
  4.   
  5.   static set myVal(newVal) {
  6.     const oldVal = this.#myVal;
  7.     
  8.     if (newVal !== oldVal) {
  9.       this.#myVal = newVal;
  10.       this.#subscribers.forEach((listener) =&gt; {
  11.         listener(oldVal, newVal);
  12.       });
  13.     }
  14.   }
  15.   
  16.   static get myVal() {
  17.     return this.#myVal;
  18.   }
  19.   
  20.   static subscribe(listener) {
  21.     const idx = this.#subscribers.push(listener) - 1;
  22.     
  23.     // return an unsubscribe function
  24.     return () =&gt; {
  25.       this.#subscribers.splice(idx, 1);
  26.     };
  27.   }
  28. }
  30. const unsub = MyVariable.subscribe((oldVal, newVal) =&gt; {
  31.   console.log(`val is changed! From ${oldVal} to ${newVal}`);
  32. });
  34. MyVariable.myVal = 2;
  35. MyVariable.myVal = 3;
  37. unsub();
  38. MyVariable.myVal = 4; // no alert after unsubscribe

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月17日 09:45:26
  • 转载请务必保留本文链接：https://go.coder-hub.com/76268077.html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定