JS每點擊一次添加多少條數據

　　好久不寫文檔，平時只寫日記，因此對這個有點生疏，若是寫的很差別介意。

　　今天閒的蛋疼，因而要寫寫白天的東西，而且之後也會一直更新(一直寫)下去。

　　時間太倉促了，這幾個月，今天算最晚的一次凌晨1點，吃不消的路過。

　　進入正題！

　　這是一個每次點擊添加指定數據的插件，基於jQuery封裝，調用方法名batchLoading，簡單到一鍵操做，不用每次都來一次了，爽滋滋。

　　實現方法以下：

　　HTML

<div class="default-batch-box batch-box">
    <ul class="default-list-box">
    </ul>
    <div class="default-batch-unlock">
        <span></span>
    </div>
</div>

 

　　JAVASCRIPT

<script>
var data = [1,2,3,4,'a','b','c','d',1,2,3,4,5,6,9,]
batchLoading({
    node: ['.default-list-box','.default-batch-unlock'], // 第一個節點爲添加數據class 第二個爲點擊事件class
    data: data,    // 總數據
    default: 2, // 默認從第幾條數據開始
    everyTime: 4, // 每次添加多少條數據
    method: function (data) { // 循環數據
        var str = ''
        var tiny = data
        str += '<li>'
        str += '<span>' + tiny +'</span>'
        str += '<span>上海</span>'
        str += '<span>機械業</span>'
        str += '<span>加載器</span>'
        str += '<span>去參團</span>'
        str += '</li>'
        return str
    },
    complate: function  () {
        alert('加載結束')
    }
})
</script>

 　　封裝的方法 batchLoading.js

 1 (function  (g) {
 2     var _plus = 1
 3     function addBatchTemplate (data, start, stop, everyTimes, fallBack, complate) {
 4         var str = ''
 5         if ((stop-everyTimes) <= data.length) {
 6             for (var i = start; i < stop; i++) {
 7                 if (data[i]){
 8                     var tiny = data[i]
 9                     str += fallBack(tiny)
10                 }
11             }
12         }
13         else {
14             complate()
15         }
16         return str
17     }
18 
19     function implementionAddBatchTemplate (option, start, stop, everyTimes, fallBack, complate) {
20         $(option.node[0]).append(addBatchTemplate(option.data, start, stop, everyTimes, fallBack, complate))
21     }
22 
23     function excuteBatchLoadData (option, everyTimes, fallBack, complate) {
24         var start = _plus
25         implementionAddBatchTemplate(option, start * everyTimes, ++_plus * everyTimes, everyTimes, fallBack, complate)
26     }
27 
28     function handleEventLoadData (option, everyTimes, fallBack, complate) {
29         $(option.node[1]).unbind('click').on('click', function  (e) {
30             excuteBatchLoadData(option, everyTimes, fallBack, complate)
31         })
32     }
33 
34     function batchLoading (params) {
35         implementionAddBatchTemplate(
36             {
37                 data: params.data,
38                 node: params.node
39             }, 
40             params.default, 
41             params.everyTime, 
42             params.everyTime, 
43             params.method,
44             params.complate
45         )
46         handleEventLoadData(
47             {
48                 data: params.data,
49                 node: params.node
50             }, 
51             params.everyTime, 
52             params.method,
53             params.complate
54         )
55     }
56 
57     g.batchLoading = batchLoading
58 })(this ? window : global)

View Code

 

　　上效果圖，目前看到的是每點擊一次加4條數據，默認從第二條數據開始，完成以後點擊調用complate方法。

　　演示DEMO(從0開始)點擊加載數據

　　git代碼：https://github.com/ZWLTZ/batchLoading/tree/master