媒介
近来遇到如许一个项目，营业逻辑全部都搬到前端，后端只提供API。
然则是在已有的项目上面做如许做，也就是在已有的项目上增加模块，这个模块采纳前后端分工的体式格局来做。
因为种种缘由，所以只要 jquery 能够用一下，万恶的ie。
jquery代码示例
先上代码，假如要运转，须要分外导入mock.js。
js
$(function() {
var list = {
init: function() {
// 初始化
this.$list = $("#list");
this.render();
},
render: function() {
// 衬着
this.getData();
this.bind();
},
renderData: function(data) {
// 衬着数据
var temp = {
listTemp: ''
}
$.each(data, function(i, iObj) {
temp.listTemp +=
'<tr data-id="' + iObj.id + '">'+
'<td>' + iObj.name + '</td>'+
'<td>' + iObj.price + '</td>'+
'<td>' +
'<span class="color-simple" style="background-color:' + iObj.color + '"></span>'+
'<span>' + iObj.color + '</span>'+
'</td>'+
'<td>' + iObj.name + '</td>'+
'</tr>';
});
this.$list.html(temp.listTemp);
},
bind: function() {
// 绑定事宜
var self = $(this);
this.$list.on("click", "tr", function() {
alert($(this).data("id"));
});
},
getData: function() {
// 猎取数据
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/page.css"/>
</head>
<body>
<div>
<table class="table" border="1" cellpadding="0">
<thead>
<tr>
<th>称号</th>
<th>价钱</th>
<th>色彩</th>
<th>备注</th>
</tr>
</thead>
<tbody id="list">
</tbody>
</table>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mock-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/list.js" type="text/javascript" charset="utf-8"></script>
</div>
</body>
</html>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;
}
剖析
这是一个简朴的例子，起首 js 内部实行递次是如许的：
init（初始化）
render（衬着页面）
bind（绑定事宜）getData（加载数据）
renderData（衬着数据）
init：
初始化，加载一个模块的最先。
重要用来缓存一些成员变量，假如是 jquery对象的 话就在之前加个 “$”,如许做是为了跟一般元素区分开来。
render：
衬着页面，望文生义，就是衬着页面的函数。
在这个函数内部挪用了 getData() 和 bind() 两个要领，getData()是为了去取数据，但为何要在这里挪用 bind() 要领呢，岂非不该该在衬着完数据以后再绑定事宜呢，说到 bind() 的时刻再说为何。
假如有别的的子模块须要衬着的话，也能够放在这里加载。 （比方在 list 模块下面有个 editPrice子模块，是一个零丁的模块，就能够并列着写，然后在这里挪用。)
$(function() {
// 我是父模块
var list = {
init: function() {
// 初始化
this.$list = $("#list");
this.render();
},
render: function() {
// 衬着
this.getData();
// 我挪用了子模块
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：
绑定事宜，一切的绑定事宜全部都在这里处置惩罚。
这里定义了一个 “self” 变量，这是因为再绑定事宜的 on 的函数内部因为作用域差别，所以挪用不了别的 list 对象的成员变量和要领，所以事前缓存了起来，有的人会叫 _this、me、that 这些名字，我的习气是叫 self。
关于上一点实在还能够再函数尾部加上 bind() 要领绑定作用域的，如许就不须要分外说明一个变量了，没有用是因为我不大习气。。。
这里讲一下为何 bind() 要领要放在 render() 内里，之所以不 renderData() 以后做是因为数据可能会反复挪用，比方分页，就可能会反复挪用 renderData() 这个要领，所以才应用了事宜托付的方法。
getData：
猎取数据，就是在这里用 ajax 和后端举行通讯。
用 Mock.js 去模仿一个后端Api，假如你还不晓得这个东西，点这里。
这里的 self 跟 bind() 里的 self 同理，为了挪用成员要领 renderData()。
renderData：
衬着数据，用最原始的要领对代码拼接HTML。
拼接数据的时刻，前后用单引号的话，就能够不必担心会跟内里 class 或许别的属性的双引号起争执了。
拼接好数据以后再一口吻 html 进事前在 init() 要领缓存好的 jquery对象 里。
别的： 假如我的模块要在别的的 js 的里挪用怎么办，我的做法是 把数据绑定到 window 对象上。
$(function() {
var list = {}
list.init();
window.list = list;
});
末了
如许子的写法我以为照样比较轻易保护的。
假如有什么想跟我议论的话，请私信。
