六月填坑（三）

1. 清除浮动三栏布局

父级div定义伪类：after和zoom

.clear::after{
    content:'';
    display:block;
    height:0;
    clear:both;
    visibility:hidden
    
}
.clear{ zoom:1}
复制代码

三栏布局

绝对定位布局
左中右三个盒子都设置position:absolute;然后分别设置定位
3)flex布局
父盒子设置display:flex;位于中间的子盒子设置flex:1
4)表格布局
父盒子设置display:table;左中右三个盒子设置display:table-cell;左右两个盒子分别设置宽度；
5)网格布局
父盒子设置display:grid; grid-template-columns:300px auto 300px;

复制代码

2. transition和animation

<style>     
   #box2{
            height: 100px;
            width: 100px;
            background: blue;
        }
        #box2:hover{
            transform: rotate(180deg) scale(.5, .5);
            background: red;
            transition: background 2s ease, transform 2s ease-in 1s;}
    </style>
</head>
<body>
 <div id="box1">BOX1</div>
 <div id="box2">BOX2</div>
</body>


<style>
        .box{height:100px;width:100px;border:15px solid black;
            animation: changebox 10s ease-in-out   3 alternate paused;
            }
            <!--决定播放状态-->
        .box:hover{
            animation-play-state: running;
        }
        @keyframes changebox {
            10% {  background:red;  }
            50% {  width:80px;  }
            70% {  border:15px solid yellow;  }
            100% {  width:180px;  height:180px;  }
        }
    </style>

<body>
 <div class="box"></div>
</body>

复制代码

3.垂直水平居中的方式？以及省略文本...

display: table-cell;
vertical-align: middle;//使子元素垂直居中
text-align: center;//使子元素水平居中

text-overflow:eclipse
white-wrap：no-wrap


复制代码

4. 原生JS都有哪些方式可以实现两个页面间的通信？

１）通过url地址栏传递参数；例如：点击列表中的每一条数据，跳转到一个详情页面，在URL中传递不同的参数区分不同的页面；２）通过本地存储cookie、localStorage、sessionStorage；例如京东的登陆，把登陆后获得的页面信息存储到本地，其他页面需要用户信息的话就从本地的存储数据中获取；３）使用iframe 例如在Ａ页面中嵌入Ｂ页面，在Ａ中可以通过一些属性和实现方法和Ｂ页面的通信；４）利用postMessage实现页面间的通信例如父窗口往子窗口传递信息，子窗口往父窗口传递信息


复制代码

5. SEO

合理的title、description、keywords：搜索对着三项的权重逐个减少，title值强调重点即可，重要关键词不要超过两次，而且要靠前，不同页面的title要有所不同； description把页面的内容高度概括，长度合适，不可过分分堆砌关键词，不同页面的description有所不同； keywords列举重要关键词即可；语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页；重要内容的HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，所以要保证重要内容一定会被抓取；重要内容不要用JS输出：爬虫不会执行JS获取内容；少用iframe：搜索引擎不会抓取iframe中的内容；非装饰性图片必须加alt；提高网站速度：网站速度是搜素引擎排序的一个重要指标；

// title标题
<title>标题</title>
// keywords 关键词
<meta name="description" content="关键词1,关键词2,关键词3">
// description 内容摘要
<meta name="description" content="网页的简述">

复制代码

6.页面加载过程中可能触发哪些事件？它们的顺序是？

页面加载时，大致可以分为以下几个步骤：
1）开始解析HTML文档结构
2）加载外部样式表及JavaScript脚本
3）解析执行JavaScript脚本
4）DOM树渲染完成
5）加载未完成的外部资源（如 图片）
6）页面加载成功
执行顺序：
1）document readystatechange事件
2）document DOMContentLoaded事件
3）window load事件

复制代码

7. vue 里面router 和route,query以及params区别

router 为vueRouter实例 ; $route为当前router跳转对象里面可以获取name、path、query、params等

this.$router.push({path:'/user',name:'User',query:{id:5}})

获取参数： this.$route.query.id

query要用path来引入,例如ths.$router.push({ path:"detail",query:{id:"00"}})，
接收参数为this.$route.query.id，params要用name来引入，
例如ths.$router.push({ name:"detail",params:{id:"00"}})，接收参数为this.$route.params.id。以query传输的参数会在类似于get传参，在浏览器地址栏中显示参数。

