I'm writing several JavaScript plugins that are run automatically when the proper HTML markup is detected on the page. For example, when a tabs class is detected, the tabs plugin is loaded dynamically and it automatically applies the tab functionality. Any customization options for the JavaScript plugin are set via HTML5 data attributes, very similar to what Twitter's Bootstrap Framework does.The appeal to the above system is that, once you have it working, you don't have worry about manually instantiating plugins, you just write your HTML markup. This is especially nice if people who don't know JavaScript well (or at all) want to make use of your plugins, which is one of my goals. This setup has been working very well, but for some plugins, I'm finding that I need a more robust set of options. My choices seem to be having an element with many data-attributes or allowing for a single data-options attribute with a JSON options object as a value. Having a lot of attributes seems clunky and repetitive, but going the JSON route makes it slightly more complicated for novices and I'd like to avoid full-blown JavaScript in the attributes if I can. I'm not entirely sure which way is best.Is there a third option that I'm not considering?Are there any recommended best practices for this particular use case?
Proper Use Of HTML Data Attributes
javascript;html;json
I've been working with a similar pattern over the past several months.  My personal opinion is that it is ok to mix these two conventions depending on the needs of the plugin.  If you have a small number (i.e. < 5) of well defined parameters or if you want to select elements based on a particular attribute then data attributes for each parameter is ok.  If you have a large number of parameters, or if the parameters are highly dynamic (i.e. request parameters to an ajax call) then json within a data attribute may be more beneficial.  In any case, IMO it is very important to clearly document what the parameters are and how they should be used.