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

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

目前在webplayer中，我在它的init（）中执行类似的操作：

_this.ui=新ui（）

_this.ui.playlist=新建播放列表（）

_this.ui.channelDropdown=新的channelDropdown（）

_this.ui.timecode=ne timecode（）

等等

这很好，但这会妨碍我在运行时需要这些对象。我想做的是能够根据电台的需要添加这些。基本上我的问题是，我需要在这里添加一些“addPlugin（）”功能吗？如果我这样做了，我是否需要经常从我的WebPlayer对象中检查插件是否存在，然后再尝试使用它？像

如果（_hasPlugin（'playlist'））这个.plugins.playlist.add（track）

如果有些事情不清楚，我道歉。。。我真的很想让我的头被这一切缠绕住。我觉得我离得更近了，但我还是被卡住了。任何关于我应该如何进行这项工作的建议都将不胜感激

提前感谢,

---

Lee

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

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

---

关键在于你希望人们能够根据你公开的内容对你的播放器进行多大程度的修改。

你可以为你的插件定义JavaScript类，将它们作为依赖项加载到webplayer，并在AMD的帮助下在运行时根据需要实例化它们

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

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

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