How to design app to be modular / support plugins

I'm currently in the process of refactoring my webplayer so that we'll be more easily able to run it on our other internet radio stations. Much of the setup between these players will be very similar, however, some will need to have different UI plugins / other plugins.

Currently in the webplayer I do something like this in it's init():

_this.ui = new UI();

_this.ui.playlist = new Playlist();

_this.ui.channelDropdown = new ChannelDropdown();

_this.ui.timecode = ne Timecode();

etc etc

This works fine but that blocks me into requiring those objects at run time. What I'd like to do is be able to add those based on the stations needs. Basically my question is, do I need to add some kind of "addPlugin()" functionality here? And if I do that, do I need to constantly check from my WebPlayer object if开发者_开发技巧 that plugin exists before it attempts to use it? Like...

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

I apologize if some of this might not be clear... really trying to get my head wrapped around all of this. I feel I'm closer but I'm still stuck. Any advice on how I should proceed with this would be greatly appreciated.

Thanks in advance,

Lee

You would need to expose certain functionality within your application that you want others to be able to work off of. IE: making public get{} set{} accessors on major components like your UI and your player. The more functionality you expose the more plugins will be able to modify important parts of your functionality.

So let's say you have a UI.header, and header contains properties that define how the header displays the UI. So you expose header.backgroundImage as a public string, header.Text as a public string, and header.height as a public int. Now someone designing a plugin can change your header values and make it look and say what they want.

It's all about how much you want people to be able to alter your player based on what you expose.

You can define JavaScript classes for your plugins, load them as dependencies to the webplayer and instantiate them at runtime as needed with the help of RequireJS AMD.

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

At runtime load the webplayer.js file when needed and instantiate the web player.

Have a look at BoilerplateJS which is a reference architecture for JavaScript product development. Concerns such as event handling, creating self contained components, handling interaction between them, who decides when to create/show/hide your UI components are taken care of in order to quickstart development.