english version

Модульность в JavaScript, пример использования

На этой странице подключен файл jsx.js

Файл jsx.js обеспечивает:

  • реализацию функции require ;
  • конвертацию имен типа "{alias}.name" в имена файлов;
  • работу с алиасами (locator);
  • загрузку файла Components.js.

jsx.js загружается только если в ссылке на jsx.js есть параметр "autoinit:true". Файл Components.js позволяет находить и создавать компоненты из узлов DOM дерева. HTML код страницы c календарем:

<!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>Календарь</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>
          

Результат:

Или обертка над этим календарем, позволяющая его свернуть в одну строку а результат выбора хранить в 3-х полях <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>Календарь</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>
          

Нужно кликнуть на дату:

 

В результате на странице окажется намного больше чем 2 скрипта.

Если нужна оптимизация по загрузке, то эти скрипты можно соединить в один файл (порядок добавления в общий файл - обратный приведенному) и сжать.