菜菜浣熊
获得徽章 0
- Day16
纯函数
定义：当给定相同的输入时，纯函数总是返回一致的输出，并且永远不会产生超出函数范围的效果，使它们可以预测。纯函数不管执行多少次，结果都是可预测的。
非纯函数
定义：当给定相同的输入时，非纯函数可能不会返回一致的结果，并且它们可能会产生超出函数范围的影响，因此非纯函数的测试需要营造特定环境才能进行。
非纯函数是不可预测的，有副作用的。当一个项目中，非纯函数的数量越多，项目可维护性越差。
而高阶函数的出现，使得非纯函数可以简化成高阶函数+纯函数的形式进行使用。
同时，因为高阶函数也是纯函数，这样的调用形式不仅降低了测试成本还提高了项目可维护性。
现代化的编程语言支持命令式（面向过程和面向对象）和声明式（逻辑式和函数式)的代码风格。而Javascript同时支持命令式和声明式的代码风格。
命令式更偏向于怎么做，而声明式更倾向于做什么。
声明式的代码编写往往比命令式的代码更具有扩展性，在实际应用中声明式的代码风格更具优势。展开评论点赞 - Day15
1. 浅拷贝
浅拷贝对对象的复制相当于在堆内存中新建一个对象，对象内属于基本类型的属性字段的属性值会通过开辟新空间的方式拷贝存储，属于引用类型（数组、对象）的属性则是通过拷贝引用地址的方式进行属性复制。
当浅拷贝中的引用属性发生变化时，源对象的对应属性也会发生变化（因为属性值共享内存地址），而基本属性则改变则不会影响源对象的对应属性的属性值。
2.深拷贝
深拷贝也会在堆内存中新建对象存储复制的数据，但深拷贝会通过循环递归将源对象中的子对象、子数组进行深度拷贝。
深拷贝的情况下，复制对象的基本属性和引用属性的改变都不会影响源对象的属性变化，因为他们的属性内存是独立分离的。展开评论点赞 - Day14
- 缓存有效期
缓存在有效期之内时，缓存的资源才是有效可用的。而标识缓存有效期的字段是 Expired 和 max-age；
在HTTP/1.0 中，有效期是通过 Expires 标头来指定的。但由于Expired指定的有效期是某个具体的时间，而这个时间容易收到系统时钟的影响而产生有效期判定偏差。因此在HTTP/1.1中，有效期通过max-age指定。max-age指定的是从响应开始的缓存有效期，是指经过时间。
虽然HTTP/1.1已经成为了被广泛应用的协议版本，但有时候开发人员为了兼容HTTP/1.0的设置会同时设置Expired和Cache-control中的max-age声明，当两者均有效的时候，优先采用max-age来进行有效期计算。
- 缓存破坏
虽然在有效期内js代码可能会变化，而该缓存响应也变得不可使用，但缓存的静态资源也能通过别的方式重新链接。这种方式被称为“缓存破坏”，即每次静态资源内容变化时都改变请求该资源的URL。
通常开发时会使用包含基于版本号或哈希值的更改部分的 URL 来提供 JavaScript 和 CSS，这样保证了在更新资源时 URL 发生变化，缓存将不会再次被重用。展开评论点赞 - Day12
CSS布局，是一种基于盒子与其兄弟、祖辈盒子的交互方式来确定盒子的位置和大小的算法。常见的布局相关技术有常规流布局、弹性布局（常用）、网格布局（常用）、浮动、绝对定位。
弹性布局（FlexBox）
可以控制子级盒子摆放流向、摆放顺序、盒子宽高、水平垂直方向对齐，这样的特性使得弹性布局的主要应用在于创建横向或是纵向的一维页面布局。
创建条件：对容器设置其样式内display:flex
在FlexBox中可设置的对齐操作依照主轴侧轴决定。主轴对齐（justify-content）是元素流向的平行方向，而侧轴对齐（align-items）是元素流向的垂直方向。Flex布局中的默认流向是从左到右（水平）排列。
Grid布局
相较于Flex布局，Grid布局可以使元素在两个维度中按行列排列整齐。
创建条件：通过display: grid使元素生成一个块级的Grid容器;
grid-template（网格划分）
使用grid-template相关属性将容器划分为网格grid-template-columns设置行网格长度划分grid-template-rows设置列方向上的网格长度划分。 设置划分时可以写具体数值、百分数、auto（自适应剩余空间）、[x] fr（fr表示份，指按照比例占据未划分的空间大小）展开评论点赞 - Day11
CSS求值需要经过一次匹配、一次优先级计算、一次声明值判定（判空与默认取值处理）、两次转换（相对值、关键字转换）、一次取整，最终得到声明属性值的渲染值。
前提：浏览器收集css样式规则并解析到一个规则数组，根据规则数组进行求值计算才能得到元素的实际渲染值。
1.【filtering】浏览器解析HTML构成DOM树后，浏览器会根据DOM树和样式规则对应用到当前HTML页面的规则进行选择器匹配（遍历当前所有元素找到对应选择器和声明）、属性有效判定、符合当前media等筛选操作。
2.【cascading】匹配筛选完成后会得到一组能够匹配到的声明值，接着浏览器会根据来源、！important、选择器特异性、书写顺序等选出优先级最高的一个属性值。这个在层叠过程中选出来的优先级最高的值被称为层叠值。
3.【defaulting】若层叠值为空浏览器就会采取属性继承或默认的初始值给元素设置指定值。
4.【resolving】浏览器拿到指定值后需要将一些相对值或关键字转化成绝对值，例如将em转为px、图片相对路径转为绝对路径等，转化完成后就能拿到一个计算值。但resolving的转换并不能完全处理关键字和相对值，需要按照实际设备布局信息辅助计算的值还需要经过一次转换计算（formatting）。
5.【formatting】可以将计算值进一步转换，将关键字、百分比等转为绝对值，得到一个进行实际布局时使用的值——使用值。
6.【constraining】但使用值可能包含小数，因此还需要经过取整的过程，最终得到实际渲染生效的值。展开评论点赞 - Day10
复（重）习（新）一（学）下（习）计算机网络的知识。
1. 计算机网络：是一个将分散的、具有独立功能的`计算机系统`，通过`通信设备`与`线路`连接起来，由功能完善的`软件`实现资源共享和信息传递的系统。
2. 按分布范围划分，计算机网络可分为：
- 基于广播技术的局域网（LAN）：主要代表是`以太网`
- 基于分组交换技术的广域网（WAN）
3. 计算机网络的性能可以通过速率、带宽、吞吐量、时延、往返时间等指标来衡量。
4. 网络互联需要协议来保证通信的稳定与效率，其中最有名的模型就是OSI参考模型。
OSI参考模型具有七层结构：应用层、表示层、会话层、传输层、网络层、数据链路层、物理层。但OSI模型只是一种理论下的模型，而TCP/IP才是被广泛使用的网络互联标准。根据应用场景不同，TCP/IP协议分为TCP/IP对等五层协议（应用层、传输层、网络层、数据链路层、物理层）和TCP/IP标准四层模型（应用层、传输层、网络层、网络接口层）。在客户端与服务端沟通（Client-Server）的过程中， 客户端的数据需要经过每一层格式化包装，然后通过物理层传给服务端，然后服务端反向解包最终得到客户端传入的原始数据。展开1点赞 - Day9
【Ajax 、 Axios 、Fetch 的区别】
- Ajax
概念：一种技术统称，是一个概念模型 ,主要利用XHR实现网络请求
特点：可以局部刷新页面，而无需重载整个页面。
实现： 最常用的实现Ajax的方式就是通过XMLHttpRequest技术实现；
（实际）XHR的网络请求发起方式：
1. 创建一个XHR对象，使用xhr对象的.open方法初始化一个请求
2.通过onreadystatechange设置异步回调函数
3.通过send函数发送请求
注意：
使用XHR实现网络请求时,若请求内部又包含请求,以此循环会出现回调地狱，因此XHR不是发起网络请求的最佳方法。
- Axios
概念：一个利用XHR进行二次封装的第三方请求库，较推荐使用
特点：
1. 从浏览器中创建 XMLHttpRequests
2. 从 node.js 创建 http 请求
3. 支持 Promise API
4. 拦截请求和响应
5. 转换请求数据和响应数据
6. 取消请求
7. 自动转换 JSON 数据
8. 客户端支持防御 XSRF
实现：引入axios库，参考库内api手册使用
-Fetch
概念：ES6中的一个基于promise，用于实现网络请求的具体API
特点：
1. 使用 promise，不使用回调函数。
2. 采用模块化设计，比如 rep、res 等对象分散开来，比较友好。
3. 通过数据流对象处理数据，可以提高网站性能。
实现：使用fetch api发起请求，具体参考es6开发手册
优点：
使用fetch发起网络请求时采用了.then链式调用方式处理请求结果，这种方式不仅提高了代码的可读性也解决了回调地狱的问题。
参考链接：
juejin.cn 展开评论点赞 - Day8
正则表达式是由普通字符和特殊字符（元字符、限定符、中括号、修饰符等）组成的规则字符串，是对字符串操作的一种逻辑公式。
正则表达式可以实现字符串的匹配、提取、替换.
- 元字符
定义：在正则表达式中具有特殊含义的字符。
常用的元字符有: '\d'（匹配数字）、 '\w'（匹配数字、字母、下划线） 、'\s' （匹配空白符）、 '.'（匹配除换行符（回车键）意外的任意单个字符）。
想要匹配非数字时使用'\D',其他的非类型匹配类似。（扩：'\W' 、 '\S' ）
- 限定符
定义：控制字符出现的次数的符号，可对字符个数进行限制
常用的限定符有:
1. 'n{x,y}'（匹配至少包含x个n，至多包含y个n的序列的字符串）
2. 'n{x,}'（匹配至少包含x个n的序列的字符串）
3. 'n{x,}'（匹配包含x个n的序列的字符串）
4. 'n*'（等同n{0，}）、'n+'（等同n{1，}）、'n?'（等同n{0，1}）
5.'^n'（匹配任何开头为n的字符串）'n$' （匹配任何结尾为n的字符串）
-中括号
定义：代表一个字符串，其目的是控制一个字符的范围
常用中括号：
[abc] ： 查找一个括号之间的任何字符。
[^abc] ： 查找一个任何不在方括号之间的字符，^在中括号中有取反的意思。
[0-9] ：查找一个任何从0至9的数字。
[a-z] ： 查找一个任何从小写a到小写z的字符。
参考链接：juejin.cn（学习1）juejin.cn（学习2）juejin.cn（正则表达式参考|练习） 展开评论点赞 - Day7
在Vue项目开发中涉及多个组件之间使用同一个状态时，传参就会变得繁琐，因此需要Vuex介入进行状态的管理与组件间通信的管理。
Vuex 主要应用于多个视图依赖同一个状态 、来自不同视图的行为需要变更同一个状态。
【Vuex的使用】
通过vue-cli 添加vuex插件，在src目录下的store目录的index.js，引入并注册Vuex，初始化Vuex.store，并设置开发的严格模式，完成后再将 store 挂载到 Vue。
1.状态（state）
共享的状态都放在写在Vuex.store.state 对象里面。
- 获取
获取状态可以通过 直接使用 this.$store.state[属性] 和 使用 mapState 两种方式。
- 修改
引用Vuex后，在Vue项目开发环境中开启严格模式，修改数据就必须通过 mutation 来处理。
使用mutation的方式是通过在mutation中设置类似Java的类私有属性的setter方法，传入需要修改的状态和修改的值，并在组件中通过 this.$store.commit() 触发mutation 或者 在组件methods中 使用 mapMutations 将 mutation 映射到组件methods中使用。
2.异步处理（action）
actions是用来处理异步任务的,异步任务必须通过 Action 触发 Mutation 间接改变状态。
使用 Action的方式是先在actions中定义异步方法来调用mutation 中的方法，再在组件中通过引入 vuex 中的mapState 和 mapMutations，将 store 映射到当前组件的计算属性，使用this.$store.dispatch() 调用actions中的方法改变状态 或 直接使用 mapActions 映射调用actions的方法。
3. getter
vuex 中的getter类似于 vue中的计算属性，可以对 state 做一些包装简单性处理。
getter 得到的数据可以通过this.$store.getters[名称] 和 mapGetters映射计算属性进行使用。展开赞过 21
![[奋斗]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_29.2801857.png)
![[流泪]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)
写不出来就只能继续复习了再写篇笔记或者换其他一个实践题目了，最后一篇~
juejin.cn