Javascriptデザインパターンシステムの説明とアプリケーション-研究ノート1

オブジェクト指向の3つの要素：

継承、子クラスは親クラスを継承します
カプセル化、データ権限、および機密性
- 完全公開
- 保護はサブクラスに開かれています
- 自分に開かれたプライベート

注： es6はサポートしていません。tsまたはその他のオブジェクト指向言語を使用できます。
機能：結合を減らし、データとインターフェイスの権限管理を容易にします。es6は現在サポートしていません。_最初の属性は、通常、private

ポリモーフィズム、同じインターフェース、異なる実装
- 非常に少数のjsアプリケーション
- インターフェイス、書き換え、オーバーロード、およびJavaなどの言語の他の機能を組み合わせる必要があります。
  機能：サブクラスのオープン性と柔軟性を維持します。インターフェイス指向プログラミング。

なぜそれを使うのですか？
データ構造化、プログラミング：シンプルで抽象的な

UML类图

関係：

継承を示す一般化（白抜きの矢印）
参照を示す関連付け（実線の矢印）

設計原則

1.デザインとは？

おすすめの本：「UNIX / LINUXデザイン哲学」

説明：

機能を実装するためのアイデアまたは標準によると
機能は同じですが、実現するために異なる設計スキームを持つことができます
需要の増加に伴い、デザインの役割を反映させることができます

設計基準：

小さいのは美しい
各プログラムに1つのことだけをさせます
ラピッドプロトタイピング
移植性のために高効率を放棄する
プレーンテキストを使用してデータを保存する
ソフトウェアのレバレッジ効果を最大限に活用する（ソフトウェアの再利用）
シェルスクリプトを使用して、レバレッジと移植性を向上させます
必須のユーザーインターフェイスを避ける
各プログラムをフィルターと呼びます

小さなガイドライン：

ユーザーが環境をカスタマイズできるようにする
オペレーティングシステムのカーネルを小さく軽量にするようにしてください
小文字を使用し、できるだけ短くします。
沈黙は黄金色です;（例：数値を渡す必要があり、処理後に数値が出力されるメソッド。渡されるものまたは出力されるものが数値でない場合は、何も出力しないか、0を出力します）
部分の合計が全体よりも大きい
90％の解決策を模索します（2/8の法則：需要の80％を解決するためにコストの20％を費やします。需要の残りの20％は多くのコストがかかる可能性があり、完璧である必要はありません）

設計原則

5つのSOLID設計原則

S-単一責任の原則
O-オープンおよびクローズド原則（拡張のためにオープン、変更のためにクローズ）
L-Lieの順列原理
I-インターフェースの独立性の原則
D-依存性は原則につながります（具体的な実装ではなく、抽象化、インターフェースへの依存性）

S-単一責任の原則

プログラムは1つのことしかうまくできません
機能が複雑すぎる場合は、分離し、各部分を独立させてください

O-オープンおよびクローズド原則

拡張に対してオープン、変更に対してクローズ
需要が増える場合は、既存のコードを変更するのではなく、新しいコードを拡張してください

L-Lieの順列原理

サブクラスは親クラスをオーバーライドできます
親クラスが表示される可能性がある場合、子クラスが表示される可能性があります
JSではあまり使用されません（弱いタイプと継承はあまり使用されません）

I-インターフェースの独立性の原則

インターフェイスを単一で独立した状態に保ち、「ファットインターフェイス」を避けます（100％表示できないわけではありません）
JSには（typescriptを除いて）インターフェースがなく、使用量も少なくなります
単一責任の原則と同様に、ここではインターフェースに焦点を当てています

D依存は原則につながる

具象ではなく抽象化に依存するインターフェース指向プログラミング
ユーザーはインターフェースにのみ注意を払い、特定のクラスの実装には注意を払いません。
JSではあまり使用されていません（インターフェイスなし、ウィークタイプ）

注：フロントエンドのビジネスシナリオとJS文法の制限により、SOはより反映され、LIDはより少なくなります。

デザインパターン

23のデザインパターン

作成タイプ
- ファクトリパターン（ファクトリメソッドパターン、抽象ファクトリパターン、ビルダーパターン）
- シングルトンモード
- プロトタイプモード
構造タイプ
- アダプターモード
- デコレータモード
- エージェンシーモデル
- 外観モード
- ブリッジモード
- コンビネーションモード
- フライ級モデル
行動
- 戦略モード
- テンプレートメソッドモード
- オブザーバーモード
- イテレータモード
- Chain ofResponsibilityモデル
- コマンドモード
- メモモード
- 状態モード
- ビジターモード
- 中間モデル
- 通訳モード

デザインパターンを学ぶ方法は？

各設計の論理的根拠と意図を理解する
従来のアプリケーションを通じて実際の使用シナリオを体験してください
自分でコーディングするときはもっと考えて、できるだけ模倣するようにしてください。
キーワード：意図的なトレーニング