复制代码

8. ES5的继承和ES6的继承有什么区别？

ES5继承是Parent.apply(this),修改父级里面的this指向， ES6继承是父级里面的this，具体为ES6通过class关键字定义类，里面有构造方法，类之间通过extends关键字实现继承。子类必须在constructor方法中调用super方法，否则新建实例报错。因为子类没有自己的this对象，而是继承了父类的this对象，然后对其调用。如果不调用super方法，子类得不到this对象。

9. 数据绑定基本的实现以及vue中使用definePorperty()实现监听者

 // 实现一个方法，可以给 obj 所有的属性添加动态绑定事件，当属性值发生变化时会触发事件
let obj = {
  key_1: 1,
  key_2: 2
}
function func(key) {
  console.log(key + ' 的值发生改变：' + this[key]);
}
bindData(obj, func);
obj.key_1 = 2; // 此时自动输出 "key_1 的值发生改变：2"
obj.key_2 = 1; // 此时自动输出 "key_2 的值发生改变：1"


 function bindData(obj, fn) {
    for(let key in obj){
      Object.defineProperty(obj,key,{
        set(newVal){
          if (obj.value!==newVal){
            obj.value = newVal;
            fn.call(obj,key);
          }
        },
        get(){
          return obj.value
        }
      })
    }
 }
 
 
//vue中使用definePorperty()实现监听者

<input type="text" id="my-name">
<p id="my-name-get"></p>
<script>
    var inputEle = document.getElementById('my-name')
    var pEle = document.getElementById('my-name-get')
    var obj = {}
    Object.defineProperty(obj,'myName',{
        get:function(){
            return obj
        },
        set:function(val){
            inputEle.value = val
            pEle.innerText = val
        }
    })
    inputEle.onkeyup = function(e){
        obj.myName = this.value
    }
</script>
复制代码

10. 数组去重 [1,2,3]==[1,2,3]的情况之前去重方法都是引用地址不同也是去重

var arr1 = [123, "meili", "123", "mogu", 123];
var arr2 = [123, [1, 2, 3],
  [1, "2", 3],
  [1, 2, 3], "meili"
];
var arr3 = [123, {
  a: 1
}, {
  a: {
    b: 1
  }
}, {
  a: "1"
}, {
  a: {
    b: 1
  }
}, "meili"];
// 去重 [123,[1, "2", 3], [1, 2, 3], "meili"];
function unique(arr) {
  let ret = [];
  let map = new Map();
  let item;
  // ret = arr.filter((item, index) => arr.indexOf(item) === index)
  for (let i = 0; i < arr.length; i++) {
    // 基本类型
    let type = Object.prototype.toString.call(arr[i])
    if (type === '[object Object]' || type === '[object Array]') {
      item = JSON.stringify(arr[i])
    } else {
      item = arr[i]
    }

    if (!map.has(item)) {
      map.set(item, true);
      ret.push(arr[i]);
    }

  }

  return ret

}


console.log(unique(arr2)); //[ 123, [ 1, 2, 3 ], [ 1, '2', 3 ], 'meili' ]
console.log(JSON.stringify([1, 2, 3]) === JSON.stringify([1, 2, 3]));//true
复制代码

转载于:https://juejin.im/post/5d02517fe51d4510624f97bb

1. 清除浮动 三栏布局

2. transition和animation

3.垂直水平居中的方式？以及省略文本...

4. 原生JS都有哪些方式可以实现两个页面间的通信？

5. SEO

6.页面加载过程中可能触发哪些事件？它们的顺序是？

7. vue 里面router 和route,query以及params区别

8. ES5的继承和ES6的继承有什么区别？

9. 数据绑定基本的实现 以及vue中使用definePorperty()实现监听者

10. 数组去重 [1,2,3]==[1,2,3]的情况 之前去重方法都是引用地址不同也是去重

猜你喜欢

1. 清除浮动三栏布局

9. 数据绑定基本的实现以及vue中使用definePorperty()实现监听者

10. 数组去重 [1,2,3]==[1,2,3]的情况之前去重方法都是引用地址不同也是去重