【React工作记录九十二】前端小知识点扫盲笔记记录

简介: 【React工作记录九十二】前端小知识点扫盲笔记记录

前言

大家好 我是歌谣 微信公众号关注前端小歌谣带你进入前端巅峰人才交流群


MVC和MVVM

// 在MVVM框架下视图和模型是不能直接通信的,只能通过ViewModel进行交互,它能够监听到数据的变化, // 然后通知视图进行自动更新,而当用户操作视图时,VM也能监听到视图的变化,然后通知数据做相应改动, // 这实际上就实现了数据的双向绑定。并且V和VM可以进行通信。 // Model(模型) // 模型是指代表真实状态内容的领域模型(面向对象),或指代表内容的数据访问层(以数据为中心)。 // View(视图) // 就像在MVC和MVP模式中一样,视图是用户在屏幕上看到的结构、布局和外观(UI)。 // ViewModel(视图模型) // 视图模型是暴露公共属性和命令的视图的抽象。MVVM没有MVC模式的控制器,也没有MVP模式的presenter,有的是一个绑定器。在视图模型中,绑定器在视图和数据绑定器之间进行通信。 // 低耦合:View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。 // 可重用性: 可以把一些视图逻辑放在一个ViewModel里面,让很多View重用这段视图逻辑。 // 独立开发: 开发人员可以专注于业务逻辑和数据的开发,设计人员可以专注于页面的设计。 // MVC是应用最广泛的软件架构之一,一般MVC分为:Model(模型),View(视图),Controller(控制器)。 // 这主要是基于分层的目的,让彼此的职责分开.View一般用过Controller来和Model进行联系。 // Controller是Model和View的协调者,View和Model不直接联系。基本都是单向联系。M和V指的意思和MVVM中的M和V意思一样。 // C即Controller指的是页面业务逻辑。MVC是单向通信。也就是View跟Model,必须通过Controller来承上启下。 // 低耦合 // 重用性高 // 生命周期成本低 // 部署快 // 可维护性高 // 有利软件工程化管理


object.Create

```




Object.create


argument

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>arguments</title> </head> <body> <script> //arguments 是一个对应于传递给函数的参数的类数组对象。 //这边的arguments[0]等价于fn var length = 10 function fn() { console.log(this.length, 'length') } var obj = { length: 5, method: function (fn) { console.log(arguments[0], 'arguments') // fn(){ // console.log(this.length,"length"); // } 'arguments' arguments[0]() }, } obj.method(fn) //1 </script> </body> </html>


class类继承

```




Document


cookie,session区别

// cookie 和 session 区别 // cookie数据存放在浏览器中, session数据存放在服务器上 // cookie是不安全的, 别人可以分析存放在本地的cookie并进行cookie诈骗, 考虑到安全性能, 应尽量使用session // session会在一定时间内保存在服务器上。 当访问增多时, 会比较占用服务器的性能。 考虑到服务性能, 应尽量使用cookie // 单个cookie保存的数据不能超过4k, 很多浏览器都限制一个站点最多保存20个cookie // cookie和session都用来存储用户信息, cookie存放于客户端有可能被窃取, 所以cookie一般用来存放不敏感的信息, 比如用户设置的网站主题, 敏感的信息用session存储, 比如用户的登录信息 // cookie, sessionStorage, localStorage 区别 // HTML5中提出了webStorage的概念, webStorage包括sessionStorage和localStorage, 只为了保存数据, 不会与服务器进行通信 // cookie, localStorage, sessionStorage都是在客户端保存数据, 存储数据的类型: 字符串 // webStorage不会随着HTTP header发送到服务器端, 所以安全性相对来说比cookie高, 不必担心截获 // 生命周期不同( 见后文), localStorage要手动清除, sessionStorage在浏览器关闭后清除 // 生命周期 // cookie: 可设置失效时间, 否则默认为关闭浏览器后消失 // localStorage: 除非被手动清除, 否则永久保存 // sessionStorage: 仅在当前网页会话下有效, 关闭页面或浏览器后就会被清除


diff算法

// 传统diff算法 // 虚拟DOM中的Diff算法 // 传统算法查找两颗树每一个节点的差异 // 会运行n1(dom1的节点数)*n2(dom2的节点数)次方去对比,找到差异的部分再去更新 // snabbdom的diff算法优化 // Snbbdom根据DOM的特点对传统的diff算法做了优化 // DOM操作时候很少会跨级别操作节点 // 只比较同级别的节点 // key的作用 // Diff操作可以更加快速 // Diff操作可以更加准确 // 避免渲染错误 // 不推荐使用索引作为key


eval使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>eval的使用</title> </head> <body> <script> // eval() 函数会将传入的字符串当做 JavaScript 代码进行执行。 var fangfang=eval(new String('2 + 2')) console.log(fangfang,"fangfang") //String { "2 + 2" } var fangfangTest=new String('2 + 2') console.log(fangfangTest,"fangfangTest") //String { "2 + 2" } var geyao=eval('2 + 2') console.log(geyao,"geyao") //4 </script> </body> </html>


