javascript的設計模式有哪些？

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

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

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

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

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

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

    //實例化對象
    var page=new Page();

3原型模式

function Person() {

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

4單例模式
一個類僅提供一個實例  并且暴露出一個全局訪問點
//設置多個類對象    將單例方法抽為一個共享方法

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) {
                //實例化對象的

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

    console.log(getInstance(function () {
        //這個匿名函數(shù)內部返回一個對象
        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) {
        //這個匿名函數(shù)內部返回一個對象
        var animal = new Animal(name);  //剛才在這里直接給name賦值了
        return animal;
    });

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

    //call  apply  替換對象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的設計模式的詳細內容了，看完之后是否有所收獲呢？如果想了解更多相關內容，歡迎關注億速云行業(yè)資訊！