整个app包的结构非常简单，只提供了一个对于renderer和插件等模块的封装。

创建了app对应的根容器stage和渲染器renderer，以及用来存放插件的_plugins。
除此之外，就是做了constructor和destroy的操作，调用对应模块的init和destroy函数，所以整体是很薄的一层。

app包里还有一个resize插件，表示resize到指定的容器，这个插件在app包内部就register了。这个功能上是想得比较明白的，但是内部的实现，以及throttle的处理，还是有些不太懂得地方。不过，应该不影响后续看其它得内容。

最后简单说下pixi的插件机制，其实整体逻辑比较清晰。

插件通常都是一个类，但基本都是静态方法，因为一般也不需要多个同一插件。
插件都有init和destroy函数用来初始化和销毁。
app registerPlugin的时候，会把插件放到对应插件数组_plugins里，然后在init函数中调用插件的init。

插件里边内容的设置也比较有趣，通常设定app一个属性的getter/setter行为，然后再根据是否传入参数为其赋值，类似这样：

  1. Object.defineProperty(this, 'resizeTo',
  2.     /**
  3.      * The HTML element or window to automatically resize the
  4.      * renderer's view element to match width and height.
  5.      * @member {Window|HTMLElement}
  6.      * @name resizeTo
  7.      * @memberof PIXI.Application#
  8.      */
  9.     {
  10.         set(dom: Window|HTMLElement)
  11.         {
  12.             self.removeEventListener('resize', this.queueResize);
  13.             this._resizeTo = dom;
  14.             if (dom)
  15.             {
  16.                 self.addEventListener('resize', this.queueResize);
  17.                 this.resize();
  18.             }
  19.         },
  20.         get()
  21.         {
  22.             return this._resizeTo;
  23.         },
  24.     });
  25. this.resizeTo = options.resizeTo || null;

可能还是有之前ES5或者JS的痕迹，感觉写得比较啰嗦吧，不过可能也是考虑到之后用户可以直接赋值的情况。

TODO

  • app包中，ResizePlugin的细节