エンクロージャを通過するファイバモード

なぜ書くのか

JavaScriptファイルを作成する場合、グローバル・ステータス値に複数のJavaScriptファイルの共有または参照が必要になる場合があります.たとえば、複数のページからなるWebサービスがあるとします.このWebサービスの1ページにダークモードが適用されると、他のページにもダークモード適用の機能が提供される.
この場合、各ページに関連付けられたJSファイルは、各ページをレンダリングするときにダークモードを動的に適用するために状態値を共有する必要があります.このため、グローバル状態を適切に管理する必要があり、グローバル状態が変化すると、その状態を参照するオブザーバーに状態が変化したことを知らせる設計モードをオブザーバーモードと呼ぶ.
この論文では,ファイバモードを詳細に理解し,javascriptが提供するモジュールを介してファイバモードを実現することを試みる.

いわゆる傍観者モード

ウィキペディアによると、傍観者モードの核心は、1つ以上の傍観者(listener)と呼ばれるオブジェクトを観察対象オブジェクトに登録し、各傍観者が発生対象のイベントを受信して処理することである.
これは、あるオブジェクトのステータスを別のオブジェクトに通知し、そのオブジェクトが変更されたステータス値を知って処理動作を通知することを意味します.この設計モードの利点は、状態値が変化すると、参照状態値のファイバオブジェクトが状態値を失わないようにすることである.

ファイバモードとローカルストレージ

ローカルストレージの使用

通常、Cookieまたはローカルストレージを使用して、ブラウザにステータス値を格納します.前回のリリースで説明したように、ローカルストレージはCookieとは異なり、ユーザーが有効期限を指定していない場合、ブラウザは終了時に保持されるため、ログイン時にクライアントブラウザのステータス値を保存しやすくなります.
ただし、ページ間を切り替えるときは、毎回ローカルストレージを参照して、ページが暗いモードにあるかどうかを確認しますか?
もちろん、毎回サーバにデータを要求するわけではありませんが、個人的には、ローカルストレージで値を直接参照したり更新したりするたびに、データの安全を確保することはできないと思います.
ローカル・ストレージはグローバル・オブジェクトに登録されているオブジェクトであるため、値をどこでも参照または格納できます.したがって、コードで値を誤って変更すると、ローカル・ストレージの値を参照する他のオブジェクトに影響します.ここで重要なのは、予期せぬステータス値の変更によってエラーが発生した場合、エラーの検出やメンテナンスが困難であることです.
したがって、状態値は、初期レンダリング時にグローバルオブジェクトに格納され、その状態値を参照または変更できる権限を特定の関数に委任する方法がより安全であると考えられます.

キャビネットの使用

モジュールは、親スキャンプログラムの識別子を参照し、親関数よりもライフサイクルが長い関数を表します.これらのプロパティは、通常、セキュリティ・ストレージまたはリファレンス・ステータスに使用されます.
たとえば、以下の例では、上述した暗いモードを示します.

// state.mjs
const themeState = (()=>{
	let theme = localStorage.getItem('theme'); 
  
  	return {
      
      getTheme () {
       	return theme;  
      }
      
      setTheme(newState) {
        theme = newState; 
        localStorage.setItem('theme', newState); 
      } 
    }
})(); 

ローカルストレージに格納されたトピック情報をトピック識別子に格納し、その値を参照または変更できるcloser関数getThemeメソッドとsetThemeメソッドを持つオブジェクトをthemeStateに返します.
上のコードはインスタント実行関数で、最初のコードは評価され、一度だけ実行されます.このとき、識別子トピックは、getThemeメソッドとsetThemeメソッドのみを参照できるインスタント実行関数のディレクトリ環境に格納されるため、トピックステータス値は外部では変更できません.

傍観者モード

上記のコードを用いてファイバモードに適用しましょう.

const themeState = (()=>{
	let theme = localStorage.getItem('theme'); 
  	const observerCollection = []; 
  
  	return {
      
      getTheme () {
       	return theme;  
      },
      
      setTheme(newState) {
        theme = newState; 
        localStorage.setItem('theme', newState); 
        this.notifyAll(); 
      },
  
      registerObserver(observer){
      	if(!observerCollection.includes(observer)) 
          observerCollection.push(observer); 
      },
      
      unregisterObserver(observer){
        if(observerCollection.indexOf(observer) !== -1) 
          observerCollection.splice(observerCollection.indexOf(observer), 1); 
      }, 
      
      notifyAll(){
        observerCollection.forEach(observer => observer.theme = theme); 
      }
    }
})(); 

const observer = {
 	theme : 'white', 
  	notify() {
      		themeState.setTheme(this.theme); 
    	}
}

ファイバモードを実現するために、以下の機能を実現しました.

ObserverCollection:参照ステータス値のビジターリストを管理するオブジェクト

registerObserver:observerCollectionに傍観者リストを登録する方法

UnregisterObserver:observerCollectionで傍観者リストを削除する方法

notifyAll:ステータス値のステータスが変更されると、ロールは登録されたobserverオブジェクトのステータス値を変更します.

各傍観者は、自分の状態値(トピック情報)を有し、notify()メソッドにより状態値を更新し、その状態値が変化した場合(すなわち、トピック情報が変化した場合、他の傍観者にも同じトピック情報を持つように通知する).
ステータス値の変更は、モジュール関数setTheme()メソッドを呼び出してステータス値を変更します.setTheme()メソッドはステータス値を更新し、notifyAll()メソッドを呼び出してファイバセットに格納されているすべてのファイバオブジェクトのステータス値を変更します.

の最後の部分

もちろん、上のコードが良いコードであるとは確信できませんが、今はまだ学習の立場にあるので、コードを修正する必要があります.
しかし,傍観者モードを学習する過程で,最終的に,傍観者モードの核心は,一つのグローバル状態が複数のオブジェクトに参照されると,状態が変化すると,すべてのオブジェクトがその状態の変化を反映できるようにすることであると考えられる.
このほか,モジュールにより状態値を管理する方法など多様なグローバル状態を管理する方法が存在し,今後はこれに注目し学習する必要がある.