JAVASCRIPT#75 - data 메소드 data("gf")의 존재에 대하여

Making game and loving pony is like chasing a thunder!

JAVASCRIPT#75 - 자바스크립트 data 메소드 data("gf")의 존재에 대하여

1. 표현을 창에 제한하기

style='position: absolute; overflow: hidden;'

을 추가한다. ㅇ_ㅇ

2. data("gf")에 대하여

data 메소드는 DOM 엘레멘트와 데이터를 연결하는 메소드이다.

var sprite = gf.spriteFragment.clone().css({
            left:   options.x,
            top:    options.y,
            width:  options.width,
            height: options.height}).attr("id",divId).data("gf",options);

위의 코드는 스프라이트 프래그맨트를 복사, CSS 프로퍼티 설정, id값 설정 이후 "gf" 라는 변수모임(data) 값을 가지게하고 options 를 해당 변수모임(data)값으로 가지게 한다.

var options = tilemap.data("gf");

options값을 정의하고 여기에 tilemap.data("gf")의 값을 저장하고 있다.

tilemap.data("gf")은 아래 코드에서 정의된다.

var tilemap = gf.tilemapFragment.clone().attr("id",divId).data("gf",options);

아래는 data("gf").x 값을 position으로 정의하거나 해당 div의 data("gf").x 를 반환하고 있다.

gf.x = function(div,position) {
    if(position) {
        div.css("left", position);
        div.data("gf").x = position;
    } else {
        return div.data("gf").x;
    }
}

여기서 사용되는 div.data("gf").x 에서의 div, gf.x를 사용하면서 전달된 div는 이미 data("gf").x 내용이 할당되어 있어야 한다. data메소드로 데이터 값을 사용하기 위한 일반적인 순서는

1. 값 지정하기

***.data("이름", 넣을 데이터);

2. 사용하기

***.data("이름").원하는값;

이런식이여야 한다.

위에서 사용하는 div 와 div.data("gf").x 값은 아래와 같은 함수에 의해 미리 정의된다.

gf.addSprite = function(parent, divId, options){
    var options = $.extend({
        x: 0,
        y: 0,
        width: 64,
        height: 64,
        flipH: false,
        flipV: false,
        rotate: 0,
        scale: 1
    }, options);
    var sprite = gf.spriteFragment.clone().css({
            left:   options.x,
            top:    options.y,
            width:  options.width,
            height: options.height}).attr("id",divId).data("gf",options);
    parent.append(sprite);
    return sprite;
}

즉, gf.x를 사용하려면 addsprite 함수에 의해 생성, data("gf", options)로 할당된 상태여야 한다는 말이다.

daitos = {
    kk : 12,
    vv : 21
};

var abc = $("#mygame").data("zxcss", daitos);
console.log(abc.data("zxcss").kk);

data("gf")에서 gf는 뭘까?

gf 이건 data메소드를 부르는 순간 사용자가 마음대로 정의하는 변수모임의 이름이다.

위에 zxcss는 마음대로 써갈긴 이름이다. daitos 전달되는 데이터를 의미한다.

$("#mygame").data("life", 3);
console.log($("#mygame").data("life"));

data 메소드는 DOM에 data 지정하는 메소드로, 값을 설정하는형태라면 셀렉터로 시작하는 DOM에 부착되야 한다.

var abc = $("#mygame").data("zxcss", daitos);
console.log(abc.data("zxcss").kk);

var cba = $("#mygame").data("xxx", daitos);
console.log(cba.data("xxx").vv);

한 DOM이 여러 data를 가질 수있다. zxcss xxx 같은 스트링을 이름으로 data가 각자 지정된다.

이로써 HTML의 요소 DOM에 값을 저장할수있게 되었다.