代码封装的技巧

前端知识点

代码封装的技巧

拷贝一坨代码起个名字法

如下代码，明显是线性的(面向过程的)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(function(){
    $.ajax({
        url:'xxxx',
        data:{farmId:'xxxx'},
        success:function(res){
            // 假设 res = [1,2,3,4,5]
            //数据处理  如生成列表
            var arr = res;
            var oUl = document.createElement('ul');
            for(var i=0;i<arr.length;i++){
                var oLi =document.createElement('li');
                oLi.textContent = arr[i];
                //监听点击事件
                oLi.onclick = function(){
                    alert(this.textContent)
                }
                oUl.appendChild(oLi)
            }
            document.body.appendChild(oUl)

        },
        error:function(){
            alert('error')
        }
    })
})

优化后如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
//1.请求数据
 getData(fnSucc,fnFail);
//2.事件监听(委托)
libindEvent();

//获取请求数据
function getData(fnSucc,fnFail){
  $.ajax({
    url:'xxx',
    success:fnSucc,
    error:fnFail
  })
}

function fnSucc(res){
    //假设 res = [1,2,3,4,5]
    var oUl = createTag('ul');
    for(var i=0;i<res.length;i++){
        var oLi = createLiAndSetText(res[i]);
        oUl.appendChild(oLi);
    }
    document.body.appendChild(oUl)
}
function fnFail(err){
    console.log(err)
}

//创建标签
function createTag(tagName){
    var tag = document.createElement(tagName);
    return tag;
}

//创建li并设置 文本
function createLiAndSetText(text){
    var oLi = createTag('li');
    oLi.textContent = text;
    return oLi;
}

//li点击事件监听
function libindEvent(){
    document.onclick = function(e){
        var target = e.target;
        if(target.tagName==='LI'){
            alert(target.tagName)
        }
    }
}

改良后的代码为树状的(分层的)

  1. 当出现错误的时候我们只需要看请求是否正确
  2. 当没有出现li的时候,我们先去看数据是否回来,再去看创建li是否成功，不需要关心li的事件监听
  3. 当li点击事件出现问题时,我们只需要查看事件监听的代码

代码从线型的转换为树形结构，即使出现了bug只需要查看对应节点的代码

仔细回想二分排序算法,它每次都会帮我们筛掉一半的数据,以上代码就是很好的实现