JS設計モードの定義と実現方法の浅分析
本論文の実例は、JS設計モードの定義と実現方法を述べている。皆さんに参考にしてあげます。具体的には以下の通りです。
前言
前回は一例のパターンを紹介しましたが、見たことがない子供はこのリンクを見られます。
JS設計モードの分析:単一例モード
今日はよくあるデザインの一つを言います。工場モードです。
工場モードはオブジェクトを作成する作成モードであり、DRY(Don't Repeat Yourself)原則に従う。このモードでは、コードは特定の入力または他の既定の規則に基づいて、どのタイプのオブジェクトを作成するかを自分で決定します。簡単に言えば、ダイナミックは必要なインスタンスオブジェクトを返します。
前回の例を回顧する
一例のパターンの例を使い続けましょう。ログツールロガー:
マルチロギング
もし私たちが今のコードがelectron環境をサポートするなら、ログはconsoneログでもいいし、fileログでもいいです。私たちは二つのタイプのloggerが必要です。
コンソルエロギング
使用工場
私たちはすでに二つのタイプのロゴを持っていますが、この2つのロゴのアプリは実際には同じです。プロジェクトに直接導入してももちろん使えます。ただし、毎回対応するタイプのモジュールを導入してから使用します。
上のif elseはそんなに優雅ではないですか?もっと多くの中のロゴタイプがあると面倒ですか?オブジェクトを使ってマッピングしてif elseを捨てて、ロゴを追加します。
締め括りをつける
工場モデルのメリットを振り返ってみます。動的にオブジェクトを作成します。実行時にオブジェクトの種類を決定する必要がある場合に使用できます。 抽象的:オブジェクト作成の詳細を実装し、ユーザーはオブジェクトのコンストラクタに接触しません。工場にどのようなオブジェクトが必要かを教えてください。 可用性/メンテナンス性:似たような対象を工場で管理し、統一的な作成インターフェースを提供し、開閉原則を満たし、多くのコードを修正する必要なく様々な種類のオブジェクトを簡単に追加することができます。 はい~!工場モデルはここまで紹介します。今度は装飾器のモデルを紹介します。
参考の内容 JavaScript Object Orinted Patterns:Factory Pattern 「JavaScript設計モード」 『JavaScript対象向けプログラミングガイド』 興味のある友達はオンラインHTML/CSS/JavaScriptコードを使ってツールを実行できます。http://tools.jb51.net/code/HtmlJsRun上記コードの運行効果をテストします。
もっと多くのJavaScriptに関する内容に興味がある読者は、当駅のテーマを見ることができます。「javascript対象向け入門教程」、「JavaScriptエラーとデバッグテクニックのまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」、「JavaScriptはアルゴリズムと技術の総括を遍歴します。」および「JavaScript数学演算の使い方のまとめ」
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。
前言
前回は一例のパターンを紹介しましたが、見たことがない子供はこのリンクを見られます。
JS設計モードの分析:単一例モード
今日はよくあるデザインの一つを言います。工場モードです。
工場モードはオブジェクトを作成する作成モードであり、DRY(Don't Repeat Yourself)原則に従う。このモードでは、コードは特定の入力または他の既定の規則に基づいて、どのタイプのオブジェクトを作成するかを自分で決定します。簡単に言えば、ダイナミックは必要なインスタンスオブジェクトを返します。
前回の例を回顧する
一例のパターンの例を使い続けましょう。ログツールロガー:
class Logger {
log (...args) {
console.log(...args);
}
}
上は一番核心のアプリです。使うたびにnew Logger()
を使って、一つのloggerオブジェクトを作成します。そして、使い方はconsole
と同じです。マルチロギング
もし私たちが今のコードがelectron環境をサポートするなら、ログはconsoneログでもいいし、fileログでもいいです。私たちは二つのタイプのloggerが必要です。
コンソルエロギング
// logger/console.js
class ConsoleLogger {
log (...args) {
console.log(...args)
}
}
export default ConsoleLogger
FileLogger
// logger/file.js
class FileLogger {
log (...args) {
dumpLog(...args)
}
}
export default FileLogger
ここはまずdumpLog
の具体的な実現を管理しなくてもいいです。それを知っているだけで、ログをファイルに書いてもいいです。使用工場
私たちはすでに二つのタイプのロゴを持っていますが、この2つのロゴのアプリは実際には同じです。プロジェクトに直接導入してももちろん使えます。ただし、毎回対応するタイプのモジュールを導入してから使用します。
console logger
を使用します
import ConsoleLogger from './logger/console'
const logger = new ConsoleLogger()
file logger
を使用します
import FileLogger from './logger/file'
const logger = new FileLogger()
煩わしいですか?他にもログタイプがあれば、リモートログなど、より多様な使い方ができます。ロゴモジュールの使い方を統一するために、工場モードを使います。index.js
を新設しましょう。
// logger/index.js
import ConsoleLogger from './console.js'
import FileLogger from './file.js'
function createLogger(type = 'console') {
if (type === 'console') {
return new ConsoleLogger()
} else if (type === 'file') {
return new FileLogger()
}
throw new Error(`Logger type not found: ${type}`)
}
export default createLogger
はい、これで私たちの使い方はこうなります。
import createLogger from './logger'
// console logger
const logger1 = createLogger('console')
// file logger
const logger2 = createLogger('file')
再構成してください上のif elseはそんなに優雅ではないですか?もっと多くの中のロゴタイプがあると面倒ですか?オブジェクトを使ってマッピングしてif elseを捨てて、ロゴを追加します。
// logger/index.js
import ConsoleLogger from './console.js'
import FileLogger from './file.js'
const loggerMap = {
console: ConsoleLogger,
file: FileLogger
}
//
function createLogger(options, type = 'console') {
const Logger = loggerMap[type]
if (Logger) {
return new Logger(options)
}
throw new Error(`Logger type not found: ${type}`)
}
上記のようなパッケージの方式は、実際にはSOLID
原則の
にも合致しています。すなわち拡張開放に対して、変更がオフになっています。logger
タイプを追加するたびに、一つのファイルを追加し、その後、構築器をloggerMap
に登録すればいいです。外の使い方は変わらないので、最小限の修正で機能の追加ができたらいいですね。締め括りをつける
工場モデルのメリットを振り返ってみます。
参考の内容
もっと多くのJavaScriptに関する内容に興味がある読者は、当駅のテーマを見ることができます。「javascript対象向け入門教程」、「JavaScriptエラーとデバッグテクニックのまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」、「JavaScriptはアルゴリズムと技術の総括を遍歴します。」および「JavaScript数学演算の使い方のまとめ」
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。