如何将应用程序设计为模块化/支持插件

Question

我目前正在重构我的网络播放器，以便我们能够更轻松地在其他网络广播电台上运行它。这些播放器之间的大部分设置都非常相似，但是，有些播放器需要不同的 UI 插件/其他插件。

目前在网络播放器中我在 init() 中做了类似的事情：

_this.ui = new UI();

_this.ui.playlist = 新播放列表();

_this.ui.channelDropdown = new ChannelDropdown();

_this.ui.timecode = ne 时间码();

等等

这工作正常，但阻止我在运行时需要这些对象。我想做的是能够根据电台的需要添加这些内容。基本上我的问题是，我需要在这里添加某种“addPlugin()”功能吗？如果我这样做，我是否需要在尝试使用该插件之前不断地从我的 WebPlayer 对象中检查该插件是否存在？就像...

if (_hasPlugin('playlist')) this.plugins.playlist.add(track);

如果其中一些内容可能不清楚，我深表歉意……我真的很想弄清楚这一切。我觉得我更接近了，但我仍然被困住了。任何有关我应该如何进行此操作的建议将不胜感激。

预先感谢，

李

Answer 1

您需要在应用程序中公开某些您希望其他人能够使用的功能。 IE：在 UI 和播放器等主要组件上公开 get{}set{} 访问器。您公开的功能越多，就有越多的插件能够修改您功能的重要部分。

假设您有一个 UI.header，并且 header 包含定义 header 如何显示 UI 的属性。因此，您将 header.backgroundImage 公开为公共字符串，将 header.Text 公开为公共字符串，将 header.height 公开为公共 int。现在设计插件的人可以更改您的标头值并使其看起来并说出他们想要的内容。

这完全取决于您希望人们能够根据您所公开的内容来改变您的球员的程度。

Answer 2

您可以为插件定义 JavaScript 类，将它们作为依赖项加载到网络播放器，并在运行时根据需要在 RequireJS AMD。

//in your webplayer.js
define(['./ui','./playlist'],function(ui, playlist){
     var webPlayer = function(stationID){
     //initializing work
    }
    return webPlayer; 
});

在运行时根据需要加载 webplayer.js 文件并实例化网络播放器。

看看 BoilerplateJS，它是 JavaScript 产品开发的参考架构。诸如事件处理、创建自包含组件、处理它们之间的交互、由谁决定何时创建/显示/隐藏 UI 组件等问题都会得到处理，以便快速启动开发。