摘要:前言最近碰到這樣一個項目,業務邏輯全部都搬到前端,后端只提供。渲染數據,用最原始的方法對代碼拼接。拼接好數據之后再一口氣進事先在方法緩存好的對象里。最后這樣子的寫法我覺得還是比較方便維護的。
前言
最近碰到這樣一個項目,業務邏輯全部都搬到前端,后端只提供API。
但是是在已有的項目上面做這樣做,也就是在已有的項目上添加模塊,這個模塊采用前后端分工的方式來做。
因為各種原因,所以只有 jquery 可以用一下,萬惡的ie。
先上代碼,如果要運行,需要額外導入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 +=
""+
"" + 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() {
// 獲取數據
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
</>復制代碼
名稱 價格 顏色 備注
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;
});
最后
這樣子的寫法我覺得還是比較方便維護的。
</>復制代碼
如果有什么想跟我討論的話,請私信。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/80887.html
摘要:前言最近碰到這樣一個項目,業務邏輯全部都搬到前端,后端只提供。渲染數據,用最原始的方法對代碼拼接。拼接好數據之后再一口氣進事先在方法緩存好的對象里。最后這樣子的寫法我覺得還是比較方便維護的。 前言 最近碰到這樣一個項目,業務邏輯全部都搬到前端,后端只提供API。但是是在已有的項目上面做這樣做,也就是在已有的項目上添加模塊,這個模塊采用前后端分工的方式來做。因為各種原因,所以只有 jqu...
摘要:前言最近碰到這樣一個項目,業務邏輯全部都搬到前端,后端只提供。渲染數據,用最原始的方法對代碼拼接。拼接好數據之后再一口氣進事先在方法緩存好的對象里。最后這樣子的寫法我覺得還是比較方便維護的。 前言 最近碰到這樣一個項目,業務邏輯全部都搬到前端,后端只提供API。但是是在已有的項目上面做這樣做,也就是在已有的項目上添加模塊,這個模塊采用前后端分工的方式來做。因為各種原因,所以只有 jqu...
摘要:本教程可能不是最精品的,但一定是最細致的。插件開發下面我們就來看第二種方式的插件開發。然后我們的插件代碼在這個方法里面展開。 要說jQuery 最成功的地方,我認為是它的可擴展性吸引了眾多開發者為其開發插件,從而建立起了一個生態系統。這好比大公司們爭相做平臺一樣,得平臺者得天下。蘋果,微軟,谷歌等巨頭,都有各自的平臺及生態圈。 學會使用jQuery并不難,因為它簡單易學,并且相信你接觸...
摘要:簡單來說,模板最本質的作用是變靜為動,一切利于這方面的都是優勢,不利于的都是劣勢。二選擇的原因全球最受歡迎的模板引擎是全球使用率最高的模板引擎,所以當之無愧是全球最受歡迎的模板引擎。創建更為復雜一些,當時功能更加強大。 showImg(https://segmentfault.com/img/bVbb3kg?w=775&h=216); 為什么需要使用模板引擎? 關于為什么要使用模板引擎...
摘要:在對象的內部,有著一個對象棧,用來維護所有已經操作過的對象。這樣來想一想,如果每一個對象都有一個指針指向上一個對象的話,也就間接組成了一個對象棧。 歡迎來我的專欄查看系列文章。 學習了 prevObject 之后發現,我之前寫的一篇博客介紹 pushStack 函數那個內容是有問題的。本來我以為這個 pushStack 函數就是一個普通的函數,它接受一個 DOM (數組)參數,把該參數...
閱讀 4581·2021-09-22 14:57
閱讀 563·2019-08-30 15:56
閱讀 2665·2019-08-30 15:53
閱讀 2241·2019-08-29 14:15
閱讀 1688·2019-08-28 17:54
閱讀 560·2019-08-26 13:37
閱讀 3478·2019-08-26 10:57
閱讀 1047·2019-08-26 10:32
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要