前端开发中，移动端和PC端的区别？调试工具分别用过哪些？

1、PC考虑了浏览器的兼容性，移动端的开发考虑了手机的兼容性。 现在，无论是安卓手机还是ios手机，一般的浏览器都使用webkit内核，所以在进行移动端的开发时，需要考虑手机分辨率的匹配，以及与不同操作系统的些许差别

2、事件处理部分，移动端考虑触摸事件，另一个弹出的手机键盘该怎么处理？

3、移动端需要实现布局自适应。 对于em (父元素的字体大小，即父元素font-size=18px，1em=18px )、rem )根元素的字体大小，可以使用vw

4、在动画处理中，由于PC侧考虑了IE的互换性，通常用JS制作动画的通用性会变好，但与CSS3相比牺牲了更大的性能，而在移动电话侧，制作动画和特殊效果等时，第一选择是CSS3，简单且效率高

5、需要理解Wechat方面文章共享的界面、title、description以及icon图标的配置

6、百度地图的API

7、一般的电脑使用jquery，移动端使用zepto

- -引用纯粹的CSS3使用vw和vh的视口单位实现自适应。 (详细说明了vw的使用。 ）

视口：

PC端：指浏览器的可视区域

目的地：包括布局视点、虚拟视点和ideal视点。

“视口单位”(Viewport units )视口：

PC侧：浏览器的可显示区域

目的地：布局视口) ) ) ) )。

根据CSS3规范，视口的单位主要有以下四个：

vw : 1vw等于视口宽度的1%

vh : 1vh等于视口高度的1%

vmin :选择vw和vh中最小的一个

vmax :在vw和vh中选择最大的

移动开发和移动web开发不是一回事。

虽然我也知道这两个不是一样的，但是概念一直很模糊。

现在，请理解。

移动开发叫做native app开发，利用基于操作系统的程序语言技术。 移动设备平台的规格是键盘手指(触摸和手势)，技术iphone是Objective-C，安卓是java。

虽然移动web开发是指mobile web app，但移动web和web开发没有本质区别，但为了解决移动设备上的适应性问题以及特殊的操作和功能调用，需要不同的开发框架。 利用基于浏览器的网络语言技术。

web开发是普通PC端的web开发。 移动web开发的本质是web开发，只是在不同的移动端进行适应。

这样，我能做的就是移动web开发，和移动端的开发没有关系。

调试工具分别使用过什么？

搜索一下，移动端的调试工具很多。 web开发是谷歌、火狐、IE的开发者调试工具，Chrome Developer Tools被广泛使用。 我不会移动边缘。 在这里不说。

适用于chrome web开发的插件：

vue.js dev tools :调试vue.js APP的浏览器扩展Chrome插件vue.js插件是一种向APP应用程序添加全局功能的强大而简单的方法。 的插件用于许多用途，从全局组件到向APP中添加其他功能，如“路由”(Vue Router )和存储在APP中的不变数据(Vuex )。

JSONView:web开发格式和gjdbb插件Chrome插件

逊视角

Jsonview是目前最受欢迎的开发者工具插件，准确地说，jQuery JSONView是一种非常实用的格式和语法gjdbbJSON格式数据查看器jQuery插件。 是看json数据的神器。

Emmet LiveStyle :实时高效的CSS编辑器Chrome插件 )。

Emmet LiveStyle是一个用于CSS编辑器开发人员的插件，可以提高开发效率。 实时样式现在不仅支持一个Chrome浏览器，还支持Safari浏览器，可以实时运行CSS调试插件工具。 非常适合前端工程师使用，提供前端工程师的开发效率，同时通过LiveStyle和Sublime Text3编辑器的组合可以进行可视化开发，只需一次配置即可轻松使用。

chrome浏览器主机代理插件： hostswitchplus )。

img-caption">Host Switch Plus

每个web开发人员都有这样的体会，在程序开发过程中，难免开发、测试、生产环境各种切换，一般我们直接修改系统的 hosts 文件。有什么忘记修改还会平白无故浪费时间。所以我们希望有一款可以方便管理的工具。host switch plus就是这样一款可以是一个可以在不同环境下快速切换 Hosts 的小工具，虽然界面不怎么华丽，但是功能还是很实用的。快速切换 Domain-IP 配置而不需要编辑 Hosts 文件，方便web开发人员在 测试/开发/线上 等环境快速切换；同时顺便支持本地端口的代理设置；并方便的添加、修改、分组（批量开关）的chrome插件（额，这个我还没用过，面试时还是别提了）。

可以补充下的是：

JSON格式校验工具

JSON的使用越来越平凡，对JSON格式的校验也是很常见的，我用到过的Notepad++ 的Json Viewer插件。

Notepad的JSonView插件

JS压缩和解压缩工具

现在的很多JS插件都是采用min压缩格式提供的，以提高其网络传输速度，但问题来了，我们有时需要查看被压缩的js文件的源码，而另一些时候我们又需要将我们写的js文件进行压缩，这里提供几种方式：

