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

【问题标题】：How to design app to be modular / support plugins如何将应用程序设计为模块化/支持插件
【发布时间】：2011-02-16 20:18:37
【问题描述】：

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

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

_this.ui = new UI();

_this.ui.playlist = new Playlist();

_this.ui.channelDropdown = new ChannelDropdown();

_this.ui.timecode = ne Timecode();

等等等等

这很好用，但这阻止了我在运行时需要这些对象。我想做的是能够根据电台的需要添加那些。基本上我的问题是，我需要在这里添加某种“addPlugin()”功能吗？如果我这样做，我是否需要在尝试使用该插件之前不断检查我的 WebPlayer 对象是否存在该插件？喜欢...

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

如果其中一些内容可能不清楚，我深表歉意……我真的想把所有这些都弄清楚。我觉得我更近了，但我仍然卡住了。任何关于我应该如何进行的建议将不胜感激。

提前致谢，

李

【问题讨论】：

标签： javascript oop plugins dependencies modular

【解决方案1】：

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

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

这完全取决于您希望人们能够根据您公开的内容改变您的播放器的程度。

【讨论】：

【解决方案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 组件等问题都得到了处理，以便快速开始开发。

【讨论】：