import javascript | Qosmio Tech

Ago 18

Importar Javascript

Desenvolvimento, Javascript Add comments

Olá
Recentemente me perguntei porque não importar meus javascript’s para minha página igual é utilizado com o css, o “@import”, com isso eu deixaria mais organizado a minha “view”, porém não foi tão simples assim.

        @import "exemplo.css";

Navegando um pouco no google, me deparei com um script e acabei adaptando ele para poder utilizá-lo para importar meu javascript e meu css na minha página.
Ai vão os dois scripts.
Como são bem simples, não achei necessidade de explicá-los.
Importar JavaScript.

function ImportJS(file) {		
 
 
 
	var script = document.createElement('script');
 
	script.src = file;
 
	script.type = 'text/javascript';
 
	script.defer = true;	
 
	var head = document.getElementsByTagName('head').item(0);
 
	head.appendChild(script);
 
 
 
}

Importar Css

function ImportCSS(file) {		
 
 
 
	var script = document.createElement('link');
 
	script.href = file;
 
	script.type = 'text/css';
 
	script.rel = 'stylesheet';	
 
	var head = document.getElementsByTagName('head').item(0);
 
	head.appendChild(script);
 
 
 
}

Para aplicar em nossa página, apenas incluímos os nossos dois scripts, um que utilizei para mostar como é possível com o css também.

<script type="text/javascript" src="./js/import-js.js"></script>   
 
<script type="text/javascript" src="./js/import-css.js"></script>

E aqui chamamos as funções passando como parâmetro o caminho para o scripts e para o nosso css.

 <script type="text/javascript">  
 
  	var js1  = new ImportJS("./js/jquery-1.2.6.pack.js");  	
 
  	var js2  = new ImportJS("./js/jquery.bgiframe.js");
 
  	var js3  = new ImportJS("./js/jquery.dimensions.js");
 
  	var js4  = new ImportJS("./js/jquery.jdMenu.js"); 	
 
  	var js5  = new ImportJS("./js/jdMenu.conf.js"); 	
 
  	var css1 = new ImportCSS("./css/screen.css"); 	  	  		
 
  </script>

Utilizei para nosso exemplo um menu com jQuery, que depende de alguns plugins.
Exemplo

Adicione ->