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文件 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,
maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>TODOList</title>
</head>
<body>
<div class="container">
<div class="item-area">
<h1 class="title">TODO-LIST</h1>
<ul class="item">
<li class="item-li-default">输入使命...</li>
</ul>
</div>
<div class="input-area">
<form class="add-item">
<input maxlength="15" type="text" name="item" placeholder="待办事宜..." class="add-text" required>
<input type="submit" value="+ 增添" class="add-button">
</form>
</div>
</div>
</body>
</html>
接着，写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`
<li class="item-li">
<input type="checkbox" data-index=${i} id="item${i}" ${item.done ? 'checked' : ''}>
<lable class="item-text" for="item${i}">${item.text}</lable>
<input type="button" value="删除" class="delete-item" >
</li>
`
}).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`
<li class="item-li">
<input type="checkbox" data-index=${i} id="item${i}" ${item.done ? 'checked' : ''}>
<lable class="item-text" for="item${i}">${item.text}</lable>
<input type="button" value="删除" class="delete-item" >
</li>
`
}).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.控制当地存储的用法。
好，本文就到这里，下节课我们再做一个更切近事情的例子。
