자바 스크립트에서 개체 작업

Question

현재 클리너 개체 지향적 인 방식으로 JavaScript로 작업하려고합니다. 이렇게 완전히 잘못하고있는 경우 실례합니다. this 이전 질문은 일반적인 참조로 대답하지만 ,

//Create some sample objects to play with. 
var testJSON = { 
    "rectangle": [ 
     { "id":3 , "x":5, "y":10, "width":10, "height":50 
     } 
    ] 
}; 

//Create Rectangle Constructor 
var rectangle = { 
    init: function(i, x, y, width, height) { 
    this.id = i, 
    this.x = x; 
    this.y = y; 
    this.width = width; 
    this.height = height; 
    this.fields = [] 
    }, 
    move: function(x, y) { 
    this.x += x; 
    this.y += y; 
    } 
}; 

//Create test array to hold all the objects 
var test = []; 

//Create a new rectangle object 
var myRectangle = Object.create(rectangle); 
myRectangle.init(1, 0, 0, 2, 4); 
myRectangle.move(3, 5); 

//put rectangle object in array associated with id 
test[myRectangle.id] = myRectangle; 

//Create a new rectangle object with the same variable name as it will all be in an array anyway. 
var myRectangle = Object.create(rectangle); 
myRectangle.init(2, 0, 0, 2, 4); 
myRectangle.move(0, 0); 

//put rectangle object in array associated with id 
test[myRectangle.id] = myRectangle; 

//put JSON result in 
test[testJSON.rectangle[0].id] = testJSON.rectangle[0]; 

//No Longer need this variable, is it worth getting rid of.. i dont know 
myRectangle =null; 

//Try and use methods created in the constructor. 
test[2].move(4,8); 

console.log(test); 

좋아, 이제 실제 질문, 내가 만들려고하고 응용 프로그램을 모두 JSON 데이터를 가지고 있으며, 예를 들어, 그래서 그것은 데이터를 생성 사용자가있을 것입니다 : 여기 내 '테스트'코드의 응용 프로그램이 생성됩니다 한 묶음의 '직사각형'을 만들고 사용자는 또한 직사각형을 만들 수 있습니다. 그래서 첫 번째 질문은 '올바른 접근인가?'이고 두 번째로 json 데이터에 사각형 생성자 (이동)에 정의 된 메서드가있는 방법은 무엇입니까?

도움을 주시면 감사하겠습니다.

Answer 1

이것은 @Marc B와 @Ray Toal이 언급 한 확장입니다 ... JSON이 아닌 전혀 나쁜 JavaScript 기능을 만들었습니다. 그래픽을 만들려면 사실 캔버스 태그를 "드로잉 div"로 사용하고 객체의 x 및 y 위치를 사용하여 2D 애니메이션을 고려하고 있다면이를 지속적으로 업데이트 할 수 있습니다. 그렇다면 JAVASCRIPT 애니메이션을 하드 코딩하기 전에 CreateJs을 시작 블록으로 사용하는 것이 좋습니다. 다시 말하지만, 코드는 괜찮지 만 사용자가이 데이터를 생성하게하는 것입니다. 서버 애플리케이션이 실제 JSON 또는 Node.js를 사용하는 것을 고려한다면, 지금은 단일 플레이어 측면에 초점을 맞추고 그래픽 '인터페이스'에있는 객체들입니다. <canvas>