2012년 2월 4일 토요일

client 에서도 node.js 처럼 require 를 써보자.


문득 생각난 옛날 코드. 그땐 include 였나 싶기도 한데
html 문서에 script 태그를 덕지덕지 쓰는게 싫었다.
그래서 script 객체를 동적으로 생성하고 javascript 안에서 참조하도록 하곤 했는데 간단하게 만들어 보았다.

var require=function(a){document.getElementsByTagName("head")[0].appendChild(function(b){b.type="text/javascript";b.src=a;return b;}(document.createElement("script")));};

딱 한줄 넣어주시라.

require('source URI');
형식으로 사용하면 된다.

풀어서 쓰면 아래와 같다.
script 객체를 만들어서 속성을 정해주고 head에 append하는 함수인셈이다.

var require = function(URI) {
  document.getElementsByTagName('head')[0].appendChild(
    (function(s) {
      s.type='text/javascript';
      s.src=URI;
      return s;
    })(document.createElement('script'))
  )
};

실제 사용예.
http://jsbin.com/ihamaf/edit#javascript,html,live
var require=function(a){document.getElementsByTagName("head")[0].appendChild(function(b){b.type="text/javascript";b.src=a;return b;}(document.createElement("script")));}; require('http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'); window.onload=function(){ $('p').text('realtime javascript loader'); };
실시간으로 생성하는 것이라 onload 이후에 사용해야한다는 점을 조심하자.