JS設計モードの一例モード定義と実現方法の浅分析

3633 ワード

本論文の例は、JS設計モードの一例として、モード定義と実装方法を述べている。皆さんに参考にしてあげます。具体的には以下の通りです。
良い設計モードは、コードの可読性を著しく向上させ、複雑さと維持コストを低減させることができる。いくつかの文章を通して、よくあるデザインや実用的なデザインをわかりやすく説明したいと思います。
今日はまず一番簡単なパターンから始めます。
本文のコード例はES 6文法を使用します。必要でない詳細をできるだけ簡略化します。
概念
シングルモデルは作成型の設計モードに属しており、単一のオブジェクトまたはクラスの単一のインスタンスしか作成できないことを制限しています。
通常、このモードを使用するのは、アプリケーション全体の状態を制御するためである。日常的な開発において、我々が遭遇したシングルモデルは、VuexにおけるStore、Vueのルートインスタンス、単一のオブジェクトのES 6モジュールなどを任意に導き出すことができる。
文字数の書き方
一番簡単な例は実は以下のようです。


const cat = {
  name: 'mi',
  age: 4
}

const文法を知っている仲間はみんな知っています。この猫は再割り当てされてはいけません。でも、その中の属性は可変です。
可変ではないオブジェクトが欲しい場合：


const cat = {
  name: 'mi',
  age: 4
}

Object.freeze(cat);

このようにして、この猫の属性を追加または修正することはできません。凍った猫になります。
モジュールで使用する場合、上記の表記はグローバルスコープを汚染しませんが、固定されたオブジェクトを直接生成するのには柔軟性が足りません。
常用書き方
対照的に、単一の例を達成するためにクラスまたは工場法を使用することがより一般的である。Loggerという種類があると仮定して、Consoleと同じAPIを持っています。
クラス別の例
このような使い方をしたいなら、


const logger = new Logger();
logger.log('msg');

//        1000    

const logger2 = new Logger();
logger.log('new msg');

logger === logger2; // true

つまり、newはLoggerを何回も繰り返していますが、それは同じ例を返します。
一番実用的な実現方法は以下の通りです。


class Logger {
  constructor () {
    if (!Logger._singleton) {
      Logger._singleton = this;
    }
    return Logger._singleton;
  }
  
  log (...args) {
    console.log(...args);
  }
}

export default Logger;

上記のように、一例のオブジェクトをコンストラクタに格納しました。このようにすれば、new Logger回でも同じロギングの例が返ってきます。
ここでは、newキーの後のコンストラクターが明示的にオブジェクトを返すと、new式がオブジェクトに戻ります。
具体的には「知らないJavaScript（上巻）」のnewバインディング関連の章を参照してください。
工場一覧例
newキーワードを使うのが嫌なら、工場方法を使って単例の対象に戻ります。


let logger = null

class Logger {
  log (...args) {
    console.log(...args);
  }
}

function createLogger() {
  if (!logger) {
    logger = new Logger();
  }
  return logger;
}

export default createLogger;

上のコードは、モジュール内にログガーのインスタンスをキャッシュしたものと相当します。工場法を導出しました。このような書き方はモジュール化コードにおいて一般的であり、工場法はパラメータを受け取って単例オブジェクトを初期化することもできる。
今日の内容はよく分かります。その中の一例の書き方も筆者がよく使う方法です。
次は工場モデルの応用について具体的に説明します。
参考の内容

「JavaScript設計モード」

『JavaScript対象向けプログラミングガイド』

『知らないJavaScript（上巻）』

Working with Singletons in JavaScript

興味のある友達はオンラインHTML/CSS/JavaScriptコードを使ってツールを実行できます。http://tools.jb51.net/code/HtmlJsRun上記コードの運行効果をテストします。
もっと多くのJavaScriptに関する内容に興味がある読者は、当駅のテーマを見ることができます。「javascript対象向け入門教程」、「JavaScriptエラーとデバッグテクニックのまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」、「JavaScriptはアルゴリズムと技術の総括を遍歴します。」および「JavaScript数学演算の使い方のまとめ」
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。

JS設計モードの定義と実現方法の浅分析

JavaScriptブール演算子の原理使用解析