如何使用前端DOM操作制作一个便签：
当你看到这张要实现功能的图片时，不知道你现在的心情如何？反正我看到这张图片的时候心情就跟着张图片的背景颜色一样灰暗！
只要你在动手敲代码前想好各大功能应该要怎么实现？其实问题好像并没有你想象中的那么难！
功能分析：
-
既然我们做的是一个便签，那么就必须要有一个便签所要有的样子——HTML和CSS，起码要让他看起来是个便签。额…虽然你看到我的页面之后可能会觉得我不配说这句话…
-
其次我们一定要把各大功能联系起来，在做之前脑海里要有个大致的思路——知道哪些功能是相关联的，比如说这里的数据保存功能（本地存储）是要和编辑修改操作和删除操作等是联系在一起的。
- 切记： 一定不可以想一个操作就做一个操作，我们关注的是最终的页面完成度，而不是单个功能可不可以实现的问题！（我一开始做的时候就犯了这个错误，导致花费了很多的时间，希望大家引以为戒！）
-
有了全局的思想，我们就可以尽量避免整个网页快要完成的时候却因为某一个功能实现不了而需要你狠心推翻代码重来的情况！
页面布局（HTML+CSS）
<body>
<div class="_head">
<div class="line"></div>
<div class="operation">
<div><a href="javascript:;" class="add" title="点击添加便签"><img src="../memoimages/add.png"></a></div>
<div class="meanmenuface"><a href="javascript:;" class="delete" title="清空便签"><img src="../memoimages/delete.png" alt=""></a>
<a href="javascript:;" title="设置" class='set'><img src="../memoimages/install.png"></a>
<a href="javascript:;" title="退出" class="quit">
<img src="../memoimages/false.png" ></a></div>
</div>
<div class="headtext"><span>QG便笺</span></div>
<div class="search">
<input class="find" type="text" value="搜索..." spellcheck="false">
<a class="find_img" href="javascript:;"></a>
<a href="javascript:;" class="abolish"></a>
</div>
</div>
<div class="_body">
<div class="_body_text">
<textarea name="" class="text" cols="30" rows="10" style="resize: none;" spellcheck="false"></textarea>
<a href="javascript:;" class="cancel"><img src="../memoimages/quxiao.png" title="取消"></a>
<a href="javascript:;" class="finish"><img src="../memoimages/finish.png" title="完成"></a>
</div>
<ul class='note'></ul>
</div>
</body>
为什么我刚刚在上面有说道你看到我的页面之后会怀疑我说的话呢？因为浏览器渲染出来的页面是这样的：
额…
低情商：你的页面真丑！
高情商：哇！你这个页面做的还挺独特的嘛！
好吧！咱们主要要实现的是功能，兄弟们别画错重点！下面我来依次介绍一下各个功能是如何实现的吧！
1、增加便笺（并存储到本地）
可以说是便签最重要的地方了，也是便签的灵魂所在！从这里开始，我们脑子里就要时刻想着本地存储的事了，毕竟你总是要关掉页面的嘛！为了让页面重新打开之后用户的信息还在，这是一个非常关键的操作！
var list = [];
//使用替换法设置一个模板,%为其做了一个标记
var tpl="<li key='{%index%}'><p class='main_text'>{%content%}</p><a href='#' class='time'>"+ year + '年' + month +'月'+ day +'日'+'</a>'+'<ul class="select" ><li class="medify" id="mdf">编辑</li><li class=delete id="del">删除</li></ul></li>';
var fillList=function(){
var str='';
for(let i=0;i<list.length;i++){
if(list[i]==null){
continue;
}
str=str+tpl.replace('{%content%}',list[i].content).replace('{%index%}',i);
// console.log(str);
}
ul.innerHTML=str;
}
var savelist=function(){
localStorage.setItem('listData',JSON.stringify(list));
}
var getlist=function(){
var localList=localStorage.getItem('listData');//获取本地存储的数据
localList=JSON.parse(localList);//解析本地存储数据的字符串
return localList;
}
var main=function(){
if(localStorage.getItem('listData')){
list=getlist();
}else {
list=[];
}
fillList();
}
main();
-
首先我们一定要设置一个空数组，这个数组的作用是用来存储用户输入的数据（首先要把数据转化为对象），以便于后续操作更加方便！tpl这个变量相当于是一个模板，有了它我们可以大量的节省我们的代码量，只需要把用户输入的值插入到对应的位置就行了！
-
注意我们的tpl模板带有能具有辨识度的字符串，比如说我代码中的{%content%}，因为我们就是靠这个字符串把用户输入的值插入到模板中来的（插入模板用的是replace方法）！
-
savelist、getlist、filllist三个函数起到的作用分别是将数组（先利用Json.stringify使其变为字符串）存储到浏览器的本地数据库中、将本地数据（字符串）再解析为数组的形式，最终赋值给数组调用filllist函数进行渲染。
-
main函数的注意目的就是让页面刷新后读取本地存储的数据，这样用户就可以看到他上次存储的数据啦！(注意：本地存储是针对于你所使用的浏览器中的，换成另外一个浏览器数据可就不存在了！！！）
至于这个便签是怎么添加的，用好绑定事件等操作就可以完成！代码我就不写了！
2、删除便签（本地存储中也要删除这项数据)
-
删除页面上的元素并不难，直接用一个监听事件即可，最重要的是要把本地存储的对应数据给删除。想要删除对应的数据首先总得获取我们要删除的数据吧！那我们怎么到底要如何才能获取到呢？
-
这就要回到我们的模板tql上去了，可以看到，我在tpl的小li中设置了一个自定义属性key，这个属性所对应的被替换成了索引（数组下标），这样，我们只需根据监听事件来获取对应属性key的值，就可以知道用户所想要删除的是哪一个li装的值了！
-
删除的操作很简单，把null赋值给list[index]即可，在渲染的时候我们读到null直接用continue跳过那一次循环就好，然后把本地仓库清空，再把list数组的值穿进去，这样我们在下次打开浏览器的时候，已经删除了的值就不会再出现了！
select[i].children[1].addEventListener('click',function(e){
ul.removeChild(e.target.parentElement.parentElement);
var=e.target.parentElement.parentElement.getAttribute('key');
deleteLocalData(index);
var deleteLocalData=function(index){//删除数据后把对应的本地数据改为null
list[index]=null;
console.log(list);
localStorage.removeItem('listData');
savelist();
}
3、修改便签（依然要跟本地数据联系起来）
-
这里有些小细节可以增加用户的体验，比如说用户想要编辑修改的时候，你可以让他在具有原本内容的文本框里修改，这样就可以方便那些只想修改个别字的用户使用！还有编辑之后新内容要显示在便签的最顶上（因为是最接近当前时间操作的）这些操作也更加地贴近我们的生活！
select[i].children[0].addEventListener('click',function(e){
var index1=e.target.parentElement.parentElement.getAttribute('key');
text.value=list[index1].content;
cancel.style.display='none';
text.parentElement.style.display='block';
ul.removeChild(e.target.parentElement.parentElement);
deleteLocalData(index1);
})
var deleteLocalData=function(index){//删除数据后把对应的本地数据改为null
list[index]=null;
console.log(list);
localStorage.removeItem('listData');
savelist();
}
-
其实修改便签和删除便签的操作有些类似，因为它也要删除用户原来的数据（无论是在页面上，还是在本地中），所以这一部分的操作一模一样！
-
其实删除完了之后事情就变的很简单了，因为我们在之前就设定了添加的便签会以入栈的方式添加到数组中来（这里指的是从最前面入栈,也就是unshift的方法把数据插入到最前面），那这样我们在执行添加操作的时候就简单了很多了!
if(localStorage.getItem('listData')!=null){
fn();
}
finish.onclick = function () {
if (text.value === '') {
alert('您还没有输入内容，不可保存！');//输入验证
return false;
} else {
cancel.style.display = 'block';
var obj={
content:text.value
}
list.unshift(obj);
text.value='';
text.parentElement.style.display = 'none';
savelist();//将用户新添加的数据保存到本地
fillList();//重新渲染
fn();
}
}
4、通过关键字查找便签（你们应该知道这个括号里面要填什么了，hh）
-
是的，又是跟本地操作有关，所以，到现在为止，你应该知道为什么我要一直强调全局思想了吧！如果你一开始没有这种意识，后果是非常严重的（别问我是怎么知道的！！！）
-
先用一个变量记录用户要查找的关键字，紧接着的操作是获取本地的数据，把获取的数据复制给一个变量，用split分割关键字，再用join在关键字两边加上span标签，我们通过类名可以修改他的样式，比如说背景颜色等等
-
这里提示一下：最好不要把刚刚添加了span的字符串保存到本地，然后再从本地获取到数据进行渲染，虽然这样看起来也可以完成这次操作，在页面中看到你想要看到的效果！但是你有没有想过，用户假如还想再次搜索呢？他还能再搜索到他想要的值吗？或者用户想要结束搜索，那你还能够把原来的页面呈现给用户吗？
-
答案肯定是不能，因为你已经用span标签把原本的字符串给破坏了，用户再次执行搜索操作可能就会你这个不小心的举动给破坏。
-
那我是怎么做的呢？很简单，我并没有颠覆刚刚的那种做法，不过我增加了一些小小的操作。我另设了一个变量，用于存储没有被span所破坏的字符串，渲染页面时我用的是span改动过的字符串进行渲染，渲染完之后清除本地数据并用我这个另设的变量传递值进去。这样，不管用户搜索几次，我都能够呈现正确的页面给用户了！
var find_img = document.querySelector('.find_img');
var abolish=document.querySelector('.abolish');
find_img.onclick = function () {
if(find.value==='搜索...'){
alert('搜索值不可为空！');
return;
}
abolish.style.display="block";
var str = find.value;//记录查找值
var localdata1=localStorage.getItem('listData');//获取本地数据
var localdata2=localdata1;
str= localdata1.split(str).join("<span class='str'>" + str + "</span>");
//将关键的字符用span分割，以便后面换bgc
localStorage.removeItem('listData');//清空本地数据
localStorage.setItem('listData',str);//添加本地数据
list= getlist();//将本地数据用JSON.parse解析后赋值为数组
fillList();//渲染数组
fn();//使其保持原本功能的函数
localStorage.removeItem('listData');//清空本地数据
localStorage.setItem('listData',localdata2);//添加本地数据
list=getlist();
}
651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
