面试随笔

tcp是面向链接的，udp是不须要链接的。

什么是模块化开发，在作项目的时候为何要作代码封装，举例说明下平时本身怎么用的。

我的理解，模块化开发，是根据功能的不一样，逐个进行开发，模块之间不能形成直接影响，进行模块化开发的优势是便于后期维护
为何要作代码封装？能够提升代码的复用性，减小代码冗余
我平时作代码封装，主要用在网络请求的封装等

介绍下大家的项目开发流程是怎么样的？你主要负责什么？

咱们项目开发流程就是产品经理先跟客户进行沟通，拿到具体的需求，而后产品经理再根据需求出原型设计稿，而后咱们前端与后端进行接口对接商量接口数据的结构，而后咱们再根据UI设计师的设计做业面，而后页面作好以后在内网测试服务器上给接口，而后嗯修改bug，而后上线，最后再交付项目，而后我主要作的就是写页面功能的实现。

display：none和visibility：hidden区别？

display：none指的是元素彻底不陈列出来，不占据空间，涉及到了DOM结构，故产生重排和重绘
visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生重绘，但不可触发绑定事件

什么是装饰器语法？

装饰器语法是用于拓展原来函数功能的一种函数，目的是在不改变原函数名(或类名)的状况下，给函数增长新的功能。这个函数的特殊之处在于它的返回值也是一个函数，这个函数是内嵌“原“”函数的函数。

递归

什么是MVC？它和MVVM有什么区别？

MVC是Model-View- Controller的简写。即模型-视图-控制器。
MVVM即Model-View-ViewModel的简写。即模型-视图-视图模型。
MVVM即Model-View-ViewModel的简写。即模型-视图-视图模型。模型（Model）指的是后端传递的数据。视图(View)指的是所看到的页面。视图模型(ViewModel)是mvvm模式的核心，它是链接view和model的桥梁。它有两个方向：一是将模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将视图(View)转化成模型(Model)，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，咱们称之为数据的双向绑定。

MVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思同样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。MVC是单向通讯。也就是View跟Model，必须经过Controller来承上启下。MVC和MVVM的区别并非VM彻底取代了C，只是在MVC的基础上增长了一层VM，只不过是弱化了C的概念，ViewModel存在目的在于抽离Controller中展现的业务逻辑，而不是替代Controller，其它视图操做业务等仍是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用，使开发更高效，结构更清晰，增长代码的复用性。

作移动端开发有没有遇到不兼容的问题?如何解决？(https://yq.aliyun.com/article...

1. 同等比例的图片在PC机上很清楚,可是手机上很模糊
   使用2倍的背景图来代替img标签

   background:url(../images/icon/all.png) no-repeat center center;
      -webkit-background-size:50px 50px;
      background-size: 50px 50px;
      display:inline-block; 
      width:100%; 
      height:50px

2. 防止手机中网页放大和缩小
   设置meta标签中的viewport;

   <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

3. 浮动子元素撑开父元素盒子高度

   解决方法以下：

   1.父元素设置为 overflow: hidden;

   2.父元素设置为 display: inline-block;等

如何解决移动端滚动条卡顿问题？

安卓或者ios
-webkit-overflow-scrolling: auto; / 当手指从触摸屏上移开，滚动会当即中止 */
-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 ，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会建立一个新的堆栈上下文。

描述下fetch 和 ajax 的区别？

1. jQuery ajax

传统 Ajax 指XMLHttpRequest（XHR），最先出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间若是有前后关系的话，就会出现回调地狱。
JQuery ajax 是对原生XHR的封装，除此之外还增添了对JSONP的支持。通过多年的更新维护，真的已是很是的方便了，优势无需多言；
若是是硬要举出几个缺点，那可能只有：
1.自己是针对MVC的编程,不符合如今前端MVVM的浪潮
2.基于原生的XHR开发，XHR自己的架构不清晰。
3.JQuery整个项目太大，单纯使用ajax却要引入整个JQuery很是的不合理（采起个性化打包的方案又不能享受CDN服务）
4.不符合关注分离（Separation of Concerns）的原则
5.配置和调用方式很是混乱，并且基于事件的异步模型不友好。

1. Axios

Vue2.0以后，尤雨溪推荐你们用axios替换JQuery ajax，想必让axios进入了不少人的目光中。
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，
它自己具备如下特征：
1.从浏览器中建立 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了不少的操做）
5.从 node.js 建立 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据

防止CSRF:就是让你的每一个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就能够轻松辨别出这个请求是不是用户在假冒网站上的误导输入，从而采起正确的策略。

1. fetch

fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。可是，必定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
fetch的优势：

1. 符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
2. 更好更方便的写法。

坦白说，上面的理由对我来讲彻底没有什么说服力，由于不论是Jquery仍是Axios都已经帮咱们把xhr封装的足够好，使用起来也足够方便，为何咱们还要花费大力气去学习fetch？

我认为fetch的优点主要优点就是：

1. 语法简洁，更加语义化
2. 基于标准 Promise 实现，支持 async/await
3. 同构方便
4. 更加底层，提供的API丰富（request, response）
5. 脱离了XHR，是ES规范里新的实现方式

在使用fetch的时候，也遇到了很多问题：
fetch是一个低层次的API，能够把它考虑成原生的XHR，因此使用起来并非那么舒服，须要进行封装。
例如：

1. fetch只对网络请求报错，对400，500都当作成功的请求，服务器返回 400，500 错误码时并不会 reject，只有网络错误这些致使请求不能完成时，fetch 才会被 reject。
2. fetch默认不会带cookie，须要添加配置项： fetch(url, {credentials: 'include'})
3. fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，形成了流量的浪费
4. fetch没有办法原生监测请求的进度，而XHR能够

数组的方法

slice()方法

格式:数组.slice(start,end)
    功能:能够基于当前数组获取指定区域的元素包含start,不包含end,即[start,end)。
    返回值：生成新的数组，原数组不发生变化。

splice()方法

格式：数组.splice(start,length,数据1,数据2...)
    功能：增长，删除，修改
    参数：start指开始截取的位置
          lenght截取的元素长度
          从第三个参数开始：在start位置，插入的元素
        
    返回值：截取元素组成的数组

join()方法

格式：数组.join(字符串)
    功能：将数组中的元素,用传入的拼接符，拼接成一个字符串。
    返回值：拼接好的字符串。

reverse()方法

格式：数组.reverse()
    功能：逆序

sort()方法

格式：数组.sort() 默认从小到大排序，按照字符串进行排序的。
    参数：一个函数，该函数表示怎么进行排序的。

ECMAscript 5新增的数组方法：

indexOf()

格式：数组.indexOf(item,start)
    参数：item是数组任意元素
          start是指数组下标
    功能：在数组中查找第一次出现item元素下标,从start开始查找。
    返回值：-1表示没有查找到的元素下标
            >=0表示查找到的元素下标

数组遍历：

for
    for...in 
    forEach

数组.forEach(function(item,index,array){

item是数组任意元素
    index是指数组下标
    array数组自己

})

数组.map(function(item,index,array){

//遍历要作的事情

})

数组.filter(function(item,index,array){ //过滤

//过滤的条件

})

数组.some(function(item,index,array){ //查找数组的是否有符合条件的元素，若是有返回true，没有返回false。

//只找到符合条件的元素，后面的循环都中止了。

})

数组.every(function(){//查找数组的元素是否都符合条件，是返回true，不然返回false.

//

})

数组.reduce(function(prev,next,index,array){

prev 第一次是下标为0的元素。
    第二次是上一次return的值。
    
next 从下标1开始，当前遍历到的元素。

array数组自己。

})

字符串

charAt()

字符串.charAt(下标) 下标是从零开始

charCodeAt()

charCodeAt(下标) 返回对应下标对应的ASCII值

fromCharCode(码值)

功能：将ascii值转为对应的字符

substring()、、截取

格式：字符串.substring(start,end)
功能：将字符串中[start,end)提取这一部分字符，生成新字符。
返回值：新字符串。

substr()、、截取

格式：substr(start,length)
返回值：新生成的字符串。

slice() 、、提取

格式：字符串.slice(start,end)
功能：将字符串中[start,end)提取这一部分字符，生成新字符。
返回值：新生成的字符串。

replace()、、替换

格式：字符串.replace(oldStr,newStr)
功能：用newStr替换oldStr
返回值：新生成的字符串。

split() 、、

格式：字符串.split(分割符，length)
参数：分隔符对原字符串进行分割，length返回数组的长度，通常不用。
功能：用分割符对原字符串，进行字符串分割。将分割完毕后的字符串放在数组中返回。
返回值：数组。

join()

格式：数组.join()
功能：将数值转换成字符串。