知识点（二）
1. css实现图片自适应宽高
.img {
width: 100%;
height: auto;
}
2.讲 flex，手写出 flex 常用的属性，并且讲出作用
flex 是 flexible box的缩写，意为：'弹性布局'，用来为盒状模型提供最大的灵活性。
主要属性分布如下：
-
flex-direction => 决定项目的排列方向
.box { display: flex; flex-direction: row (方向为水平方向，从左起) row-reverse(方向为水平方向，从右起) column(方向为垂直方向，从上起) column-reverse(方向为垂直方向，从下起) } -
flex-wrap => 定义如果一条轴线放不下，如何换行
.box { diaplay: flex; flex-wrap: nowrap(默认，不换行) wrap(换行，第一行在上面) wrap-reverse(换行，第一行在下面) } -
justify-content => 定义轴线上的水平对齐方式
.box { display: flex; justify-content: flex-start(默认值，左对齐) flex-end(右对齐) center(居中) space-between(两端对齐，且item中间距离相等) space-around(每个item两侧距离相等，相邻item间隙比距边框大一倍) } -
align-items => 定义轴线上的垂直对齐方式
.box { display: flex; align-items: flex-start(默认值，左对齐) flex-end(右对齐) center(居中) baseline(垂直居中) stretch(如果item未设置高度和auto，将占满整个容器的高度) }
3.BFC是什么？怎么生成BFC？BFC有什么作用？
BFC是block format content ，意思是块级格式化上下文，它是一个独立渲染的区域，只有block-level box参与，并且规定了内部的block-level box布局，并且与这个区域内好无关系
- 当父目录的
float属性不为none
position为absolute或者fixed
display:inline-block,table-cell,table-caption,flex,inline-flex
overflow不为visible
都会生成BFC
作用 -- 清除浮动
image.png
作用 -- 防止垂直margin重叠（折叠）
image.png
4.项目里面的前端鉴权是怎么实现的？
具体分析看这个https://blog.csdn.net/wang839305939/article/details/78713124/
- HTTP Basic Authentication
- session-cookie
- Token验证
- OAuth(开放权限)
5. vue的虚拟dom是怎么回事?
虚拟dom可以理解为保存了一棵dom树被渲染之前所包含的所有信息，而这些信息可以通过对象的形式一直保存在内存中，并通过JavaScript的操作进行维护。
- 第一步：通过树的形式保存旧的dom信息，这些信息可能在页面第一次加载的时候被渲染到浏览器端中，但仍是通过虚拟dom的方式创建的
- 第二步：检测到数据更新，需要更新dom，先在JavaScript中将需要修改的节点全部修改完成。
- 第三步：将最终生成的虚拟dom更新到视图中去
6. vue 双向绑定讲一讲
https://www.cnblogs.com/zhouyideboke/p/9626804.html这个讲的非常的好
7. 手写函数防抖和函数节流
函数节流和函数防抖都是优化高频率执行js代码的一种手段
- 函数节流是指一定时间内js方法只跑一次。比如人的眼睛，就是在一定的时间内只眨一次。
- 函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如，坐公交，在一定时间内，乘客陆续刷卡，就不会开车，但是一旦别人刷卡，公交就开车。
函数节流，以滚动事件为例
var canRun = true // 初始值是已经空闲
document.getElementById('throttle').onscroll = function () {
if (!canRun) {
return; // 判断是否已经空闲，如果在执行中，直接return
}
canRun = false
setTimeout(function(){
console.log('函数节流')
canRun = true
},300)
}
函数防抖
var timer = false
document.getElementById9('debouce').onscroll = function(){
clearTimeout(timer) // 清除未执行的代码，重置会初始化状态
timer = setTimeout(function(){
console.log('函数防抖')
},300)
}
8. load、DOMContentLoaded 事件的触发顺序
load事件：页面资源全部载入（js，css，图片加载完成）出发
ready事件：原生无ready，只有（等同于）DOMContentLoaded事件。是在dom加载完成后触发，此时引用的资源未必已加载完成。
所以，DOMContentLoaded事件一定在load之前。
9. 图片懒加载的实现过程
-
原理
先将img标签的src标签链接设为同一张图片(比如空白图片)，然后给img标签设置自定义的属性（比如data-src），然后将真正的图片地址存储在data-src中，当js监听到该图片元素进入可视窗口时，将自定义属性的地址存储在src属性中，达到懒加载的效果。 -
优点
这样做能防止页面一次性向服务器发送大量请求，导致服务器响应慢，页面卡顿崩溃等。// 一开始没有滚动的时候，出现在视窗中的图片也会加载 start() // 当页面开始滚动的时候，遍历图片，如果图片出现在视窗中，就加载图片 var clock; // 函数节流 $(window).on('scroll', function(){ if (clock) { clearTimeout(clock) } clock = setTimeOut(function(){ start() },200) }) function start(){ $('.container img').not('[data-isLoading]').each(function(){ if (isShow($this)){ loadImg($this) } }) } // 判断图片是否出现在视窗的函数 function isShow($node){ return $node.offset().top <= $(window).height()+$(window).scrollTop() } // 加载图片的函数，把自定义属性data-src存储的真正的图片地址，赋值给src function loadImg($img){ $img.attr('src', $img.attr('data-src')) // 已经加载的图片，设置一个属性，值为1，作为标识 // 这样处理滚动的时候只遍历哪儿些还没有加载的图片 $img.attr('data-isLoading',1) }
10. vue-lazyloader的原理，手写伪代码
image.png
- 原理简述
(1) vue-lazyload是通过指令的方式实现的，定义的指令是v-lazy指令
(2) 指定被bind时会创建一个listener，并将其添加到listener queue里面，并且搜索target dom节点，为其注册dom事件（如scroll事件）
(3) 上面的dom事件回调中，会遍历listener queue里的listener，判断此listener绑定的dom是否处于页面中perload的位置，如果处于则加载异步加载当前图片的资源。
(4) 同事listener会在当前图片加载的loading，loaded，error三种状态触发当前dom渲染的函数，分别渲染三种状态下dom的内容。
11. url的组成
image.png
12. css实现瀑布流布局
-
方法一：css3的Multi-columns.
image.png
css实现如下：
.masonry { column-count: 5; // 分成5列 column-gap: 0; // 列之间的间隔 } .item { break-inside: avoid; // 为了控制文本块分解成单独的列 box-sizing: border-box; padding: 10px } -
方法二： flex
css实现如下：.masonry{ display: flex; flex-direction: row } .item{ display: flex; flex-direction: column; width:calc(100% / 3) }
13. 深拷贝和浅拷贝
-
浅拷贝
var obj = { a:1, arr: [2,3] }; var shallowObj = shallowCopy(obj); function shallowCopy(src) { var dst = {}; for (var prop in src) { if (src.hasOwnProperty(prop)) { dst[prop] = src[prop]; } } return dst; } -
深拷贝
var people = { name:'xxx', friends:['people1','people2','peopple3'], info:{ phone:'133xxxxxxxx', age:'18', sex:'man' } } function deepCopy(p, c) { var c = c || {}; for (var i in p) { if (typeof p[i] === 'object') { c[i] = (p[i].constructor === Array) ? [] : {}; deepCopy(p[i], c[i]); } else { c[i] = p[I]; } } return c; } var person = deepCopy(people);
14. 同源策略以及jsonp解决跨域
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说 Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
它的核心就在于它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时，它们应该只被允许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。
- JSONP 跨域
由于 script 标签不受浏览器同源策略的影响，允许跨域引用资源。因此可以通过动态创建 script 标签，然后利用 src 属性进行跨域，这也就是 JSONP 跨域的基本原理。
直接通过下面的例子来说明 JSONP 实现跨域的流程：
// 1. 定义一个 回调函数 handleResponse 用来接收返回的数据
function handleResponse(data) {
console.log(data);
};
// 2. 动态创建一个 script 标签，并且告诉后端回调函数名叫 handleResponse
var body = document.getElementsByTagName('body')[0];
var script = document.gerElement('script');
script.src = 'http://www.laixiangran.cn/json?callback=handleResponse';
body.appendChild(script);
// 3. 通过 script.src 请求 `http://www.laixiangran.cn/json? callback=handleResponse`，
// 4. 后端能够识别这样的 URL 格式并处理该请求，然后返回 handleResponse({"name": "laixiangran"}) 给浏览器
// 5. 浏览器在接收到 handleResponse({"name": "laixiangran"}) 之后立即执行 ，也就是执行 handleResponse 方法，获得后端返回的数据，这样就完成一次跨域请求了。
15. 讲解MVVM
- Vue.js的数据驱动就是通过MVVM这种框架来实现的。MVVM框架主要包含3个部分:model、view和 viewmodel。
- Model:指的是数据部分，对应到前端相当于javascript对象
- View:指的是视图部分，对应前端相当于dom
- Viewmodel:就是连接视图与数据的中间件通讯
数据(Model)和视图(View)是不能直接通讯的，而是需要通过ViewModel来实现双方的通讯。当数据变化的时候，viewModel能够监听到这种变化，并及时的通知view做出修改。同样的，当页面有事件触发时，viewMOdel也能够监听到事件，并通知model进行响应。Viewmodel就相当于一个观察者，监控着双方的动作，并及时通知对方进行相应的操作。
