对于一个前端菜鸟的我，总是在想，怎么才能学习好前端，如何能够深入一个前端框架，经常在百度中徘徊，总是寻找大神的经验，每次看到一个大神的分享代码或者讲解后，感觉好像一下子会了，然而在自己总结的时候，又好像什么都不会似的。
这段时间打算开始学习ReactJS，看了阮一峰大神的一些博客，查询了源码的例子看，总是感觉还是在模糊状态，只知道有这些东西，但是还不能熟练的应用，而且发现很多入门的demo都是以todolist的例子来学习的，因此作者也决定从todolist的代码编写来开始一步步的进入前端技术领域，如果此刻你与我一样，是一个前端菜鸟，我们可以一起来学习，来分享。
上述只是一个引用，现在开始正文部分，做任何事情前，先要明确自己的需求目标，不能想一步做一步，作者先以HTML来实现TODOLIST的效果图，便于后续使用React实现功能，后续继续提供React对TODOLIST功能的实现。先上HTML布局的TODOLIST图：
从图中我们来分析下TODOLIST主要的布局思路：
整体考虑，TODOLIST是一个大容器，其中包括一个输入容器和一个显示容器
输入容器中添加了一个添加按钮和一个输入框实现，实现待办事项的输入
显示容器包括了待办事项列容器和底部编辑容器
待办事项列容器中包括了前面的一个按钮、中间显示字段和后面一个按钮
底部编辑容器包括一个全选按钮、遗留事项和清除按钮
有了这个思想后，我们就按照这个实现html的元素布局，目前触发事件均不在此次的HTML布局中实现，在后续改造为React框架实现的时候，同时完成对应的事件触发。
提供源码，直接拷贝，按照对应的路径文件加载即可运行。其中本人使用的jquery版本：jquery-1.12.3.js
HTML布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>todoList</title>
<link rel="stylesheet" type="text/css" href="./css/common.css">
</head>
<body οnlοad="setWindows()">
<div class="todobody">
<div class="title">todos</div>
<div id="demo" class="container">
<div class="line"></div>
<div class="header">
<a class="plus">+</a>
<input class="new-todo" type="text" placeholder="请输入待办事项" />
</div>
<div class="content">
<div class="todo">
<div class="item">
<a class="namebtn" href="#">√</a>
<span class="name namecompleted">今天下午和客户沟通需求</span>
<a class="namebtn" href="#">×</a>
</div>
<div class="item">
<a class="namebtn" href="#">○</a>
<span class="name">明天制定方案</span>
<a class="namebtn" href="#">×</a>
</div>
<div class="item">
<a class="namebtn" href="#">○</a>
<span class="name">明天下午需要购物</span>
<a class="namebtn" href="#">×</a>
</div>
</div>
<div class="footer">
<a class="footerbtn">Toggle all</a>
<span>2 item left</span>
<a class="footerbtn">Clean completed</a>
</div>
</div>
</div>
</div>
<script src="./js/jquery-1.12.3.js"></script>
<script type="text/javascript">
function setWindows() {
var h = window.innerHeight;
var w = window.innerWidth;
$(".todobody").height(h);
$(".todobody").width(w/4);
$(".todobody").css("margin-left", w/3);
}
</script>
</body>
</html>
CSS样式：
.title {
margin: 0 auto;
text-align: center;
font-size: 250%;
}
.container {
margin: 0 auto;
display: flex;
flex-direction: column;
}
.line {
background-color: #e7e7e7;
height: 1px;
}
/*内容输入区域*/
.header {
height: 50px;
border: 1px solid #e7e7e7;
border-radius: 5px;
margin: 10px;
display: flex;
align-items: center;
}
.plus {
margin: 0 10px;
text-align: center;
font-size: 50px;
}
.new-todo {
flex: 1;
height: 40px;
margin-right: 10px;
border: 0;
font-size: 30px;
}
/*内容显示区域*/
.content {
display: flex;
flex-direction: column;
}
.todo {
border: 1px solid #e7e7e7;
border-radius: 5px;
margin: 0 10px;
display: flex;
flex-direction: column;
}
.item {
height: 40px;
border-bottom: 1px solid #e7e7e7;
display: flex;
align-items: center;
}
.item:last-child {
border-bottom: 0px solid #e7e7e7;
}
.name {
font-size: 30px;
flex: 1;
}
.namecompleted {
text-decoration: line-through;
}
.namebtn {
margin: 0 10px;
text-decoration: none;
}
.footer {
margin: 10px 10px;
display: flex;
justify-content: space-between;
}
.footerbtn {
border: 1px solid #EED4D4;
border-radius: 5px;
}
全栈工程师成长记
目前阶段：
以个人学习前端技术，来记录如何入门，如何填坑，如何成长，记录过程中可能知识零散，没有整合，如有问题直接添加个人微信号，交流学习；
未来阶段：
整合个人学习技术，形成书签式的记录分享，为大家填坑，能够尽量少走弯路，成为全栈工程师。
如有兴趣一起学习，一起进步的朋友可以添加个人微信号，互相交流进步。
微信订阅号二维码
个人微信二维码