javascirpt MVC - 모델

참고

maccman

model.js

MVC와 명칭공간

var User = {
	records: [],
	fetchRemote: function(){ /* ... */ }
};
var user = new User;
///////////////////////////////////
var User = function( atts ){
	this.attributes = atts  || {};
};

User.prototype.destory = function(){
	/* ... */
};
user.destroy();

명칭공간에 대한 자세한 정보는 피터 미쇼 블로그 참조

ORM

if( tpeof Object.create !== "function" )
Object.create = function(o){
function F(){}
F.prototype = o;
return new F();
};

더클라스 크록포드의 프로토타입의 상속 참고

ID 지원기능

로버트 키퍼 Math.random()을 이용한 가상의 난수 GUID 생성기

guid.js

Math.guid = funciton(){
	return 'xxxxxxxx-xxx-4xxx-yxxx-xxxxxxxxxxx'.replace(/[xy]/g, function(c){
		var r = Math.random()*16|0, v = c == 'x' ? r: (r&0x3|0x8);
		return v.toStrong(16);
	}).toUpperCase();
};

서버에서 데이터 로딩

Ajax는 요청이 발생한 도메인, 서브 도메인, 페이지 포트가 같아야한다. the same origin policy.

다른 도메인간 자원 공유를 위한 CORS Cross-Origin Resource Sharing 기법이 있다. ( IE6 이하만 아니라면.. )

• IE >= 8 (주의사항 존재한다.)
• FF >= 3
• Safari : 완벽지원
• Chrome : 완벽지원
• Opera : 지원안함

CORS 사용은 응답헤더에 추가된 내용으로 사용가능

Access-Control-Allow-Origin: example.kr

Access-Control-Request-Method: GET, POST, PUT, DELETE

JSONP ( JSON with pading )사용

CORS가 표준화되기 전 사용된 기법으로 JSON 에드포인트를 가르키는 스크립트 태그를 포함하며 반환된 데이트를 함수 호출로 감싼다.

CORS, JSONP를 사용한다면 보안에 정말 신경써야 한다.

로컬에 데이터 저장

모든 브라우저가 적어도 도메인당 5MB 이상의 저장소를 제공

• IE >= 8
• FF >= 3.5
• Safari >= 4
• Chrome >= 4
• Opera >= 10.6

로컬 저장소/세션 저장소

로컬 저장소 : 브라우저 종료 후에도 데이터 보존

localStorage["key"] = "test";           // 값 설정
var ItemStored = localStorage.length;   // 개수
localStorage.setItem("key", "test");    // 값 저장
localStorage.getItem("key");            // 로드
localStorage.removeItem("key");         // 삭제
localStorage.clear();                   // 제거

var o = { key: "value"};
localStorage.setItem("key" JSON.stringify(o) );       // 직렬화 저장
var rs = JSON.parse( localStorage.getItem( "key" ) ); // 로드 후 복원

세션 저장소 : 브라우저 종료시 데이터 삭제