Comment concevoir une application pour être modulaire/support plugins

Question

Je suis actuellement en train de refactoriser mon webplayer afin que nous puissions plus facilement l'utiliser sur nos autres stations de radio sur Internet. Une grande partie de l'installation entre ces joueurs sera très similaire, cependant, certains devront avoir des plugins d'interface utilisateur différents/autres plugins.

Actuellement dans le webplayer je fais quelque chose comme ça dans sa init():

_this.ui = nouvelle interface utilisateur();

_this.ui.playlist = nouvelle liste de lecture();

_this.ui.channelDropdown = new ChannelDropdown();

_this.ui.timecode = n Timecode();

etc etc

Cela fonctionne bien, mais que les blocs m'en exigeant que les objets au moment de l'exécution. Ce que j'aimerais faire, c'est pouvoir les ajouter en fonction des besoins des stations. Fondamentalement ma question est, ai-je besoin d'ajouter une sorte de "addPlugin()" fonctionnalité ici? Et si je fais cela, ai-je besoin de vérifier constamment depuis mon objet WebPlayer si ce plugin existe avant qu'il ne tente de l'utiliser? Comme ...

si (_hasPlugin ('playlist')) this.plugins.playlist.add (piste); Je m'excuse si certaines de ces choses pourraient ne pas être claires ... essayant vraiment d'obtenir ma tête enroulée autour de tout cela. Je sens que je suis plus proche mais je suis toujours coincé. Tout conseil sur la façon dont je devrais procéder avec ceci serait grandement apprécié.

Merci à l'avance,

Lee

Answer 1

Vous auriez besoin d'exposer certaines fonctionnalités dans votre application que vous voulez que les autres soient en mesure de travailler hors de. IE: rendre public get {} set {} accesseurs sur les principaux composants comme votre interface utilisateur et votre lecteur. Plus vous exposerez de fonctionnalités, plus les plugins seront en mesure de modifier des parties importantes de vos fonctionnalités. Donc, disons que vous avez un UI.header, et header contient des propriétés qui définissent comment l'en-tête affiche l'interface utilisateur. Vous exposer ainsi header.backgroundImage en tant que chaîne publique, header.Text en tant que chaîne publique et header.height en tant qu'int public. Maintenant, quelqu'un qui conçoit un plugin peut changer vos valeurs d'en-tête et les faire apparaître et dire ce qu'ils veulent.

Tout dépend de ce que vous voulez que les gens puissent modifier votre lecteur en fonction de ce que vous exposez.

Answer 2

Vous pouvez définir des classes JavaScript pour vos plugins, les charger en tant que dépendances pour le webplayer et les instancier au moment de l'exécution si nécessaire avec l'aide de RequireJS AMD. Lors de l'exécution, chargez le fichier webplayer.js en cas de besoin et instanciez le lecteur Web.

Jetez un oeil à BoilerplateJS qui est une architecture de référence pour le développement de produits JavaScript. Des préoccupations telles que la gestion des événements, la création de composants autonomes, la gestion de l'interaction entre eux, qui décide quand créer/afficher/masquer vos composants de l'interface utilisateur sont prises en compte pour accélérer le développement.