JavaScript構造設計モード---ブリッジモード

参考書:JavaScript設計モードブリッジモードの最も主要な特徴は、(要素結合などのイベント)レイヤーと抽象層(修飾ページUI論理など)が分離され、二つの部分が独立して変化し、必要な変更が対象内部の修正をもたらすことを避けることである.ブリッジモードは主に機構間の構造であることがわかる.ページコンポーネントの効果例

//     --    （  ）
function changeColor(dom, color, bg) {
    dom.style.color = color;
    dom.style.backgroundColor = bg;
}
//    --    
demos[0].onclick = function () {
    changeColor(this, 'red', 'purple')
}
demos[0].onmouseover = function () {
    changeColor(this, '#ddd', 'green')
}

多様なオブジェクトブリッジモードの強みはここだけでなく、多次元の変化にも適用されます.例えば私達がcanvasランニングゲームを書く時、ゲームの中の人に対して、ポケモン、ボールなどの一連の実物はすべて動作ユニットがあって、彼らのすべての動作は実現して方式はまたすべて統一で、例えば人、精霊とボールの運動は実は位置座標xで、yの変化、ボールの色と精霊の色の製作方式はすべて似ています.このように、私たちはこれらの多次元変化部分を抽象的な運動ユニットとして保存することができますが、実体を作るときに必要な抽象的な動作ユニットごとにブリッジを通してリンクして動作します.このように彼らは相互に影響を与えず、この方式は彼らの間の結合を低下させた.

//     
//    
function Speed(x, y) {
    this.x = x;
    this.y = y;
}
Speed.prototype.run=function(){
    console.log('    ');
}
//    
function Color(cl) {
    this.color = cl;
}
Color.prototype.draw=function(){
    console.log('    ');
}
//    
function Shape(sp) {
    this.shape = sp;
}
Shape.prototype.change=function(){
    console.log('    ');
}
//    
function Speak(wd) {
    this.word = wd;
}
Speak.prototype.say=function(){
    console.log('ta ');
}

そこで私たちは球技を創建しました.運動＋着色です.

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, s) {
    //      
    this.speed = new Speed(x, y);
    this.speak = new Speak(s);
}
People.prototype.init=function(){
    //    
    this.speed.run();
    this.speak.say();
}

精霊:運動＋着色＋話

function Spirite(x, y, c, s) {
    //      
    this.speed = new Speed(x, y);
    this.speak = new Speak(s);
    this.color = new Color(c);
}
Spirite.prototype.init = function () {
    //    
    this.speed.run();
    this.speak.say();
    this.color.draw();

}

テスト

var b = new Ball(10, 20, 'red');
b.init();
var p = new People(10, 20, 'I said: ');
p.init();
var s = new Spirite(10, 20, 'red','I said: ');
s.init();