面试随笔

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

    数组.forEach(function(item,index,array){
      item是数组任意元素
      index是指数组下标
      array数组本身
    })

map

    数组.map(function(item,index,array){
    //遍历要做的事情
    // 返回值:新数组，原数组不发生改变
    })

filter

    数组.filter(function(item,index,array){  //过滤
    //过滤的条件
    })

some

    数组.some(function(item,index,array){   //查找数组的是否有符合条件的元素，如果有返回true，没有返回false。
    //只找到符合条件的元素，后面的循环都停止了。
    })    

every

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

reduce

    数组.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()
功能：将数值转换成字符串。