整理零碎东西

前端的布局方式

文档流、浮动布局、流式布局、定位布局、弹性布局、自适应布局和响应式布局。

flex布局最后一行省2个怎么居左对齐flex: auto;

	.container {
  width: 300px;
  border: 1px solid #000;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.list {
  width: 65px;
  height: 65px;
  margin-bottom: 10px;
  background-color: rgb(148, 148, 131);
  margin-right: 10px;
}


.container::after {
  content: ''; 
  margin-right:300px//一个元素的大小
}  

 
		</style>
	<div class="container">
	    <div class="list"></div>
	    <div class="list"></div>
	</div>
 

flex 左中右 三行布局

.flex{

      display:flex;

      flex-direction:column;

      width:600px;

  }

.flex div{

      width:100px;

      height:100px;

      background:red;

      margin-left:2px;

  }

.flex div:nth-of-type(1){

      align-self:flex-start;

  }

.flex div:nth-of-type(2){

     align-self:center;

  }

.flex div:nth-of-type(3){

     align-self:flex-end;

  }

判断当前是否为移动端

const mobileFlags = [
  /AppleWebKit.*Mobile.*/, // 移动终端
  /\(i[^;]+;( U;)? CPU.+Mac OS X/, // ios终端
  /Android/, // 安卓终端
  /iPhone/, // iPhone
  /iPad/, // iPad
];

const isMobile = () => {
  const ua = navigator.userAgent;

  for (let flag of mobileFlags) {
    if (flag.test(ua)) {
      return true;
    }
  }

  return false;
};

元素.getBoundingClientRect()获得元素位置

元素.scrollIntoView()将指定的元素滚动到浏览器窗口的可见区域。

用法：聊天窗口滚动显示最新的消息

document.getElementById("id").scrollIntoView(alignTo);
参数可以是boolean ：true/false(头部，底部)
document.getElementById("id").scrollIntoView({
  behavior:smooth | auto;
  block:start | center | end | nearest;
  inline:start | center | end | nearest;
});

锚点定位是一个再熟悉不过的操作了，通常会用a标签href=#XX去实现，不过这样做，有一个问题，就是页面会有刷新感，而且地址栏会有变化，F5刷新，则#XXX还是显示在地址栏里，这样如果要进一步进行有关地址栏url的操作，就不得不再做些判断，所以寻找一些新的方法。如果要求不是很高，scrollIntoView()这个方法就可以取代传统锚点定位，它是利用滚动原理，来将相应的元素滚动到可是区域内。

grid布局

兼容最新浏览器时可以使用grid布局 display:grid/inline-grid

ajax的五种状态

ajax的五种状态（readyState ）

0 － （未初始化）还没有调用send()方法
　　1 － （载入）已调用send()方法，正在发送请求
　　2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
　　3 － （交互）正在解析响应内容
　　4 － （完成）响应内容解析完成，可以在客户端调用了

状态码

304 状态码

304 是对客户端有缓存情况下服务端的一种响应。

在浏览器第一次请求某一个URL时，服务器端的返回状态会是200，同时有一个标记最后被修改的时间。
客户端第二次请求此URL时，浏览器会向服务器询问该时间之后文件是否有被修改过。
如果服务器端的资源没有变化，则自动返回 HTTP 304（Not Changed.）状态码，内容为空，这样就节省了传输数据量。

http缓存 浏览器缓存 协商缓存 强缓存

缓存

浏览器第一次发送请求后，会根据响应报文中HTTP头的缓存标识，决定是否缓存结果，是则将请求结果和缓存标识存入浏览器缓存中
HTTP 缓存策略分为两种： 强缓存 和 协商缓存 ，这两种缓存策略都是服务端设置 HTTP Header 来实现的

强制缓存 (max-age 和Cache-Control)

第一次发送请求 ，向服务器发送请求。如果服务器想让数据请求，就会在请求头里设置Cache-Control，设置一个过期时间max-age
再次发送请求，先看是否有缓存，有缓存检查过期时间，没有过期就用缓存，过期了就协商请求。
状态码200

from memory cache代表使用内存中的缓存（读取更快接近0ms），from disk cache则代表使用的是硬盘中的缓存（）

协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识 （Etag：hass值，If-Modified-Since：最后修改时间 ）来决定是否使用缓存的过程，生效则返回304，协商缓存失效，返回200

浏览器缓存过程：

浏览器第一次加载资源，服务器返回200，浏览器将资源文件从服务器上请求下载下来，并把response header及该请求的返回时间(要与Cache-Control和Expires对比)一并缓存；
下一次加载资源时，先比较当前时间和上一次返回200时的时间差，如果没有超过Cache-Control设置的max-age，则没有过期，命中强缓存，不发请求直接从本地缓存读取该文件（如果浏览器不支持HTTP1.1，则用Expires判断是否过期）；
如果时间过期，服务器则查看header里的If-None-Match和If-Modified-Since ；
服务器优先根据Etag的值判断被请求的文件有没有做修改，Etag值一致则没有修改，命中协商缓存，返回304；如果不一致则有改动，直接返回新的资源文件带上新的Etag值并返回 200；
如果服务器收到的请求没有Etag值，则将If-Modified-Since和被请求文件的最后修改时间做比对，一致则命中协商缓存，返回304；不一致则返回新的last-modified和文件并返回 200；
使用协商缓存主要是为了进一步降低数据传输量，如果数据没有变，就不必要再传一遍

用户行为对浏览器缓存的控制：

地址栏访问

链接跳转是正常用户行为，将会触发浏览器缓存机制【浏览器发起请求，按照正常流程，本地检查是否过期，或者服务器检查新鲜度，最后返回内容】

F5刷新：

浏览器会设置max-age=0，跳过强缓存判断，会进行协商缓存判断【浏览器直接对本地的缓存文件过期，但是会带上If-Modifed-Since，If-None-Match（如果上一次response带Last-Modified, Etag）这就意味着服务器会对文件检查新鲜度，返回结果可能是304，也有可能是200.】

ctrl+F5强制刷新：

跳过强缓存和协商缓存，直接从服务器拉取资源。【浏览器不仅会对本地文件过期，而且不会带上If-Modifed-Since，If-None-Match，相当于之前从来没有请求过，返回结果是200.】

如何不缓存

Cache-Control其他字段：

no-cache: 虽然字面意义是“不要缓存”。但它实际上的机制是，仍然对资源使用缓存，但每一次在使用缓存之前必须向服务器对缓存资源进行验证。
no-store: 不使用任何缓存
禁止缓存：

Cache-Control: no-cache, no-store, must-revalidate
Expires：设为当前时间之前
前端开发设置不缓存：
在引用js、css文件的url后边加上 ?+Math.random()

<script type=“text/javascript” src=“/js/test.js?+Math.random()”></script> 

设置html页面不让浏览器缓存的方法

<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> 
<meta http-equiv="expires" content="Wed, 26 Feb 1997 00:00:00 GMT">

Object.defineProperty的缺点

不能监听数组变化，所以后面出现了proxy

promise事件循环执行顺序

Promise 新建后立即执行，然后， then 方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行。

let promise = new Promise(function(resolve, reject) {
	console.log('Promise');
	resolve();
});

promise.then(function() {
	console.log('resolved');
});

console.log('我是同步任务');

//Promise ， 我是同步任务 ， resolved。

Promise.resolve().then(function() {
	console.log('resolved');
});

console.log('我是同步任务');

setTimeout(function(){
	console.log('event loop')
})
// 我是同步任务 ， resolved，event loop。

js的几种设计模式

https://cloud.tencent.com/developer/article/1811806
js的几种设计模式

工厂模式：故名思意，我们从字面上的意思就可以看到，可以想象一座工厂源源不断产出一样的产品，流水线作业。就像构造函数，实例化对象。

单例模式：保证一个类仅有一个实例，并提供一个访问它的全局访问点。其实这有一点像我们vuex当中的实现，也是一个全局的状态管理，并且提供一个接口访问。比如：Vuex、jQuery

原型模式
用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。 Object.create

装饰者模式。它的定义是“ 在不改变原对象的基础上，通过对其进行包装拓展，使原有对象可以满足用户的更复杂需求 ”。Object.defineProperty的wirteable特性实现的

构造器模式 在面向对象的编程语言中，构造器是一个类中用来初始化新对象的特殊方法。并且可以接受参数用来设定实例对象的属性的方法。其实就是利用原型链上被继承的特性，实现了构造器。

适配器模式：相当于一个转换接口，大家想想我们手机充电器通常是二岔口的，但是电源只有三岔口的。这时候就需要一个适配器把三岔口的转换成二岔口的。axios

代理模式:我们在事件代理的时候其实就是使用了代理模式，通过把监听事件全部交由父节点进行监听，这样你添加节点或者删除节点的时候就不用去改变监听的代码。

发布-订阅模式:这种模式在生活中随处可见，比如你订阅了一个网课，开始前10分钟就会提醒你去听课。这里其实就是发布-订阅的模式，你订阅了它的开课信息，但是你不会接收到另一门的开课信息，因为你没有订阅。

策略模式:根据情况进行不一样的方案，比如你想去旅游，明确自己有多少钱然后选择旅游方式。,没钱，走路,有钱，飞机,还行，火车,这里就涉及到策略的模式了

迭代器模式:迭代器模式是指提供一种按顺序访问的方法。比如说我们经常使用的forEach方法，就是通过顺序访问的模式。我们可以自己去写一下forEach的方法。

解决异步：回调，async，promise，G函数

回调

回调函数很好的解决了某些异步情况，但过度滥用回调函数会造成回调地狱，即回调函数过长，嵌套过深。过长或者嵌套过深的回调函数，会让回调函数存在强耦合关系，一旦有一个函数有所改动，那么可能会牵一发而动全身

G函数

函数可以暂停自身，待到合适的机会再次执行。用Generator可以解决回调地狱。

原生对象，内置对象，宿主对象

原生对象：Object,Array,Date,String,Number,RegExp，在js运行中动态创建的
内置对象:Global和Math(数字对象)，js引擎初始化就被创建好的对象
宿主对象：DOM和BOM ，浏览器和文档注入进js的对象

说说你对闭包的理解以及使用场景？

封装代码，定时器的延时回调，一个函数内部返回另一个匿名函数，循环取值

伪元素可以用js来操作么

::after、::before…

//获取伪元素属性
var beforeStyle = window.getComputedStyle(myIdElement, ":before");
+
console.log(beforeStyle.getPropertyValue("width")); // 100px

修改：1.使用css类名
2.document.styleSheets[0].insertRule('.red::before { color: green }', 0);

Js隐式转换

if（）{}
！5
9+‘8’

==
<= >=
++ –
—，*，/，%

css 优先级

! important>内联样式>id> class>标签>*>继承
内联样式 = 1000
id =100
class，伪类=10
类型，伪元素=1
通配符=0

什么是事件代理/事件委托？

事件委托是利用事件的冒泡原理来实现的。把 原本li 的事件委托给 box 父级来做

移动端事件与PC端事件的区别

touchstart，touchmove，touchend，touchcancel

flex:1 跟 flex:auto 的区别

flex:1 更适合在等比例列表时使用，flex：auto适用于元素充分利用剩余空间
在flex:1 时在尺寸不足时会优先最小化尺寸，flex:auto在尺寸不足时优先最大化内容尺寸。

viewport适配原理

 <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

什么情况下返回undefide

变量声明未赋值
没有return返回值

src和herf的区别

src是链接，属于整体替换(替换非叠加)，比如img标签和frame标签；href是超文本引用，属于附属资源，可以叠加。

jQuery中 detach() 和 remove() 方法的区别是什么?

如需移除元素，但保留数据和事件，请使用 detach() 方法代替。 如需
移除元素及它的数据和事件，请使用 remove() 方法代替。

说下readyState属性是干嘛的，都有哪几个状态

介绍一下XMLHttpRequest对象，他有哪些常用方法和属性

XMLHttpRequest(XHR)是一个API对象，其中的方法可以用来在浏览器和服务器端传输数据。

get和post有什么区别？

GET在浏览器回退时是无害的，而POST会再次提交请求。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求在URL中传送的参数是有长度限制的，而POST么有。
GET参数通过URL传递，POST放在Request body中。
GET产生一个TCP数据包。、POST产生两个TCP数据包。（get直接送货，post会先跑过去告诉他我要送货了，再送货）

如何获取dpr

// js获取设备DPR
window.devicePixelRatio

svg的优势有哪些？

可缩放的矢量图形。它是基于XML 使用
与其他图像格式相比，使用 SVG 的优势在于：
●SVG 可被非常多的工具读取和修改（比如记事本）
●SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
●SVG 是可伸缩的
●SVG 图像可在任何的分辨率下被高质量地打印
●SVG 可在图像质量不下降的情况下被放大
●SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
●SVG 可以与 JavaScript 技术一起运行
●SVG 是开放的标准
●SVG 文件是纯粹的 XML

//矩形
<svg width="100%" height="100%">
	<rect width="30" height="40" x="20" y="20"
    style="fill:rgb(0,0,255); stroke-width:1; stroke:rgb(0,0,0)" />
</svg>

//圆
<circle cx="50" cy="50" r="20" stroke="black" stroke-width="2" 
fill="red">

//线
<line x1="0" y1="0" x2="300" y2="300" style="stroke: rgb(99,99,99); stroke-width:2" />

canvas中文字和图片的插入？

ctx.font = "100px sans-serif"
    ctx.fillText("天若有情", 10, 100);
    ctx.strokeText("天若有情", 10, 200)

ctx.drawImage(image, x, y, width, height)

h5中拖放事件有几种？

<div draggable="true">123</div>//设置元素可以拖动
div.ondragstart —拖拽开始
div.ondrag —过程中
div.ondragend —拖拽结束
box.ondragenter —进入目标元素（根据鼠标位置）
box.ondragover —在目标元素上移动（取消默认事件）
box.ondragleave —离开目标元素
box.ondrop —在目标元素上释放 （取消默认事件）

如何在拖放事件中传递数据？

e.dataTransfer.files

如何让某个元素进行全屏展示？

元素.requestFullScreen()—开启全屏
元素.cancelFullScreen()—关闭全屏

new创建一个对象的时候做了些什么？

1、以构造器的prototype属性为原型，创造一个新的、空的对象
2、将它的引用赋给构造器的 this，同时将参数传到构造器中执行
3、如果构造器没有手动返回对象，则返回第一步创建的新对象，如果有，则舍弃掉第一步创建的新对象，返回手动return的对象。

百度地图 一下渲染300多个marks，自定义覆盖物会卡

//一开始选择聚合点，海量点
//然后使用getBounds获取区域内的坐标，渲染区域内的点
var bounds = map.getBounds(); //获取地图可视区域
 let PointItem = new BMapGL.Point(item.newhouseLng, item.newhouseLat);
      if (bounds.containsPoint(PointItem)) {//渲染坐标}

小程序用的腾讯地图，网站用的百度地图，期间位置会存在偏差

http://www.osuu.net/1636.html

ios 手机端 video不自动播放

在iOS上的Safari（适用于包括iPad在内的所有设备）中，用户可能在蜂窝网络上，并按每个数据单元收费，预加载和自动播放被禁用。在用户启动之前，不会加载任何数据。
iOS不仅阻止自动播放，而且会预加载视频，直到用户启动为止。

<video
              src="~/assets/video/JRTT.mp4"
              id="myVideo"
              autoplay
              loop="loop"
              muted="muted"
              x5-video-player-fullscreen="true"
              x5-playsinline
              webkit-playsinline
              playsinline
              preload="auto"
            ></video>
            
let playStatus = 0;
onMounted(() => {
  window.addEventListener("touchstart", function () {
    touchPlay();
  });
});
const touchPlay = () => {
  if (playStatus == 0) {
    var myVideo = document.getElementById("myVideo");
    myVideo.play();
    playStatus++;
  }
};
onUnmounted(() => {
  if (process.client) {
     window.removeEventListener("touchstart", scrollFun);
  }
});

element-ui el-table 移入显示图片

   <el-table  @cell-mouse-enter="makeQc">
//cell-mouse-enter	当单元格 hover 进入时会触发该事件	row, column, cell, event
//判断

二维码显示 import QRCode from “qrcodejs2”;

this.$nextTick(() => {
        this.QcImg = new QRCode(this.$refs.qrCodeUrl, {
          text: this.QcData.phone, // 需要转换为二维码的内容
          width: 200,
          height: 200,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
        this.QcImg._el.title = ""; //隐藏title
      });