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

千金一刻莫空度,老大无成空自伤。这篇文章主要讲述#yyds干货盘点#three.js源码解读-EventDispatcher相关的知识,希望能为你提供帮助。
在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.核心代码说明
如果作如下代码修改

此时的输出结果如下:
【#yyds干货盘点#three.js源码解读-EventDispatcher】
4.总结
  • three.js中很多构造函数都会继承EventDispatcher构造函数
  • Object.assign方法的使用
  • Object.create方法的使用
  • three.js中的事件监听和其他的框架都是类似的,例如jQuery也是如此来处理,都是相同的原理

    推荐阅读