乐趣区

关于javascript:面试题总结

jiezi

CSS

1、Flex 布局
Flex 是 Flexible Box 的缩写，意为 ” 弹性布局 ”，用来为盒状模型提供最大的灵活性。

采纳 Flex 布局的元素，称为 Flex 容器（flex container），简称 ” 容器 ”。它的所有子元素主动成为容器成员，称为 Flex 我的项目（flex item），简称 ” 我的项目 ”。

flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。

flex-grow 属性定义我的项目的放大比例，默认为 0，即如果存在残余空间，也不放大。
flex-shrink 属性定义了我的项目的放大比例，默认为 1，即如果空间有余，该我的项目将放大。
flex-basis 属性定义了在调配多余空间之前，我的项目占据的主轴空间（main size）。浏览器依据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即我的项目的原本大小。

应用 Flex 时，比应用 inline-block 和 float 时重排更快，在布局时优先思考 Flex。

2、css 革除浮动

浮动：浮动使元素脱离文档流，可设置文字盘绕，但会导致父元素的高度塌陷。

clear 属性
  1. 追加元素并设置 clear 属性
    clear: both;

  2. 应用 CSS 款式插入伪元素

    .clearfix::after {
  content: "";
  display: block;
  clear: both;
}
创立父级 BFC
  1. 父元素设置 overflow: hidden;
  2. 父元素浮动(float)
  3. 父元素 display: inline-block;
给父元素设置高度
3、选择器优先级

!important > 行内款式 > #id > .class > tag > * > 继承 > 默认
CSS 选择器 从右往左 解析，举荐应用 BEM 命名

4、BFC
BFC 块级格式化上下文 (Block Formatting Context)，是一个独立的渲染区域，让处于 BFC 外部的元素与内部的元素互相隔离，使内外元素的定位不会相互影响。
触发条件
  1. 根元素或其它蕴含它的元素
  2. 浮动元素 (元素的 float 不是 none)
  3. 相对定位元素 (元素具备 position 为 absolute 或 fixed)
  4. 内联块 (元素具备 display: inline-block)
  5. 表格单元格 (元素具备 display: table-cell，HTML 表格单元格默认属性)
  6. 表格题目 (元素具备 display: table-caption, HTML 表格题目默认属性)
  7. 具备 overflow 且值不是 visible 的块元素
  8. 弹性盒（flex 或 inline-flex）
  9. display: flow-root

  10. column-span: all

规定
  1. 属于同一个 BFC 的两个相邻 Box 垂直排列
  2. 属于同一个 BFC 的两个相邻 Box 的 margin 会产生重叠
  3. BFC 中子元素的 margin box 的右边，与蕴含块 (BFC) border box 的右边相接触 (子元素 absolute 除外)
  4. BFC 的区域不会与 float 的元素区域重叠
  5. 计算 BFC 的高度时，浮动子元素也参加计算
  6. 文字层不会被浮动层笼罩，盘绕于四周
利用
  1. 阻止 margin 重叠
  2. 能够蕴含浮动元素 —— 革除外部浮动(革除浮动的原理是两个 div 都位于同一个 BFC 区域之中)
  3. 自适应两栏布局

  4. 能够阻止元素被浮动元素笼罩

    5、盒模型

    规范盒模型 (content-box) 和 IE 盒模型(border-box)。

    规范盒模型

    浏览器默认模型，即 box-sizing: content-box;
    width = content-width
    height = content-height

    IE 盒模型

    box-sizing: border-box;
    width = content-width + padding-width + border-width
    height = content-height + padding-height + border-height

    offsetWidth

    返回元素的宽度（包含元素宽度、内边距和边框，不包含外边距）
    offsetWidth = content-width + padding-width + border-width

    clientWidth

    元素的外部宽度（包含元素宽度、内边距，不包含边框和外边距）
    clientWidth = content-width + padding-width
    clientWidth 用于获取 dom 元素在浏览器的理论占用文档的宽度

    6、布局

    实现左右两边固定宽度，两头自适应的布局的几种办法

    7、利用 html css 编写款式，div 垂直 body 居中、div 内的 text 垂直居中，div 高度等于 body 宽度的一半
    <body>
<div> 垂直居中 </div>
</body>

办法一：body {
 position: relative;
 height: 100vh;
}
div {
 position: absolute;
 top: 50%;
 width: 100%;
 height: 0;
 padding: 25% 0;
 transform: translateY(-50%);
 text-align: center;
 background: green;
}
办法二：body {height: 100vh;}
body,
div {
 display: flex;
 align-items: center;
}
div {
 width: 100%;
 padding: 25% 0;
 text-align: center;
 background: green;
}
    8、文本溢出省略成果
    /* 超出一行用省略号显示 */
