jQuery Mobile 로 만든 To-Do List 분석하기 03

이제 제가 구한 To-Do List 의 자바스크립트 부분을 공부해 보겠습니다.

저도 자바스크립트는 그냥 소스 긁어다가 사용하는 수준이라서 잘 모르거든요. 그래서 이렇게 jQuery Mobile 제대로 들어가기 전에 자바스크립트 사용법 부터 공부하려고 소스 분석 하는 거 같아요.

지난번 글에서는 jQuery Mobile로 만든 두페이지 짜리 화면을 만드는 소스를 분석해 봤는데요.

오늘 배울 자바스크립트 부분을 작동 시키려면 지난번 그 index.html 파일의 header 안에 4개의 자바스크립트 링크를 더 달아야 합니다.

    <script src="./json2.js"></script>
    <script src="./jquery.cookie.js"></script>
    <script src="./jquery.tmpl.js"></script>
    <script src="./to-do.js"></script>

위에 3개는 이 예제소스 공부하기 전에 각각 대략의 사용법을 정리했었습니다.

지금 공부해야 할 부분은 to-do.js 입니다.

전체 소스는 아래와 같습니다.

$(document).ready(function() {

    var Model = function() {

        var items = [],
            load = function() {
                items = JSON.parse($.cookie("model") || "[]");
            };

        this.PRIORITY = {
            IMPORTANT: 2,
            NORMAL: 1,
            LOW: 0
        };

        this.save = function() {
            $.cookie("model", JSON.stringify(items), { expires: 365 });
        };

        this.create = function(text, priority) {
            var result = { "text": text, "priority": priority };

            items.push(result);
            this.save();

            return result;
        };

        this.remove = function(item) {
            items.splice($(items).index(item), 1);
            this.save();
        };

        this.clear = function() {
            items = [];
            this.save();
        };

        this.getItems = function() {
            var result = [];

            for (var index = 0, max = items.length; index != max; index++) {
                result.push(items[index])
            }

            return result;
        };

        load();
    };

    var model = new Model(),
        listHeaders = [];

    (function getListHeaders() {
        $("#todoList > li[data-priority]").each(function() {
            listHeaders[parseInt($(this).attr("data-priority"))] = $(this);
        });
    })();

    var renderItemElement = function(item) {
        return $.tmpl("<li data-icon=\"delete\" class=\"item\"><a>${text}</a></li>", item)
            .data("item", item)
            .insertAfter(listHeaders[item.priority]);
    };

    $("#createButton").click(function() {
        var priority = parseI  nt($("#todoUrgency").val()),
            item = model.create($("#todoDescription").val(), priority);

        renderItemElement(item);

        $("#todoList").listview("refresh");
        $("#todoUrgency").val(model.PRIORITY.NORMAL.toString()).trigger("change");
        $("#todoDescription").val("");       
    });

    $("#todoList").delegate("li.item", "click", function() {
        model.remove($(this).data("item"));
        $(this).slideUp(function() {
            $(this).remove();
        });
    });

    (function renderExistingItems() {
        $(model.getItems()).each(function() {
            renderItemElement(this);
        });

        $("#todoList").listview("refresh");
    })();   
});

처음에 $(document).ready(function() {}); 부분이 나오는데요.
이건 jQuery의 메소드 입니다.
자바스크립트의 window.onload 와 비슷한건데요. window.onload 가 전체 페이지가 다 로드 된 다음에 시작하는 거라면 $(document).ready(function() {}); 는 DOM 이 다 읽혀지기만 하면 곧바로 시작합니다.

그리고 한 파일에서 여러분 사용해도 jQuery 가 알아서 처리해 주구요. window.onload는 그러면 에러가 났거든요.

이렇게 to-do.js는  jQuery 메소드로 페이지가 로드되면 자동으로 실행 되도록 만들었네요.

그 다음에는 함수가 하나 있는데요. var Model = function() {}

Model 이라는 변수명을 가진 함수 입니다.
이 함수 안에는 처음에 var items 변수가 나오는데 이건 배열이네요.
json2.js 파일에 있는 JSON.parse() 메소드를 사용해서 쿠키의 내용을 배열 변수에 담는가 봅니다.
그 다음은 PRIORITY 선언이 있고 다음은 쿠키를 만드는 건데 expire 기간을 1년으로 잡았습니다.

여기서 $.cookie 로 시작하는 것은 아시겠지만 jquery.cookie.js 플러그인에 있는 메소드를 사용할 때 필요한 겁니다.

그 다음 함수인  this.create = function(text, priority) 는 뭘까요?

일단 text와 priority를 받는거네요. 그리고 이 받은 값들을 this.save(); 를 call 해서 쿠키로 저장하는 군요. 그 다음에 결과값을 return 하구요.

this.remove = function(item) 는 쿠키를 remove 하는 것 같습니다.

this.clear = function() 는 items 배열을 싹 비우는 함수구요.

this.getItems = function() 는 items의 갯수를 구해서 전부를 push 하는군요.

load(); 는 jQuery 의 메소드로서 HTML을 로드하고 DOM 에 삽입하는 겁니다. Ajax 기능이죠.

var Model = function() {}은 MVC 패턴 중에 M(Model) 부분을 구현한 거군요.
Model은 주로 비지니스 로직을 구현하는 거죠. 이 앱의 경우에는 여러 아이템들을 추가 삭제하고 쿠키를 만들거나 삭제하는 것 같은 비지니스 로직들이 이 안에 들어가 있습니다.

var model = new Model(),        listHeaders = [];

이거는 뭘까요? 지금까지 만든 Model에 대한 객체를 만들고 그 변수 이름을 model이라고 하구요. 그런데 listHeaders=[];는 왜 붙었을 까요.

오늘은 다른 할 일이 있어서 여기까지 해야 겠네요.

제가 자바스크립트는 잘 몰라서 그냥 제가 이해하는 만큼만 정리한 건데요.

제가 느끼기에 제가 좀 부족하게 이해한 것 같은데요.

자바스크립트 잘 아시는 분 있으시면 조언 좀 해 주세요.

시간 있을 때 차근차근 하나 하나 찾아가면서 마저 공부해야 겠습니다.