3

I am under a scenario where I have to build a portal container in HTML5 and Javascript. This container will be provided with 'n' number of widget URLs and container is responsible to load them through Ajax in DIVs (not in iFrame).

Now the question is how to make the definitions of JavaScript functions of each widget, separate? For example, I have two DIVs on the container page, Widget1_DIV and Widget2_DIV. HTML, JS and CSS of Widget1 will be placed in Widget1_DIV and similarly for Widget2.

Now suppose both the widgets have a JS function with same name, 'foo', which will conflict once they are embedded in same DOM. I want to know that will RequireJS helps in avoiding the conflict or the right solution to make both widget's DIVs modular?

Thanks

Jaffy
  • 575
  • 1
  • 6
  • 15

2 Answers2

0

Did you consider using any JS Framework? I recommend you AngularJS because of its functionality, MVC approach and flexibility. I know, that this requires a lot of work on the beginning of project life-cycle, but later certainly you observe advantages and robust page structure.

In addition, Angular JS allows you to preserve separated project structure:

- WidgetName
| - javascriptfile.js
| - widgetpage.html
| - javascriptfile_test.js

See more: https://angularjs.org/

Of course you don't need to use this specific framework, there are a lot of other fantastic tools: Knockout, Backbone, ... .

Fka
  • 6,044
  • 5
  • 42
  • 60
  • I am using AngularJS in widgets but if two widgets use same module name then the conflict may also arise. What do you say! – Jaffy Nov 24 '14 at 10:09
0

How about using a dashboard framework for that. This should make things easier. For ex.: http://dashing.io/

kmandov
  • 3,130
  • 16
  • 15