Загрузка с хмтлей стилей и скриптов

[kostyanet]

Система такая - почти все стили и скрипты нормально валятся в хтмл, то есть браузер получает полный фарш в тексте. Без линков и сыырцов.

По аяксу нормально засасываются только стили. Скрипты надо запускать через создание скриптовой ноды, это вроде объяснимо.

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

И второй: подскажите кошерный и модный загрузчик скриптов равно как из текста (когда они аяксом готовые валятся) так и по линкам (когда сервер отдает файл).

Смысл в том чтоб в современных браузерах все заведомо работало.

Спасибо.

Сейчас я пока нарисовал нижеследующее. Первый - из робота-яндекса, второй где-то на SO подцепил.

var load_js=function(name){
	var n = D.getElementsByTagName('script')[0],
		s = D.createElement('script'),
		f = function () { n.parentNode.insertBefore(s, n); };
	s.type = 'text/javascript';
	s.async = true;
	s.src = (location.protocol == "https:" ? "https:" : "http:") +'//'+location.hostname+'/js/'+name;
	f();

};

var create_js=function(code){

    var s = D.createElement('script');
    s.type = 'text/javascript';
    try {
      s.appendChild(D.createTextNode(code));
      D.body.appendChild(s);
    } catch (e) {
      s.text = code;
      D.body.appendChild(s);
    }

};

[kostyanet]

Хотел бы добавить что текстом отдавать - лучше, потому что за раз все приезжает, а файл импортить - это еще раз идти за ним на сервер, а там система видите какая - чтоб никуда за текстами не ходить - получать всю кашу сразу.

Кстати, оказалась весьма опасная эта технология. Достаточного малейшего глюка в хтмле - и разваливается всё: скрипты глючат, стили плющит и в таком роде.

[kostyanet]

Полчаса искал ответы, проверял во всех браузерах - не подхватываются стили и ниипет! Наконец заглянул в заголовки - там пишут что в ответ на запрос стилей идет мимо-тип javascript. Оказывается, я тупой. Сколько раз уже натыкался на этот сучок:

if(strcmp($type,'js'))
		header('Content-Type: text/javascript; charset='.PAGE_ENCODING);
	else
		header('Content-Type: text/css; charset='.PAGE_ENCODING);

как бы по логике if(strcmp($type,'js')) должно возвращать тру, а на самом деле надо сравнивать с 0: if(strcmp($type,'js')==0) и все заработало.

Так вот что интересно - скриптам по-барабану. С заголовком от стилей все фурыкало как кот.

[kostyanet]

Между тем соорудил вот такое гавнище

load_ass=function(name,type){
	var el,
	head=D.getElementsByTagName('head')[0],
	url=(location.protocol=="https:"?"https:":"http:")
		+'//'+location.hostname+'/ass/'+name+'/'+type;
	if (type=='js'){
		el=D.createElement('script');
		el.setAttribute('type','text/javascript');
		el.setAttribute('src',url);
	}
	else if (type=='css'){
		el=D.createElement('link');
		el.setAttribute('rel','stylesheet');
		el.setAttribute('type','text/css');
		el.setAttribute('media','all');
		el.setAttribute('href',url);
	}
	else
		return;
		
    head.appendChild(el);
}

Вопрос, за каким роботы так пишут:

location.protocol=="https:"?"https:":"http:"

если оно равно https, то равно https и можно просто воткнуть location.protocol, или в чем там фича?

[Vlasenko Fedor]

// Js Loader
var loader = (function (src, callback) {
    var doc = window.document, cache = {};
    return function (src, callback) {
        if (cache.hasOwnProperty(src)) {
            callback && (callback());
        } else {
            var el = doc.createElement('script'), loaded = 0;
            el.src = src, doc.body.appendChild(el), cache[src] = 1;
            if (callback) {
                el.onload = el.onreadystatechange = function () {
                    if ((el.readyState && el.readyState !== 'complete' && el.readyState !== 'loaded') || loaded)
                        return false;
                    el.onload = el.onreadystatechange = null, loaded = 1, callback();
                };
            }
        }
    };
}());
loader('test1.js', me);
function me() {
    alert('This callback Me');
}

если надо css идем сюда http://jsfiddle.net/vlasenkofedor/5pDXf/

[kostyanet]

Спасибо, хорошо написано. А разве скрипты без особой инструкции async способны загружаться асинхронно? Ну то есть скажем я вижу что в этой странице нет нужного скрипта, я его должен загрузить и загружаю и не проверяю ничего, а следующей строчкой буквально присваиваю переменной функцию из того самого скрипта. По идее пока тот скрипт не загрузится - на следующую строчку все равно не перейдет. Или как оно?

[Vlasenko Fedor]

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