indiWiz.com

I am working currently in a portal project. From various datasources we collect information and publish as portlets. The current UI scenario requires us to use JavaScript libraries like prototype.js and jQuery. In both these libraries, $() has different meaning. So when we tie a particular portlet’s UI to prototype.js, and another to jQuery, we cannot effectively place both of them in the same page.

If HTML/XHTML provides some kind of script exclusion so that scripts placed inside a particular scope do not reveal their functions and variables globally across the page, it is going to be helpful. For example:

<script-package name="abc">
  <script src="prototype.js" type="text/javascript"/>

  <script type="text/javascript">
    // use prototype specific code
  </script>
</script-package>

<script-package name="xyz">
  <script src="jquery.js" type="text/javascript"/>

  <script type="text/javascript">
    // use jQuery specific code
  </script>
</script-package>

In the rare case when a script needs to access some variable defined in different package, it can use some namespace mechanism. Any ideas?