udacity_javascript设计模式

javascript设计模式 的学习记录

在优达学城上找到的 《javascript设计模式》

他主要是带动我们的思考

在 《第二章 分离重构》 中使用了

• model
• octopus
• view

这样分离结构式的概念来编写代码

代码写起来很长， 我看的很艰难（大概三天左右的碎片时间，都卡在这）

同样的效果，他js 100行 我20行， 他html 6行 我很多行（忘了，删了）。

他将数据放在 js的model 里用一个json 数组保存， 而我是放在 html 里

我的初学者也能看明白， 他的怕是难懂了许多。。

孰优孰劣不好说， 但我还是喜欢他的分离式概念， 看着逼格就高（误..

admin 相关部分是我添加的， 照着他的方法写了一次， 也不知道有没有错， 不过感觉还挺不错。。。蛮开心

下面是代码：

    // html
    <ul id="cat-list"></ul>
    <div id="cat">
        <h2 id="cat-name"></h2>
        <div id="cat-count"></div>
        <img id="cat-img" src="cat.jpg" alt="cute cat">
    </div>

    <button id="admin">admin( click for show(hidden) )</button>
    <form action="" id="admin-form">
        name: <input type="text" id="admin-name" placeholder="自拟名称"> <br />
        imgURL: <input type="text" id="admin-imgURL" placeholder="自拟图片路径"> <br />
        clicks: <input type="text" id="admin-clicks" placeholder="自拟点击次数"> <br />
        <button type="button" id="admin-cancel">cancel</button>
        <button type="button" id="admin-save">save</button>
        <p>空表单也可以提交，没做判断</p>
    </form>
        

            /* ======= Model ======= */
var model = {
    currentCat: null,
    cats: [
        {
            clickCount : 0,
            name : 'Tabby',
            imgSrc : 'cat.jpg',
            imgAttribution : 'https://www.flickr.com/photos/bigtallguy/434164568'
        },
        {
            clickCount : 0,
            name : 'Tiger',
            imgSrc : 'cat2.jpg',
            imgAttribution : 'https://www.flickr.com/photos/xshamx/4154543904'
        },
        {
            clickCount : 0,
            name : 'Scaredy',
            imgSrc : 'cat3.jpg',
            imgAttribution : 'https://www.flickr.com/photos/kpjas/22252709'
        }
    ],
    adminTF: false
};

/* ======== Octopus ========= */
var octopus = {

    init: function (){
        // 显示第一张猫的图片
        model.currentCat = model.cats[0];

        // 视图初始化
        catListView.init();
        catView.init();

        adminBtn.init();
        adminList.init();
    },

    // 获得现在的猫
    getCurrentCat: function (){
        return model.currentCat;
    },

    // 获得所有猫
    getCats: function (){
        return model.cats;
    },

    // 设置现在的猫
    setCurrentCat: function (cat){
        model.currentCat = cat;
    },

    // 点击增加量
    incrementCounter: function (){
        // 表示 currentCat中的数字自加
        model.currentCat.clickCount++;

        catView.render();
    },

    // 获取 true or false
    getAdminTF: function(){
        return model.adminTF;
    },

    // 点击admin 显示或隐藏
    adminShow: function (){
        adminBtn.render();
    },

    // admin cancel取消
    adminList_cancel: function (){
        adminList.render_cancel();
    },

    // admin save保存
    adminList_save: function (){
        adminList.render_save();
    }

};

/* =======  View ======== */

var catView = {

    init: function(){
        this.catElem = document.getElementById('cat');
        this.catNameElem = document.getElementById('cat-name');
        this.catImageElem = document.getElementById('cat-img');
        this.countElem = document.getElementById('cat-count');

        // 监听事件， 点击后自加
        this.catImageElem.addEventListener('click', function (){
            octopus.incrementCounter();
        });

        // 渲染
        this.render();
    },

    render: function (){
        // 更新 DOM的值
        var currentCat = octopus.getCurrentCat();
        this.countElem.textContent = currentCat.clickCount;
        this.catNameElem.textContent = currentCat.name;
        this.catImageElem.src = currentCat.imgSrc;
    }
};

var catListView = {

    init: function(){
        // 
        this.catListElem = document.getElementById('cat-list');

        this.render();
    },

    render: function (){
        var cat, elem, i;
        // 获取猫数组
        var cats = octopus.getCats();

        // 清空之前输出的内容
        this.catListElem.innerHTML = '';

        // 循环 cats
        for ( i = 0; i < cats.length; i++) {
            cat = cats[i];
            elem = document.createElement('li');
            elem.textContent = cat.name;

            // 这里做了点小处理， 用闭包传参，防止cat值全是最后一位
            elem.addEventListener('click', (function(catCopy){
                return function(){
                    octopus.setCurrentCat(catCopy);
                    catView.render();
                };
            })(cat));

            // 最后， 添加element
            this.catListElem.appendChild(elem);
        }
    }
};

var adminBtn = {

    init: function(){

        this.adminElem = document.getElementById('admin');
        this.adminFormElem = document.getElementById('admin-form');

        this.adminElem.addEventListener('click', function (){
            octopus.adminShow();
        });
    },

    render: function(){

        if(octopus.adminTF) {
            this.adminFormElem.style.display = 'block';
            octopus.adminTF = false;
        } else {
            this.adminFormElem.style.display = 'none';
            octopus.adminTF = true;
        }
    }
};

var adminList = {
    init: function (){
        this.adminNameElem = document.getElementById('admin-name');
        this.adminImgUrlElem = document.getElementById('admin-imgURL');
        this.adminClicksElem = document.getElementById('admin-clicks');
        this.adminCancelElem = document.getElementById('admin-cancel');
        this.adminSaveElem = document.getElementById('admin-save');

        // cancel
        this.adminCancelElem.addEventListener('click', function(){
            octopus.adminList_cancel();
        });
        // save
        this.adminSaveElem.addEventListener('click', function(){
            octopus.adminList_save();
        });
    },

    render_cancel: function (){

            var currentCat = octopus.getCurrentCat();
            this.adminNameElem.value = '';
            this.adminImgUrlElem.value = '';
            this.adminClicksElem.value = '';

            // 点击后关机 admin 界面
            octopus.adminTF = false;
            adminBtn.render();

    },

    render_save: function(){

            var currentCat = octopus.getCurrentCat();
            currentCat.name = this.adminNameElem.value;
            currentCat.imgSrc = this.adminImgUrlElem.value;
            currentCat.clickCount = this.adminClicksElem.value;


            // 记得更新
            catView.render();

            // 点击后关机 admin 界面
            octopus.adminTF = false;
            adminBtn.render();
    }
};


// 调用
octopus.init();

推荐大家都可以看看，真的不错 javascript设计模式
也托管在github了