듣기 싫어하는 사람들이 제법 많은 “접근성”이란 말을 시작부터 써야겠다.
“접근성”을 높이는 방법 중 한가지는, HTML안에 javascript를 최대한 빼버리는 작업이 포함되는데,
물론 오늘날의 화려한 웹페이지에서 javascript를 안쓸수는 없는 일.
따라서 javascript를 별도로 밖으로 빼어두어 javascript가 없이도 작동하게 한 후, 나중에 binding하는 방법을 쓰는 것이 좋은데, 이는 behavior를 컨텐트와 분리시킨다는 요즈음의 트렌드와도 일맥상통한다.
무슨 소리인고 하니,
[html]
[/html]
이런 코딩을 하지 말라는 뜻.
대신
[html]
[/html]
이런 식으로 쓰라는 건데…
한가지 문제가 있는 것이, 이 window.onload는 어쩔 수 없이 HTML안에 손으로 적어줘야 한다는 점. 모듈별 js를 이용한다거나 js 프레임워크를 쓸 때에도 window.onload는 페이지의 상황마다 그 구성이 달라질 수 밖에 없다.
이 window.onload를 밖으로 빼고, 모듈별 js로 관리할 때 자동으로 window.onload의 구성을 바꿔주는 방법이 없을까?
그래서 만들어본 pageOnload 객체.
pageOnload.js
[javascript]
var PageOnload = new pageOnload();
window.onload = function() {
PageOnload.run();
}
function pageOnload() {
this.stackFunc = new Array();
this.add = function() {
var args = new Array();
var len = this.stackFunc.length;
for(var i = 0; i < arguments.length; i++) {
args[i] = arguments[i];
}
this.stackFunc[len] = args;
}
this.run = function() {
var tstr='';
for (var i=0; i < this.stackFunc.length; i++) {
var myFunc = this.stackFunc[i].shift();
if (this.stackFunc[i].length > 0) {
var str = “‘” + this.stackFunc[i][0] + “‘”;
if (this.stackFunc[i].length > 1) {
for(var j=1; j < this.stackFunc[i].length;j++) {
str = str + ", '" + this.stackFunc[i][j] + "'";
}
}
}
eval(myFunc + "(" + str + ");");
}
}
}
[/javascript]
이 파일을 밖으로 빼두고
[html]
[/html]
처럼 javascript의 제일 처음에 불러온다.
그럼 moduleA.js에서는
[javascript]
PageOnload.add(”initModuleA”, argument1, argument2, argument3, …);
initModuleA(arg1, arg2, arg3, …) {
// window.onload시 moduleA의 초기화에 필요한 작업.
}
[/javascript]
처럼 자기자신을 초기화하는 코드를 window.onload에 직접 기록하는 대신 pageOnload객체에 위임할 수 있다.
물론 javascript없는 HTML코드 따위를 지향하지 않는 경우에는 필요없는 코드.
TODO : 머리가 돌이 되었는지, eval말고 분명히 function pointer를 이용해서 해당 함수를 직접 실행시키는 방법이 있었을 터인데 기억이 안난다. -_-a
TODO : 현재는 초기화함수의 인자를 string형으로만 받고 있는데, 다른 타입도 전달가능하도록 할 것.
개선부분에 대해 아이디어 있으신 분 알려주세요.
