개발, 프로그래밍

이 글을 어떻게 하면 객체지향을 넘어 관점지향 프로그래밍을 하는 방법에 대해서 기술한 것입니다. 우선 간단하게 객체지향에 대해서 알아보도록 하겠습니다. 객체지향프로그래밍은 영어로 Object-Oriented Programming 줄여서 OOP라고 합니다. 이것은 프로그래밍 패러다임의 일종으로써, 이전의 절차지향적 프로그래밍 이후에 나온 패러다임입니다. 간단하기 이야기 하자면 프로그래밍을 할때 주인공이 변경되었다라고 생각하시면 됩니다. 이전에는 함수(function)위주로 프로그래밍을 하였다면 이후에는 객체(object)위주로 프로그래밍을 한다는 의미 입니다. 즉 논리 보다는 다루고자 하는 객체라는 시각으로 접근하는 것입니다. ex> 절차 지향적 프로그래밍 숫자+숫자-숫자을 계산하는 프로그램을 구현하시오. function compute(a,b,c){ return a+b-c; } OOP관점에서는 obj = { a: 0, b: 0, c: 0, init: function(a,b,c){ this.a = a; this.b=b; this.c=c}, compute: function(){return this.a + this.b - this.c } obj.init(숫자, 숫자, 숫자); obj.compute(); 두 패러다임에서 누가 옳고 그르다고 말할 수 없습니다. 프로그램의 규모가 작은 경우 즉 위와 같은 경우에는 확실이 절차지향 프로그램이 이점을 가지고 있습니다. 하지만 애플리케이션 단위로 프로그램이 크다면 객체지향 프로그램이 더욱 더 좋은 선택이 될 것입니다. 현재 자바스크립트 소스코드는 절차지향적 프로그래밍 되어 있는것들이 많이 있습니다. 그 이유는 아마도 자바스크립트로 되어 있는 프로그램의 대부분이 소규모인 경우가 많아서 그런것이라고 생각합니다. 하지만 점점 웹의 규모가 커지고 사용자의 웹에대한 욕구가 커지면서 자바스크립트는 소규모를 넘는 프로그램을 할 필요성이 점점 증가하고 있습니다....

(function ($_) { $_.Base = {}; function subclass() {}; var Class = function(/*parent, protoProps, staticProps*/) { var arg = $_.A.toArray(arguments), parent = null, protoProps, staticProps; if($_.O.isFunction(arg[0])) parent = arg.shift(); protoProps = arg[0]; staticProps = arg[1]; function child() { var self = this, key, arg = $_.A.toArray(arguments); for(key in self){ if(!$_.O.isFunction(self[key]))self[key] = $_.O.clone(self[key]); } function initsuper(parent) { if(!parent) return; if(parent.superclass) initsuper(parent.superclass); parent.prototype.initialize.apply(self, arg); } initsuper(parent); this.initialize.apply(this, arg); } child.superclass = parent; child.subclasses = []; if(parent){ subclass.prototype = parent.prototype; child.prototype = new subclass(); parent.subclasses.push(child); } child.prototype.initialize = function () {}; if (protoProps) $_.O.ext...

(function (definition) {     // RequireJS     if (typeof define == "function") {         define([Asdf], definition);     } else {         definition(Asdf);     } }) (function($_) { var arraySlice = Array.prototype.slice, readyRE = /complete|loaded|interactive/, isString = $_.O.isString ; var arrayMap =  $_.A.map, nativeSplice = Array.prototype.splice, extend = $_.O.extend; var root = this, compact = $_.A.compact; function El(){ if (this.constructor !== El){ return new El(); } }; function map(elements, fn){ return arrayMap(elements, function(el, i){ return fn.call(el, i, el); }); } function slice(elements){    return arraySlice.apply(toArray(elements), arraySlice.call(arguments,1)); } function toArray(elements) { var arr = []; for (var i = 0, ref = arr.length = elements.length; i < ref; i++) { arr[i] = elements[i]; } return arr; ...

자바스크립트는 언어 특성상 동적 타입 언어에 속합니다. 타입이 정해서 있지 않기 때문에 장점도 많이 존재하긴 하지만 애플리케이션을 구성하는데 있어서는 약간 엄격한 필요성이 있습니다. 엄격함을 필요할 경우 구현 시에 function a(b, c) {   if(typeof b !=...) throw new Error();   if(typeof c !=...) throw new Error();   ... } 형태로 많이 구현하고 있습니다. 이런 형태로 구현하면 인자값에 대한 타입을 정의하여 함수가 오동작하는것을 미리 방지할수 있습니다. 이런 형태로 인자값에 대해서는 좀더 엄격한 타입을 정할수 있으나 반환값 적용할 수 있을까요? 이러한 물음을 가지고 여러 실험을 해보았습니다. 그러던중 클로저로 함수를 랩핑하면 어떨까에 대해서 생각이 들었습니다. 여기에다가 그에 관한 내용을 적습니다. 만일 반환값이 반드시 boolean이여야 한다면!! function is(fn) { return function (){return !!fn.apply(this,arguments)}} 대부분 프로그래밍에서 is나 has로 시작하는 함수는 boolean을 반환해야 한다고 합니다. 그래서 위에 형태로 껍데기를 만들고 var isNum = is(function (value) { return /^\d+$/.test(value) }); 이런식으로 정의하면 이 함수는 반드시 boolean을 반환합니다. 이렇게 보통 java나 다른 언어에서 boolean and (boolean, boolean c) {   return b&&c; } 이런거에서 var isAnd = is(function (a, b){ return a&&b } ); 이런식으로 정의하면 됩니다. 이런식으로 사용하면 Number, String등 기본 내장 클래스 객체로 반드시 반환하게 할수도 있으면 사용자 클래스 객체를 반환하게 할수도 있습니다.

function load(src,callback){ var f = document.createElement('iframe'); f.src = src; f.id = 'test123123'; f.width = 0; f.height = 0; document.body.appendChild(f); var w = document.getElementById(f.id).contentWindow; w.onload = function(e){ var fn = new Function('w','with(w){return '+ callback.toString() + '}'); fn(w)(); setTimeout(function(){document.body.removeChild(f)},15); } } load('3.html',function(){alert(document.body.innerHTML)});

<html> <head></head> <body>Test <input type='button' onclick='(function(el){eventHandler.apply(el,arguments)}(this))' value='click' /> <script> eventHandler = function(){ this.onclick = function(e){ console.log(e); }; this.click(); }; </script> </body> </html> 대게 보통 onclick을 통해서 html 에서 해당 함수를 넣어 마우스 클릭시 이벤트를 생성하는 소스코드는 비록 추천하는 개발방식이 아닌데도 엄청 많이 사용되고 있습니다. 그래서 혹시 event 객체를 얻기 위해서 고생을 해야 하는데 위에서 DOM0을 DOM1로 변경해서 event 객체를 얻었습니다.  사파리 IE에서는 window.event객체를 얻어오면 되긴 하지만 이는 표준이 아닌라서 파폭에서는 작동을 안한다는 문제가 있죠.

부제를 정하지 못해서 그냥 안썼습니다. 죄송합니다. 제 지식이 너무 얕아서 무엇이라고 정해야 할지 몰르겠습니다. 그럼 시작하겠습니다. 오늘 공부를 하다가 깨닭은 바가 있어서 정리를 합니다. 그리 거창하고 대단한것은 아니지만 자바스크립트에 한발 더 다가갈 수 있을 꺼 같습니다. 보통 객체 지향적으로 자바스크립트를 코딩할때 var C = function() { var x = 'txt'; this.getX(){ return x; }; }; var c= new C(); 또는 var C = function(x) { this.x = x; } C.prototype.getX(){ this.x; }; var c = new C('txt'); 이렇게 씁니다. 저는 이것을 가지고 깊은 생각을 했습니다. 왜 그렇게 쓰는 것일까? 책을 찾아보던 중 new라는 전치 연산자에 대해서 나옴니다. new를 쓰고 뒤에 함수쓰고 해당 함수 안에 return문이 없으면 해당 this를 반환한다. 즉 var c= new C(); 이건 객체를 생성하고 해당 this를 반환한다는 의미라는 것입니다. 또한 우리가 객체를 편하게 생성할때, var c = new Object();를 사용해도 되고, var c = {};라고 해도 됩니다. 좀 산으로 갔군요. 다시 원위치로 그럼 var c는 해당 객체에 대한 주소(? 확신이 없음)값 비스무리한것을 가지게 됩니다. 그래서 안에 있는 메소드를 참고할 때는 c.getX() 이러면 해당 메소드를 불러낼 수 있습니다. 즉 요런 느낌이 들면 됩니다. c가 가리키고 있는 메모리 영역으로 가서 그 안에 있는 getX() 메소드를 실행해라. 여기서 전 또하나의 의문이 들었습니다. var f = function(){}; f.a = function(){}; 이게 되는냐에 대한 의문입니다. f는 Objec...