Deerua about Coding: последние заметки с тегом «import»

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

Thu, 08 Oct 2009 10:46:09 +0200

Ну скрипт предельно прост, и продолжает образно говоря тему предшественников

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
javascript > import > ondemand

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

Fri, 05 Dec 2008 13:45:53 +0200

Функция 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);

Комментарии к заметке

Теги:
javascript > import > ondemand
javascript
css

Dynamic load JavaScript ("OnDemand")

Wed, 08 Oct 2008 12:49:11 +0200

Для загрузки джаваскриптов динамически ("по требованию"), можно использовать простую функцию:

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);

Комментарии к заметке

Теги:
javascript > import > ondemand
javascript > import
javascript > function > setTimeout

Dynamic load JavaScript ("OnDemand")

Wed, 08 Oct 2008 12:49:11 +0200

Для загрузки джаваскриптов динамически ("по требованию"), можно использовать простую функцию:

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);

Комментарии к заметке

Теги:
javascript > import > ondemand
javascript > import
javascript > function > setTimeout