web前端综合

个人整理，如有不当，请指正。不断修订和补充中。。。。

一、综合

1.前端路由的原理

什么是路由？简单的说，路由是根据不同的 url 地址展示不同的内容或页面

使用场景？前端路由更多用在单页应用上, 也就是SPA, 因为单页应用, 基本上都是前后端分离的, 后端自然也就不会给前端提供路由。

前端的路由和后端的路由在实现技术上不一样，但是原理都是一样的。在 HTML5 的 history API 出现之前，前端的路由都是通过 hash 来实现的，hash 能兼容低版本的浏览器。

两种实现前端路由的方式
HTML5 History两个新增的API：history.pushState 和 history.replaceState，两个 API 都会操作浏览器的历史记录，而不会引起页面的刷新。

Hash就是url 中看到 # ,我们需要一个根据监听哈希变化触发的事件( hashchange) 事件。我们用 window.location 处理哈希的改变时不会重新渲染页面，而是当作新页面加到历史记录中，这样我们跳转页面就可以在 hashchange 事件中注册 ajax 从而改变页面内容。

优点
1.从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升。
2.在某些场合中，用ajax请求，可以让页面无刷新，页面变了但Url没有变化，用户就不能复制到想要的地址，用前端路由做单页面网页就很好的解决了这个问题
缺点：
使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存，

2.对组件化、模块化的理解？

几个原则

**概念**
**单一职责**：意味着一个模块、一个组件只做一件事，绝不多做。
**正交性**：意思是不重复，一个模块/组件跟另一个模块的职责是正交的，没有重叠。
**单向依赖**：模块之间最多是单向的依赖，如果出现A依赖B，B也依赖A，那么要么是A、B应该属于一个模块，要么就是整体的拆分有问题。
           一个完整的软件系统的模块依赖应该是一张有向无环图。
**紧凑性**：模块、组件对外暴露的接口、属性应该尽可能的少，接口的参数个数也要少。
**面向接口**：模块、组件对外提供服务时最好是面向接口的，以便后期可以灵活的变更。

总结：
1.模块最重要的属性：尽可能的独立和自包含----模块提供的功能必须是完整的，以便它的调用者们可以各取所需。
2.模块化是为了：减少循环依赖，减少耦合，提高设计和开发的效率。
良好的设计规则，会把耦合密集的设计参数进行归类作为一个模块，并以此划分工作任务。而模块之间彼此通过一个固定的接口进行交互，除此之外的内部实现则由模块的开发团队进行自由发挥。
3.最后：方法命名的规范性很重要，注释很重要，如果没有注释只有开发者心中很清楚，所以必要的注释会给后期的代码维护工作带来便利的同时也提高效率。每个界面的主要是用于做什么的，可以在头文件中适当进行说明

组件化和模块化的区别：
以vue 为例：
一个.vue文件可以叫做一个组件，是有template style script组成；多个组件能组成一个页面；
模块一般指js模块；如一个vue组件中的js 可以由各个模块组成；目前通过import引入进来。
例如时间显示组件会调用格式化时间模块。

ard.png](/img/bV9XzS)

深入了解，请点击前端工程--基础篇 https://github.com/fouber/blo...

到底什么是前端工程化、模块化、组件化

二、nodeJS

node核心理解

三、框架

1.对Vue angular react的理解

1.vue和react的对比：https://blog.csdn.net/CystalV...

2.vue生命周期的理解

生命周期的理解见我的vue生命周期的理解 https://segmentfault.com/a/11...

3.对vue虚拟dom的理解

Vue原理解析之Virtual Dom
https://segmentfault.com/a/11...
或者见我的收藏
4.对bootstrap、 Element UI的理解?

5.vue双向数据绑定的理解

剖析Vue原理&实现双向绑定MVVM https://segmentfault.com/a/11...
或者见我的收藏

6.对MVC框架 MVVM框架；以及他们的优缺点和使用场景

概念：主要是c 和vm 的区别；
mvc
是单向的。
controller层,完成业务逻辑，然后改变model状态，然后model将数据发送给view,用户得到反馈。
主要是通过事件等来控制。
View中不会对Model作任何操作，Model不会输出任何用于表现的东西，如HTML代码或者某种效果等，它就是点数据。而Contorller用于决定使用哪些Model，对Model执行什么操作，为视图准备哪些数据，是MVC中沟通的桥梁。
浏览器发送请求--->Contorller和Model交互获取数据--->Contorller调用View--->View渲染数据返回
v-->c-->m-->c—v

mvvm
是双向驱动。
View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互。
vm 是View的抽象，负责View与Model之间信息转换。将View的Command传送到Model；
即view层的变动，自动显示在viewModel上；反之亦然。
是一种基于前端开发的架构模式
m<---> vm <---> v

