实用的开发技巧总结

1.最近写业务代码的时候遇到个问题：如何进行两组数据的匹配？首先想到的就是嵌套双重循环（我这里是两组数组），但是双重循环性能是很低的。这里我尝试两种方法做个数组去重处理。

var oldArr = [{
　　id: 1,
　　name: 'value1'
　　},
　　{
　　id: 2,
　　name: 'value2'
　　},
　　{
　　id: 3,
　　name: 'value3'
　　},
　　{
　　id: 4,
　　name: 'value3'
　　},
　　{
　　id: 5,
　　name: 'value5'
　　}
],
newArr = [],
map = {}
// 方法一 
for(var i = 0;i < oldArr.length;i ++){
　　var el = oldArr[i],isRepeat = false
　　if(!newArr.length){
　　　　newArr.push(el)
　　　　continue
　　}
for (var j = 0; j < newArr.length; j++) {
　　var innerEl = newArr[j]

　　if(el.name == innerEl.name){
　　　　isRepeat = true
　　　　break
　　}
}
if(!isRepeat){
　　newArr.push(el)
　　}

}
console.log(newArr)


// 方法二
for(var i = 0;i < oldArr.length;i ++){
　　var el = oldArr[i].name
　　if(!map[el]){
　　newArr2.push(oldArr[i])
　　map[el] = true
　　}else{
　　alert('有重复！')
　　}

}
console.log(newArr2)

写得不是很好，只是自己把思路理了一下。。。。。。

2.新发现一种不用js实现“块”居中的方法:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>弹出层居中</title>
 5         <meta charset="utf-8">
 6 
 7         <style>
 8             body{
 9                 margin: 0;
10             }
11             .popups-wrapper{
12                 position: fixed;
13                 top: 0;
14                 bottom: 0;
15                 width: 100%;
16                 text-align: center;
17             }
18             /*弹出层遮罩*/
19             .popups-bg{
20                 position: absolute;
21                 top: 0;
22                 left: 0;
23                 width: 100%;
24                 height: 100%;
25                 background-color: #000;
26                 opacity: .4;
27                 filter: alpha(opacity = 40);
28             }
29             .popups{
30                 display: inline-block;
31                 vertical-align: middle;
32                 width: 500px;
33                 height: 250px;
34                 background-color: #ff5400;
35             }
36             .popups-wrapper:after{
37                 content: "";
38                 display: inline-block;
39                 height: 100%;
40                 vertical-align: middle;
41             }
42         </style>
43     </head>
44     <body>
45         
46         <div class="popups-wrapper">
47             <div class="popups-bg"></div>
48             <div class="popups"></div>
49         </div>
50         
51     </body>
52 </html>

其实很简单了，利用vertical-align属性对需要居中的元素设置display：inline-block，然后加个after伪元素实现。

posted @ 2015-08-18 22:15 幻海晨风阅读(138) 评论(0) 收藏举报

刷新页面返回顶部