Архитектура компоновки JavaScipt

0

3

Просветите, пожалуйста! Сейчас пишу сайт, в нём много динамического содержимого, обслуживаемого джаваскриптом. Понятно, что многие функции, например, loadTable(filters) выносятся в один отдельный файл, так как их использует много страниц, но, вот, куда пихать обработчики кнопок, которые формируют объект этих самых filters? Встраивать в страницу? Или сделать отдельный файл awesomesite.litter.js, где развести помойку из обработчиков кнопок? Как делают гуру?

Ссылка

←	kpcli + bash

В Rust добавлены compile-time регулярные выражения

→

Ну по сути да.

Есть общий код в отдельном файле - functions.js и локальный код конкретной страницы где навешиваются в отдельном файле (напр. page.js) обработчики и прочая специфика.

Есть еще всякие штуки вроде require.js но они позволяют не указывать общий код явным образом и грузить его по мере надобности.

hidden_4003 ★
(28.04.14 11:03:02 MSK)

Ссылка

Гуру делают так: не шкварятся об жопоскрипт, а нанимают джс-раба за банан в день.

anonymous
(28.04.14 15:32:40 MSK)

Ссылка

Я предпочитаю по папкам бить, чтобы в каждой содержались все части от виджета (прямоугольной области) - шаблоны, стили, код, переводы. Папки могут быть вложенными.

Смысл в том, то так проще всё разом контролировать. Меньше шансов, что при переделках станет копиться мусор из забытых переводов, стилей и т.п.

Vit ★★★★★
(28.04.14 16:04:49 MSK)

Ссылка

Я лично предпочитаю подгружать по мере надобности.

Если вы пойдете этим путем, то вам понадобятся модули и механизм который их умеет грузить «на лету». Сам по себе механизм этот штука довольно простая:

function loadScriptAsync(src, callback){
  var s,r,t;
  r = false;
  s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = src;
  s.onload = s.onreadystatechange = function() {
       if ( !r && (!this.readyState || this.readyState == 'complete') ) {
      r = true;
      callback();
    }
  };
  t = document.getElementsByTagName('script')[0];
  t.parent.insertBefore(s, t);
}

Но в реальной жизни этот скрипт конечно помогает мало, а то, что реально помогает раз в 10 сложнее, с учетом кросс-платформенности и проверок зависимостей. Так что я бы посоветовал вам взять какой-нибудь тулкит, в котором такой механизм есть. Например, - Dojo.

А вот имея модули, уже можно заниматься колдунством. Например, обрамить свой код вызовом require, который как раз и обеспечит подгрузку того, что вам нужно.

Кроме того, код головного модуля можно так же загружать «на лету». В dojo это выглядит так:

require([
    "dojo/parser",
    "mycompany/myApp",
    "dojo/domReady!"
],
    function(parser, myApp){
        parser.parse().then(function(){
                    new myApp.init();
         });
    });

Данный код гарантирует, что парсинг страницы будет проведен не ранее, чем будут загружены все требуемые модули, а приложение myApp, находящеся в одном из них, будет создано и проинициализировано только после парсинга.

Фактически, это все, что я обычно размещаю в заголовке страницы.

k0valenk0_igor ★★★
(28.04.14 16:53:33 MSK)
Последнее исправление: k0valenk0_igor 28.04.14 17:03:21 MSK (всего исправлений: 1)

Ссылка

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

<!DOCTYPE html>
<html>
<head>
  <title>Page 1</title>
  <script src="/application.js"></script>
</head>
<body>
  <script>initPage1()</script>
</body>
</html>

* - не совсем один файл, но суть в том, что это один и тот же набор файлов для всех страниц (а в итоге я все склею).

special-k ★★★
(30.04.14 08:14:00 MSK)