This example mimics the function of todo MVC in vue.js, using jQuery With development, the first version of jQuery will look a bit confusing and will be optimized in the future. 
Todo MVC has the functions of adding, modifying, deleting, changing state and classifying todos. My development process is divided into the following steps.
- Functional splitting of the entire application
- Implementing each sub-function separately
- Merging function
- optimization
Concrete realization
- Add todos
var newtodoVul= $('#newtodo').val(); $("#newtodo").val(''); var tpl_html=$('.todo-li-template').clone(true); tpl_html.find('.todo-name').text(newtodoVul); tpl_html.removeClass('hidden'); tpl_html.removeClass('todo-li-template'); tpl_html.attr('data-id', String(id)); $('#list').prepend(tpl_html);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
Generate a template for tpl_html and insert prepend() backwards.
- Delete todos
function todosDel(){ $(".destroy").on('click',function(event){ $(this).addClass("btn-click"); setTimeout(function() { $(event.target).parents('.todo').remove(); delToDos(Number($(event.target).parents('.todo').data('id'))); }, 200); }); }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
The delete button here has a rotating animation, and the execution time is 0.2s, so the setTimeout() function is needed to delay the execution of the delete function, and the todos is also deleted in the array.
function delToDos(id){ arr.forEach(function (item,index){ if(item.id == id){ arr.splice(index,1); } }) };
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- Change todos status
The todos event is divided into two states, one is the ongoing'todo'and the other is the'done' after completion. Create an array to store the id, status, and content of todos. The input box carriage return event calls this todosArrys(), and then passes in the values of ID and text, which are stored in the array.
i = i + 1;
text = $(event.target).val();
todosArray(i, text);
function todosArray(id,text){ arr.push({ id: id, status: 'todo', text:text }); }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
Each time the status changes, the object of the current checkbox click event is retrieved, and the status of the same id is changed by traversing the array.
function todosToDonw(id) { arr.forEach(function (item) { if(item.id==id){ item.status='done'; } }); }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
-
todos sub-state view
1.ALL Views All Lists
2.Active Views an Ongoing List
3.Completed view completed list
Active and Comppleted are implemented by using jQuery method each() to traverse the DOM to determine whether the Class line is included and then display or hide the DOM.
function ActiveToDos() { $("#list li").each(function(index,element){ if($(element).find(".todo-name").hasClass("line")){ $(element).hide(); }else{ $(element).show(); } }) }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- Each todos modification function
To achieve the modification function, we need to cover an input tag on the top of each label tag. When we double-click the label tag, we display the input tag, pass the text value of the label tag into the val() of the input, then bind the return event to the alterTod0() function, add hidden style to the input, and write back the modified val() to the text of the label.
function editToDos() { $("#list").dblclick(function (event) { if ($(event.target).hasClass('todo-name')) { var $newtodos = $(event.target).parents('.todo').find(".newtodos"); var resettodos = $(event.target).text(); $newtodos.removeClass("hidden"); $newtodos.val(resettodos); $(event.target).siblings(".todo-icon").addClass("hidden"); } }) }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
function alterTodo(event){ if (event.keyCode == "13") { $(event.target).siblings(".view").find(".todo-icon").removeClass("hidden"); $(event.target).parents(".todo").find(".todo-name").text($(event.target).val()); $(event.target).addClass("hidden"); } }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
-
Detail optimization
1. Add rotation logic for toggle-all (all selected checkbox buttons)
toggle-all automatically adjusts its position when all the sub-checkbox buttons are unavailable.
function toggleAll(){ $("#list li").each(function(){ if($("#list li").find(".toggle:checked").length==$("#list li").length){ $(".toggle-all").prop("checked",true); } if($("#list li").find(".toggle:checked").length===0){ $(".toggle-all").prop("checked",false); } }) }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
2. No need to click Active or Completed button twice to traverse DOM. Classification function with box style is called.
function isHasAct(){ $(".footbtn li").each(function(){ if($(".footbtn").find(".box").find("a").attr("id")=="act"){ ActiveToDos(); } }) }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- todos count
function updateTodosCouts(){ var num=0; arr.forEach(function(item){ if(item.status=='todo'){ num++; } }) $("#foot-num").text(num); }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
What holes are there?
- After clicking on each toggle sub-checkbox, the checked status can not be modified with toggle-all. It was later found that after version 1.6 of jQuery, the checked status can not be modified with attr and changed to prop().
- When using prepend() to insert content into DOM, the template is displayed on it, so the template is placed outside the ul tag.
- Before executing the deletion of DOM nodes, if there are deletion animations, then use setTimeout(function(){. / your execution function}, time) to delay the execution of functions.
Empirical value
- When learning Chrome to set breakpoints for debugging and DOM operations, we need to understand what the function event.target refers to and what this refers to, because each function of JS is also an object, so it can be passed like other objects, and return can return the value of a function. This allows you to define a variable to receive the value of the function.
-
Use JS array iteration forEach (), jQuery DOM iteration Every (), attr(),prop(), insert DOM, etc.
-
The next step is to refactor jQuery and develop the second version in conjunction with the Handlebars.js template engine.