前端思考 -- 初版

初步罗列了之前对前端温故时的问题，并做了一些回答

提高性能

div模拟table，
重复变量简写，
函数化，
link

兼容性面试题1

理解MVVM的原理是什么

1-链接1
2-链接2

vue原理

原理及导图

什么是虚拟DOM

VUE-ROUTER的实现原理

采用两种方式实现：hash或history

hash: 采用的是地址栏后面加#的方式，通过window.location.hash = ...设定hash值，通过window.onhashchange = function () {}监听hash。注意：1、hash每次设定都会覆盖前一次hash设定；2、每次设定hash值都会向浏览器存储新的历史纪录点；3、hash设定后不影响http请求，即127.0.0.1/index#wd向后端请求时#及#之后的都无效(后端收不到)，一般情况'#'是作为锚点，譬如：地址栏为'..#page'，那么页面默认就滚动到id="page"的位置
history: 兼容性IE10+；采用的是HTML5的history对象，window.history由History产生。通过history.pushstate(state,target,newurl)创建一个新的history记录点，使history.length加1；通过history.replacestate(state,target,newurl)创建一个新的history记录点，覆盖当前的history记录点，history.length不变；
两者共同点：都可以使用window.onpopstate = function () {}监听其改变与否

参考1

VUEX的实现原理

link1

有什么用？使用场景？

场景一：处理多组件依赖于同一个数据，例如有柱状图和条形图两个组件都是展示的同一数据；

场景二：一个组件的行为——改变数据——影响另一个组件的视图，其实也就是公用依赖的数据；

Vuex将组件公用数据抽离，在一个公共仓库管理，使得各个组件容易获取（getter）数据，也容易设置数据（setter）。

vue-LazyLoad实现原理

link1

SVG是什么

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

<!--譬如-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

Json技术指的是什么

三种排序算法

与后端交互时的难点

重构与重绘

class实现icon的原理是什么

个人总结：是利用font-family字体，icon就是在引入的字体库里通过编码找到指定的图标字体。一般引入icon有两种方法：1.通过html上直接写16进制(unicode)的形式(注意css要对写了16进制的html元素设置引入的字体库)；2.通过class，原理是在绑定字体图标class的伪元素before设置content为对应要引入的16进制(unicode编码)，好处在于dom在审查元素时可以知道目前什么字形，更加语义化；都是通过Unicode找对应内容，就相当于每个汉字还有Unicode一样。通过设置class时，为啥要放在伪元素，可能是因为伪元素正好有content。<i class="el-icon-document">

链接

OOP

面向对象编程（Object Oriented Programming，OOP，面向对象程序设计）是一种计算机编程架构；
对象的产生有两种基本方式。一种是以原型（prototype）对象为基础产生新的对象。一种是以类（class）为基础产生新对象；
什么是oop的基本思想呢？把组件的实现和接口分开，并且让组件具有多态性；
OOP 的优点：使人们的编程与实际的世界更加接近，所有的对象被赋予属性和方法，结果编程就更加富有人性化；缺点:太注重逻辑抽象层，会导致性能的下降；

什么是类？

简单的说，类就是一种用户定义的==数据类型，跟结构类似==；并且，类具有自己的成员变量和成员函数（方法），通过它们可以对类自身进行操作。如：汽车可以看作是发动机、车轮、座椅等诸如此类的集合。也可以从功能的角度来研究，譬如，能移动，加速，减速，刹车等。 --精辟

移动端的适配

跨浏览器开发，跨移动端开发

跨浏览器兼容性问题1

什么是DPR

总结：设备像素(物理像素)/CSS像素(逻辑像素) = DPR；为什么会有DPR不同？最初在Iphone4上，是因为PPI(屏幕像素浓度)太高了，但是==屏幕尺寸又没变==，就导致了DPR=2产生。就相当于：本来所有这个尺寸屏幕的宽高css像素都是一样的，譬如iPhone8的375px677px ==>这里指的是CSS像素，因为DPR=2，实际上设备像素为750px1354px

链接

移动端为什么会有1px边框问题

当DPR大于等于2时，1px的css边框实际上用到的物理像素为2px，但是ui给的效果图是1px的，这就涉及到了1px问题。为什么要解决1px问题？ui设计规划问题，且1px与实际相比粗。通俗来讲：苹果本来设备像素是750，你为了让屏幕尺寸375px刚好显示下，设置width=device-width，使得原本1px宽要用到2px物理像素宽来显示，这就是1px变粗的原因，不同的dpr引起的

链接

VUE的methods与computed差别

shim指在旧浏览器模拟出新API，以浏览器目前已有的手段
polyfill指一段代码(或插件)，使浏览器具有某个需要的功能
链接