デザインパターン
日々の開発では、開発スキルに多くの注意を払いますが、優れた開発スキルがあれば、現状の問題を半分の労力で解決することができます。
では、これらのヒントはどのようにして生まれるのでしょうか？
デザインパターンといえば、実は、日常生活のはじめに使われることが多いのですが、解決策と対応するデザインパターンの名前をご存じない方も多いのではないでしょうか。
デザインパターンの役割を学ぶ
ソフトウェア設計において、パターンは数多くの実際のプロジェクトで実証されてきた最良のソリューションのひとつです。これらのパターンに慣れ親しんだプログラマーは、特定のパターンを理解するための条件反射を自然に形成します。適切なシナリオが発生すると、現在の問題に対処するための対応するパターンをすぐに見つけることができます。
シングルトンモード
定義: クラスがグローバルにアクセス可能な唯一のインスタンスを持つことを保証します。
グローバル変数はシングルトンではありませんが、JavaScriptではよくグローバル変数として使われます。
シングルトン・パターンの両方のポイントを満たしているからです：
- 作成されるグローバル変数は一意です。
- この変数インスタンスにグローバルにアクセスできます。
// login.js
var loginInfo = {
username: '',
token: '',
.......
}
//login.vue
import logins from './login.js'
logins.name = this.username
しかし、ネーミングスペースが汚染されやすいという欠点もあります。
これ以上のグローバル変数を定義すると、定義されたグローバル変数が上書きされ、不要なバグが発生します。
名前空間の汚染にどう対処しますか？
どのように処理されるのですか？
- 名前空間
- 2.クロージャを使ったプライベート変数のカプセル化
名前空間
対象の独立変数の形式：
// login.js
export default var loginInfo = {
names:'' ,
token: '',
setName: function (name) {
this.names = name
},
getName: function () {
return this.name
}
}
//login.vue
import logins from './login.js'
logins.token = this.token
クロージャによるプライベート変数のカプセル化
いくつかの変数をクロージャ内部にカプセル化し、外部と通信するためのいくつかのインターフェースのみを公開します。
内部で定義されたプライベート変数には外部からアクセスできないため、グローバル・コマンドによる汚染を避けることができます。
var user = (function () {
//外部からは_name _age
var _name = ' ,
_age = 22;
return {
//これは外部との通信用に予約されている
getUserInfo: function () {
console.log(`名前${_name}, :${_age}`)
}
}
})()
user.getUserInfo()
汎用不活性シングルトンパターン
この実行の場合、操作ステップ / DOM を実行します。
メリット：パフォーマンスの節約。
シナリオ1
時には、例えば、ログインポップアップウィンドウは、ホームページをロードしながら、それは、このページのすべてのDOMをレンダリングする場合は、ホームページのDOMコンテンツは、読み込み速度がそれに応じて遅くなり、DOMの多くは、事前にレンダリングする必要はありませんされています。
この時点で、この問題は、不活性シングルトンパターンを介して解決することができます例えば、ログインボタンをクリックするだけで、ログインポップアップDOMを作成するために、クリックの状態を記録し、次の時間を開きたい場合は、単に表示属性のDOMスタイルを変更することができます。 これは、最初のページのロード時間を節約し、ページのパフォーマンスが向上します。
// グローバルな汎用シングルトン・パターンを定義する
var getSingle = function (fn) {
var result;
return function () {
return result || (result = fn.apply(this, arguments));
}
}
// ログインウィンドウを作成する
var createLoginLayer = function() {
var div = document.createElement('div')
div.innerHTML = 'ログインボックス
div.style.display = 'none'
document.body.appendChild(div)
return div
}
// シングルトンのログインボックスを作成する
var createSingleLoginLayer = getSingle(createLoginLayer);
document.getElementById('btn').onclick = () => {
// シングルトン・モードで返されたログイン・ボックスを取得する
var loginLayer = createSingleLoginLayer();
// スタイルを変更する
loginLayer.style.display = 'block'
}
シナリオ2
サードパーティのページを読み込むための独自のiframeを作成します。
var createSingleIframe = getSingle( function() {
var iframe = document.createElement('iframe');
document.body.appendChild(iframe)
return iframe
})
document.getElementById('redirect').onclick = () => {
var iframeLayer = createSingleIframe();
iframeLayer.src = 'http://..com'
}
