前端設計模式

1,寫出 構造函數模式、混合模式、模塊模式、工廠模式、單例模式、發布訂閱模式的范例。

//單例模式范例
var  Car = (function(){
    var instance;
    function init() {
        //私有的變量和函數
        var speed = 0;
        return {
            //定義公共的屬性和方法
            getSpeed: function(){
                return speed;
            },
            setSpeed: function( s ){
               speed = s;
            }
        };
    }
    return {
        getInstance: function() {
            if (!instance) {
                instance = init();
            }
            return instance;
        }
    };
}());
var car = Car.getInstance();
var car2 = Car.getInstance();
car === car2;
//工廠模式 ---通過函數創造一個對象 將其return出來
    function createPeople(age,name,sex) {
        var o= new Object();
        o.age=age;
        o.name=name;
        o.sex=sex;
        return o;
    }
    var p1=createPeople(18,"zhangsan","M"),
            p2=createPeople(20,"lisi","F");
    console.log(p1,p2)
//模塊模式
var People=(function () {
        var name="laomingzi";
        return{
            changeName: function (newName) {
                name=newName;
            },
            sayName:function () {
                console.log(name)

            }
        }
    }());
    People.sayName();
    People.changeName("xinmingzi");
    People.sayName();

    // 常見形式

   var Car=(function () {
       var carName="奔馳";
       function sayCarName() {
           console.log(carName)
       }
       return{
          sayNameFunc:sayCarName
       }

   }());
    Car.sayNameFunc()
//發布訂閱模式
//無傳參模式
  EventCenter=(function () {
      var events={};
      return{
          on:function (evt,handle) {
              events[evt]=events[evt]||[];
              events[evt].push(handle);
          },
          fire:function (evt) {
              if (!events[evt]){ console.log("未綁定此事件"); return}
              for(var i=0;i<events[evt].length;i++){
                  events[evt][i]()
              }
          },
          unbind:function (evt) {
              delete events[evt];
          }
      }

  }())

//有參數模式

  EventCenter=(function () {
      var events={};
      return{
          on:function (evt,handle) {
              events[evt]=events[evt]||[];
              events[evt].push({handle:handle});
          },
          fire:function (evt,arg) {
              if (!events[evt]){ console.log("未綁定此事件"); return}
              for(var i=0;i<events[evt].length;i++){
                  events[evt][i].handle(arg)
              }
          },
          unbind:function (evt) {
              delete events[evt];
          }
      }
  }());

2,使用發布訂閱模式寫一個事件管理器,可以實現如下方式調用

EventManager.on('text:change', function(val){
    console.log('text:change...  now val is ' + val);  
});
EventManager.fire('text:change', '饑人谷');
EventManager.off('text:change');
var Event = (function (){
        var events = {};

        function on(evt, handle){
            events[evt] = events[evt] || [];
            events[evt].push({
                handle:handle
            });
        };

        function fire(evt,args){
            if(!events[evt]){
                return
            }

            for(var i=0; i<events[evt].length; i++){
                events[evt][i].handle(args);
            }
        };

        function off(){
            delete events[evt]
        };

        return {
            on: on,
            fire: fire,
            off: off
        }

    })()

    Event.on('change', function(val){
        console.log('change…… now val is' + val);
    });
    Event.fire('change', '饑人谷');

}
執行結果
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1. 寫出 構造函數模式、混合模式、模塊模式、工廠模式、單例模式、發布訂閱模式的范例。 構造函數模式 寫一個函數,...
    蕭雪圣閱讀 258評論 0 0
  • 1.寫出 構造函數模式、混合模式、模塊模式、工廠模式、單例模式、發布訂閱模式的范例。 構造函數胡模式(constr...
    饑人谷_NewClass閱讀 402評論 0 1
  • 寫出 構造函數模式、混合模式、模塊模式、工廠模式、單例模式、發布訂閱模式的范例。 工廠模式(factory) 缺點...
    放風箏的小小馬閱讀 361評論 0 2
  • 1.寫出 構造函數模式、混合模式、模塊模式、工廠模式、單例模式、發布訂閱模式的范例。 構造函數模式 構造函數模式是...
    hellowade閱讀 275評論 0 0
  • 一、構造函數模式、混合模式、模塊模式、工廠模式、單例模式、發布訂閱模式的范例 單例模式單例就是保證一個類只有一個實...
    任少鵬閱讀 392評論 0 0