摘要：切換狀態其實就是對應的數組值取反。要會寫這個項目的和，注意實際項目中的引入方式。學習的思想，嘗試使用通過修改數組的方式實現任務的增加刪除和修改功能。

ES6技術本身非常容易，相信大家也體會到了。各種新特性都不難，但是為什么很多人學習起來困難呢？

其實ES6難的不是技術，而是實際工作環境的搭建。比如我們想寫一個簡單的ES6版本的TodoList.

很多同學學生是這么放棄的：

通過搜索引擎，發現很多教程都是直接引入Traceur.js 然后講解ES6各種功能和語法的，但是好像實際并不是直接引入Traceur.js ，而是用babel。

使用babel的話好像需要安裝node.js,還有會用npm

安裝好npm 以后我是該使用gulp還是webpack呢？

嗯，應該webpack吧，這個好像目前更主流。好，就選它了。

webpack怎么安裝？是不是需要webpack-cli?另外webpack 4.0好像更好用，但是好像安裝又有兼容性問題？

糾結ing……

考慮了半天后，終于下定決心，就用最新版本，學老的沒用。

安裝好webpack 4.0,對了是不是要配置工作流？

對配置吧，這才是“工作的方式”,js需要壓縮，裝個壓縮插件，webpack怎么用啊？有各種rule，plugins,還有entry.

開始頭疼，耐著性子把網上的教程配置完，這個插件怎么報錯了啊？

繼續查，原來是webpack 4.0和它不兼容，換webpack 3.0還是換插件？

糾結半天后，終于鼓起勇氣，換插件！

又配置出錯了……

開始進入暴走模式，又氣又惱。

好吧，折騰半天，請教大牛總算通過了。

那么問題來了，學了這么久css和js，我居然不知道往哪里寫css……

好吧，聽說得用sass……

配置完了，sass語法不會……

我就想寫一個ES6的todoList，太費勁了，咋得學這么東西啊……

還是放棄吧，我感覺我不適合做前端。

雖然夸張了些，但是大部分前端都有類似的經歷。

今天我就讓大家徹底的學會如何工作中寫ES6，我們依然用todoList舉例，對了我們并不需要學習webpack,sass，插件等等。我們只學習ES6，對其它的統統不用學，你會用就可以，也不過幾個命令而已。

ok,我們開始。

首先，拿到我配置好的工作流，直接在根目錄下進入命令行，然后

npm install

安裝完成后，使用

npm run dev

然后就可以用了，

就這幾個文件，對應寫html,js和css。

首先我們先寫 html文件 。

    
    
    


    

        

            
TODO-LIST
            

                
輸入任務...
            
        
        

            

                
                
            
        
    

接著，寫css美化一下

* {
    padding: 0;
    margin: 0;
  }
  li {
    list-style: none;
  }
  html {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
    box-sizing: border-box;
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
    background: #ffc600;
  }
  svg {
    fill: #fff;
    background: rgba(0,0,0,0.1);
    padding: 20px;
    border-radius: 50%;
    width: 100px;
    margin-bottom: 50px;
  }
  .container {
    padding: 20px;
    max-width: 350px;
    box-shadow: 0 0 0 10px rgba(0,0,0,0.1);
    background: #fff;
  }
  .container .item-area .title {
    text-align: center;
    margin: 10px 0;
    color: #aaa;
    font-weight: 200;
  }
  .container .item-area .item {
    background: #fff;
    border-radius: 4px;
  }
  .container .item-area .item .item-li-default {
    color: #46b7b9;
  }
  .container .item-area .item .item-li {
    width: 100%;
    border-bottom: 1px solid #eee;
    height: 30px;
    line-height: 30px;
    text-align: left;
    color: #f95959;
  }
  .container .item-area .item .item-li .delete-item {
    float: right;
    outline: none;
    width: 44px;
    height: 26px;
    border-radius: 4px;
    color: #f05941;
    background: #fafafa;
  }
  .container .item-area .item .item-li input:checked + .item-text {
    color: #196b69;
    text-decoration: line-through;
  }
  .container .input-area {
    padding-top: 10px;
  }
  .container .input-area .add-text {
    outline: 0;
    border: 1px solid rgba(0,0,0,0.1);
    height: 40px;
    border-radius: 4px;
    text-indent: 10px;
  }
  .container .input-area .add-button {
    outline: 0;
    height: 40px;
    border-radius: 4px;
    width: 60px;
    padding: 4px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.1);
  }

ok，使用

npm satrt

架子搭完了，很簡單，甚至是不需要你寫這些東西，但是你必須要會寫，不過寫這個的意義并不大，因為我們的重點是學ES6,好我們直搗黃龍。

import style from "./main.css";

把css引入js文件，你就把它當成link就行。

開始核心部分，

