←

春招博客笔记 2

目录

CSS

div 居中

flex 布局实现 div 居中是常考的题目，需要记住 flex 的几个常用属性，flex-direction \ flex \ flex-wrap,还有居中实现两个比较特殊的 justify-content 和 align-item

父元素 relativ + 子元素 absolute 有两种实现方式，第一种是将子元素 top / bottom / left / right 设置成 0，margin 设置成 auto，针对盒内元素已知宽度；第二种是将 top，left 设置为 50%，transform：translate(-50%,-50%),针对子元素未知宽度。

JavaScript

给 ul 中的 li 添加事件代理

可以将事件代理添加到 ul 上，利用事件的冒泡来实现这一目的。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>demo</title>
  </head>
  <body>
    <ul id="list">
      <li>aaa</li>
      <li>bbb</li>
      <li>ccc</li>
    </ul>
    <script>
      document.querySelector('#list').addEventListener('click', function (e) {
        if (e.target.nodeName === 'LI') {
          e.target.parentNode.removeChild(e.target);
        }
      });
    </script>
  </body>
</html

继承

ES6 继承

归纳一下继承的种类和特性：

  • 原型链继承/原型式继承
    • 缺点：不能传参、引用对象共享
  • 构造函数继承/寄生式继承
    • 缺点：每次创建实例会执行一遍方法
  • 组合式继承->寄生组合式继承
    • 集合了两者优点，寄生组合式继承利用一个函数“隔离”父类和子类的联系，创建新实体代价较小。

ES6 继承就是寄生组合式继承的封装。

防抖/节流

主要就是设置一个 setTimeout 来延迟函数的执行。

HTML

图片懒加载

就是将图片的 src 定义为一张自定义图片的 src，然后将真实的地址放在一个自定义的属性标签里面，加载完成之后，给 windows.onload 绑定一个函数。

首先用 document.querySelectorAll 获得所有的图片元素，然后通过 window.innerHeight 获得视窗高度，通过 document.documentElement.scrollTop 获得滚轮隐藏的部分高度，当图片的 offsetTop 小于隐藏部分和视窗部分高度和的时候，将 src 替换回自定义的标签。

其他

MIME 类型

一般面试不会问到，但是会经常见到参数里面有，是描述消息内容类型的标准，写几个常见的：

  • html:text/html
  • css:text/css
  • js:application/x-javascript
  • jpg:image/jpeg