共计 5552 个字符，预计需要花费 14 分钟才能阅读完成。
明天的开始进入了 js 的高级语法 我马上也要温习完了，之前学到闭包递归，就回去温习去了，复都温习这么久而且，温习的过程真的比学常识的过程难熬的多，只不过终于要温习完了，再来点 es6 的新语法马上就要步入 vue 了，想想都有点小冲动，明天首先来的第一个案例我称之为目前为止的史诗级难度，第一次做的时候懵懵懂懂的，这第二次温习到再做缓缓的有点感觉了，也懂了很多但还是有一些局部本人独立实现不了，这是一个基于面向对象的 tab 栏，我第一次做的时候应该也在上面开贴了，这一次做收货照样很多，不多说了先看成果吧
先来 html 代码吧，js 上面再说
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 面向对象 Tab</title>
<link rel="stylesheet" href="./styles/tab.css">
<link rel="stylesheet" href="./styles/style.css">
</head>
<body>
<main>
<h4>
Js 面向对象 动静增加标签页
</h4>
<div class="tabsbox" id="tab">
<!-- tab 标签 -->
<nav class="fisrstnav">
<ul>
<li class="liactive"><span> 测试 1 </span><span class="iconfont icon-guanbi"></span></li>
<li><span> 测试 2 </span><span class="iconfont icon-guanbi"></span></li>
<li><span> 测试 3 </span><span class="iconfont icon-guanbi"></span></li>
</ul>
<div class="tabadd">
<span>+</span>
</div>
</nav>
<!-- tab 内容 -->
<div class="tabscon">
<section class="conactive"> 测试 1 </section>
<section> 测试 2 </section>
<section> 测试 3 </section>
</div>
</div>
</main>
<script src="./js/index.js"></script>
</body>
</html>html 其实还是蛮简略的，js 就有说头了，全副是基于 class 类来实现的，做这一个案例我感觉就能够对类有一个很分明的认知了，做下来很有帮忙，第二次做有点小 bug 哈，应该让里面与外面串联起来所以最好还是类承受一个 id 传进来但我这里间接就开始了啥也没传所以要看传 id 的版本在我最开始几篇应该有
// 纯纯的相当于第一次做了 很久之后再次回归我就大多数拿来冥想了 想看具体的思维步骤的在我前几篇随笔外面那个写的清晰地多
var that
class Tab {constructor() {
that = this
// 1.1 获取元素在这里获取
this.ul = document.querySelector('ul')
// 1.3 面板对应切换
this.tabscon = document.querySelector('.tabscon')
// 2. 点击加号能够增加 tab 栏和内容
this.add = document.querySelector('.tabadd span')
this.init()}
// 2.4 这里是拿来获取最新的数据 以便增删改查的操作
getNew() {this.lis = this.ul.querySelectorAll('li')
this.sections = this.tabscon.querySelectorAll('section')
this.close = document.querySelectorAll('.icon-guanbi')
this.spans = this.ul.querySelectorAll('li span:first-child')
}
// 2.3 须要一个初始化函数 一开始就让所有组件绑定事件
init() {this.getNew()
this.add.onclick = that.addSection
for (var i = 0 ; i < this.lis.length; i++) {this.lis[i].setAttribute('data-index', i)
this.lis[i].onclick = this.togge
// 3.1 同样在初始化外面为删除绑定点击事件
this.close[i].onclick = this.remove
this.spans[i].ondblclick = this.dbclick
this.sections[i].ondblclick = this.dbclick
}
}
clearCLass() {
// 1.2 因为这里要用到 this 且等会会被调用 所以要筹备一个 that
// 2.2 因为上面要用到分明款式的中央还有点多
for (var i = 0 ; i < this.lis.length; i++) {this.lis[i].classList.remove('liactive')
that.sections[i].classList.remove('conactive')
}
}
// 1. 点击切换成果
togge() {that.clearCLass()
this.classList.add('liactive')
var index = this.getAttribute('data-index')
that.sections[index].classList.add('conactive')
}
// 2.1 增加成果
addSection() {
// 2.5 这里这个新语法很重要 如果用原来的 appendchild 得不到及时的新数据 就会不晓得插入在哪里去就会报错
var li = '<li class="liactive"><span> 测试 1 </span><span class="iconfont icon-guanbi"></span></li>'
that.ul.insertAdjacentHTML('beforeend', li)
var section = '<section class="conactive"> 测试'+Math.random()+'</section>'
that.tabscon.insertAdjacentHTML('beforeend', section)
that.clearCLass()
that.init()}
// 3. 删除成果
remove(e) {
// 3.1 这里有个疑难点卡了我半天 因为点的是小 close 这里有个冒泡成果 而 li 也有个点击成果所以你一点击小叉 就回升到 li 也会被点击 先不说
// 这个点击重不重要 如果不关的话 这里点击了 那你上面还有个点击上一个按钮的行为就不会触发 因为同一时间只能点一个 li
e.stopPropagation()
var index = this.parentNode.getAttribute('data-index')
that.ul.removeChild(this.parentNode)
that.tabscon.removeChild(that.sections[index])
that.lis[index - 1] && that.lis[index - 1].click()}
// .4. 双击批改性能
dbclick() {// console.log(val);
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
var str = this.innerHTML
this.innerHTML = '<input type="text">'
this.children[0].value = str
this.children[0].onblur = function() {this.parentNode.innerHTML = this.value}
}
}
var tab = new Tab()2.
第二个呢，是一个比拟残缺的案例，这个案例的问题点呈现在我正文的第四步，实时查问显示输出的每一个字符，这个的确也是没有记住一个新语法，inclouds 字符串的，用来查找后面字符串是否蕴含前面字符串的内容
而后是他的原理实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
width: 400px;
border: 1px solid #000;
border-collapse: collapse;
margin: 0 auto;
}
td,
th {
border: 1px solid #000;
text-align: center;
}
input {width: 50px;}
.search {
width: 600px;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="search">
依照价格查问: <input type="text" class="start"> - <input type="text" class="end"> <button class="search-price"> 搜寻 </button> 依照商品名称查问: <input type="text" class="product"> <button class="search-pro"> 查问 </button>
</div>
<table>
<thead>
<tr>
<th>id</th>
<th> 产品名称 </th>
<th> 价格 </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 利用新增数组办法操作数据
var data = [{
id: 1,
pname: '小米',
price: 3999
}, {
id: 2,
pname: 'oppo',
price: 999
}, {
id: 3,
pname: '光荣',
price: 1299
}, {
id: 4,
pname: '华为',
price: 1999
}, ];
// 1. 动静创建表格行列元素
var tbody = document.querySelector('tbody')
function createArr(arr) {
tbody.innerHTML = ''
arr.forEach(function(value) {var tr = document.createElement('tr')
for (k in value) {var td = document.createElement('td')
td.innerText = value[k]
tr.appendChild(td)
}
tbody.appendChild(tr)
})
}
createArr(data)
// 2. 依照价格查问
var priceSearch = document.querySelector('.search-price')
var priceStart = document.querySelector('.start')
var priceEnd = document.querySelector('.end')
priceSearch.onclick = function() {
var start = priceStart.value
var end = priceEnd.value
var newArr = data.filter(function(value) {return value.price >= start && value.price <= end})
// console.log(newArr,start,end);
createArr(newArr)
}
// 3. 依照商品名称查问
var nameSearch = document.querySelector('.search-pro')
var product = document.querySelector('.product')
nameSearch.addEventListener('click',function() {var newArr1 = data.filter(function(value) {return value.pname == product.value})
createArr(newArr1)
})
// 4. 当输出一个字 不必点搜寻就进去与之匹配的后果
// 这个案例最要害的一个问题其实就是一个字符串的办法 查找该字符串外面是否蕴含这个字符
product.addEventListener('input', function() {
var str = product.value
var newArr2 = data.filter(function(value) {if (value.pname.includes(str)) {return value}
})
createArr(newArr2)
})
</script>
</body>
</html>前端爱好者，望大佬给个内推机会！！！
正文完
发表至： javascript
2022-09-29
