본문 바로가기

분류 전체보기

 (228)
레퍼런스 문제 해결 이전 포스팅의 ORM의 레퍼런스와 관련한 버그가 있다. find()의 결과를 리턴할때나 저장할때 인스턴스를 복제하지 않았다. 따라서 프로퍼티를 고치면 원래 asset을 바꾸게 된다. 그러나 update() 함수를 호출했을 때만 변경 사항을 asset에 갱신해야 하므로 이 문제를 해결해야 한다. var asset = new Asset({name: 'foo'}); asset.save(); // 프로퍼티를 변경했지만 update()는 호출하지 않았다. asset.name = 'wem'; find()에서 새 오브젝트를 만들도록 수정해서 이 문제를 교쳐보자. 레코드를 만들거나 갱신할 때에도 오브젝트를 복제해야 한다. Asset.extend({ find: function(id) { var record = this...
ID 지원 기능 추가 Math.guid = function() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { var r = Math.random()*16|0, v = c == 'x' ? r: (r&0x3|0x8); return v.toString(16); }).toUpperCase(); }; 이제 GUID 생성 함수를 우리의 ORM에 간단하게 추가할 수 있다. create() 함수를 수정하자. Model.extend({ create: function() { if(!this.id) this.id = Math.guid(); this.newRecord = false; this.parent.records[this.id] = this; } ..
ORM 만들기 오브젝트 관계형 매퍼(ORM)는 보통 자바스크립트 언어 이외의 다른 언어에서 사용한다. 그러나 데이터 관리에 사용하는 유용한 기법인 ORM을 자바스크립트 애플리케이션 모델에도 활용할 수 있다. 예를 들어 ORM을 이용해 모델을 원격 서버와 묶을 수 있다. 모델을 원격 서버와 묶은 상태에서 모델 인스턴스를 변경하면 백그라운드 Ajax 요청을 서버로 보낸다(즉 인스턴스에 발생한 변화를 백그라운드로 서버에 전달한다). 또는 모델을 HTML 엘리먼트 인스턴스와 묶을 수도 있다. 그러면 인스턴스에 발생한 변화가 뷰에 반영된다. 본질적응로 ORM은 단지 데이터를 감싸는 오브젝트 계층일 뿐이다. 보통 SQL 데이터베이스를 추상화할 때 ORM을 사용하지만 우리가 살펴보려는 것처럼 자바스크립트 데이터 타입을 추상화할 때..
MVC와 명칭공간 애플리케이션의 뷰, 상태, 데이터를 완벽하게 분리하면 애플리케이션 구조를 깔끔하게 유지할 수 있으므로 지속가능한 애플리케이션을 만들 수 있다. MVC 패턴에서 데이터 관리는 모델(M of MVC)에 해당한다.모델은 뷰, 컨트롤러와 분리되어야 한다. 모델에 포함하는 데이터 조작과 관련한 로직이나 행동 등에는 적절하게 명칭공간을 사용해야 한다. 자바스크립트에서는 함수와 변수를 명칭공간으로 추가하여 함수와 변수를 오브젝트의 프로퍼티로 만들 수 있다. var User = { records: [ ] } 모든 모델의 프로퍼티를 명칭공간 아래에 추가하여 충돌을 피할 수 있으며 MVC를 준수하는 모델을 유지할 수 있다. 명칭공간을 이용해야 함수와 콜백이 서로 엉망으로 뒤얽히는 상황을 피할 수 있다. 실제 사용자 옵젝트..
비공개 함수 추가하기 자바스크립트는 수정할 수 없는 프로퍼티 기능을 지원한다. 그러나 주요 브라우저에서 아직 이 기능을 구현하지 않았으므로 이용할 수가 없다. 대신 자바스크립트의 익명 함수를 이용해 내부에서만 접근할 수 있는 비고액 범위를 만들 수 있다. var Person = function() {}; (function() { var findById = function() {}; Person.find = function(id) { if(typeof id == 'integer') return findById(id); } })(); 위 예제에서는 클래스의 모든 프로퍼티를 익명 함수로 감쌌다. 따라서 지역 변수 findById는 현재 범위에서만 접근할 수 있다. Person 변수는 전역으로 정의했으므로 어디에서나 접근할 수 있다..
클래스 라이브러리에서 범위 조절하기 이벤트 핸들러에서 함수를 처리할 때에 클래스의 범위를 유지할 수 있도록 클래스와 인스턴스 모두에 프록시 함수를 추가할 것이다. var Class = function(parent) { var klass = function() { this.init.apply(this, arguments); }; klass.prototype.init = function() {}; klass.fn = klass.prototype; // 프록시 함수 추가 klass.proxy = function(func) { var self = this; return(function() { return func.apply(self, arguments); }); } // 인스턴스에도 함수를 추가 klass.fn.proxy = klass.proxy..
함수 호출 자바스크립트에서 함수를 언제 어디에서 호춯했느냐에 따라 함수의 컨텍스트(ex: this)가 달라진다. apply() 함수는 컨텍스트, 인자배열이라는 파라미터 두개를 갖는다. 컨텍스트가 null이면 전역 컨텍스트를 사용한다. 자바스크립트는 컨텍스트 변경을 이용해 상태를 공유(특히 이벤트 콜백에서) 한다. 제이쿼리는 apply()와 call()을 이용해 자신의 api에서 컨텍스트를 변경한다. $('.clicky').click(function() { $(this).hide(); }); $('p').each(function() { $(this).remove(); }); 일반저긍로 지역 변수에 this 값을 저장해서 원래 컨텍스트에 접근하는 방법을 흔히 사용한다. var clicky = { wasClicked: ..
클래스 라이브러리에 상속 기능 추가하기 새 클래스를 만들 때 선택사항으로 부모를 넘겨줄 수 있도록 함수를 구현할 것. var Class = function(parent) { var klass = function() { this.init.apply(this, arguments); } if(parent) { var subclass = function() {}; subclass.prototype = parent.prototype; klass.prototype = new subclass; } klass.prototype.init = function() {}; klass.fn = klass.prototype; klass.fn.parent = klass; klass._super = klass.__proto__; // 클래스 프로퍼티 추가 klass.ex..
클래스 상속과 프로토타입 클래스와 클래스의 프로퍼티를 상속받으려면 생성자 함수를 먼저 정의해야 한다. 그다음 부모의 새 인스턴스를 생성자 함수의 프로토타입으로 설정한다. var Animal = function() {}; Animal.prototype.breath = function() { console.log('breath'); } var Dog = function() {}; // Dog는 Animal을 상속한다. Dog.protoytpe = new Animal; Dog.prototype.wag = function() { console.log('wag tail'); } //////// var dog = new Dog; dog.wag(); dog.breath();
모듈화와 클래스생성(2) 클래스 라이브러리에 메소드 추가하기 var Class = function() { var klass = function() { this.init.apply(this, arguments); } klass.prototype.init = function() {} // 프로토타입의 단축형 klass.fn = klass.prototype; // 클래스의 단축형 klass.fn.parent = klass; // 클래스 프로퍼티 추가 klass.extend = function(obj) { var extended = obj.extended; for(var i in obj) { klass[i] = obj[i]; } if(extended) extended(klass) } // 인스턴스 프로퍼티 추가 klass.include..

티스토리툴바