优缺点：
前端应用的复杂程度已不同往日，今非昔比。这时前端开发就暴露出了三个痛点问题：
开发者在代码中大量调用相同的DOM API, 处理繁琐，操作冗余，使得代码难以维护。
大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。
当 Model 频繁发生变化，开发者需要主动更新到View ；当用户的操作导致Model发生变化，开发者同样需要将变化的数据同步到Model中，这样的工作不仅繁琐，而且很难维护复杂多变的数据状态。

mvc的优缺点：
jquery解决了第一个问题，
开发者在代码中大量调用相同的DOM API, 处理繁琐，操作冗余，使得代码难以维护。

mvvm:
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

使用场景：
mvvm 的框架有vue react angular;mvc框架是bootstrap
mvc框架是 jquery

mvc mvvm详情

7.谈一下对jquery的理解

它是一个跨浏览器的DOM和AJAX框架。

vue组件的理解

9.backbone.js
Backbone是一个轻量级的前端MVC框架，用于结构化管理页面中的大量JS，建立与服务器、视图间的无缝连接，为构建复杂的应用提供基础框架。
http://www.css88.com/doc/back...

四、安全

1.什么是web注入攻击讲下原理，谈下最常见的2种攻击（xss csrf）

xss:跨站脚本攻击
它允许用户将恶意代码植入到提供给其他用户使用的页面中，可以简单的理解为一种javascript代码注入。

XSS的防御措施：
1.过滤转义输入输出
2.避免使用eval、new Function等执行字符串的方法，除非确定字符串和用户输入无关
3.使用cookie的httpOnly属性，加上了这个属性的cookie字段，js是无法进行读写的
4.使用innerHTML、document.write的时候，如果数据是用户输入的，那么需要对象关键字符进行过滤与转义

2.如何防止注入攻击

1.jsx能防止：
    因为在渲染之前, React DOM 会格式化(escapes) JSX中的所有值.
    从而保证用户无法注入任何应用之外的代码.
    在被渲染之前，所有的数据都被转义成为了字符串处理。

CSRF：跨站请求伪造

其实就是网站中的一些提交行为，被黑客利用，在你访问黑客的网站的时候进行操作，会被操作到其他网站上

CSRF防御措施：
1.检测http referer是否是同域名
2.避免登录的session长时间存储在客户端中
3.关键请求使用验证码或者token机制

其他的一些攻击方法还有HTTP劫持、界面操作劫持

五、工具

工程类工具

WebPack 是一个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、JavaScript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后生成了优化且合并后的静态资源。

webpack的两大特色：

1.code splitting，可以自动完成

2.loader 可以处理各种类型的静态文件，并且支持串联操作
webpack 是以commonJS的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。

webpack具有requireJs和browserify的功能，但仍有很多自己的新特性：
webpack实现性能优化

3.webpack 中plungies和lodash的区别

4.Gulp webpack的区别？

4.js库、js工具？

lodash
underscore.js:

 Underscore是一个用于提高开发效率的基础函数库，它封装了对集合、数组、对象、函数的常用操作，就像jQuery封装DOM对象一样，你能通过Underscore轻易地访问和操作JavaScript内部对象。

　　Underscore还提供了一些非常实用的函数方法，如：函数节流、模板解析等。
　它们都是用于函数节流，控制函数不被频繁地调用，节省客户端及服务器资源。

debounce()方法关注函数执行的间隔，即函数两次的调用时间不能小于指定时间。
throttle()方法更关注函数的执行频率，即在指定频率内函数只会被调用一次。

5.项目管理工具

svn git

6.调试工具

7.开发工具

sublime
webstorm
vsCode
常见好用的插件
下载插件方法, 点击左侧最下面一个图标( 扩展 ),输入想要搜索的插件,下载,按提示安装重启VS 即可.

六、http

1.理解http
https://segmentfault.com/a/11...

2.说说TCP传输的三次握手四次挥手策略

TCP的三次握手(建立连接）和四次挥手(关闭连接）http://www.cnblogs.com/Jessy/...

七、性能优化

https://segmentfault.com/a/11...

八、个人发展篇

自我介绍

1.你为什么选择前端？你是通过什么方式学习前端的？最近在学什么？
除了基本个人信息以外，面试官更想听的是你与众不同的地方和你的优势。

2.你有什么需要补充的吗？你最擅长的是什么？
3.三年五年规划？
4.如何看待前端技术的更新？前端现在流行什么？
5.印象最深的项目是什么？具体什么问题？什么技术难题？怎么解决？
6.最高水平的项目做的时间最久的项目
7.如何管理前端团队成功带人的案例
5.代码优化使用过吗？代码规范熟悉吗？