Deerua about Coding -> Заметки с тегом «import»

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

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

• Увидел здесь

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

• Простой пример использования
• Скачать JS (1.2Kb)

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

• Сложный пример использования
• Скачать всё(~150Kb с картинкой)

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

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