web前端综合

我的整理，若有不当，请指正。不断修订和补充中。。。。

1、综合

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...

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

2、nodeJS

1. node核心理解

3、框架

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原理&实现双向绑定MVVMhttps://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框架。

1. vue组件的理解

---

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

4、安全

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劫持、界面操做劫持

5、工具

工程类工具

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 便可.

6、http

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

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

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

7、性能优化

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

8、我的发展篇

1. 自我介绍

1.你为何选择前端？你是经过什么方式学习前端的？最近在学什么？
除了基本我的信息之外，面试官更想听的是你不同凡响的地方和你的优点。

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