#yyds干货盘点#three.js源码解读-EventDispatcher

Posted 2022-02-14 歆冉

在three.js中，发现了大量使用Object.assign和Object.create方法，并且很多构造函数都有继承EventDispatcher,现针对EventDispatcher方法研究一下

1.源码

function EventDispatcher()  // 构造函数
Object.assign(EventDispatcher.prototype, 

  addEventListener: function (type, listener) 

    if (this._listeners === undefined) 
      this._listeners = ;
    

    var listeners = this._listeners;

    if (listeners[type] === undefined) 

      listeners[type] = [];

    

    if (listeners[type].indexOf(listener) === -1) 

      listeners[type].push(listener);

    

  ,

  hasEventListener: function (type, listener) 

    if (this._listeners === undefined) 
      return false;
    

    var listeners = this._listeners;

    return listeners[type] !== undefined && listeners[type].indexOf(listener) !== -1;

  ,

  removeEventListener: function (type, listener) 

    if (this._listeners === undefined) 
      return;
    

    var listeners = this._listeners;
    var listenerArray = listeners[type];

    if (listenerArray !== undefined) 

      var index = listenerArray.indexOf(listener);

      if (index !== -1) 

        listenerArray.splice(index, 1);

      

    

  ,

  dispatchEvent: function (event) 

    if (this._listeners === undefined) 
      return;
    

    var listeners = this._listeners;
    var listenerArray = listeners[event.type];

    if (listenerArray !== undefined) 

      event.target = this;

      var array = listenerArray.slice(0);

      for (var i = 0, l = array.length; i < l; i++) 

        array[i].call(this, event);

      

    

  

);

function Texture()  // 构造函数

Texture.prototype = Object.assign(Object.create(EventDispatcher.prototype), 
  test: function() 
    console.log(test)
  
)

2.测试代码

const tt = new Texture()
console.log(tt, tt)

3.核心代码说明

如果作如下代码修改

此时的输出结果如下:

4.总结

• three.js中很多构造函数都会继承EventDispatcher构造函数
• Object.assign方法的使用
• Object.create方法的使用
• three.js中的事件监听和其他的框架都是类似的,例如jQuery也是如此来处理,都是相同的原理