JAVASCRIPT#55 - 자바스크립트 slice split 메소드 list.js Util.js 실전예제 파트4

Oh AJ what a pity you don't understand you take me by the heart when you take me by the hand ♥

JAVASCRIPT#55 - 실전예제 파트4 list.js Util.js

$(document).ready(function()
{
    var categoryID = Util.getQueryStringParams("categoryID");
    DataMgr.loadCategory(categoryID, completeCallback);
});

var completeCallback = function(data)
{
    var listObj = new List(data);
}

function List(category)
{
    this.arrItemList = category.items;

    $("#categoryName").text("Category : " + category.name);
    for(var i=0; i<this.arrItemList.length; i++)
    {
        $("<div class='itemList'></div>").appendTo("#listDiv").text("Rank : " + this.arrItemList[i].rank + ", Title : " + this.arrItemList[i].title).attr("itemID", this.arrItemList[i].id).attr("categoryID", category.id);   
    }
}

$("#listDiv > div").css("cursor", "pointer");

var thisObj = this;

$("#listDiv > div").on("mouseenter", function(){
    $(this).addClass("focused").siblings().removeClass("focused");
});

$("#listDiv > div").on("mouseleave", function(){
    $(this).removeClass("focused");
});

$("#listDiv > div").on("click", function(event){
    var url = "detail.html?categoryID=" + $(this).attr("categoryID") + "&itemID=" + $(this).attr("itemID");
    $(location).attr("href", url);
});

list.js는 세가지 파트로 나뉜다.

1. data값 불러오기

var categoryID = Util.getQueryStringParams("categoryID");

이걸로 카테고리 아이디 값을 분리해서 저장한후

DataMgr.loadCategory(categoryID, completeCallback);

Mgr을 호출해서 아이디으로 해당하는 data category를 가져온다.

아래는 참고용 loadCategory() 메소드의 정의와 _getCategory() 메소드의 정의

"loadCategory" : function(id, callbackFunc)
    {
        this.callbackFunc = callbackFunc;
        var data = _getCategory(id);
        this.callbackFunc(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;
}

* 아이디값이 일치하는 카테고리를 반환한다.

2. 리스트 생성, 표기하기

대부분 전에 공부했던 main.js 부분에서 다룬 것들이라 굳이 설명할건 없는것같다.

3. UI 설정

var Util = {
    "getQueryStringParams" : function(sParam)

{
        var sPageURL = $(location).attr("href");
        sPageURL = sPageURL.slice(sPageURL.indexOf("?")+1);
        var sURLvariables = sPageURL.split("&");

        for(var i=0; i<sURLvariables.length; i++)
        {
            var sParameterName = sURLVariables[i].split("=");
            if(sParameterName[0] == sParam)
            {
                return sParameterName[1];
            }
        }
    }
}

오늘의 두번째 스크립트 Util.js

얘는 간단히 URL로부터 카테고리 ID값 추출용 스크립트다.

해당 스크립트는 Util.getQueryStringParams("categoryID"); 로 호출됬으며 이는 "catagoryID"라는 스트링 값을 매개변수로 받고 있다. URL을 검사해서 sParam 즉, "catagoryID"에 해당하는 부분 = 다음 값을 반환한다. (cat id)

특이한 점은 slice 메소드와 split 메소드를 사용하고 있는것.

.slice(sPageURL.indexOf("?")+1) 는 URL에서 ? 다음 모든 스트링을 가져오는 명령어이다.

sPageURL.split("&"); 는 &로 sPageURL 각각 나누어 sURLvariables에 저장하라는 뜻이다.

만약 sPageURL이 APPLEJACK&RAINBOWDASH&FLUTTERSHY 라면 3개의 스트링 APPLEJACK, RAINBOWDASH, FLUTTERSHY가 sURLvariables에 저장될 것이다.

해당 페이지의 URL이

detail.html?categoryID=cat1&itemID=ITEM-03 라면

getQueryStringParams 메소드에 의해 categoryID값에 해당하는 cat1을 반환할것이다.

카테고리 구현완료 :3

myproject 페이즈2.zip