当前位置：网站首页>Yyds dry goods inventory three JS source code interpretation eventdispatcher

Yyds dry goods inventory three JS source code interpretation eventdispatcher

2022-07-06 08:08:00 【Xin Ran】

stay three.js in , Found a lot of use Object.assign and Object.create Method , And many constructors have inheritance EventDispatcher, Now for EventDispatcher Study the method

1. Source code

       
       function 
       
       EventDispatcher() {} 
       
       //  Constructors 
       
       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() {} 
       
       //  Constructors 
       
       Texture.
       
       prototype 
       
       = 
       
       Object.
       
       assign(
       
       Object.
       
       create(
       
       EventDispatcher.
       
       prototype), {
       
       test: 
       
       function() {
       
       console.
       
       log(
       
       'test')
       
  }
       
})
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.

2. Test code

       
       const 
       
       tt 
       
       = 
       
       new 
       
       Texture()
       
       console.
       
       log(
       
       'tt', 
       
       tt)
      
1.
2.

#yyds Dry inventory #three.js Source code interpretation -EventDispatcher_jquery

3. Core code description

#yyds Dry inventory #three.js Source code interpretation -EventDispatcher_i++_02

If you make the following code changes

#yyds Dry inventory #three.js Source code interpretation -EventDispatcher_ Constructors _03

The output result at this time is as follows :

#yyds Dry inventory #three.js Source code interpretation -EventDispatcher_jquery_04

4. summary

three.js Many constructors in will inherit EventDispatcher Constructors
Object.assign Use of methods
Object.create Use of methods
three.js Event monitoring in is similar to other frameworks , for example jQuery The same is true , It's the same principle

原网站

版权声明
本文为[Xin Ran]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202131838332987.html