1

I want to make a web based application that can have plugins/apps 'installed' to it. What i mean by Apps is say a weather app which has its own CSS and JS files in a container with a specific ID like id="Weather-app".

The Problems: (Assuming everything is on the same server)

  • Having Duplicate IDs, Class'
  • Conflicting script and style sheets
  • how to actually check a folder named 'Plugins', Find a file named Weather-app and then load the contents of 'Weather-app' into the main Application.

I have looked around on Google and haven't managed to find any information on how you would go about this. Hopefully someone on here will know. I would like to use JavaScript & JQuery if possible. I dont know if there is already a source out there for this purpose but if there is a link would be great!

ChristopherStrydom
  • 7,338
  • 5
  • 21
  • 34

1 Answers1

1

1 - Avoid the use of IDs for generics, always use classes instead.

2 - Prefix the classes on HTML generated by plugins you are creating with some name space. i.e.: js-plugin-foobar-nameOfClass

You can avoid having the user add a ".js" and a ".css" file for each pluggin. You can generate css classes with javascript. That way you will only have to import one file for each pluggin: How to dynamically create CSS class in JavaScript and apply?

Take a look at the jQuery widget factory, you can build your plugins to use it, and that should facilitate your life. They also have some coding guidelines: http://jqueryui.com/widget/

Community
  • 1
  • 1
fmsf
  • 36,317
  • 49
  • 147
  • 195
  • Thanks a lot! I am going to have to do some reading into 'namespaces' and the 'jQuery widget factory'... I'm still learning the ways of JavaScript and coding in general so thanks again this is a great help, you pointed out something i didn't even know existed :L – ChristopherStrydom Jun 23 '13 at 13:41
  • Hi again! I just need to clear some things up... on point 2 how am i supposed to change all of the classes the app already has? Say i dont make the app so the person who has, has just used normal classes. Is there a way to sift through the document and change all of the classes in all 3 languages(JS, CSS, HTML)? or is this tending towards making an api for my application? I just cant seem to find a good way of doing this.. – ChristopherStrydom Jun 23 '13 at 20:31