摘要：前言最近碰到這樣一個(gè)項(xiàng)目，業(yè)務(wù)邏輯全部都搬到前端，后端只提供。渲染數(shù)據(jù)，用最原始的方法對(duì)代碼拼接。拼接好數(shù)據(jù)之后再一口氣進(jìn)事先在方法緩存好的對(duì)象里。最后這樣子的寫法我覺得還是比較方便維護(hù)的。

最近碰到這樣一個(gè)項(xiàng)目，業(yè)務(wù)邏輯全部都搬到前端，后端只提供API。
但是是在已有的項(xiàng)目上面做這樣做，也就是在已有的項(xiàng)目上添加模塊，這個(gè)模塊采用前后端分工的方式來做。
因?yàn)楦鞣N原因，所以只有 jquery 可以用一下，萬惡的ie。

先上代碼，如果要運(yùn)行，需要額外導(dǎo)入mock.js。
js

$(function() {
    var list = {
        init: function() {
            // 初始化
            this.$list = $("#list");
            this.render();
        },
        render: function() {
            // 渲染
            this.getData();
            this.bind();
        },
        renderData: function(data) {
            // 渲染數(shù)據(jù)
            var temp = {
                listTemp: ""
            }
            $.each(data, function(i, iObj) {
                temp.listTemp += 
                    ""+
                        "" + iObj.name + ""+
                        "" + iObj.price + ""+
                        "" + 
                            ""+
                            "" + iObj.color + ""+
                        ""+
                        "" + iObj.name + ""+
                    "";
            });
            
            this.$list.html(temp.listTemp);
        },
        bind: function() {
            // 綁定事件
            var self = $(this);
            this.$list.on("click", "tr", function() {
                alert($(this).data("id"));
            });
        },
        getData: function() {
            // 獲取數(shù)據(jù)
            var self = this;
            Mock.mock("http://data.cn", {
                "list|1-20": [
                    {
                    "id|+1": 1,
                    "name": "@name",
                    "price|1-1000": 1000,
                    "color": "@color",
                    "remark": "@remark"
                    }
                ]
            });
            $.ajax({
                type: "get",
                url: "http://data.cn",
                success: function(data) {
                    self.renderData($.parseJSON(data).list);
                }
            });
        }
    }
    list.init();
});

html

    
        
        
        
    
    
        

            

                

                    

                        
名稱
                        
價(jià)格
                        
顏色
                        
備注
                    
                
                

                    
                
            
            
            
            
        
    

css

body {
  margin: 0;
  font-family: "微軟雅黑";
}
.table {
  width: 80%;
  margin: 20px auto;
  border-collapse: collapse;
  border-spacing: 0;
}
.table td,
.table th {
  text-indent: 2%;
  text-align: left;
}
.table thead tr {
  height: 40px;
}
.table .body {
  height: 400px;
  overflow: auto;
  display: block;
}
.table tbody tr {
  height: 40px;
  cursor: pointer;
}
.table tbody tr:nth-child(2n + 1) {
  background-color: #eafff4;
}
.table tbody tr:nth-child(2n) {
  background-color: #fff;
}
.table tbody tr:hover {
  background-color: #b0e5ff;
}
.table tbody tr span {
  vertical-align: middle;
}
.table tbody tr .color-simple {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border-radius: 2px;
  display: inline-block;
}

這是一個(gè)簡(jiǎn)單的例子，首先 js 內(nèi)部執(zhí)行順序是這樣的：

init（初始化）

render（渲染頁面）

bind（綁定事件）getData（加載數(shù)據(jù)）

renderData（渲染數(shù)據(jù)）

init：

初始化，加載一個(gè)模塊的開始。

主要用來緩存一些成員變量，如果是 jquery對(duì)象的 話就在之前加個(gè) "$",這樣做是為了跟普通元素區(qū)別開來。

render：

渲染頁面，顧名思義，就是渲染頁面的函數(shù)。

在這個(gè)函數(shù)內(nèi)部調(diào)用了 getData() 和 bind() 兩個(gè)方法，getData()是為了去取數(shù)據(jù)，但為什么要在這里調(diào)用 bind() 方法呢，難道不應(yīng)該在渲染完數(shù)據(jù)之后再綁定事件呢，說到 bind() 的時(shí)候再說為什么。

如果有另外的子模塊需要渲染的話，也可以放在這里加載。 （比如在 list 模塊下面有個(gè) editPrice子模塊，是一個(gè)多帶帶的模塊，就可以并列著寫，然后在這里調(diào)用。)

$(function() {
    // 我是父模塊
    var list = {
        init: function() {
            // 初始化
            this.$list = $("#list");
            this.render();
        },
        render: function() {
            // 渲染
            this.getData();
            // 我調(diào)用了子模塊
            editPrice.init();
            this.bind();
        },
        renderData: function() {},
        bind: function() {},
        getData: function() {}
    }

    // 我是子模塊
    var editPrice = {
        init: function() {},
        render: function() {},
        renderData: function() {},
        bind: function() {},
        getData: function() {}
    }
    list.init();
});

bind：

綁定事件，所有的綁定事件全部都在這里處理。

這里定義了一個(gè) “self” 變量，這是因?yàn)樵俳壎ㄊ录?on 的函數(shù)內(nèi)部由于作用域不同，所以調(diào)用不了其它 list 對(duì)象的成員變量和方法，所以事先緩存了起來，有的人會(huì)叫 _this、me、that 這些名字，我的習(xí)慣是叫 self。

關(guān)于上一點(diǎn)其實(shí)還可以再函數(shù)尾部加上 bind() 方法綁定作用域的，這樣就不需要額外申明一個(gè)變量了，沒有用是因?yàn)槲也淮罅?xí)慣。。。

這里講一下為什么 bind() 方法要放在 render() 里面，之所以不 renderData() 之后做是因?yàn)閿?shù)據(jù)可能會(huì)重復(fù)調(diào)用，比如分頁，就可能會(huì)重復(fù)調(diào)用 renderData() 這個(gè)方法，所以才利用了事件委托的辦法。

getData：

獲取數(shù)據(jù)，就是在這里用 ajax 和后端進(jìn)行通信。

用 Mock.js 去模擬一個(gè)后端Api，如果你還不知道這個(gè)東西，點(diǎn)這里。

這里的 self 跟 bind() 里的 self 同理，為了調(diào)用成員方法 renderData()。

renderData：

渲染數(shù)據(jù)，用最原始的方法對(duì)代碼拼接HTML。

拼接數(shù)據(jù)的時(shí)候，前后用單引號(hào)的話，就可以不用擔(dān)心會(huì)跟里面 class 或者其它屬性的雙引號(hào)起沖突了。

拼接好數(shù)據(jù)之后再一口氣 html 進(jìn)事先在 init() 方法緩存好的 jquery對(duì)象 里。

另外： 如果我的模塊要在其它的 js 的里調(diào)用怎么辦，我的做法是 把數(shù)據(jù)綁定到 window 對(duì)象上。

$(function() {
    var list = {}
    list.init();
    window.list = list;
});

這樣子的寫法我覺得還是比較方便維護(hù)的。

如果有什么想跟我討論的話，請(qǐng)私信。