JavaScriptのMementoデザインパターンのパワー
43132 ワード
プログラミングのmementoパターンは、オブジェクトの状態を復元する方法が必要な場合に便利です.
JavaScript開発者として、我々は現代的なWebアプリケーションでは、現在、多くの状況でこの概念で動作します.
あなたがしばらくの間ウェブで開発していたならば、あなたは期間のことを聞いたかもしれませんhydration .
あなたが水和が何であるかについて、わからないならば、クライアント側がJSON、JavaScript、HTMLなどのどんなプログラミング言語にでも格納されている静的コンテンツをとって、ブラウザーが実行中に動くことができるコードにそれを変えるウェブ開発のテクニックです.その段階でJavaScriptが実行され、DOMがページ上で実行し始めるときにイベントリスナーをアタッチするようなことができます.
mementoパターンは似ています.このポストでは、実行時にmementoパターンを実装し、静的に何も格納しません.
あなたが働いたならば
JSON.parse and JSON.stringify チャンスは偶然あなたが以前にmementoを実装したかもしれません.通常、mementoパターンの完全な流れを実装する3つのオブジェクトがあります.
mementoは、受け手から渡され、取得される発信元の内部状態表現です.
管理人は1つの仕事を持っています:後で使われる記念品を保存するか、保存するために.それは格納されているmementoを取得することができますが、それは何も変異しません.
mementoデザインパターンの実装
パターンを説明しましたので、コードの練習をマスターします.
DOM要素としてインタラクティブな電子メール入力フィールドを作成します.我々は、我々のユーザーがすぐに彼らが
@ 送信する前のシンボル.入力フィールドがエラー状態になったときには、次のようになります.
これはHTMLマークアップです.
<!DOCTYPE html>
<html>
<head>
<title>Memento</title>
<meta charset="UTF-8" />
</head>
<body style="margin:50px;text-align:center;background:linear-gradient(
76.3deg,
rgba(44, 62, 78, 1) 12.6%,
rgba(69, 103, 131, 1) 82.8%
);height:250px;overflow:hidden;">
<input type="email" id="emailInput" style="padding:12px;border-radius:4px;font-size:16px;" placeholder="Enter your email"></input>
<script src="src/index.js"></script>
</body>
</html>
ここで最初にするのは、エラー状態に定数として2つの定数を定義し、エラーのスタイルに値として割り当てるためにコードを通して使用します.これは、複数回再利用されるので、コードを書くときには任意のタイプミスをしないようにするためです.
const ERROR_COLOR = 'tomato'
const ERROR_BORDER_COLOR = 'red'
const ERROR_SHADOW = `0px 0px 25px rgba(230, 0, 0, 0.35)`
const CIRCLE_BORDER = '50%'
const ROUNDED_BORDER = '4px'
ここで、エラー状態と正常状態とを切り替えるヘルパー関数を作成します.
const toggleElementStatus = (el, status) => {
if (status === 'error') {
return Object.assign(el.style, {
borderColor: ERROR_BORDER_COLOR,
color: ERROR_COLOR,
boxShadow: ERROR_SHADOW,
outline: 'red',
})
}
return Object.assign(el.style, {
borderColor: 'black',
color: 'black',
boxShadow: '',
outline: '',
})
}
const toggleBorderRadius = (el, preset) => {
el.style.borderRadius =
preset === 'rounded'
? ROUNDED_BORDER
: preset === 'circle'
? CIRCLE_BORDER
: '0px'
}
覚えておいて、創始者は自分自身の作成と記憶をトリガーとするインターフェイスを定義します.
function createOriginator({ serialize, deserialize }) {
return {
serialize,
deserialize,
}
}
これが本当の創始者です.
const originator = createOriginator({
serialize(...nodes) {
const state = []
nodes.forEach(
/**
* @param { HTMLInputElement } node
*/
(node) => {
const item = {
id: node.id || '',
}
item.tagName = node.tagName.toLowerCase()
if (item.tagName === 'input') {
item.isError =
node.style.borderColor === ERROR_BORDER_COLOR &&
node.style.color === ERROR_COLOR
item.value = node.value
}
item.isRounded = node.style.borderRadius === ROUNDED_BORDER
item.isCircle = node.style.borderRadius === CIRCLE_BORDER
state.push(item)
},
)
return state
},
deserialize(...state) {
const providedNode = state[state.length - 1]
if (providedNode) state.pop()
const nodes = []
state.forEach((item) => {
const node = providedNode || document.createElement(item.tagName)
if (item.tagName === 'input') {
if (item.isError) {
toggleElementStatus(node, 'error')
}
if (item.isRounded) {
toggleBorderRadius(node, 'rounded')
} else if (item.isCircle) {
toggleBorderRadius(node, 'circle')
}
node.value = item.value || ''
if (item.placeholder) node.placeholder = item.placeholder
if (item.id) node.id = item.id
}
nodes.push(node)
})
return nodes
},
})
serialize メソッドはDOMノードを受け取り、DOMノードの状態表現を返し、ローカルストレージ内に文字列として格納することができます.ローカルストレージは文字列を受け入れるので、これが必要です.たった今、我々はJavaScriptでこのパターンのピークです.シリアル化はこのパターンが私たちにとって重要である唯一の理由です.さもなければ、私たちは直接DOMノードをローカルストレージに保管し、それを一日呼び出すことができます.
インサイド
serialize 方法は、暗黙のうちに我々が表現を決定するのを助ける規則のカップルを定義しました.以下に行を示します.
if (item.tagName === 'input') {
item.isError =
node.style.borderColor === ERROR_BORDER_COLOR &&
node.style.color === ERROR_COLOR
item.value = node.value
}
item.isRounded = node.style.borderRadius === ROUNDED_BORDER
item.isCircle = node.style.borderRadius === CIRCLE_BORDER
if (item.tagName === 'input') {
item.style.borderColor = node.style.borderColor
item.style.color = node.style.color
item.value = node.value
}
item.style.borderRadius = node.style.borderRadius
使用
item.isError エラースタイルのプリセットを表すために、我々のプロジェクトが任意のスタイルを直接割り当てるのとは対照的に時間をかけてより複雑になるので、再利用できる興味深い再利用可能なmementosを作るためにより広い機会を開きます.たとえば、重要なフィールドが空白のままにされたときにフォームが送信されないようにするのが一般的です.フォームは、それが送信から自分自身を停止する必要があるいくつかの状態に移行する必要があります.
私たちがフォームのmementoを保存することになっているならば、我々はこの状態を回復するとき、ユーザーが「無効にされた」状態に戻されることを確実とする必要があります:
const originator = createOriginator({
serialize(...nodes) {
const state = []
nodes.forEach(
/**
* @param { HTMLInputElement } node
*/
(node) => {
const item = {
id: node.id || '',
}
item.tagName = node.tagName.toLowerCase()
if (item.tagName === 'input') {
item.isError =
node.style.borderColor === ERROR_BORDER_COLOR &&
node.style.color === ERROR_COLOR
item.value = node.value
}
item.isRounded = node.style.borderRadius === ROUNDED_BORDER
item.isCircle = node.style.borderRadius === CIRCLE_BORDER
if (node.textContent) item.textContent = node.textContent
state.push(item)
},
)
return state
},
deserialize(state) {
const nodes = []
if (!Array.isArray(state)) state = [state]
state.forEach((item) => {
const node = document.createElement(item.tagName)
if (item.style) {
Object.entries(item.style).forEach(([key, value]) => {
node.style[key] = value
})
}
if (item.isRounded) {
toggleBorderRadius(node, 'rounded')
} else if (item.isCircle) {
toggleBorderRadius(node, 'circle')
}
if (item.spacing) {
node.style.padding = item.spacing
}
if (item.id) node.id = item.id
if (item.tagName === 'input') {
if (item.isError) {
toggleElementStatus(node, 'error')
}
node.value = item.value || ''
if (item.placeholder) node.placeholder = item.placeholder
} else if (item.tagName === 'label') {
if (item.isError) {
node.style.color = ERROR_COLOR
}
} else if (item.tagName === 'select') {
if (item.options) {
item.options.forEach((obj) => {
node.appendChild(...originator.deserialize(obj, node))
})
}
}
if (item.textContent) node.textContent = item.textContent
nodes.push(node)
})
return nodes
},
})
const caretaker = createCaretaker()
function restore(state, container, { onRendered } = {}) {
let statusSubscribers = []
let status = ''
const setStatus = (value, options) => {
status = value
statusSubscribers.forEach((fn) => fn(status, options))
}
const renderMemento = (memento, container) => {
return originator.deserialize(memento).map((el) => {
container.appendChild(el)
if (memento.isError && status !== 'error') {
setStatus('error')
}
if (memento.children) {
memento.children.forEach((mem) => {
renderMemento(mem, el).forEach((childEl) => el.appendChild(childEl))
})
}
return el
})
}
const render = (props, container) => {
const withStatusObserver = (fn) => {
statusSubscribers.push((updatedStatus) => {
if (updatedStatus === 'error') {
// Do something
}
})
return (...args) => {
const elements = fn(...args)
return elements
}
}
const renderWithObserver = withStatusObserver(renderMemento)
const elements = renderWithObserver(props, container)
statusSubscribers.length = 0
return elements
}
const elements = render(state, container)
if (onRendered) onRendered(status, elements)
return {
status,
elements,
}
}
const container = document.getElementById('root')
const { status, elements: renderedElements } = restore(mementoJson, container, {
onRendered: (status, elements) => {
if (status === 'error') {
const submitBtn = container.querySelector('#submit-btn')
submitBtn.disabled = true
submitBtn.textContent = 'You have errors'
toggleElementStatus(submitBtn, 'error')
}
},
})
より高いレベルの視点でこれを見て、我々はその事実を利用します
isError フォームのようなものを表現し、概観することができます.少し必要なフィールドが欠落しているか、値が正しく入力されていない場合は、フォームを送信しないでください.その場合、フォームをユーザーに表示する前に送信ボタンを無効にすることで、フォームを対話的ではならないことを確認します.
あなたが気づいていないならば
restore オリジナルラップdeserialize 創始者からの方法私たちが今持っているのは、深い子供とレンダリング状態をサポートする、より高いレベルの抽象化されたmementoです
isError ) 我々の全部のmementoの.結論
そして、それはこのポストの終わりを終わります!私はあなたがこれが価値があることを発見し、将来的にもっと見てほしい!
私を見つけるmedium
Reference
この問題について(JavaScriptのMementoデザインパターンのパワー), 我々は、より多くの情報をここで見つけました https://dev.to/jsmanifest/the-power-of-memento-design-pattern-in-javascript-25d1テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol