正文

关键前端知识点记录随笔

搁浅  2022-02-17  456

关键词：

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

随笔记录

html结构、css表现、js行为vscode和sublime一样的在vscode中的插件：a.AutoRenameTag整体改变标签b.view-in-browser预览修改的网页c.LiveServer保存修改自动刷新页面知识点：尝试表图放大//radius单数百分比是调整大查看详情

前端知识随笔(代码片段)

css水平居中的写法水平居中行内元素: text-align:center块级元素: margin:0autoposition:absolute+left:50%+transform:translateX(-50%)display:flex+justify-content:center垂直居中设置line-height等于heightposition：absolute+top: 查看详情

文献综述随笔

...管理系统设计与实现时间：2018.07来源：电脑知识与技术关键词：管理系统，web，thinkPHP二、研究内容1.背景与难点：数据安全性和效率低下；数据量的不断增加以及数据的丢失；信息更新滞后。2.设计2.1服务端与前端功能设计：... 查看详情

前端基础知识随笔001

1.get是从服务器上获取数据，post是向服务器传送数据。2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTPpost机制，将表单内各个字段与其内容放置在HTMLHEA... 查看详情

知识随笔

记性很是不好每次都在不断的梳理新的知识点且过一两周就忘却于是开个博客来记录一下一直在学习Springcloud知识面的确太广每当提起一个组件总想不起该组件的功能或作用还是挨个记下来每段时间回过头来看看希望对学习... 查看详情

testng学习随笔

...，作用正确，并且浅显易懂。以下就是我从中摘录的重要知识点，就当留作自己记录或者帮助其他想学TestNG的人一点借鉴吧！若其中有哪里不正确，请留言指出，谢谢！~另外，如若有侵权的地方，请联系本人，得到通知后立刻... 查看详情

前端知识点记录(代码片段)

a标签实现锚点功能<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><ahref="#btn">跳转</a&g 查看详情

零碎的前端知识点（为方便记录，每次更新都在最上面）

2017-01-15获取元素属性的3种写法：//假设获取title属性，当title是变量的时候，考虑用1、3方式element.getAttribute("title");element.title;element["title"];———————————————————————————————————————... 查看详情

分页查询知识点

1.在mysql里面使用分页查询sql语句:使用limit关键字select*fromuserlimit0,3;limit关键字后面有两个参数,第一个参数为开始位置,第二个参数为每页显示记录数2.分页相关属性2.1当前页2.2每页显示记录数2.3总记录数2.4总页数　　总记录数除... 查看详情

软件测试入门随笔——软件测试基础知识

...虑过的情况，其中也有一些新接触的词汇，以下一一了解记录。3-5-8原则用户的操作在3s内响应，用户会觉得产品很优秀；在5s内响应，用户会觉得产品还不错；8s或者更长时间以后，用户会失去耐心。单点登录简称为SSO，在多个... 查看详情

前端语法整理(代码片段)

...迁移docker之路”），在公司内部的论坛里，由于涉及一些关键技术和敏感信息，所以不便在此发表。另外，这段时间学习了spring-boot开发的一些知识，并将之前的关于java基础和设计模查看详情

2018.08.23知识点补充简单记录

一，file操作中seek方法的三种模式以及如何用.seek(int,2)这种模式读取文件最后一行补充到了博客随笔中的文件操作部分二，函数默认参数的陷阱：三，python的两个原则：（六大设计原则其二）依赖倒置原则：1高层级的模... 查看详情

java随笔：static关键字

一、介绍。/**************************************************************THINKINGINJAVA********************************************************************/　　通常来说，当创建类时，就是在描述那个类的对象的外观与行为。除非用new创建那个类的对象，否则... 查看详情

markdown前端随笔(代码片段)

查看详情

技术随笔

2016-09-06技术随笔累计代码行 156随笔字数 921知识点数据流读入Util包下String的部分用法哈希表的使用Scanner的使用随机数生成查看详情

《我的博客园“头七”》随笔

...没事干~于是乎把主页的样式给重新调了一遍，汗！本人前端技术实在不过硬，东拿西凑的拼成了如今的样子，好说歹说起码看着舒服，也用不着默认的样式看着太大众毫无特色毫无感觉?(ˉ﹃ˉ?)??是的我又是在公司敲的！（实习... 查看详情

lightroom学习随笔

...的光线色彩知识，再进一步学习ps。安装时遇到了问题，记录一下给后来者：1、点击安装文件，提示遇到重启电脑过程会暂停：Windows-运行-regedit-HKEY_LOCAL_MACHINE-SYSTEM-CurrentControlSet-Control-SessionManager 查看详情

jmeter随笔（11）--上传文件接口出错

...总结，技术需要时间的积累和练习，对jmeter实践的点滴的记录，这里分享交流jmeter的第11次小技巧，查看详情