亚信前端一面已OC

亚信一面

1.如何设置一个元素不可见？

• display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
• visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
• opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
• position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
• z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
• transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

2.谷歌浏览器设置比12px还小的字体？

transform(scale(0.5))

最方便的是在浏览器设置里修改最小字号。

3.深拷贝实现方法？

方法1：JSON.parse(JSON.stringify())

方法2：lodash的_.cloneDeep方法

方法3：.jQuery.extend()方法

方法4：手写递归方法

function deepclone(target)
{
  //若是引用类型，创建对象，遍历deepclone方法
 if(typeof target=='object')
 {
let cloneTarget={};
for(const key in target)
{
    cloneTarget[key]=deepclone(target[key]);
}}
//若是基本类型，直接返回
else
{
  return target;
}
}

4.防抖节流实现原理？

防抖原理？多次触发，一段时间后执行一次

两种实现方式

// 非立即执行
function debounce(event,time)
{
 let timer=null;
  // 返回一个闭包函数，用闭包保存timer确保其不会销毁，重复点击会清理上一次的定时器
 return function(...args)
 {
     //n秒内再次调用，重新计时
     clearTimeout(timer);
     timer=setTimeout(()=>{
    //this指向闭包调用者,而不是指向window
        event.apply(this,args);
     },time);
 }
}

// 立即执行，使用flag标签来表示是否是立即执行
function debounce1(event,time,flag)
{
 let timer=null;
 return function(...args)
 {
     //n秒内再次调用，重新计时
     clearTimeout(timer);
     //立即执行
     if(!timer&&flag)
     event.apply(this,args);
     timer=setTimeout(()=>{
         //this指向闭包调用者,而不是指向window
         //目的：解决参数个数不确定和将参数传回防抖函数
         event.apply(this,args);
     },time);
 }
}

节流：间隔一段时间执行一次

两种实现方式？

/定时器实现：第一次事件不会立即执行，time秒后执行，最后一次触发会再执行一次
function throttle1(event,time)
{
 let timer=null;
 return function(...arg)
 {
     //定时器为空
     if(!timer)
     {
         //开启定时器
         timer=setTimeout(()=>
         {
             event.apply(this.args);
             //函数执行后，重置定时器
             timer=null;
         },time);
     }
 }
}


// 时间戳&定时器：第一次会马上执行，最后一次也会执行
function throttle2(event,time)
{
 let pre=0;
 let timer=null;
 return function(...args)
 {
     //时间间隔瞒足time,立即执行
     if(Date.now()-pre>time)
     {
         clearTimeout(timer);
         timer=null;
         pre=Date.now();
         event.apply(this,args);
     }
     //否则，使用定时器来执行最后一次event
     else if(!timer)
     {
         timer=setTimeout(()=>
         {
             event.apply(this,args);
         },time);
     }
 }
}

5.遍历循环数组方法？

forEach，map,some,filter,some,every,reduce,for…in ,for…of

6.vue的双向绑定？

observer通过 Object.defineProperty() 来实现对每个数据对象的属性进行监听，设置setter和getter方法，一旦数据改变，通知订阅者，触发回调函数

订阅者的主要作用收集所有观察者并通知相应观察者响应数据变化。通过dep.depend（）收集所有观察者，dep.notice（）方法通知变化。

watcher收到变化通知，调用自身的更新函数，将将差异找出来，更新到真实dom树上。

7.compute和watcher?

我做了一张图，清晰点

8.nextTick()原理

异步DOM更新放在下一轮的事件循环当中，调用回调函数。拿到最新的dom节点。提高效率

具体：Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新

9.前端本地存储？cookie,localstorage,localstorage

**cookie:**主要用于保存登录信息，过期时间前内有效。只能传输字符数据，容易被盗取信息，不安全。数据在所有同源窗口中都是共享的。每次数据通信，在请求头带上cookie.大小只有4K

**sessionStorage:**保存某个界面会话数据，存储在客户端。关闭页面后，失效（临时存储），数据只能在目前浏览器窗口共享,不参与与服务端通信，大小5M

**localStorage:**长久存储会话数据，除非自行删除。存储在客户端。数据在所有同源窗口中都是共享的。不参与与服务端通信大小5M

到这里就结束了，一面完火速就二面。已offer！嘿嘿第一份实习offer！