关键前端知识点记录随笔

1. webpack与gulp的区别

gulp是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译，替代手工实现自动化工作。

webpack是前端构建工具，称为模块打包机，webpack支持模块化；构建前端开发过程中常用的文件，如：js，css，html，img等；使用简单方便，自动化构建。webpack是通过loader（加载器）和plugins（插件）对资源进行处理的。

来自：https://www.cnblogs.com/wenshaochang123/p/7978773.html

2. Vue与React的区别

相同点：

    1.都支持服务器端渲染

    2.都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范

    3.数据驱动视图

    4.都有支持native的方案,React的React native,Vue的weex

    5.都有管理状态，React有redux,Vue有自己的Vuex（自适应vue，量身定做）

不同点：

       1.React严格上只针对MVC的view层,Vue则是MVVM模式

       2.virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制

       3.组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即'all in js'; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;

       4.数据绑定: vue实现了数据的双向绑定,react数据流动是单向的

       5.state对象在react应用中不可变的,需要使用setState方法更新状态; 在vue中,state对象不是必须的,数据由data属性在vue对象中管理；

来自：https://www.cnblogs.com/yf-html/p/9102931.html

3. Vue数据双向绑定的模拟实现

1. 深入理解视图层到数据层
2. 深入理解数据层如何映射到视图层
3. 深入理解里面的Watcher类的实现

　　

来自：https://www.jianshu.com/p/d33c16075c88

4. 详解Vue中的虚拟Dom

1. 深度理解虚拟dom函数的触发时机
2. 了解整个虚拟dom的工作流程

来自：https://www.cnblogs.com/fundebug/p/vue-virtual-dom.html

5. Vue中的MVVM模式

ViewModel 是一个同步View 和 Model的对象。

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

优点：面向数据编程

 

来自：https://www.jianshu.com/p/12612d9a510b

 

6. mvvm和mvc区别

 

mvc: 
当用户出发事件的时候，view层会发送指令到controller层，接着controller去通知model层更新数据，model层更新完数据以后直接显示在view层上，这就是MVC的工作原理。

mvvm:
mvc中Controller演变成mvvm中的viewModel。view层和viewmodel层是相互绑定的关系，这意味着当你更新viewmodel层的数据的时候，view层会相应的变动ui。
主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。和当 Model 频繁发生变化，开发者需要主动更新到View的问题 。

来自：http://www.imooc.com/article/254232，https://www.cnblogs.com/samsara-yx/p/9217103.html 

 

 

7. ES6新特性

1. 类
2. 模块化
3. 箭头函数
4. 函数参数默认值
5. 模板字符串
6. 解构赋值
7. 延展操作符
8. 对象属性简写
9. Promise
10.let,const

8. 事件循环机制

优先执行同步代码，然后异步代码之后，优先执行Promise，然后是setTimeout和setInterval。

来自：https://www.cnblogs.com/langkezzz/p/10148621.html

 

 

9. Proload和Prefetch的区别

 

来自：https://www.cnblogs.com/xiaohuochai/p/9183874.html

 

10.ES6的import()

 

来自：https://www.cnblogs.com/Joe-and-Joan/p/10309419.html

 

11.js实现对树的深度优先遍历和广度优先遍历

 

来自：https://www.cnblogs.com/wuguanglin/p/DPSandBPS.html

 

12.什么是函数式编程

函数式编程关心数据的映射，命令式编程关心解决问题的步骤

函数式编程是面向数学的抽象，将计算描述为一种表达式求值，一句话，函数式程序就是一个表达式。

1. 代码简洁，开发快速
2. 接近自然语言，易于理解
3. 更方便的代码管理
4. 易于"并发编程"
5. 代码的热升级

 

来自：http://www.ruanyifeng.com/blog/2012/04/functional_programming.html

 

13.js函数柯里化

Currying(果然是满满的英译中的既视感)，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

1. 参数复用
2. 提前确认
3. 延迟运行

来自：https://www.jianshu.com/p/2975c25e4d71

14.深入理解webpack打包机制

来自：https://www.cnblogs.com/xuepei/p/8892724.html 

15.Flex布局教程

来自：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html