const add = document.querySelector(".add-item");//找到添加事件的變表單，之所以需要監聽form而不是input是因為這樣用戶回車時也會觸發事件
add.addEventListener("submit", addItem);

點擊按鈕，添加一個代辦事件，看看addItem怎么寫。

//定義一個用來存放任務的數組
var items = JSON.parse(localStorage.getItem("items")) || [];
function addItem(e){
    e.preventDefault();  //阻止表單提交的默認行為
    const text = (this.querySelector("[name=item]")).value;
    const item ={
        text,
        done: false
    };
    items.push(item);
    //調用populateList，將items數組中的事件添加到html頁面中
    populateList(items, container);
    localStorage.setItem("items", JSON.stringify(items));
    this.reset();
}

把任務扔到數組里，然后讓數組去生成列表，最后重置表單。我們看看待辦事件列表怎么生成的

//將items數組中的事件添加到html頁面中
const container = document.querySelector(".item");//找到將事項加入的元素
function populateList(plate, plateList) {
    plateList.innerHTML=plate.map( (item, i) => {
        return`
        

            
            ${item.text}
            
        
    `
    }).join("");
}
populateList(items, container);

ok，非常簡單。我看看看如何刪除一個任務。

//刪除事件
function deleteDone(e) {
    const msg ="確定刪除該項事件？"
    if(!e.target.matches("input[type="button"]")) return; // 只有復選框才可以執行事件
    const el = e.target;
    const index = el.dataset.index;
    if(confirm(msg)){
        items.splice(index,1); //將選中數組刪除
        localStorage.setItem("items", JSON.stringify(items));
        populateList(items, container);
    }else{
        return;
    }
}
container.addEventListener("click", deleteDone);

其實最關鍵的就一句話，

items.splice(index,1); //將選中數組刪除

玩的就是數組，這個例子雖然簡單用的卻是MVC的思想。

接下來我們再看看切換任務狀態，

//切換checked狀態
function toggleDone(e) {
    if(!e.target.matches("input[type="checkbox"]")) return; // 只有復選框才可以執行事件
    const el = e.target;
    const index = el.dataset.index;
    items[index].done =!items[index].done;
    localStorage.setItem("items", JSON.stringify(items));
    populateList(items, container);
}
container.addEventListener("click", toggleDone);

我們結合著本地存儲的數據結構看，這樣就更好理解。

切換狀態其實就是對應的數組值取反。

好了，到現在為止，我們看看整體代碼：

完整代碼如下：

import style from "./main.css";
const add = document.querySelector(".add-item");//找到添加事件的變表單，之所以需要監聽form而不是input是因為這樣用戶回車時也會觸發事件
const container = document.querySelector(".item");//找到將事項加入的元素
var items = JSON.parse(localStorage.getItem("items")) || [];

//        將添加的待辦事件push進items數組中
function addItem(e){
    e.preventDefault();  //阻止表單提交的默認行為
    const text = (this.querySelector("[name=item]")).value;
    const item ={
        text,
        done: false
    };
    items.push(item);
    populateList(items, container);
    localStorage.setItem("items", JSON.stringify(items));
    this.reset();
}

//      將items數組中的事件添加到html頁面中
function populateList(plate, plateList) {
    plateList.innerHTML=plate.map( (item, i) => {
        return`
        

            
            ${item.text}
            
        
    `
    }).join("");
}

//        切換checked狀態
function toggleDone(e) {
    if(!e.target.matches("input[type="checkbox"]")) return; // 只有復選框才可以執行事件
    const el = e.target;
    const index = el.dataset.index;
    items[index].done =!items[index].done;
    localStorage.setItem("items", JSON.stringify(items));
    populateList(items, container);
}

//        刪除事件
function deleteDone(e) {
    const msg ="確定刪除該項事件？"
    if(!e.target.matches("input[type="button"]")) return; // 只有復選框才可以執行事件
    const el = e.target;
    const index = el.dataset.index;
    if(confirm(msg)){
        items.splice(index,1); //將選中數組刪除
        localStorage.setItem("items", JSON.stringify(items));
        populateList(items, container);
    }else{
        return;
    }
}

add.addEventListener("submit", addItem);
container.addEventListener("click", toggleDone);
container.addEventListener("click", deleteDone);

populateList(items, container);

寫完了上線

npm run build

好，我們總結一下：

1.不要陷入到開發環境里，我們是學習ES6，而不是webpack，所以直接用我寫的webpack工作流就好。

2.要會寫這個項目的html和css，注意實際項目中css的引入方式。

3.學習mvc的思想，嘗試使用通過修改數組的方式實現任務的增加、刪除和修改功能。

4.掌握本地存儲的用法。

好，本文就到這里，下節課我們再做一個更貼近工作的例子。