今天小編就為大家?guī)硪黄榻Bjavascript的設(shè)計(jì)模式的文章。小編覺得挺實(shí)用的，為此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

堅(jiān)守“ 做人真誠 · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價(jià)值觀，專業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都成都辦公空間設(shè)計(jì)小微創(chuàng)業(yè)公司專業(yè)提供成都企業(yè)網(wǎng)站建設(shè)營銷網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺設(shè)計(jì)、底層架構(gòu)、網(wǎng)頁布局、功能開發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。

1.工廠模式
優(yōu)點(diǎn)  避免創(chuàng)建多次對(duì)象

function Factory(n,s){
        //創(chuàng)建一個(gè)對(duì)象
        var obj={};
        obj.name=n;
        obj.sex=s;
        obj.sleep=function (){
            return this.name+"睡覺";
        }
        return obj;
    }

    console.log(Factory("李四", "男"));

2構(gòu)造函數(shù)模式
接定義函數(shù)    this（指針）  指向當(dāng)前實(shí)例的對(duì)象
里面的方法和屬性直接寫  this.***
沒有明顯的創(chuàng)建對(duì)象  沒有返回值

function Page(){
        this.nowpage=1;
        this.totlepage=20;
        this.data=null;
        this.createpageLi=function (){
            console.log("構(gòu)造函數(shù)模式的方法");
        }
    }

    //實(shí)例化對(duì)象
    var page=new Page();

3原型模式

function Person() {

    }
    //原型獨(dú)享的屬性和方法的
    Person.prototype = {
        name: "",
        sex: "",
        sleep: function (m) {
            return this.name + "睡覺" + m;
        }
    }
    var per1 = new Person();
    per1.name = "張三";
    per1.sex = "男";
    console.log(per1);

4單例模式
一個(gè)類僅提供一個(gè)實(shí)例  并且暴露出一個(gè)全局訪問點(diǎn)
//設(shè)置多個(gè)類對(duì)象    將單例方法抽為一個(gè)共享方法

function Person(name) {
        this.name = name;
    }
    Person.prototype.getName = function () {
        return this.name;
    }
    var getInstance = function (callback) {
        var instance = null;
        //注意里面的閉包
        return function () {//不寫形參  直接使用arguments  集合列表

            if (!instance) {
                //實(shí)例化對(duì)象的

                /*callback 是回調(diào)函數(shù)  返回一個(gè)對(duì)象
                 apply  call    替換對(duì)象的時(shí)候可以直接執(zhí)行函數(shù)*/
                instance = callback.apply(this, arguments);
            }
            return instance;
        }
    }

    console.log(getInstance(function () {
        //這個(gè)匿名函數(shù)內(nèi)部返回一個(gè)對(duì)象
        var per = new Person("李四");
        return per;
    })().getName());

    function Animal(name) {
        this.name = name;
    }
    Animal.prototype.getName = function () {
        return this.name;
    }

    var method = getInstance(function (name) {
        //這個(gè)匿名函數(shù)內(nèi)部返回一個(gè)對(duì)象
        var animal = new Animal(name);  //剛才在這里直接給name賦值了
        return animal;
    });

    console.log(method("貓咪").getName());
    console.log(method("小黑").getName());

    //call  apply  替換對(duì)象this的  傳遞參數(shù)  call 參數(shù)是this ,序列參數(shù)    apply 參數(shù)this ,集合參數(shù)

5策略模式
策略模式是將算法和 算法的使用分離

//策略
    var levelable={
        S:8,
        A:6,
        B:4,
        C:2,
        D:0
    }
    //策略使用   策略集合
    var levelScore={
        baseScore:70,
        S:function (){

            return this.baseScore+levelable["S"];
        },
        A:function (){
            return this.baseScore+levelable["A"];
        },
        B:function (){
            return this.baseScore+levelable["B"];
        },
        C:function (){
            return this.baseScore+levelable["C"];
        },
        D:function (){
            return this.baseScore+levelable["D"];
        }
    }
    //得分情況
    function getScore(score,level)
    {   levelScore.baseScore=score;
        console.log(levelScore[level]());
    }

    getScore(60,"S");

以上就是javascript的設(shè)計(jì)模式的詳細(xì)內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊！