1

2018-12-24  本文已影响0人  钢笔与橡皮

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，
postMessage(data,origin)方法接受两个参数

  1. GET方式提交的数据有长度限制，则POST的数据则可以非常大。

  2. POST比GET安全，因为数据在地址栏上不可见。

普通刷新会启用弱缓存，忽略强缓存。只有在地址栏或收藏夹输入网址、通过链接引用资源等情况下，浏览器才会启用强缓存，这也是为什么有时候我们更新一张图片、一个js文件，页面内容依然是旧的，但是直接浏览器访问那个图片或文件，看到的内容却是新的。
如果使用了缓存基本上是两种情况: status code: 200 ok (from cache)和 status code 304 Not Modified。
上面两种方式有什么区别呢？简单地说，第一种方式是不向浏览器发送请求，直接使用本地缓存文件。第二种方式，浏览器虽然发现了本地有该资源的缓存，但是不确定是否是最新的，于是想服务器询问，若服务器认为浏览器的缓存版本还可用，那么便会返回 304。

HTML5新特性(新增的标签, API等)，如localstorage的用法以及与cookie的区别，如何理解web语义化
CSS3新特性，如动画等
CSS特性，如position的用法，如何实现居中，bootstrap源代码的理解，盒模型(W3C和IE)，flex的使用

浏览器一边下载 HTML 网页，一边开始解析。也就是说，不等到下载完，就开始解析。
解析过程中，浏览器发现<script>元素，就暂停解析，把网页渲染的控制权转交给 JavaScript 引擎。
如果<script>元素引用了外部脚本，就下载该脚本再执行，否则就直接执行代码。
JavaScript 引擎执行完毕，控制权交还渲染引擎，恢复往下解析 HTML 网页。

给基本类型数据添加属性，不报错，但取值时是undefined
input.split('').reverse().join('')
keyframes animation

手写jq插件，loader，map等差别，数组的操作 image.png

CORS：跨源资源共享 Cross-Origin Resource Sharing(CORS)，通常服务器设置，若带cookie请求，则前后端都需要设置 后端常见设置 response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); // 若有端口需写全（协议+域名+端口），允许那些外源请求 response.setHeader("Access-Control-Allow-Credentials", "true"); //是否需要验证

首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在data-original属性中，
当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现延迟加载。

预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源
使用HTML标签
使用Image对象 从script中引入
使用XMLHttpRequest对象,虽然存在跨域问题，但会精细控制预加载过程
PreloadJS库

URL到界面显示发生了什么

  1. DNS解析 先本地缓存找，在一层层找 将常见的地址解析成唯一对应的ip地址基本顺序为：本地域名服务器->根域名服务器->com顶级域名服务器依次类推下去,找到后记录并缓存下来如www.google.com为
    . -> .com -> google.com. -> www.google.com.
  2. TCP连接 三次握手，只要没收到确认消息就要重新发
    1. 主机向服务器发送一个建立连接的请求（您好，我想认识您）；
    2. 服务器接到请求后发送同意连接的信号（好的，很高兴认识您）；
    3. 主机接到同意连接的信号后，再次向服务器发送了确认信号（我也很高兴认识您），自此，主机与服务器两者建立了连接。
  3. 发送HTTP请求 浏览器会分析这个url，并设置好请求报文发出。请求报文中包括请求行、请求头、空行、请求主体。https默认请求端口443， http默认80。 常见的http请求如下
POST / HTTP1.1
Host:www.wrox.com
User-Agent:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)
Content-Type:application/x-www-form-urlencoded
Content-Length:40
Connection: Keep-Alive

name=Professional%20Ajax&publisher=Wiley
第一部分：请求行，第一行说明是post请求，以及http1.1版本。
第二部分：请求头部，第二行至第六行。
第三部分：空行，第七行的空行。
第四部分：请求数据，第八行。
4\. 服务器处理请求并返回HTTP报文
后端处理返回http报文如下

HTTP/1.1 200 OK
Date: Fri, 22 May 2009 06:07:21 GMT
Content-Type: text/html; charset=UTF-8

<html>
      <head></head>
      <body>
            <!--body goes here-->
      </body>
</html>
第一行为状态行，（HTTP/1.1）表明HTTP版本为1.1版本，状态码为200，状态消息为（ok）
第二行和第三行为消息报头，
Date:生成响应的日期和时间；Content-Type:指定了MIME类型的HTML(text/html),编码类型是UTF-8
第三部分：空行，消息报头后面的空行是必须的
第四部分：响应正文，服务器返回给客户端的文本信息。
空行后面的html部分为响应正文。
  1. 浏览器解析渲染页面
  1. 连接结束

渲染引擎遇到 script 标签会停下来，等到执行完脚本，继续向下渲染
defer 是“渲染完再执行”，async 是“下载完就执行”，defer 如果有多个脚本，会按照在页面中出现的顺序加载，多个async 脚本不能保证加载顺序
加载 es6模块的时候设置 type=module，异步加载不会造成阻塞浏览器，页面渲染完再执行，可以同时加上async属性，异步执行脚本（利用顶层的this等于undefined这个语法点，可以侦测当前代码是否在 ES6 模块之中）

先自我介绍一下，说一下项目的技术栈，以及项目中遇到的一些问题
从整体中，看你对项目的认识，框架的认识和自己思考
项目中有没有遇到什么难点，怎么解决
如果你在创业公司你怎么从0开始做（选择什么框架，选择什么构建工具）
说一下你项目中用到的技术栈，以及觉得得意和出色的点，以及让你头疼的点，怎么解决的
一个业务场景，面对产品不断迭代，以及需求的变动该怎么应对，具体技术方案实现
你的学习来源是什么
你觉得哪个框架比较好，好在哪里
你觉得最难得技术难点是什么
你见过的最好的代码是什么
1.mvvm
model view view-model的缩写。
model是数据模型，负责数据管理。
view是ui组件，负责将数据模型转化为视图
view-model负责数据的双向传输和绑定。
当Model的属性改变时，我们不用再自己手动操作Dom元素来改变View的变化，而是改变其属性后，该属性对应的View层数据会自动改变

MVVM (Model-View-ViewModel) 是一种用于把数据和 UI 分离的设计模式。

MVVM 中的 Model 表示应用程序使用的数据，比如一个用户账户信息(名字、头像、电子邮件等)。Model 保存信息，但通常不处理行为，不会对信息进行再次加工。数据的格式化是由View 处理的。行为一般认为是业务逻辑，封装再 ViewModel 中。

View 是与用户进行交互的桥梁。

ViewModel 充当数据转换器，讲 Model 信息转换为 View 的信息，讲命令从 View 传递到 Model。

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 // 结合<component v-bind:is> 使用</component>
当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行

2.vue实例从创立到销毁的全部过程，期间暴露出钩子函数。
beforecreate 初始化实例，数据没有加载，el没有生成 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 created 数据已经加载 通常用于获取异步数据 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 属性目前不可见。
beforemount 首次调用 render()函数 将数据和html模版生成虚拟dom树
在挂载开始之前被调用：相关的 render 函数首次被调用。
该钩子在服务器端渲染期间不被调用。
mounted 挂载点挂载
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 [vm.nextTick](https://cn.vuejs.org/v2/api/#vm-nextTick) 替换掉 `mounted`： 即 在mounted中使用this.nextTick(){....}

beforeupdate
数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。计算属性watcher进行相应状态改变

beforedestroye
实例销毁之前调用。在这一步，实例仍然完全可用。
destroyted
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
actived
keep-alive 组件激活时调用。
该钩子在服务器端渲染期间不被调用。
deactived

keep-alive 组件停用时调用。

该钩子在服务器端渲染期间不被调用。
errorCaptured
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

3 双向数据绑定采用的发布订阅模式，通过Object.defineProperty 进行数据的拦截达到数据获取和设置。通过get 方法view获取model中的数据，当数据更新时，触发set 达到更改数据的目的，从而实现view向model传递数据

4 prop
emit 通过event 获取传递的值 或者 v-on监听emit的事件触发xxx方法，xxx方法的参数就是要获取的值 也就是直接通过回调函数的参数获取。
eventBus
ref <base-input ref="usernameInput"></base-input> this.refs.usernameInput ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向子组件实例

<!-- `vm.$refs.child` will be the child component instance -->
<child-component ref="child"></child-component>

vuex
listeners Vue 提供了一个listeners 属性，它是一个对象，里面包含了作用在这个组件上的所有监听器 ，配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素

6 全局守卫 beforeEach
路由守卫 beforeEnter AfterEach
组件守卫 beforeRouteEnter beforeRouteLeave beforeRouteUpdate

7 缓存动态组件的当前状态。
8 | filters ， mixins:[]
9 computed 当且仅当依赖的数据缓存发生变化时重新计算
method 每次执行都会重新进行计算。
watch deep

10 维护一个全局的store
通过commit，mutations 来改变store中的state（相当于data），不能直接改变states，、、？？？？
mutations（相当于同步的methods）中执行的是同步操作，dispatch actions进行异步的数据操作
getters 相当于computed

computed 和 watch 的差异：
都是以 Vue 的依赖追踪机制为基础，当某个依赖数据发生变化时，所有依赖这个数据的相关数据或函数都会自动发生变化或调用

computed 是计算一个新的属性，并将该属性挂载到 vm（Vue 实例）上，而 watch 是监听已经存在且已挂载到 vm 上的数据，所以用 watch 同样可以监听 computed 计算属性的变化（其它还有 data、props）
computed 本质是一个惰性求值的观察者，具有缓存性，只有当依赖变化后，第一次访问 computed 属性，才会计算新的值，而 watch 则是当数据发生变化便会调用执行函数
从使用场景上说，computed 适用一个数据被多个数据影响，而 watch 适用一个数据影响多个数据；
计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。

watch适合监听单个依赖的属性，数据变化时执行异步或开销较大的操作。
computed适合监听多个依赖的属性

key：Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。

v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）
详情步骤：

首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。

然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）

支持双向通信，实时性更强；
可以发送文本，也可以二进制文件；
协议标识符是 ws，加密后是 wss ；
较少的控制开销。连接创建后，ws客户端、服务端进行数据交换时，协议控制的数据包头部较小。在不包含头部的情况下，服务端到客户端的包头只有2~10字节（取决于数据包长度），客户端到服务端的的话，需要加上额外的4字节的掩码。而HTTP协议每次通信都需要携带完整的头部；
支持扩展。ws协议定义了扩展，用户可以扩展协议，或者实现自定义的子协议。（比如支持自定义压缩算法等）
无跨域问题。

v-model ：searchText === v-bind：value=searchText；v-on:input="searchText = event.target.value" 组建上：v-model ：searchText === v-bind:value="searchText"； v-on:input="searchText =event"

v-enter-active v-enter-to v-leave-active v-leave-to enter-active-class
enter-to-class leave-active-class
leave-to-class

组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

v-demo:foo.a.b="message"
Vue.directive('demo', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '
' +
'value: ' + s(binding.value) + '
' +
'expression: ' + s(binding.expression) + '
' +
'argument: ' + s(binding.arg) + '
' +
'modifiers: ' + s(binding.modifiers) + '
' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
})

new Vue({
el: '#hook-arguments-example',
data: {
message: 'hello!'
}
})

上一篇 下一篇

猜你喜欢

热点阅读