.title{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 超出 2 行用省略号显示 */
.title{
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
    9、1 像素问题

    应用 css3 的 scaleY(0.5) 来解决
    eg：div 的 border-top 的 1px 问题解决。

    .border-top-1px {position: relative;}
.border-top-1px::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  transform-origin: 0 top;
  border-top: 1px solid #ccc;
}
@media (min-resolution: 2dppx) {
  .border-top-1px::before {transform: scaleY(.5);
  }
}
@media (min-resolution: 3dppx) {
  .border-top-1px::before {transform: scaleY(.333);
  }
}

    JS

    1、跨域问题

    跨域指浏览器不能执行其余网站的脚本。跨域是浏览器的同源策略限度造成的，是浏览器对 js 施加的平安限度。（同源策略限度）
    同源指域名、协定、端口均雷同。

    JSONP: 利用 <script> 标签不受跨域限度的特点，毛病是只能反对 get 申请
    function jsonp(url, jsonpCallback, success) {const script = document.createElement('script');
  script.src = url;
  script.async = true;
  script.type = 'text/javascript';
  window[jsonpCallback] = function(data) {success && success(data);
  }
  document.body.appendChild(script);
}

    JSONP 跨域的基本原理：因为 script 标签不受浏览器同源策略的影响，容许跨域援用资源。因而，通过动态创建 script 标签，而后利用 src 属性进行跨域。

设置 CORS:

Access-Control-Allow-Origin：* // CORS(跨域资源共享): 服务端设置 Access-Control-Allow-Origin

postMessage

window.postMessage() 是 HTML5 的一个 API，专一实现不同窗口不同页面的跨域通信。

2、什么是事件委托 / 事件代理

事件委托就是利用事件冒泡，只指定一个事件处理程序，就能够治理某一类型的所有事件。
事件捕捉（event capturing）：当鼠标点击或者触发 dom 事件时（被触发 dom 事件的这个元素被叫作事件源），浏览器会从根节点到事件源（由外到内）进行事件流传。
事件冒泡（dubbed bubbling）：事件冒泡刚好相同，事件源到根节点（由内到外）进行事件流传。
DOM 规范事件流的触发的先后顺序为：先捕捉再冒泡，即当触发 DOM 事件时，会先进行事件捕捉，捕捉到事件源之后通过事件流传进行事件冒泡。
element.addEventListener(event, function, useCapture);
将多个子元素上雷同的事件增加到父元素上，eg: 将 li 的事件代理到 ul 上。

3、JS 开发技巧
格式化金钱
formatRMB(num) {return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
最快捷的数组求最大值
const arr = [1,5,1,7,5,9];
Math.max(...arr)  // 9
最短的数组去重写法
[...new Set([2,"12",2,12,1,2,1,6,12,13,6])]
// [2, "12", 12, 1, 6, 13]
4、判断 if([] == false) {} , if({} == false) {} , if([]) {}

若应用 ===，示意相对相等，须要类型雷同并且值雷同；若应用 ==，则在类型不同的状况下会进行类型转换，而后再比拟。
JS“假值”总共只有 6 个：false，undefined，null，0，”（空字符串），NaN

  1. []间接用于 if 判断条件时会被转化为 true。
  2. 与布尔值比拟，都会将两边的值转化为 Number，[]转换为 0，{}转换为 NaN。
    1) [] == false // true
    2) {} == false // false
    3) [] // true
    尽量避免应用 == 和 != 运算符
5、window 的 onload 事件和 domcontentloaded 谁先谁后？

页面加载事件：DOMContentLoaded 和 onLoad
1) DOMContentLoaded：当 DOM 树生成后触发该事件。
2) onLoad：当页面的所有资源（css、js、图片、视频等）都加载实现后触发。

DOM 残缺的解析过程：

  1. 解析 HTML 构造。
  2. 加载内部脚本和样式表文件。
  3. 解析并执行脚本代码。// js 之类的
  4. DOM 树构建实现。// DOMContentLoaded 事件会被触发
  5. 加载图片等内部文件。
  6. 页面加载结束。//load 事件会被触发

// todo:

参考文章：
Flex 布局教程：语法篇
中高级前端大厂面试秘籍，为你保驾护航金三银四，直通大厂 (上)
CSS 盒模型与 style.width,offsetWidth,clientWidth 的关系
字节跳动最爱考的前端面试题：CSS 根底
[浅谈 JavaScript 空数组[] 和空对象 {} 的布尔运算](https://blog.csdn.net/zhouziy…

退出移动版