面接の質問の例

最初の質問：

タクシーをご利用の際は、専用タクシーまたは特急タクシーをご利用いただけます。すべての車にはナンバープレートの番号と名前があります。
車によって価格が異なります。急行列車は1キロあたり1元、特急は1キロあたり2元です。
旅が始まると、車両情報が表示されます。
旅行の最後に、タクシーの金額を表示します（旅行が5 kmであると仮定）

UMLクラス図を描き、ES6構文で例を記述します
ここに画像の説明を挿入

class Car {
    
    
  constructor (numPlate, name) {
    
    
    this.numPlate = numPlate   // 车牌
    this.name = name           // 车名
  }
}

class privateCar extends Car {
    
    
  constructor (numPlate, name) {
    
    
    super(numPlate, name)
    this.price = 2
  }
}


class expressTrain extends Car {
    
    
  constructor (numPlate, name) {
    
    
    super(numPlate, name)
    this.price = 1
  }
}

class Trip {
    
    
  constructor (car) {
    
    
    this.car = car
  }
  start () {
    
    
    console.log(`行程开始, 名称：${
      
      this.car.name}, 车牌号：${
      
      this.car.price}`)
  }
  end () {
    
    
    console.log(`行程结束，价格${
      
      this.car.price * 5}`)
  }
}

const car = new privateCar('k1234', '小蓝车')
const trip = new Trip(car)
trip.start()
trip.end()

2番目の質問：

3フロアに分かれた駐車場で、各フロアに100台分の駐車スペースがあります。
すべての駐車スペースは、車両の出入りを監視できます
車両が入る前に、各階の無料駐車スペースの数を表示します
車両が入ると、カメラはナンバープレートの番号と時刻を認識できます
車両が出ると、出口ディスプレイにナンバープレート番号と駐車時間が表示されます

UMLクラス図を描く
ここに画像の説明を挿入


//车辆
class Car {
    
    
  constructor(num) {
    
    
    this.num = num
  }
}

// 摄像头
class Camera {
    
    
  shot(car) {
    
    
    return {
    
    
      num: car.num,
      inTime: Date.now()
    }
  }
}

// 出口显示屏
class Screen {
    
    
  show(car, inTime) {
    
    
    console.log(`车牌号：${
      
      car.num}`)
    console.log(`停车时间 ${
      
      Date.now() - inTime}`)
  }
}

// 停车场
class Park {
    
    
  constructor(floors) {
    
    
    this.floors = floors || []
    this.camera = new Camera()
    this.screen = new Screen()
    this.carList = {
    
    } // 存储摄像头拍摄返回的车辆信息
  }
  in(car) {
    
    
    // 通过摄像头获取信息
    const info = this.camera.shot(car)
    // 停到某个停车位
    const i = parseInt(Math.random() * 100 % 100)
    const place = this.floors[0].places[i]
    place.in()
    info.place = place
    // 记录信息
    this.carList[car.num] = info
  }
  out(car) {
    
    
    // 获取信息
    const info = this.carList[car.num]
    // 将停车位清空
    const place = info.place
    place.out()
    // 显示时间
    this.screen.show(car, info.inTime)
    // 清空记录
    delete this.carList[car.num]
  }
  emptyNum() {
    
    
    return this.floors.map(floor => {
    
    
      return `${
      
      floor.index}层还有${
      
      floor.emptyPlaceNum()}个空余车位`
    }).join('\n')
  }
}

// 层
class Floor {
    
    
  constructor(index, places) {
    
    
    this.index = index
    this.places = places || []
  }
  emptyPlaceNum() {
    
    
    let num = 0
    this.places.forEach(p => {
    
    
      if (p.empty) {
    
    
        num += 1
      }
    })
    return num
  }
}


// 车位
class Place {
    
    
  constructor() {
    
    
    this.empty = true
  }
  in() {
    
    
    this.empty = false
  }
  out() {
    
    
    this.empty = true
  }
}


// 测试
// 初始化停车场
const floors = []
for(let i = 0; i < 3; i++) {
    
    
  const places = []
  for (let j = 0; j < 100; j++) {
    
    
    places[j] = new Place()
  }
  floors[i] = new Floor(i + 1, places)
}

const park = new Park(floors)


// 初始化车辆
const car1 = new Car(100)
const car2 = new Car(200)
const car3 = new Car(300)

console.log('第一辆车进入')
console.log(park.emptyNum())
park.in(car1)

console.log('第二辆车进入')
console.log(park.emptyNum())
park.in(car2)

console.log('第一辆车离开')
park.out(car1)
console.log('第二辆车离开')
park.out(car2)



console.log('第三辆车进入')
console.log(park.emptyNum())
park.in(car3)

console.log('第三辆车离开')
park.out(car3)