// data
var personArr = [
{name:'张三',src:'./img/h1.jpg',des:'颈椎不好',sex:'m',age:18},
{name:'刘赢',src:'./img/h2.jpg',des:'我是谁',sex:'f',age:88},
{name:'王秀英',src:'./img/h3.jpg',des:'324',sex:'m',age:44},
{name:'李四',src:'./img/h4.jpg',des:'lalal',sex:'m',age:23},
{name:'王五',src:'./img/h5.jpg',des:'嘻嘻嘻',sex:'f',age:17},
{name:'赵柳',src:'./img/h6.jpg',des:'呵呵呵',sex:'m',age:28},
{name:'王二',src:'./img/h1.jpg',des:'颈椎不好',sex:'m',age:18},
{name:'王可可',src:'./img/h2.jpg',des:'我是谁',sex:'f',age:88},
{name:'张翠花',src:'./img/h3.jpg',des:'324',sex:'f',age:44},
{name:'赵四',src:'./img/h4.jpg',des:'lalal',sex:'m',age:23},
{name:'王四',src:'./img/h5.jpg',des:'biubiu~~',sex:'m',age:17},
{name:'张起灵',src:'./img/h6.jpg',des:'哒哒哒',sex:'m',age:28}
];
// dom感受事件发生=>更改状态=>影响视图
// 需求的增加 时间越来越多 状态越来越多 管理状态 合并行为
// initial variable
var oUl = document.getElementsByTagName('ul')[0];
var oInput = document.getElementsByTagName('input')[0];
// 全局过滤器 状态
var state = {
text:'',
sex:'a'
}
var filterText = '';
var filterSex = 'a';
// 数据渲染页面
function RenderPage(data){
var htmlStr = '';
oUl.innerHTML = '';
data.forEach(function(ele,index,self){
htmlStr += '<li><img src="'+ele.src+'" alt=""/><p class="name">'+ele.name+'</p><p class="des">'+ele.des+'</p></li>'
})
oUl.innerHTML = htmlStr
}
RenderPage(personArr)
// 添加行为
oInput.oninput = function(){
// 根据过滤条件 过滤会后的数组
state.text = this.value;
var newArr = filterArrByText(personArr,state.text)
var newArr2 = filterArrBySex(newArr,state.sex)
RenderPage(newArr2)
}
function filterArrByText(data,text){
if(!text){
return data;
}else{
return data.filter(function(ele,index){
return ele.name.indexOf(text) != -1
})
}
}
// btn style
var oBtnArr = [].slice.call(document.getElementsByClassName('btn'),0);
var lastActiveBtn = oBtnArr[2];
oBtnArr.forEach(function(ele,index,self){
ele.onclick = function(){
changeActive(this);
state.sex = this.getAttribute('sex')
var newArr = filterArrBySex(personArr,state.sex);
var newArr2 = filterArrByText(newArr,state.text);
RenderPage(newArr2)
}
})
function changeActive(curActiveBtn){
curActiveBtn.className = 'btn active';
lastActiveBtn.className = 'btn';
lastActiveBtn = curActiveBtn
}
function filterArrBySex(data,sex){
if(sex == 'a'){
return data
}else{
return data.filter(function(ele,index,self){
return ele.sex == sex;
})
}
}
<!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></title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="wrapper">
<div class="sWrapper">
<input type="text" class="sText"/>
<span class="btn" sex='m'>Male</span>
<span class="btn" sex='f'>Female</span>
<span class="btn active" sex='a'>All</span>
</div>
<div class="flWrapper">
<ul class="userList">
<!-- <li>
<img src="img/h1.jpg" alt=""/>
<p class="name">张三</p>
<p class="des">a</p>
</li>-->
</ul>
</div>
</div>
<script src="js/combineFilter.js"></script>
<script src="js/index.js"></script>
</body>
</html>
*{
margin:0;
padding:0;
list-style: none;
}
.wrapper{
width:500px;
/* height:600px; */
border:1px solid #ccc;
border-radius:10px;
margin:100px auto;
position:relative;
}
.wrapper .sWrapper .btn{
cursor: pointer;
padding:5px;
border-radius: 5px;
}
.wrapper .sWrapper .active{
background: #3c8dff;
color:#fff;
}
.search{
margin:10px auto;
width:100%;
height:60px;
/* border:1px solid black; */
}
.wrapper input{
height:30px;
width:50%;
border-radius:10px;
border:1px solid #ccc;
margin:15px 0 0 15px;
padding:5px;
outline: none;
}
.wrapper .search ul{
position: absolute;
right:0px;
top:25px;
}
.wrapper .search li{
float:left;
height:30px;
padding: 5px 10px;
margin-right:10px;
border:2px solid #ff8c00;
background-color:#fff;
border-radius:10px;
line-height: 30px;
text-align: center;
color:#ff8c00;
font-weight:bolder;
cursor: pointer;
}
.wrapper .search li:hover{
border:2px solid #ccc;
}
.userList{
width:100%;
/* height:500px; */
margin-top:25px;
margin-bottom:30px;
/* border:1px solid black; */
}
.userList li{
width:90%;
height:60px;
padding:10px;
border-bottom:1px solid #ccc;
}
.userList li img{
width:60px;
height:60px;
}
.userList li .name,
.userList li .des{
display:inline-block;
width:150px;
height:60px;
line-height:60px;
vertical-align: top;
margin-left:20px;
text-align: center;
font-size:18px;
}
.wrapper .search .active{
color:#fff;
background-color: #ff8c00;
}
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></title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="wrapper">
<div class="sWrapper">
<input type="text" class="sText"/>
<span class="btn" sex='m'>Male</span>
<span class="btn" sex='f'>Female</span>
<span class="btn active" sex='a'>All</span>
</div>
<div class="flWrapper">
<ul class="userList">
<!-- <li>
<img src="img/h1.jpg" alt=""/>
<p class="name">张三</p>
<p class="des">a</p>
</li>
-->
</ul>
</div>
</div>
<script src="js/filter/filterArrBySex.js"></script>
<script src="js/filter/filterArrByText.js"></script>
<script src="js/combineFilter.js"></script>
<script src="js/index.js"></script>
</body>
</html>
index.js
// data
var personArr = [
{name:'张三',src:'./img/h1.jpg',des:'颈椎不好',sex:'m',age:18},
{name:'刘赢',src:'./img/h2.jpg',des:'我是谁',sex:'f',age:88},
{name:'王秀英',src:'./img/h3.jpg',des:'324',sex:'m',age:44},
{name:'李四',src:'./img/h4.jpg',des:'lalal',sex:'m',age:23},
{name:'王五',src:'./img/h5.jpg',des:'嘻嘻嘻',sex:'f',age:17},
{name:'赵柳',src:'./img/h6.jpg',des:'呵呵呵',sex:'m',age:28},
{name:'王二',src:'./img/h1.jpg',des:'颈椎不好',sex:'m',age:18},
{name:'王可可',src:'./img/h2.jpg',des:'我是谁',sex:'f',age:88},
{name:'张翠花',src:'./img/h3.jpg',des:'324',sex:'f',age:44},
{name:'赵四',src:'./img/h4.jpg',des:'lalal',sex:'m',age:23},
{name:'王四',src:'./img/h5.jpg',des:'biubiu~~',sex:'m',age:17},
{name:'张起灵',src:'./img/h6.jpg',des:'哒哒哒',sex:'m',age:28}
];
// dom感受事件发生=>更改状态=>影响视图
// 需求的增加 时间越来越多 状态越来越多 管理状态 合并行为
// initial variable
var oUl = document.getElementsByTagName('ul')[0];
var oInput = document.getElementsByTagName('input')[0];
// 全局过滤器 状态
var state = {
text:'',
sex:'a'
}
var filterText = '';
var filterSex = 'a';
// 数据渲染页面
function RenderPage(data){
var htmlStr = '';
oUl.innerHTML = '';
data.forEach(function(ele,index,self){
htmlStr += '<li><img src="'+ele.src+'" alt=""/><p class="name">'+ele.name+'</p><p class="des">'+ele.des+'</p></li>'
})
oUl.innerHTML = htmlStr
}
RenderPage(personArr)
// 添加行为
oInput.oninput = function(){
// 根据过滤条件 过滤会后的数组
state.text = this.value;
RenderPage(lastFilterArr(personArr))
}
// btn style
var oBtnArr = [].slice.call(document.getElementsByClassName('btn'),0);
var lastActiveBtn = oBtnArr[2];
oBtnArr.forEach(function(ele,index,self){
ele.onclick = function(){
changeActive(this);
state.sex = this.getAttribute('sex')
RenderPage(lastFilterArr(personArr))
}
})
function changeActive(curActiveBtn){
curActiveBtn.className = 'btn active';
lastActiveBtn.className = 'btn';
lastActiveBtn = curActiveBtn
}
combineFilter.js
function combineFilter(config){
return function(data){
for(var prop in config){
// console.log(prop,config[prop],state[prop])
// text personArr text
// sex arr sex
data = config[prop](data,state[prop])
}
return data;
}
}
var lastFilterArr = combineFilter({
text:filterArrByText,
sex:filterArrBySex
})
filterArrBySex.js
function filterArrBySex(data,sex){
if(sex == 'a'){
return data
}else{
return data.filter(function(ele,index,self){
return ele.sex == sex;
})
}
}
filterArrByText.js
function filterArrByText(data,text){
if(!text){
return data;
}else{
return data.filter(function(ele,index){
return ele.name.indexOf(text) != -1
})
}
}
优化
<!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></title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="wrapper">
<div class="sWrapper">
<input type="text" class="sText"/>
<span class="btn" sex='m'>Male</span>
<span class="btn" sex='f'>Female</span>
<span class="btn active" sex='a'>All</span>
</div>
<div class="flWrapper">
<ul class="userList">
<!-- <li>
<img src="img/h1.jpg" alt=""/>
<p class="name">张三</p>
<p class="des">a</p>
</li>
-->
</ul>
</div>
</div>
<script src="js/tool/debounce.js"></script>
<script src="js/filter/filterArrBySex.js"></script>
<script src="js/filter/filterArrByText.js"></script>
<script src="js/combineFilter.js"></script>
<script src="js/createStore.js"></script>
<script src="js/index.js"></script>
</body>
</html>
index.js
// data
var personArr = [
{name:'张三',src:'./img/h1.jpg',des:'颈椎不好',sex:'m',age:18},
{name:'刘赢',src:'./img/h2.jpg',des:'我是谁',sex:'f',age:88},
{name:'王秀英',src:'./img/h3.jpg',des:'324',sex:'m',age:44},
{name:'李四',src:'./img/h4.jpg',des:'lalal',sex:'m',age:23},
{name:'王五',src:'./img/h5.jpg',des:'嘻嘻嘻',sex:'f',age:17},
{name:'赵柳',src:'./img/h6.jpg',des:'呵呵呵',sex:'m',age:28},
{name:'王二',src:'./img/h1.jpg',des:'颈椎不好',sex:'m',age:18},
{name:'王可可',src:'./img/h2.jpg',des:'我是谁',sex:'f',age:88},
{name:'张翠花',src:'./img/h3.jpg',des:'324',sex:'f',age:44},
{name:'赵四',src:'./img/h4.jpg',des:'lalal',sex:'m',age:23},
{name:'王四',src:'./img/h5.jpg',des:'biubiu~~',sex:'m',age:17},
{name:'张起灵',src:'./img/h6.jpg',des:'哒哒哒',sex:'m',age:28}
];
// dom感受事件发生=>更改状态=>影响视图
// 需求的增加 时间越来越多 状态越来越多 管理状态 合并行为
// initial variable
var oUl = document.getElementsByTagName('ul')[0];
var oInput = document.getElementsByTagName('input')[0];
store.subscribe(function(){
RenderPage(lastFilterArr(personArr))
})
store.getState('sex')
var filterText = '';
var filterSex = 'a';
// 数据渲染页面
function RenderPage(data){
var htmlStr = '';
oUl.innerHTML = '';
data.forEach(function(ele,index,self){
htmlStr += '<li><img src="'+ele.src+'" alt=""/><p class="name">'+ele.name+'</p><p class="des">'+ele.des+'</p></li>'
})
oUl.innerHTML = htmlStr
}
RenderPage(personArr)
// 添加行为
// 输入行为
// filter folder 处理行为
oInput.oninput = debounce(function(){
// 根据过滤条件 过滤会后的数组
store.dispatch({type:'text',value:this.value})
},500)
// btn style
var oBtnArr = [].slice.call(document.getElementsByClassName('btn'),0);
var lastActiveBtn = oBtnArr[2];
oBtnArr.forEach(function(ele,index,self){
ele.onclick = function(){
changeActive(this);
store.dispatch({type:'sex',value:this.getAttribute('sex')})
}
})
function changeActive(curActiveBtn){
curActiveBtn.className = 'btn active';
lastActiveBtn.className = 'btn';
lastActiveBtn = curActiveBtn
}
createStore.js
function createStore(initialState){
var state = initialState || {};
var list = [];
function getState(type){
return state[type];
}
function dispatch(action){
state[action.type] = action.value;
// 调用之前订阅过的函数
list.forEach(function(ele){
ele();
})
}
function subscribe(func){
list.push(func)
}
return {
getState:getState,
dispatch:dispatch,
subscribe:subscribe
}
}
var store = createStore({text:'',sex:'a'})
combineFilter.js
function combineFilter(config){
return function(data){
for(var prop in config){
// console.log(prop,config[prop],state[prop])
// text personArr text
// sex arr sex
data = config[prop](data,store.getState(prop))
}
return data;
}
}
var lastFilterArr = combineFilter({
text:filterArrByText,
sex:filterArrBySex
})
debounce.js
function debounce(handler,delay){
var timer = null;
return function(){
var _self = this,_arg=arguments
clearTimeout(timer);
timer = setTimeout(function(){
handler.apply(_self,_arg);
},delay)
}
}
filterArrByText.js
function filterArrByText(data,text){
if(!text){
return data;
}else{
return data.filter(function(ele,index){
return ele.name.indexOf(text) != -1
})
}
}
filterArrBySex.js
function filterArrBySex(data,sex){
if(sex == 'a'){
return data
}else{
return data.filter(function(ele,index,self){
return ele.sex == sex;
})
}
}