Стыкуем компоненты в JavaScript

«2 потока загрузки модулей: для dom-base-utils и для dom. „
судя по коду “utils-base-dom»? или я ошибся?

в примере есть yass-component-counter, но counter.js не грузится, я наверное не понял примера, для чего используется «yass-component-counter»?

*а вообще — шикарно! это же практически язык js-макросов на базе css…
awesome!

да, спасибо, поправил. Там порядок «наследования» функционала: сначала самый простой, потом более сложные. Т.е. utils ничего не требует для загрузки, base требует utils, а dom требует base.

А как проявляется то, что counter.js не грузится? Под каким браузером?

пытаюсь прикрутить один тест
не работает такое наименование «yass-component-/scripts/fontface.js»
стоит сделать

* кручу дальше, будет пример :)

я а может багу нашел, тестовая страница отвечает обычно так

ClientSide is loaded
Counter is loaded

но иногда и так

ClientSide is loaded
ClientSide is loaded
ClientSide is loaded
ClientSide is loaded
Counter is loaded

это нормально?

итак, обещанный пример:

во-первых я немного изменил yass (сорри):
«script.src=alias+».js";script.type=«text/javascript»;"

во-вторых, я добавил в body такой класс:
«yass-component-/scripts/fontface»

в-третьих, я создал такой fontface.js:
if (navigator.userAgent.indexOf('Windows NT 6.0') == -1) {
$('body').css(«font-family», '«Calibri2»');
}

в четвертых, в css есть такое определение:
@font-face {
font-family: «Calibri2»;
src: url("/content/calibri.ttf") format('truetype');
}

что имеем в итоге? в итоге, опльзовтаели Vista не грузят больше calibri.ttf размером в 300 килобайт (этот шрифт уже установлен в виста), другие юзеры шрифт грузят. Осталось добавить фильтрацию по браузерам, которые не поддерживают font-face и мы сократим траффик на порядок :)

Ура, YASS!

смотреть на nuke.wyob.ru/css3test/

очень интересный подход. реально асинхронность достаточно сильно ускоряет первоначальное отображение.

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

предлагаю примерно следующий вариант решения

var Optimizer = function(ops){
  var scope = ops.scope ? ops.scope : window;
  scope[ops.name] = function(arg){
    if (scope[ops.name].once) return;
    scope[ops.name].once = true;
    var text = null;
    dax({url:ops.script, id:ops.script, destroy:true, async:false, callback: function(resp){
      text = resp.responseText;
    }})
    SRAX.evalScript(text);
  }
}
new Optimizer({scope:Ext, name:'NorthLayoutRegion', script:'/scripts/ext/separate/layoutregion.js'})
new Optimizer({scope:Ext, name:'ContentPanel', script:'/scripts/ext/separate/contentpanel.js'})
new Optimizer({scope:Ext.dd, name:'StatusProxy', script:'/scripts/ext/separate/statusproxy.js'})
new Optimizer({scope:Ext.dd, name:'DragSource', script:'/scripts/ext/separate/ddzone.js'})
new Optimizer({scope:Ext.dd, name:'DropTarget', script:'/scripts/ext/separate/ddzone.js'})

* This source code was highlighted with Source Code Highlighter.

это примеры из реального проекта, правда относительно давно писалось, во времена extjs v1.

Суть в следующем:
Optimizer — это так называемый proxy — создает заглушки классов, методов. Он знает в каком файле лежит нужный метод. При первом вызове метода вызывается его заглушка, которая догружает фал с асинхронном/синхронном режиме, выполняет загруженый скрипт (тут происходит перезапись заглушки на реальный метод, класс), выполняет повторно вызванный метод.
При повторных вызовах методов, классов — вызываются уже не заглушки, а реальные методы, классы.

P.S.: Код Optimizer примерный, чтобы понять принцип.

ну и получится как на яндексе — сначала загружается страница, где ничего не работает, а потом несколько секунд грузятся десятки скриптов и стилей…

Использовал похожий загрузчик в одном из разработанных проектов (1й метод из приведённых).
Страничка логина появлялась на экране сразу, что позволяло вводить username/password, пока грузятся компоненты (JS и CSS файлы).
Загрузка происходила за несколько секунд (подключались тяжеловесные компоненты: ExtJS, Google Maps, etc), этого времени как раз хватало, чтобы ввести пароль.

Результат подобного подхода налицо — мгновенная доступность сервиса для пользователя.
Время загрузки первой HTML странички минимально. Можно интегрировать стили в неё же (так делает Google, например).

Всё же, для большинства проектов подобный подход сродни «из пушки по воробьям».
Достаточно корректно прописать правила .htaccess (заголовок Expires), чтобы браузер закэшировал скрипты после первой загрузки.

Вывод: метод замечательный, но используем там, где необходимо (руководствуемся здравым смыслом).

А вот мой js-loader на mootools:
var jsLoader = new Class({
  Implements: Options,
  
  loadModel: {},
  options: {  
    version:   «0.1.1»,
    path:     "/source/js/",
    cache:     true
  },
  
  initialize: function(files, options){
    var self = this;
    window.addEvent(«load», function (event) {
    self.setOptions(options);
    if(!Browser.Engine.trident){
      console.time(«module load»);
    }
  
    if($defined(files)){
      files.each(function(file){
        self.load(file);
      });
    }
    
    if(!Browser.Engine.trident){
      console.timeEnd(«module load»);
    }
    window.fireEvent(«loadMoule»);
    });
  },
  
  load: function(file){
    var code = '';
    if(this.loadModel[file] && this.loadModel[file] >= this.options.version) return false;
    var js = new Asset.javascript(this.options.path+file+".js", { onload: function(){
      window.fireEvent(file);
    }});

    this.loadModel[file] = this.loadModel[file]? Math.max(this.loadModel[file], this.options.version): this.options.version;
  }  
});

* This source code was highlighted with Source Code Highlighter.

Давно занимался поиском таких скриптов. Просмотрел JsLoader, modules.js, lazyload, загрузчики под YUI, jQuery, Prototype.
Остановился на JSLoad (http://www.instructables.com/community/Free-Code-JSLoad/). Немного дописал и пользуюсь. Сначала определяешь зависимости, затем в нужном месте пишешь JSLoad.load('test', function() {alert('test loaded')}).
За JSX спасибо, попробую в бою.