Суть:
Хранить в БД инфу о том, какие виджеты включены у юзера, затем на странице, на которой нужно выводить эти виджеты делаем запрос в БД (аякс-запросом), получаем инфу, в цикле смотрим что это за виджет и инициализируем его.
Пример:
Предположим, имеется страница mysite.ru/widgets. Также имеется три виджета, код которых находится в файлах widget.simple.js, widget.chart.js и widget.table.js. Также примем по умолчанию, что ты используешь jQuery.
На этой странице делаем запрос на сервер (например, с помощью $.get), сервер достает из БД инфу о том, какие у юзера включены виджеты и отдает нам в таком виде:
[{
type: 'simple',
data: 100
}, {
type: 'table',
data: []
}, {
type: 'chart',
data: []
}]
что означает, что у юзера включены все три виджета. Теперь, когда мы получили данные, нужно пройтись по ним в цикле. Сам запрос и обработка результатов будут выглядеть примерно так:
$.get(url).done(function(widgets) {
widgets.forEach(function(widget) {
switch (widget.type) {
case 'simple':
new SimpleWidget(widget.data);
break;
case 'chart':
new ChartWidget(widget.data);
break;
case 'table':
new TableWidget(widget.data);
break;
}
});
});
где url - это страница, которая будет отдавать нам json. Классы SimpleWidget, ChartWidget и TableWidget - сами виджеты. Конечно, тут все упрощено, ведь помимо данных для виджета ему еще нужно передавать инфу о том, где именно нужно отобразить виджет (например, в виде селектора, '.simple-widget-container') и прочую нужную информацию. Логика виджетов (а точнее паттерн, который они реализуют) тут не принципиальна, это выходит за рамки вопроса.