Design Portal Container
I am under a script where I need to create a portal container in HTML5 and Javascript. This container will be provided with "n" number of widget urls, and the container is responsible for loading them via Ajax into a DIV (not an iFrame).
Now the question is how to make each widget's JavaScript function definition separate? For example, I have two DIVs in a container page, Widget1_DIV and Widget2_DIV. HTML, JS and CSS Widget1 will be hosted in Widget1_DIV and similarly for Widget2.
Now, suppose both widgets have a JS function with the same name, "foo", that would conflict if they were embedded in the same DOM. I want to know if RequireJS can help avoid a conflict or the right solution to make both widget modulators modular?
thank
source to share
Do you consider using any JS Framework? I recommend you AngularJS
because of its functionality, MVC approach and flexibility. I know this requires a lot of work early in the project lifecycle, but later on, you will certainly notice the benefits and robust page structure.
In addition, Angular JS allows you to keep a separate project structure:
- WidgetName
| - javascriptfile.js
| - widgetpage.html
| - javascriptfile_test.js
More details: https://angularjs.org/
Of course, you do not need to use this particular structure, there are many other fantastic tools: Knockout
, Backbone
, ....
source to share
How about using the dashboard infrastructure. This should make things easier. For example: http://dashing.io/
source to share