Day27-用jQuery写得出ToDoList吗_2_搞个4码随机码给id使用吧

今天要先把昨天写的东西都给挪到阵列之中，所以我们会需要一个空的阵列
这个阵列因为多个函式会使用到，记得要放在最外层

然後写一个addTodo的function，让每次点击送出时都会将目前input的文字存取到指定阵列中

var todos = new Array;
function addTodo() {
    todos.push({ content: $('#form-control').val(), complete: false });
    document.getElementById('form-control').value = ""
}

推进阵列的东西有文字内容的content跟是否完成的complete两项
complete都是预设尚未完成，这个项目在後面我们做样式时用的到，先放进来
推进阵列後就把input清空，这样更有送出的感觉!!
这边给大家看console.log

然後我们新增一个update的函式用来更新并显示目前的ToDoList
内容要去更新阵列的每一个项目，这边使用的是jQuery的.each这个可以抓取阵列所有东西的方法

function update() {
    $("#add").empty()
    $.each(todos, function (item, index) {
        let tmp = $('#template01');
        let div = tmp.html();
        div = div.replace("CONTENT_HERE", index.content);
        $("#add").append(div)
    });
}

记得要在addTodo()的最後一行呼叫update做更新
并把button的onclick改成addTodo()

接着我们先把每个项目的独立id制作出来(後续部分会都是文字噢)
用的方法是把所有可以使用的英文大小写+数字存放在字串中
然後再利用数学.random()来随机抓取排列
这个部份我是上网看别人怎麽去写的，因为我不想弄到就是太高级的GUID那样，所以找了简化很多的版本

var code = "";
function randomString(len) {
    var str = "mnbvcxzasdfghj012klpoiuytrewq6789MNBVCXZASDFGHJ345KLPOIUYTREWQ"
    var len = str.length;
    var num = 4;
    code = "";
    for (var i = 0; i < num; i++) {
        var rand = Math.ceil(Math.random() * len - 1);
        code += str[rand];
    }
}

一样因为code会被其他函式使用，所以要放在最外层
用了这个函式之後便会帮我们自动产生一个4码的随机字串了

然後我们回到addTodo函式，在最一开始时呼叫它产生一个字串，然後push到todos阵列中，取名叫id: code

比较的部分比较麻烦
首先我们需要在最外层新增一个阵列去存取我们的所有id，不然要挖太多层去做比较
这边用到的是jQuery的$.map这个方法，因为他有回传值可以做存取，详细作用可以上网查查
它可以帮助我们去抓取阵列中每一笔特定名称的内容
然後我们抓到内容之後把它加入一个叫做result的新阵列
这个阵列一样放在最外层因为会多处使用
完整写法长这样

result = $.map(todos, function (item, index) {
    return item.id;
})

我们把这段程序码加在update()的第一行
让每一次todos的阵列内容有更新就去更新result的内容
并在这段程序码之前加一行result=[]，让每一次更新前先清空再重新加入
这边是为了之後做删除做准备

然後回到addTodo()
我们在第一行呼叫了随机码的函式，在.push之前，我们要确认这组字串目前无人使用，不然我们就要再请随机函式给我们一组新的
所以在.push之前我们要写一个判别式
判断目前随机码函式做出来的这个code是否在result阵列已经存在了

for (var i = 0; i < result.length; i++) {
    if (code == result[i]) randomString()
}

写法很简单，检查code是否与result阵列的内容相同，相同就在找一组回来，一直到不相同为止
这一串我们加在randomString()的最尾巴，让code在addTodo()的.push前已经确定是无重复的唯一code了

完整的randomString()跟addTodo()函式长这样

function randomString() {
    var str = "mnbvcxzasdfghj012klpoiuytrewq6789MNBVCXZASDFGHJ345KLPOIUYTREWQ"
    var len = str.length;
    var num = 4;
    code = "";
    for (var i = 0; i < num; i++) {
        var rand = Math.ceil(Math.random() * len - 1);
        code += str[rand];
    }
    for (var i = 0; i < result.length; i++) {
        if (code == result[i]) randomString()
    }
}
function addTodo() {
    randomString()
    todos.push({ content: $('#form-control').val(), complete: false, id: code });
    document.getElementById('form-control').value = ""
    update()
}

这边因为是自己使用的ToDoList，我只设了4码的随机码，相信应该是不会使用到超过62x62x62x62个List，然後造成没有办法再新增新的code然後出问题的啦(吧?

因为今天的某些内容写在昨天会太长可能要切断，但我又不想切断，所以今天篇幅有点长www
明天介绍id的使用、complete()的完整写法