javascript - 了解更好的 Javascript OOP 架构

Question

当我阅读 Angularjs 的 UI 插件的一些示例时，我偶然发现了一些代码，这些代码表明我对 Javascript 的了解是相当可提高的：

以下是 Angular 提供者内部的一个类：

function Dialog(opts) {

            var self = this, options = this.options = angular.extend({}, defaults, globalOptions, opts);
            this._open = false;

            this.backdropEl = createElement(options.backdropClass);
            if(options.backdropFade){
                // ...
            }

            this.handleLocationChange = function() {
                self.close();
            };

            // more functions
        }

很简单。但在该类之外，还有原型函数，例如上面调用的close()

Dialog.prototype.open = function(templateUrl, controller){
            var self = this, options = this.options;

            // .. some code
        };

现在我不明白为什么该函数被声明为原型，而是handleLocationChange在类本身中。

我如何决定选择哪种方法？

完整的要点可以在这里找到

score 3 · Accepted Answer

考虑这两种情况：

Dialog.prototype.open = function...

Dialog.open = function....

第一种情况 - 通过调用创建的每个对象new Dialog()都将具有此open功能

第二种情况与对话框对象无关，将其视为静态函数。

编辑

在这里找到了一个很好的答案：javascript-class-method-vs-class-prototype-method

score 2 · Accepted Answer

我认为handleLocationChange是从注册监听器但不注册this上下文的事件触发对象调用的，所以当它被触发时你不能使用this它，因为它指的是handleLocationChange。为了克服这个问题，他们选择设置对 this 的闭包引用（= self 变量）并使用 self 调用其他实例函数。基本上，它存储了一个在创建时已知但在执行 handleLocationChange 时不知道的值。

这是一些显示问题的代码：

var eventSystem={
  events:{},
  add:function(eventname,fnCallback){
     if(!this.events[eventname]){
      this.events[eventname]=[];
     }
     this.events[eventname].push(fnCallback);
  },
  trigger:function(eventname){
    if(!this.events[eventname]){
      return;
    }
    var i=0;
    for(i=0;i<this.events[eventname].length;i++){
      this.events[eventname][i]();
    }
  }
};

var person=function(name){
  this.name=name;
};
person.prototype.sayName=function(){
  console.log("this is now:",this.toString());
    // logs this is now: function (){ console.log("this is now:...
    // so this is now the sayName function not the person instance
  console.log(this.name);//undefined: sayName doesn't have a name property
}
var jon=new person("jon");
eventSystem.add("sayname",jon.sayName);//add event and listener function
eventSystem.trigger("sayname");//trigger the event

这是解决设置闭包引用的方法

var eventSystem={
  events:{},
  add:function(eventname,fnCallback){
     if(!this.events[eventname]){
      this.events[eventname]=[];
     }
     this.events[eventname].push(fnCallback);
  },
  trigger:function(eventname){
    if(!this.events[eventname]){
      return;
    }
    var i=0;
    for(i=0;i<this.events[eventname].length;i++){
      this.events[eventname][i]();
    }
  }
};

var person=function(name){
  var self=this;// set closure ref to this
  this.name=name;
  this.sayName=function(){
    console.log(self.name);//use closure ref to get this
       // logs jon
  }
};
var jon=new person("jon");
eventSystem.add("sayname",jon.sayName);//add event and listener function
eventSystem.trigger("sayname");//trigger the event

这是对事件系统的修复以处理this上下文：

var eventSystem={
  events:{},
  add:function(eventname,fnCallback,thisRef){
     if(!this.events[eventname]){
      this.events[eventname]=[];
     }
     this.events[eventname].push({
       "callback":fnCallback,//store the event handler
       "thisRef":thisRef//store the this context
     });
  },
  trigger:function(eventname){
    if(!this.events[eventname]){
      return;
    }
    var i=0;
    for(i=0;i<this.events[eventname].length;i++){
      this.events[eventname][i].callback.call(
        this.events[eventname][i].thisRef);
    }
  }
};

var person=function(name){
  this.name=name;
};
person.prototype.sayName=function(){
  console.log("this is now:",this);//referring to person instance
    // with the name jon
  console.log(this.name);//logs jon
  console.log(this instanceof person);//true
}


var jon=new person("jon");
eventSystem.add("sayname",jon.sayName,jon);//add extra parameter for this ref
eventSystem.trigger("sayname");//trigger the event

上面使用的模式不是事件系统（认为它是 pulisher 订阅者），因为事件通常会在对象（按钮、输入、对话框）上触发或调用，但在更多事件系统（如实现）的情况下，很容易获得正确的this上下文，因为您在实例上或从实例（如 myButton 或 myDialog）触发事件。

有关事件系统的实现，请参见以下代码：

var eventSystem={
  add:function(eventname,fnCallback){
     if(!this.events[eventname]){
      this.events[eventname]=[];
     }
     this.events[eventname].push(fnCallback);
  },
  //change in trigger as it's passing the event object now
  trigger:function(event){
    if(!this.events[event.type]){
      return;
    }
    var i=0;
    for(i=0;i<this.events[event.type].length;i++){
      this.events[event.type][i](event);
    }
  },
  initES:function(){//set the instance variables needed
    this.events=this.events||{};
  }
};
function addProtos(o,protos){
  for(item in protos){
    o.prototype[item]=protos[item];
  }
}
var person=function(name){
  this.name=name;
  this.initES();//needed to initialeze eventsystem
};
// make person capable of storing event handlers
// and triggering them
addProtos(person,eventSystem);
person.prototype.askQuestion=function(){
  //asking a question will trigger an "answer" event
  this.trigger({type:"answer",target:this});
}
// handler for when jon will fire an answer event
function answerHandler(event){
  console.log("answer from:",event.target);
  console.log("name of the person:",event.target.name);
}

var jon=new person("jon");
jon.add("answer",answerHandler);//add event listener
jon.askQuestion();//triggers the answer event from within jon
jon.trigger({type:"answer",target:jon});//trigger the event externally

不知道为什么 Angular 选择使用闭包来“破坏”原型，因为示例表明还有其他选择。也许有人可以解释一下谁更熟悉 Angular。

score 2 · Accepted Answer

函数 open 将由使用 new Dialog() 创建的所有对象共享。对于不同的对象，handleLocationChange 将有所不同。

javascript - 了解更好的 Javascript OOP 架构

3 回答 3

Related

Reference