js常見的設計模式

1.單例模式

var singleParten = (function(){
    var singgle;
    var init = function(){
        console.log(66666)
        // return {
        // }
    }
    return {
        getSingle:function(){
            if(!singgle){
                singgle = init();
            }
            return singgle;
        }
    }
})()

var singgle1 = singleParten.getSingle()
console.log(singgle1)
var singgle2 = singleParten.getSingle()
console.log(singgle2)

console.log(singgle1 === singgle2)

// 實現單體模式彈窗

var createWindow = (function(){
    var div;
    return function(){
        if(!div) {
            div = document.createElement("div");
            div.innerHTML = "我是彈窗內容";
            div.style.display = 'none';
            document.body.appendChild(div);
        }
        return div;
    }
})();
document.getElementById("Id").onclick = function(){
    // 點選後先建立一個div元素
    var win = createWindow();
    win.style.display = "block";
}

2.建構函式模式

function constructorParten(name, age){
    this.name = name;
    this.age = age;
    this.say = function(){
        return this.name
    }
}
var perple = new constructorParten("張三",20)
console.log(perple.say())

3.工廠模式

function factoryParten(opts){
    var obj = new Object();
    obj.name = opts.name;
    obj.adress = opts.adress;
    obj.job = function(){
        return obj.name
    }
    return obj;
}
var factory1 = new factoryParten({name:'鋼鐵廠',adress:'北京市'})
console.log(factory1.job())

4.模組模式(模組模式使用了一個返回物件的匿名函式。在這個匿名函式內部，先定義了私有變數和函式，供內部函式使用，然後將一個物件字面量作為函式的值返回，返回的物件字面量中只包含可以公開的屬性和方法。這樣的話，可以提供外部使用該方法；由於該返回物件中的公有方法是在匿名函式內部定義的，因此它可以訪問內部的私有變數和函式。)

var modelParten = (function(){
    var name = "lalala";
    var modelsOne = function(){
        return this.name;
    }
    var modelsTwo = function(){
        console.log("this is a modelParten demo")
    }
    return {
        modelsOne:modelsOne,
        modelsTwo:modelsTwo
    }
})()

console.log(modelParten.modelsOne())
console.log(modelParten.modelsTwo())

//圖片預載入
var myImage = (function(){
    var imgNode = document.createElement("img");
    document.body.appendChild(imgNode);
    return function(src){
        imgNode.src = src; 
    }
})();

5.代理模式

var ProxyImage = (function(){
    var img = new Image();
    img.onload = function(){
        myImage(this.src);
    };
    return function(src) {
        myImage("");
        img.src = src;
    }
})();
// 呼叫方式
ProxyImage("");

6.組合繼承

function Parents(){
    this.name = name;
    this.age = age;
}
function Child(){
    Parents.call(this)
    this.name = name;
}
Child.prototype = new Parents();
Child.prototype.constructor = Child;

var child1 = new Child()