TIOBE Index
Programming Language에 대한 선호도 순위를 정하는 사이트이다. JavaScript는 10위권 안으로 진입하면서 더욱 많은 사랑을 받고 있다. MS에서 만든 F#은 38위에서 13위까지 진입했다. F#은 함수형 프로그래밍 언어이다.
Objective-C는 iOS에 힘입어 C++보다 높은 순위에 위치하고 있다. 플랫폼의 중요성을 우회적으로 확인할 수 있는 지표가 아닌가 싶다. JavaScript/Perl/PHP등 웹 플렛폼과 관련된 언어를 살펴보면 30%가 넘는 것을 알 수 있다.
객체 생성하기(생성자 패턴)
CoffeeShop객체를 생성하고 영수증을 생성하는 예제
Coffee.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type='text/javascript' src='coffee.js'>
</script>
</head> <body> <h1>JavaScript Cafe</h1> <script> var aCafe = new CoffeeShop('JavaScript Cafe', '서울시 논현동'); aCafe.addMenu('에스프레소', 2000, true); aCafe.addMenu('아메리카노', 2500, true); aCafe.addMenu('카페라떼', 3000, true);
aCafe.addCustomer('dellwon', 10000); aCafe.addCustomer('홍길동', 5000); aCafe.addCustomer('철수', 2000); aCafe.addCustomer('영희', 8000); aCafe.addCustomer('Batman', 8000); </script> <h2> 주문 진행 </h2> <script>
var order1 = new Order(aCafe.customers[0], [aCafe.getMenuItem('아메리카노'), aCafe.getMenuItem('카페라떼'), aCafe.getMenuItem('아메리카노')]);
aCafe.takeOrder(order1);
//aCafe.takeOrder(customers[1], '아이스크림', true); //aCafe.takeOrder(customers[2], '아메리카노', true); //aCafe.takeOrder(customers[3], '카페라떼', true); //aCafe.takeOrder(customers[4], '에스프레소', false);
</script> <h2> 주문 처리</h2> <script> aCafe.serverOrder(); </script>
<h2> 영수증</h2> <script> aCafe.getreceipt(); </script> </body> </html> |
coffee.js
function Tagging(str, tag){ return '<'+tag+'>' + str+'</'+tag+'>'; }
function Customer(name, deposit){ this.name = name; this.deposit = deposit;
this.getName = function(){ return this.name; };
this.getDeposit = function(){ return this.deposit; };
return this; } function Order(customer, items){ this.customer = customer; this.items = items; return this; } function MenuItem(name, price, iced){ this.name = name; this.price = price; this.iced = iced; this.orderIce;
this.getName = function(){ return this.name; }; this.getPrice = function(){ return this.price; }; this.IsIced = function(){ return this.iced; }; this.getOrderIced = function(){ return this.orderIce; }; this.setOrderIced = function(bIce){ this.orderIce = bIce; };
}
function CoffeeShop(cafeName, address){ this.cafeName = cafeName; this.address = address; this.waiting = []; this.menu = []; this.customers = [];
this.addMenu = function(name, price, iced){ this.menu.push(new MenuItem(name, price, iced)); };
this.addCustomer = function(name, deposit){ this.customers.push(new Customer(name, deposit)); };
this.takeOrder = function(order){
this.waiting.push(order); document.writeln(Tagging(order.customer.name+'님 주문이 완료 되었습니다', 'br'));
};
this.serverOrder = function(){ for(var i in this.waiting){ document.writeln(Tagging(this.waiting[i].customer.name + '님은 ', 'br')); for(var j in this.waiting[i].items){ document.writeln(Tagging(this.waiting[i].items[j].name , 'br')); }; document.writeln(Tagging('을 주문하셨습니다.', 'br')); } };
this.getreceipt = function(){ for(var i in this.waiting){
document.writeln(Tagging('---------'+ this.cafeName+': ' + this.address +'----------------', 'br')); document.writeln(Tagging('--------'+ this.waiting[i].customer.name+' 고객님 ------', 'br'));
for(var k in this.menu){
var orderNum = 0; for(var t in this.waiting){ for(var z in this.waiting[t].items){ if(this.menu[k].name == this.waiting[t].items[z].name){ orderNum++; } } }
if(orderNum > 0){ document.writeln(Tagging(this.menu[k].name+' '+this.menu[k].price+ ' '+orderNum+'->'+(this.menu[k].price*orderNum), 'br' )); } } document.writeln(Tagging('-------------------------', 'br')); } };
this.getMenuItem = function(name){ for(var i in this.menu){ if(this.menu[i].name == name){ return this.menu[i]; } }
var noItem = { name: 'undefined', price: 0, iced: false }; return noItem; }; }
|
* 위의 생성자 패턴의 예제의 문제는 무엇일까?
생성자 패턴에 포함되어 있는 함수들은 객체를 생성할 때 마다 만들어지게 된다. 이는 필요 없는 리소스가 계속 늘어나는 문제를 가지게 된다. 이는 '생성자 프로토타입'을 생성하므로써 해결 할 수 있다.
프로토타입 객체
1. 메모리 사용량을 절감할 수 있다. (일반적으로 그렇게 해야 함)
2. 멤버의 추가나 변경을 인스턴스가 실시간으로 인식할 수 있다.
: 위에 예제에서 처럼 Car.prototype.open 이 잘 못 됐을 경우 바로 수정이 가능하다. 또는 필요에 따라 바꾸는 것이 동적으로 가능하다.
다음 사이트를 참조해 보자
http://insanehong.kr/post/javascript-prototype/
* 난독화
JavaScript는 Html 페이지가 요청하면 파일을 Client쪽에서 다운로드 할수 있다. 즉, Client 측에서 모든 코드를 볼수 있다. 일반적으로 성능을 위해서 .min.js 방식으로 최소화 시키기도 하지만, 난독화 과정을 거쳐 모든 함수, 변수들을 무의미하게 만들고 한줄로 만드는 경우가 있다. 보안등을 위해서나 코드를 공개하지 않기 위해서는 이러한 난독화 과정을 거치는것이 좋다.
'디지털 양피지 > JavaScript' 카테고리의 다른 글
| Web App. 개발을 위한 객체지향 JavaScript [4일차 - 2] (0) | 2014.05.15 |
|---|---|
| Web App. 개발을 위한 객체지향 JavaScript [4일차 - 1] (0) | 2014.05.15 |
| Web App. 개발을 위한 객체지향 JavaScript [3일차 - 1] (0) | 2014.05.14 |
| Web App. 개발을 위한 객체지향 JavaScript [2일차 - 2] (0) | 2014.05.13 |
| Web App. 개발을 위한 객체지향 JavaScript [2일차 - 1] (0) | 2014.05.13 |
