最近开始看xgplayer的源码，分享一下外面的插件模式和批量导入性能的应用，能够借鉴利用在成千上万行代码的SDK文件优化中。

一 看源码从何动手

看源码最重要的就是可能调试，播放器的源码是运行在浏览器端的，所以咱们能够间接用浏览器进行调试，node上的源码如何调试我后续再发一篇文章解说。

二 插件模式的实现

其根本构造如下：

class Player { constructor() {    // 构造函数的时候调用插件    this.pluginsCall() } // 调用插件的办法 pluginsCall () {    let self = this    if (Player.plugins) {      // 遍历插件执行      Object.keys(Player.plugins).forEach(name => {        let descriptor = Player.plugins[name]            descriptor.call(this, this)          }        }      })    }  }  // 动态挂载插件的办法 static install (name, descriptor) {    if (!Player.plugins) {      Player.plugins = {}    }    if (!Player.plugins[name]) {      Player.plugins[name] = descriptor    } }}

这里设计的比拟好的点是提供类的静态方法挂载插件，而后构造函数中执行插件，这就能让援用者在创立实例之前能够挂载自定义的插件，并在创立实例时执行插件。

源码内的20几个插件对立都在controls文件夹下，构造如下：

├── cssFullscreen.js...├── i18n.js

所有的插件都是对立的构造，引入Player，申明插件办法，而后调用Player.install装置插件，以cssFullscreen.js为例：

import Player from '../player'let cssFullscreen = function () {}Player.install('cssFullscreen', cssFullscreen)

接下来就是执行这些插件代码，并且导出Player的，这里就有知识点了，其导出的文件的源码如下：

import Player from './player'import * as Controls from './controls/*.js'export default Player

这里比拟奇妙的是 没有间接导出Player,而是利用这个文件直达了一下，直达的时候import * as Controls from './controls/*.js' 这行代码就会批量打入所有controls文件夹下的插件并执行，乍一看这个语法没有见过，不晓得是哪个过程做了解决，通过在babel-loader中调试发现，通过babel之后就曾经解决了，看babel的配置就破案了，是这个插件babel-plugin-bulk-import。

三 babel-plugin-bulk-import

babel-plugin-bulk-import是一个babel的插件，该插件反对应用glob 的语法进行模块的批量导入，让咱们看看它README.md中的用法介绍。

Test case:

.├── case|   ├── subfolder|   |   └── case3.js // module.exports = { case: 999 };|   ├── case1.js     // module.exports = { case: 1 };|   ├── case2.js     // module.exports = { case: 2 };|   └── case3.js     // module.exports = { case: require('./subfolder/case3') };└── src    └── index.js

Example＃1(local imports)

import * as all from './case/**/*.js';

will result in:

all = {    case: {         case1: { case: 1 },        case2: { case: 2 },        case3: { case: { case: 999 } },        subfolder: { case3: { case: 999 } }     }    }

Example #2 (imports from node_modules)

import * as all from 'lodash/{*,**/*}.js';

will result in:

all = {    node_modules : {        lodash: {            LODASH_MODULE1: ITS_EXPORT_CONTENTS            LODASH_MODULE2: ITS_EXPORT_CONTENTS            ...        }    }}

实现原理

如何写babel插件能够再开一篇文章解说，这里先来看一下插件实现的大略思路，基本上就是匹配glob语法，应用glob获取文件，而后改写引入的逻辑。在babel-loader中 看一下通过babel之后的代码如下：

"'use strict';Object.defineProperty(exports, "__esModule", {  value: true});var _cssFullscreen = require('./controls/cssFullscreen.js');var _cssFullscreen2 = _interopRequireDefault(_cssFullscreen);function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var Controls = {};/**@param v 引入的整体对象@param p 引入模块的门路 作为整体对象的属性@param a 最初的模块导出**/function _buildTree(v, p, a) {  var o = v;  p.map(function (_, i) {    o[_] = i == p.length - 1 ? a : o[_] || {};    o = o[_];  });}_buildTree(Controls, ['controls', 'cssFullscreen'], _cssFullscreen2.default);

其实xgplayer的插件中没有导出内容，因为只须要执行模块的代码即可。

四 总结利用

有了下面插件模式的设计和批量导入的能力，想到了能够解决开发中SDK单文件过大的问题，一个SDK常常就是几千行的代码:

class SDK {    constructor() {    }    method1() {    }    ...    method99() {    }}export default SDK

利用批量导入改良之后的状况如下：

├── SDK.js├── index.js├── methods│   ├── method1.js...│   └── method99.js

SDK.js中:

export default class SDK {  constructor() {  }}

methodx.js中:

import SDK from '../SDK';SDK.prototype.methodx = function() {  console.log('methodx');}

index.js中:

import SDK from './SDK';import * as methods from './methods/*.js'export default SDK;

demo在这里：https://github.com/yylgit/lia...

其实不仅是SDK，所有咱们须要大量手动import的中央都能够进行优化,比方import路由，vueximport子模块，redux中的combineReducers时import每个reducer等等。

如果感觉有播种请关注微信公众号 前端良文 每周都会分享前端开发中的干货知识点。