TME非直播二轮

1.自我介绍？

2.项目问细节，怎么设计的，实现中遇到过什么问题，怎么解决的，如果要优化应该从哪里开始？

 

3.技术栈（router原理，看一下angular的面试题）

 

4.兄弟组件通信方式？双向数据绑定原理？从数据修改到界面更新经历了怎样的过程？

angular通信方式：

1.父组件 向 子组件 传递数据（input）

2.子组件 向 父组件 传递数据(Output EventEmitter)

3.@ViewChild 方法父组件获取子组件的数据，又可以让父组件给子组件设置变量值等，所以我这里单独分了出来

4.Service, @Injectable,单例模式，其实就是一个变量，需要双向触发（发送信息 / 接收信息），及设置和获取数据都需要组件自己去处理。

5.Subject（发布订阅）

// Service
import { BehaviorSubject } from 'rxjs';
...
public messageSource = new BehaviorSubject<string>('Start');
public changeMessage(message: string): void {
  this.messageSource.next(message);
}

public getMessageSource(): Observable<string> {
  return this.messageSource.asObservable();
}

/
// 发布
...
this.messageService.changeMessage('message change');
/
public 
// 订阅 (记得根据需要选择是否取消订阅 unsubscribe)
this.messageService.getMessageSource().subscribe(m => {
  console.log(m);
})

react::

1.子组件调用父组件：在子组件中传属性，可传各种，包括this...，然后在子组件中通过this.props去调用，还可以改变值，因为setState等等；

2.父组件调用子组件，可以给子组件调用处设置ref属性，然后就直接通过this.ref...调用;

3.兄弟组件通信，只能通过Redux，或状态提升，或全局context
 

描述下 vue 从初始化页面--修改数据--刷新页面 UI 的过程？

      当 Vue 进入初始化阶段时，一方面 Vue 会遍历 data 中的属性，并用 Object.defineProperty 将它转化成 getter/setter 的形式，实现数据劫持(暂不谈 Vue3.0 的 Proxy)；另一方面，Vue 的指令编译器 Compiler 对元素节点的各个指令进行解析，初始化视图，并订阅 Watcher 来更新试图，此时 Watcher 会将自己添加到消息订阅器 Dep 中，此时初始化完毕。
      当数据发生变化时，触发 Observer 中 setter 方法，立即调用 Dep.notify(),Dep 这个数组开始遍历所有的订阅者，并调用其 update 方法，Vue 内部再通过 diff 算法，patch 相应的更新完成对订阅者视图的改变。

5.跨域通信，Ajax原理和jsonp原理，二者的区别？jsonp的局限性？

ajax和jsonp的实质核心、区别联系
1）ajax和jsonp的调用方式很像，目的一样，都是请求url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装
2）实质不同
ajax的核心是通过xmlHttpRequest获取非本页内容
jsonp的核心是动态添加script标签调用服务器提供的js脚本
3）区别联系
不在于是否跨域
　ajax通过服务端代理一样跨域
　jsonp也不并不排斥同域的数据的获取
4）jsonp是一种方式或者说非强制性的协议，ajax也不一定非要用json格式来传递数据
5）ajax 数据接口和 jsonp 数据接口的区别
开发返回数据的接口，如果是一般的 ajax 接口，让接口直接返回 json 格式的数据字符串就可以了，这种接口的数据是不能跨域请求的，如果要跨域请求数据，需要开发jsonp的接口，开发jsonp的接口，需要获取请求地址中的参数，也就是’callback’键对应的值，然后将这个值和json数据拼装成一个函数调用的形式的字符串返回，就完成了一个jsonp的接口，这个键值对是由$.ajax函数自动产生的
一般接口返回的数据形式：
‘{“iNum”:12,’sTr’:’abc’}’;
jsonp返回的数据形式：
‘jQuery1124018787969015631711_1522330257607({“iNum”:12,”sTr”:”abc”})’;

JSONP的优缺点
        1.优点
                1.1它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制，JSONP可以跨越同源策略；
                1.2它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持
                1.3在请求完毕后可以通过调用callback的方式回传结果。将回调方法的权限给了调用方。这个就相当于将controller层和view层终于分 开了。我提供的jsonp服务只提供纯服务的数据，至于提供服务以 后的页面渲染和后续view操作都由调用者来自己定义就好了。如果有两个页面需要渲染同一份数据，你们只需要有不同的渲染逻辑就可以了，逻辑都可以使用同 一个jsonp服务。
        2.缺点
                2.1它只支持GET请求而不支持POST等其它类型的HTTP请求
                2.2它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
                2.3 jsonp在调用失败的时候不会返回各种HTTP状态码。
                2.4缺点是安全性。万一假如提供jsonp的服务存在页面注入漏洞，即它返回的javascript的内容被人控制的。那么结果是什么？所有调用这个 jsonp的网站都会存在漏洞。于是无法把危险控制在一个域名下…所以在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的

ajax与jsonp跨域的本质原理

TME非直播四轮 

1.聊一下项目，项目的难点，怎么去解决这些难点的？

2.这些解决方案经过验证吗？怎么得知的？

3.哪些功能需要分离，哪些可以公用？

4.为什么换工作？

1.js的eventloop是怎样的？

一次弄懂Event Loop（彻底解决此类面试问题）

2.浏览器输入url后，内部发生了什么？

你不知道的浏览器页面渲染机制

3.react虚拟dom原理？

【React深入】深入分析虚拟DOM的渲染原理和特性

4.http缓存机制？

5.动画animation和transiton的区别？

transition是过度属性，强调过度，他的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。

animation是动画属性，他的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。他也类似于flash的补间动画，但是他可以设置多个关键帧（用@keyframe定义）完成动画。

6.react和angular传值方法有哪些？

 

7.css定位fixed和absolute区别？

fixed
固定定位，参照位置是浏览器窗口的左上角，即坐标点为(0px, 0px)

absolute
绝对定位，参展位置是离当前元素最近的定位方式为fixed,absolute,relative的祖先原则的左上角，举个例子

那就是position的fixed值定位的元素会固定在原来的位置不变，不管你如何拖动滚动条，元素都不会改变位置，这从fixed这个英文单词的意思也可以看出，“固定的，不变的，固执的”。而absolute正好相反，拖动滚动条时元素会随着改变位置

8.css隐藏元素的几种方式和区别？

display:none 
visibility:hiden 
opacity:0 
设置 fixed 并设置足够大负距离的 left top 使其“隐藏”；
用层叠关系 z-index 把元素叠在最底下使其“隐藏”；
用 text-indent:-9999px 使其文字隐藏。（text-indent:-9999px 字体隐藏问题）