分离业务层功能

src/controls/index.js

@@ -1,4 +1,4 @@
-import { setStyle, append } from '../utils';
+import { insertByIndex } from '../utils';
 import Fullscreen from './fullscreen';
 import FullscreenWeb from './fullscreenWeb';
 import Pip from './pip';
@@ -16,10 +16,8 @@ let id = 0;
 export default class Controls {
   constructor(art) {
     this.art = art;
-    this.$map = {};
     this.art.on('firstCanplay', () => {
       this.init();
-      this.mount();
     });
   }
 
@@ -120,54 +118,27 @@ export default class Controls {
       const name = option.name || control.constructor.name.toLowerCase() || `control${id}`;
       const $control = document.createElement('div');
       $control.setAttribute('class', `art-control art-control-${name}`);
-      $control.dataset.controlIndex = option.index || id;
-      this.commonMethod(control);
-      (this.$map[option.position] || (this.$map[option.position] = [])).push($control);
+      this.mount(option.position, $control, option.index || id);
       control.apply && control.apply(this.art, $control);
       this[name] = control;
     }
   }
 
-  mount() {
+  mount(position, $control, index) {
     const { $progress, $controlsLeft, $controlsRight } = this.art.refs;
-    Object.keys(this.$map).forEach(key => {
-      this.$map[key]
-        .sort(
-          (a, b) =>
-            Number(a.dataset.controlIndex) - Number(b.dataset.controlIndex)
-        )
-        .forEach($control => {
-          switch (key) {
-            case 'top':
-              append($progress, $control);
-              break;
-            case 'left':
-              append($controlsLeft, $control);
-              break;
-            case 'right':
-              append($controlsRight, $control);
-              break;
-            default:
-              break;
-          }
-        });
-    });
-  }
-
-  commonMethod(control) {
-    Object.defineProperty(control, 'hide', {
-      value: () => {
-        setStyle(control.option.$control, 'display', 'none');
-        this.art.emit('control:hide', control.option.$control);
-      }
-    });
-
-    Object.defineProperty(control, 'show', {
-      value: () => {
-        setStyle(control.option.$control, 'display', 'block');
-        this.art.emit('control:show', control.option.$control);
-      }
-    });
+    switch (position) {
+      case 'top':
+        insertByIndex($progress, $control, index);
+        break;
+      case 'left':
+        insertByIndex($controlsLeft, $control, index);
+        break;
+      case 'right':
+        insertByIndex($controlsRight, $control, index);
+        break;
+      default:
+        break;
+    }
   }
 
   show() {

src/layers.js

@@ -1,25 +1,28 @@
-import { append, setStyles, setStyle } from './utils';
+import { append, setStyles, setStyle, insertByIndex } from './utils';
 
 let id = 0;
 export default class Layers {
   constructor(art) {
     this.art = art;
     this.add = this.add.bind(this);
-    this.art.option.layers.filter(item => !item.disable).forEach(this.add);
+    this.art.option.layers.forEach(item => {
+      this.add(item);
+    });
   }
 
-  add(option, callback) {
-    const { refs: { $layers } } = this.art;
-    id++;
-    const $layer = document.createElement('div');
-    $layer.dataset.artLayerIndex = option.index || id;
-    $layer.setAttribute('class', `art-layer art-layer-${option.name || id}`);
-    setStyle($layer, 'z-index', option.index || id);
-    append($layer, option.html);
-    setStyles($layer, option.style || {});
-    $layers.appendChild($layer);
-    this.art.emit('layers:add', $layer);
-    callback && callback($layer);
+  add(item, callback) {
+    if (!item.disable) {
+      const { refs: { $layers } } = this.art;
+      id++;
+      const $layer = document.createElement('div');
+      $layer.setAttribute('class', `art-layer art-layer-${item.name || id}`);
+      setStyle($layer, 'z-index', item.index || id);
+      append($layer, item.html);
+      setStyles($layer, item.style || {});
+      this.art.emit('layers:add', $layer);
+      callback && callback($layer);
+      insertByIndex($layers, $layer, item.index || id);
+    }
   }
 
   show() {