另外还可以和面试官多扯几句，2012年以前大多用FireBug，自从2011年FireBug的开发者J.Barton跳槽到Google，负责开发Chrome Developer Tools后，Chrome Developer Tools就有了本质性的变化。于是，Web前端开发工程师最喜欢的浏览器又变成了Chrome，Chrome Developer Tools也就顺理成章成为开发调试网页的不二利器了。

Express和koa框架的区别，koa框架的优势？

异步流程控制

Express 采用 callback 来处理异步，Koa v1 采用 generator，Koa v2 采用 async/await。

下面分别对 js 当中 callback、promise、generator、async/await 这四种异步流程控制进行了对比，

generator 和 async/await 使用同步的写法来处理异步，明显好于 callback 和 promise，async/await 在语义化上又要比 generator 更强。

错误处理

Express 使用 callback 捕获异常，对于深层次的异常捕获不了，Koa 使用 try catch，能更好地解决异常捕获。

总结

Express

优点：线性逻辑，通过中间件形式把业务逻辑细分、简化，一个请求进来经过一系列中间件处理后再响应给用户，清晰明了。 缺点：基于 callback 组合业务逻辑，业务逻辑复杂时嵌套过多，异常捕获困难。

Koa

优点：首先，借助 co 和 generator，很好地解决了异步流程控制和异常捕获问题。其次，Koa 把 Express 中内置的 router、view 等功能都移除了，使得框架本身更轻量。 缺点：社区相对较小

MoogoDB怎么实现反向路由代理？

去了解了下，需要node.js先配置nginx，以后链接mongodb数据库。对我这个数据库只懂CRUD的小白，还是先放一放。面试提到MongoDB时需要说明自己水浅，经不得面试官这样洗礼。

后端路由分发？

我用过的Express的基本路由routing

var express = require('express'); var app = express(); app.get('/', function (req, res) { console.log("主页 GET 请求"); res.send('Hello GET!'); }); // POST 请求 app.post('/', function (req,res) { console.log("主页 POST 请求"); res.send("Hello POST"); }); //Del_user 页面响应 app.get('/del_user',function (req, res) { console.log("/del_user 响应 DELETE 请求"); res.send("删除页面"); }); // list_user 页面GET请求 app.get('/list_user', function (req , res) { console.log("/list_user GET 请求"); res.send("用户列表页面"); }); // 对页面abc,abxcd,ab123cd,等响应 GET 请求 app.get('/ab*cd',function (req, res) { console.log("/ab*cd GET 请求"); res.send("正则匹配"); }); var server = app.listen(8081,'localhost',function () { var host = server.address().address; var port = server.address().port; console.log("express app listening at http://%s:%s",host, port); });

ES6语法实现类？

class Widget { constructor(width,height) { this.width = width || 50; this.height = height || 50; this.$elem = null; } render($where){ if (this.$elem) { this.$elem.css( { width: this.width + "px", height: this.height + "px" } ).appendTo( $where ); } } } class Button extends Widget { constructor(width,height,label) { super( width, height ); this.label = label || "Default"; this.$elem = $( "<button>" ).text( this.label ); } render($where) { super( $where ); this.$elem.click( this.onClick.bind( this ) ); } onClick(evt) { console.log( "Button '" + this.label + "' clicked!" ); } }

axios解决跨域？

dev: { proxyTable: { '/api': { target: 'http://10.1.5.11:8080/',//设置你调用的接口域名和端口号 changeOrigin: true, //跨域 pathRewrite: { '^/api': '/' //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22'，直接写‘/api/xxx/duty?time=2017-07-07 14:57:22’即可 } }

拦截器的使用

当我们访问某个地址页面时，有时会要求我们重新登录后再访问该页面，也就是身份认证失效了，如token丢失了，或者是token依然存在本地，但是却失效了，所以单单判断本地有没有token值不能解决问题。此时请求时服务器返回的是401错误，授权出错，也就是没有权利访问该页面。

我们可以在发送所有请求之前和操作服务器响应数据之前对这种情况过滤。

// http request 请求拦截器，有token值则配置上token值 axios.interceptors.request.use( config => { if (token) { // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了 config.headers.Authorization = token; } return config; }, err => { return Promise.reject(err); }); // http response 服务器响应拦截器，这里拦截401错误，并重新跳入登页重新获取token axios.interceptors.response.use( response => { return response; }, error => { if (error.response) { switch (error.response.status) { case 401: // 这里写清除token的代码 router.replace({ path: 'login', query: {redirect: router.currentRoute.fullPath} //登录成功后跳入浏览的当前页面 }) } } return Promise.reject(error.response.data) });

vue-router中的路由守卫？

全局守卫：beforeEach

后置守卫：afterEach

全局解析守卫：beforeResolve

路由独享守卫：beforeEnter

组内路由守卫：beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave