Andrew Sumin, September 1, 2007.

Modularity in JavaScript, example of use

File jsx.js is connected to this page.

File jsx.js allows to:

realize function require ;
convert names like "{alias}.name" into files’ names;
Work with aliases (locator);
download file Components.js.

jsx.js can be downloaded only if the link to it contains parameter "autoinit:true". File Components.js allows to find and create components from nodes of DOM tree. HTML code of the page with a calendar:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <title>Calendar</title>
    <script src="http://jsx.ru/scripts/b/1.1.0/jsx.js?autoinit=true"
      onload="return {autoinit:true, base:'jquery'}"></script>
  </head>
  <body>
    <div class="jsx-component" onclick="return {types:['{jsxComponents}.Calendar']}"></div>
  </body>
</html>

Result:

Or a wrapper above this calendar, with the help of which you can minimize it into one line and store the choice result in 3 fields <input>.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html>
    <head>
      <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
      <title>Calendar</title>
      <script src="http://jsx.ru/scripts/b/1.1.0/jsx.js?autoinit=true"
        onload="return {autoinit:true, base:'jquery'}"></script>
    </head>
    <body>
      <span class="jsx-component" onclick="return {types:['{jsxComponents}.Calendar.Inputs']}">
        <span class="jsxComponents-Calendar-Inputs-Text"> </span>
        <span class="g-hidden jsxComponents-Calendar-Inputs">
          <input class="jsxComponents-Calendar-Inputs-Date"/>
          <input class="jsxComponents-Calendar-Inputs-Month"/>
          <input class="jsxComponents-Calendar-Inputs-Year"/>
        </span>
      </span>
    </body>
</html>

You should click the date:

As a result you’ll see a lot more than 2 scripts.