개발, 프로그래밍

이 글을 어떻게 하면 객체지향을 넘어 관점지향 프로그래밍을 하는 방법에 대해서 기술한 것입니다. 우선 간단하게 객체지향에 대해서 알아보도록 하겠습니다. 객체지향프로그래밍은 영어로 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 get(elements, idx){ return idx === undefined ? toArray(elements) : e

자바스크립트는 언어 특성상 동적 타입 언어에 속합니다. 타입이 정해서 있지 않기 때문에 장점도 많이 존재하긴 하지만 애플리케이션을 구성하는데 있어서는 약간 엄격한 필요성이 있습니다. 엄격함을 필요할 경우 구현 시에 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객체를 얻어오면 되긴 하지만 이는 표준이 아닌라서 파폭에서는 작동을 안한다는 문제가 있죠.