http1.0,2.0,3.0区别

HTTP1.0和HTTP1.1主要区别主要体现在:缓存处理,在HTTP1.0中主要使用header里的If-Modified-Since,Expires来做为缓存判断的标准,HTTP1.1则引入了更多的缓存控制策略例如Entity tag,If-Unmodified-Since, If-Match, If-None-Match等更多可供选择的缓存头来控制缓存策略。带宽优化及网络连接的使用,HTTP1.0中,存在一些浪费带宽的现象,例如客户端只是需要某个对象的一部分,而服务器却将整个对象送过来了,并且不支持断点续传功能,HTTP1.1则在请求头引入了range头域,它允许只请求资源的某个部分,即返回码是206(Partial Content)这样就方便了开发者自由的选择以便于充分利用带宽和连接。错误通知的管理,在HTTP1.1中新增了24个错误状态响应码,如409(Conflict)表示请求的资源与资源的当前状态发生冲突;410(Gone)表示服务器上的某个资源被永久性的删除。Host头处理,在HTTP1.0中认为每台服务器都绑定一个唯一的IP地址,因此,请求消息中的URL并没有传递主机名(hostname)。但随着虚拟主机技术的发展,在一台物理服务器上可以存在多个虚拟主机(Multi-homed Web Servers),并且它们共享一个IP地址。HTTP1.1的请求消息和响应消息都应支持Host头域,且请求消息中如果没有Host头域会报告一个错误(400 Bad Request)。长连接,HTTP 1.1支持长连接(PersistentConnection)和请求的流水线(Pipelining)处理,在一个TCP连接上可以传送多个HTTP请求和响应,减少了建立和关闭连接的消耗和延迟,在HTTP1.1中默认开启Connection: keep-alive,一定程度上弥补了HTTP1.0每次请求都要创建连接的缺点。HTTP2.0HTTP2.0是HTTP协议自1999年HTTP1.1发布后的首个更新,主要基于SPDY协议。HTTP2.0大幅度的提高了web性能,在HTTP1.1完全语义兼容的基础上,进一步减少了网络的延迟。实现低延迟高吞吐量。对于前端开发者而言,减少了优化工作。主要体现在以下几点特性:头部压缩多路复用二进制分帧请求优先级服务器推送


总结

我是歌谣 这些都是扫盲时候的笔记 微信公众号关注前端小歌谣 学习前端知识

相关文章
|
2月前
|
前端开发 JavaScript 开发者
深入理解React Hooks:提升前端开发效率的关键
【10月更文挑战第5天】深入理解React Hooks:提升前端开发效率的关键
|
1月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
77 9
|
2月前
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。
|
2月前
|
前端开发 JavaScript API
探索React Hooks:前端开发的革命性工具
【10月更文挑战第5天】探索React Hooks:前端开发的革命性工具
|
27天前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
100 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
1月前
|
前端开发 JavaScript 开发者
使用React和Redux构建高效的前端应用
使用React和Redux构建高效的前端应用
33 1
|
2月前
|
前端开发 数据管理 编译器
引领前端未来:React 19的重大更新与实战指南🚀
React 19 即将发布,带来一系列革命性的新功能,旨在简化开发过程并显著提升性能。本文介绍了 React 19 的核心功能,如自动优化重新渲染的 React 编译器、加速初始加载的服务器组件、简化表单处理的 Actions、无缝集成的 Web 组件,以及文档元数据的直接管理。这些新功能通过自动化、优化和增强用户体验,帮助开发者构建更高效的 Web 应用程序。
192 1
引领前端未来:React 19的重大更新与实战指南🚀
|
1月前
|
前端开发 JavaScript Android开发
前端框架趋势:React Native在跨平台开发中的优势与挑战
【10月更文挑战第27天】React Native 是跨平台开发领域的佼佼者,凭借其独特的跨平台能力和高效的开发体验,成为许多开发者的首选。本文探讨了 React Native 的优势与挑战,包括跨平台开发能力、原生组件渲染、性能优化及调试复杂性等问题,并通过代码示例展示了其实际应用。
64 2
|
1月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
1月前
|
前端开发 JavaScript 开发者
“揭秘React Hooks的神秘面纱:如何掌握这些改变游戏规则的超能力以打造无敌前端应用”
【10月更文挑战第25天】React Hooks 自 2018 年推出以来,已成为 React 功能组件的重要组成部分。本文全面解析了 React Hooks 的核心概念,包括 `useState` 和 `useEffect` 的使用方法,并提供了最佳实践,如避免过度使用 Hooks、保持 Hooks 调用顺序一致、使用 `useReducer` 管理复杂状态逻辑、自定义 Hooks 封装复用逻辑等,帮助开发者更高效地使用 Hooks,构建健壮且易于维护的 React 应用。
36 2
下一篇
DataWorks