前端设计模式

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

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
前端设计模式_第1张图片
执行结果

你可能感兴趣的:(前端设计模式)