JAVASCRIPT#54 - 실전예제 파트3 SampleData.js !

To what end? Only one pony can save me. The one pony worth live and die for.

JAVASCRIPT#54 - 실전예제 파트3 SampleData.js !

앞서 main.js 를 공부했는데 이제 추가로 3개의 js파일을 더 추가하게 된다.

1. Data.js

2. DataMgr.js

3. SampleData.js

첫번째는 Data.js로 여기서 사용하는 카테고리와 아이템 정의용으로 쓰이는 간단한 스크립트다. ("틀"로 생각하면됨)

function Category(id, name, items)
{
    this.id = id;
    this.name = name;
    this.items = items;
}

function Item(categoryID, id, rank, title, info, reviews, QnA)
{
    this.categoryID = categoryID;
    this.id = id;
    this.rank = rank;
    this.title = title;
    this.info = info;
    this.reviews = reviews;
    this.QnA = QnA;
}

Category(id,name,items) 부분은 지금까지 베일에 싸여있었던 data인 arrCategory의 실체이다.

두번째는 DataMgr.js 로써 이는 임시 서버역할을 해서 데이터를 가져와서 저장하는 역할을 하는 하나의

거대한 오브젝트를 정의하고있는 스크립트다.

var DataMgr = {
    "callbackFunc" : null,
   
    "loadAllCategory" : function(callbackFunc)
    {
        this.callbackFunc = callbackFunc;
        var data = _getAllCategory();
        this.callbackFunc(data);
    },

    "loadCategory" : function(id, callbackFunc)
    {
        this.callbackFunc = callbackFunc;
        var data = _getCategory();
        this.callbackFunc(data);
    },

    "loadCategoryName" : function(id, callbackFunc)
    {
        this.callbackFunc = callbackFunc;
        var data = _getCategoryName(id);
        this.callbackFunc(data);
    },

    "loadItem" : function(categoryID, itemID, callbackFunc)
    {
        this.callbackFunc = callbackFunc;
        var data = _getItem(categoryID, itemID);
        this.callbackFunc(data);
    }
};

DataMgr...?

main.js 도입부에 썻었던 두개의 구문 기억하는가.

$(document).ready(function()
{
    DataMgr.loadAllCategory(completeCallback);
});

var completeCallback = function(data)
{
    var categoryDiv = new CategoryDiv(data);
    var recommend = new Recommend(data);
}

loadAllCategory라는 메소드를 통해 Recommend함수와 CategoryDiv함수에 data를 전달하고 있다.

보면 파라미터로 함수(completeCallback)를 전달하고 있는데, 전달된 함수는 전달받은 함수(loadAllCategory)내에서 실행해 data를 이용하는 방식을 취하고있다.

논리순서를 나열해보면,

콜백함수를 파라미터로 전달 -> data 정의 -> 정의한 data를 콜백함수에 넣어서 실행.

세번째는 SampleData.js 로 실제 데이터를 만들어내는 샘플링 스크립트다.

var _data = new Array();

var _getAllCategory = function()
{
    return _data;
}

var _getCategory = function(id)
{
    var result = null;
    for(var i = 0; i<_data.length; i++)
    {
        if(id == _data[i].id)
        {
            result = _data[i];
            break;
        }
    }
    return result;
}

var _getCategoryName = function(id)
{
    var result = null;
    for(var i=0; i<_data.length; i++)
    {
        if(id == _data[i].name)
        {
            result = _data[i].name;
            break;
        }
    }
    return result;
}

var _getItem = function(categoryID, ItemID)
{
    var result = null;
    var tmpItems = null;

    for(var i=0; i<_data.length; i++)
    {
        if(categoryID == _data[i].id)
        {
            tmpItems = _data[i].items;
            break;
        }
    }

    for(var i=0; i<tmpItems.length; i++)
    {
        if(itemID == tmpItems[i].id)
        {
            result = tmpitems[i];
            break;
        }
    }

    return result;
}

$(function(){
    var tmpCategory = null;
    var tmpItems = null;
    var tmpItem = null;
    var tmpReview = null;

    tmpItems = new Array();
    tmpCategory = new Array();

    for(var i=1; i<10; i++)
    {
        tmpReview = new Array();
        tmpReview.push("First-Review-01");
        tmpReview.push("First-Review-02");
        tmpItem = new Item("cat1", "ITEM-0"+i, i, "First-Title-0"+i, "First-Info-0"+i, tmpReview, "First-QnA-0"+i);
        tmpItems.push(tmpItem);
    }

    tmpCategory = new Category("cat1", "First Category", tmpItems);
    _data.push(tmpCategory);

    tmpItems = new Array();
    tmpCategory = new Array();

    for(var i=1; i<10; i++)
    {
        tmpReview = new Array();
        tmpReview.push("Second-Review-01");
        tmpReview.push("Second-Review-02");
        tmpItem = new Item("cat2", "ITEM-0"+i, i, "Second-Title-0"+i, "Second-Info-0"+i, tmpReview, "Second-QnA-0"+i);
        tmpItems.push(tmpItem);
    }

    tmpCategory = new Category("cat2", "Second Category", tmpItems);
    _data.push(tmpCategory);

    tmpItems = new Array();
    tmpCategory = new Array();

    for(var i=1; i<10; i++)
    {
        tmpReview = new Array();
        tmpReview.push("Thrid-Review-01");
        tmpReview.push("Thrid-Review-02");
        tmpItem = new Item("cat3", "ITEM-0"+i, i, "Third-Titile-0"+i, "Third-Info-0"+i, tmpReview, "Third-QnA-0"+i);
        tmpItems.push(tmpItem);
    }

    tmpCategory = new Category("cat3", "Third Category", tmpItems);
    _data.push(tmpCategory);
});

이 스크립트는 두 부분으로 나눌 수 있는데

첫번째 부분은 쿼리명령어 정의 부분으로 "_어쩌구저쩌구"형태로 만들어서 _data 값을 리턴한다. 

두번째 부분은 반복문을 통해 데이터를 찍어내서 push 명령어를 통해서 카테고리 만들고 _data에 저장한다.

두번째 부분에서 아이템 값을 설정하는 부분을 좀 살펴보면,

tmpItem = new Item("cat1", "ITEM-0"+i, i, "First-Title-0"+i, "First-Info-0"+i, tmpReview, "First-QnA-0"+i);
        tmpItems.push(tmpItem);

이런식으로 했는데 위에 아이템 정의를 보면

function Item(categoryID, id, rank, title, info, reviews, QnA)
{
    this.categoryID = categoryID;
    this.id = id;
    this.rank = rank;
    this.title = title;
    this.info = info;
    this.reviews = reviews;
    this.QnA = QnA;
}

로 되어있는데. 결국 Item은 객체이면서 함수이고 객체를 만드는 틀, 컨스트럭터인것임.

마지막으로 좀더 살펴봐야 될것이 셀렉터쪽에 이상한 모양이 포착됨.

$(function(){})

이건 DOM이 준비되면 무조건 실행하는 무조건 실행 함수라고 보면됨.

myproject 페이즈1.zip

아직 미완성이지만 실제로 작동하는 이동식 추천목록 표시와 버튼으로 목록 이동기능

카테고리 표시까지 구현된 실전예제.

차근차근 한발걸음씩! >:D 다음 파트에서는 list.html 구현해볼예정.