II. 構造的デザインパターン

構造設計パターン

1. 外観ベースのデザインパターン

function addEvent(dom, type, fn) {
 if (dom.addEventListener) {
 dom.addEventListener(type, fn, false)
 } else if (dom.attachEvent) {
 dom.attachEvent('on' + type, fn)
 } else {
 dom['on' + type] = fn
 }
}

function getEvent(event) {
 return event || window.event
}

function getTarget(event) {
 var event = getEvent(event)
 
 return event.target || event.srcElement
}

function preventDefault(event) {
 var event = getEvent(event)
 
 if (event.preventDefault) {
 event.preventDefault()
 } else {
 event.returnValue = false
 }
}

1. アダプターモード

var A = A || {}
A.g = function (id) {
 return document.getElementById(id)
}
A.on = function(id, type, fn) {
 // 渡されたパラメータが文字列の場合はidとして扱われ、そうでない場合はエレメント・オブジェクトとして扱われる。
 var dom = typeof id === 'string' ? this.g(id) : id
 
 // 標準DOM2レベル追加イベントモード
 if (dom.addEventListener) {
 dom.addEventListener(type, fn, false)
 
 // IE DOM2 レベル・アド・イベント・モード
 } else if (dom.attachEvent) {
 dom.attachEvent('on' + type, fn)
 
 // シンプルなイベント追加モード
 } else {
 dom['on' + type] = fn
 }
}

// パラメータ アダプタ
function doSomething(name, title, age, color, size, prize)
// vs
/**
 * obj.name: name
 * obj.title: title
 * obj.age: age
 * obj.color: color
 * obj.size: size
 * obj.prize: prize
*/
function doSomething(obj)

// データ適応
var arr = ['JS', 'book', ]
// vs
var obj = {
 name: '',
 type: '',
 time: '',
}
function arrayToObject(arr) {
 return {
 name: arr[0],
 type: arr[1],
 time: arr[2],,
 }
}

1. プロキシモード

// ウェブマスター統計
var Count = (function() {
 // キャッシュイメージ
 var _img = new Image()
 // リターン統計機能
 return function(params) {
 // 統計リクエスト文字列
 var str = 'http://ww.***./.if?'
 // スプライシング要求文字列
 for (var i in params) {
 str += i '=' params[i]
 }
 
 // 統計要求を送信する
 _img.src = str
 }
})()
Count({ num: 10 })

1. デコレーター・パターン

//  
function decorator(input, fn) {
 // イベントソースを取得する
 var input = document.getElementById(input)
 
 // イベントソースがすでにイベントにバインドされている場合
 if (typeof input.onclick === 'function) {
 // キャッシュ・イベント・ソース オリジナル・コールバック関数
 var oldClickFunc = inputx.onclick
 // イベント・ソースに新しいイベントを定義する
 input.onclick = {
 // イベントソース
 oldClickFunc()
 // イベントソースの新しいコールバック機能
 fn()
 }
 } else {
 // イベントソースがイベントにバインドされていない場合、イベントソース用の新しいコールバック関数を直接追加する。
 input.onclick = fn
 }
 
 // do otherthing
}

1. ブリッジモード

var spans = document.getElementByTagName('span')
spans[0].onmouseover = function() {
 this.style.color = 'red'
 this.style.background = '#ddd'
}
spans[0].onmouseout = function() {
 this.style.color = '#333'
 this.style.background = '#f5f5f5'
}
spans[1].onmouseover = function() {
 this.getElementByTagName('strong')[0].style.color = 'red'
 this.getElementByTagName('strong')[0].style.background = '#ddd'
}
spans[1].onmouseout = function() {
 this.getElementByTagName('strong')[0].style.color = '#333'
 this.getElementByTagName('strong')[0].style.background = '#f5f5f5'
}

// 共通点の抽出
//  
function changeColor(dom, color, bg) {
 dom.style.color = color
 dom.style.background = bg
}
// ビジネスとビジネスロジックの橋渡し
var spans = document.getElementByTagName('span')
spans[0].onmouseover = function() {
 changeColor(this, 'red', '#ddd')
}
spans[0].onmouseout = function() {
 changeColor(this, '#333', '#f5f5f5')
}
spans[1].onmouseover = function() {
 changeColor(this.getElementByTagName('strong')[0], 'red', '#ddd')
}
spans[1].onmouseout = function() {2
 changeColor(this.getElementByTagName('strong')[0], '#333', '#f5f5f5')
}

// ダイバーシティオブジェクト
// 多次元変数クラス
// モーションユニット
function Speed(x, y) {
 this.x = x
 this.y = y
}
Speed.prototype.run = function() {
 console.log('run')
}
// カラーリングユニット
function Color(cl) {
 this.color = cl
}
Color.prototype.draw = function() {
 console.log('draw')
}
// トランスユニット
function Shape(sp) {
 this.shape = sp
}
Shape.prototype.change = function() {
 console.log('changeShape')
}
// スピーキングユニット
function Speek(wd) {
 this.word = wd
}
Speek.prototype.say = function() {
 console.log('speek')
}
// ボールを作る
function Ball(x, y, c) {
 this.speed = new Speed(x, y)
 this.color = new Color(c)
}
Ball.prototype.init = function() {
 this.speed.run()
 this.color.draw()
}
// 人間を作る
function People(x, y, f) {
 this.speed = new Speed(x, y)
 this.speek = new Speek(f)
}
People.prototype.init = function() {
 this.speed.run()
 this.speek.say()
}
//  
var p = new People()
p.init()

1. 複合モード