3 заметки с тегом

ondemand РСС

8 октября 2009, 10:46

Динамическая загрузка javascript с обратной связью (load javascript on-demand with callback)

Ну скрипт предельно прост, и продолжает образно говоря тему предшественников
function require(url, callback){
	var script = document.createElement("script")
	script.type = "text/javascript";
	if (script.readyState) { //IE
		script.onreadystatechange = function() {
			if (script.readyState == "loaded" 
			|| script.readyState == "complete") {
				script.onreadystatechange = null;
				callback();
			}
		};
	} else { //Others
		script.onload = function() {
			callback();
		};
	}
	script.src = url;
	document.getElementsByTagName("head")[0].appendChild(script);
}
Использовать просто, вот на примере j.mp
require(
	"http://j.mp/javascript-api.js?version=latest&login=login&apiKey=app_key", 
	function () {
		BitlyCB.myShortenCallback = function(data) {
		var result;
		for (var r in data.results) {
			result = data.results[r];
			result['longUrl'] = r;
			break;
		}
		console.log(result['shortUrl']);
	};
	BitlyClient.shorten(document.location, 'BitlyCB.myShortenCallback');
	}
);


javascript   ondemand

5 декабря 2008, 13:45

Dynamic load style or CSS («OnDemand»). Full dynamic Import :)

Функция empty определяет, считается ли переменная пустой.
function empty(param) {return (param == null || param == undefined) ? true : false;}

Для загруки стиля динамически, используем функцию import_style
function import_style(src){ 
	if (empty(src)) return;
	var imprt = document.createElement('style');
	imprt.setAttribute("type", "text/css");
	if (imprt.styleSheet) imprt.styleSheet.cssText = src; //IE
	else imprt.appendChild(document.createTextNode(src)); // Other normal browsers
	document.getElementsByTagName('head')[0].appendChild(imprt);
	return false; // disable link href-action
}

Для загруки CSS динамически, используем функцию import_css
function import_css(src, media){ 
	if (empty(src)) return;
	var imprt = document.createElement('link');
	imprt.setAttribute("rel", "stylesheet")
	imprt.setAttribute("type", "text/css");
	imprt.setAttribute("media", empty(media) ? "all" : media);
	imprt.setAttribute("href", src);
	document.getElementsByTagName('head')[0].appendChild(imprt);
	return false; // disable link href-action
}

Использовать очень и очень просто :)
<a href="#" onclick="import_style('body {color: red;}');">make red</a>
<a href="#" onclick="import_css('test.css');">make styled</a><br>

Раньше я описывал Импорт JavaScript, теперь можно подитожить, и научить фунцкию $import загружать style, css и js
function tms() {return new Date().getTime().toString();} // funtion return today date in second 
function $import(src, type, media){
	if (empty(src) || empty(type)) return;  // if empty go away
	switch (type) {
		case "js" : // import some javascript
			var imprt = document.createElement('script');
			imprt.setAttribute('type','text/javascript');
			imprt.setAttribute('src',src + '?' + tms()); // Get rid of the caching
		break;
		case "css" : // import css
			var imprt = document.createElement('link');
			imprt.setAttribute("rel", "stylesheet")
			imprt.setAttribute("type", "text/css");
			imprt.setAttribute("media", empty(media) ? "all" : media);
			imprt.setAttribute("href", src + '?' + tms()); // Get rid of the caching
		break;
		case "style" :  // import some style in head
			var imprt = document.createElement('style');
			imprt.setAttribute("type", "text/css");
			if (imprt.styleSheet) imprt.styleSheet.cssText = src; //IE
			else imprt.appendChild(document.createTextNode(src)); // Others
		break;
  	default: return;
  }
  document.getElementsByTagName('head')[0].appendChild(imprt); // mount import stuff to head
  return false; // disable link href-action
}	

Используем вот-так
<a href="#" onclick="$import('body {color: red;}','style');">make red</a>
<a href="#" onclick="$import('test.css','css');">make styled</a>
<a href="#" onclick="$import('test.js','js');">make alert</a>




Запомни!
Для корректной работы с фреймворками, или обьёмными функциями их лучше подгружать по таймауту (после подгрузки с помощью $import), вот так: setTimeout(«SomeFreamework.SomeFucntionMake(’someparametr’)», 100);



ondemand   javascript   css

8 октября 2008, 12:49

Dynamic load JavaScript («OnDemand»)

Для загрузки джаваскриптов динамически («по требованию»), можно использовать простую функцию:
function $import(src){
  var scriptElem = document.createElement('script');
  scriptElem.setAttribute('src',src);
  scriptElem.setAttribute('type','text/javascript');
  document.getElementsByTagName('head')[0].appendChild(scriptElem);
}
Если загружаемый Джаваскрипт часто изменяется, что бы избавиться от кеширования, можно использовать функцию ниже:
function $importNoCache(src){
  var ms = new Date().getTime().toString();
  var seed = "?" + ms; 
  $import(src + seed);
}
Пример использования:
$import("/js/somescript.js"); или $importNoCache("/js/somescript.js");

Для корректной работы с фреймворками, или обьёмными функциями их лучше подгружать по таймауту(после подгрузки самих фреймфорков/функций)
setTimeout("SomeFreamework.SomeFucntionMake('someparametr')", 100);
ondemand   import   setTimeout