- 博客(45)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 七、函数式编程
是把接受多个参数的函数变换成接受一个单一的参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。在执行任务前先执行bf1,改造成执行一个任务前可接受多个任务执行，且前一个任务执行的结果为后一个任务的输入参数。假如我们有一个计算密集型函数，我们需要对这个函数进行包装，如果让这个函数。函数式编程通过使用函数，来将值转换成抽象单元，接着用于构建软件系统。这样柯里化后的函数式编程会提取公用逻辑，实现逻辑复用。函数式，倾向于把程序拆分，并抽象成多个函数组装回去。
2024-02-25 18:21:53
332
1
原创 四十八----react实战
以下可以使用styles.xxx方式使用class是因为使用css-loader配置了module。开发环境使用路径模块名类名命名方便调试"[path][name][local]“，生产环境使用”[hash:base64:5]"这个命名进行压缩混淆代码减少代码体积。是原子化的css包，解决一些css的复杂性，类名约定的负担。它主要使用postcss进行css的babelloader转换编译。控制粒度：bootsrap>tailwind>cssheadless ui 是没有样式的。
2023-12-27 00:34:15
1350
原创 四十七----redux
如果可以随意修改state，会造成难以复现的bug ，我们需要实现有条件并且是具名修改的store数据，既然要分发action这⾥要传⼊⼀个action对象，另外这对象包括我们 要修改的state和要操作的具名actionType,这⾥⽤type属性值的不同来对state做相应的修改，代码如。它是 store 数据的唯⼀来源。store是应⽤管理数据的地⽅，在Redux应⽤中，我们总是将所有共享的应⽤数据集中在⼀个⼤的store 中，⽽Mobx则通常按模块将应⽤状态划分，在多个独⽴的store中管理。
2023-12-19 00:38:20
875
原创 四十六----react路由
BrowserRouter/hashrouter都是操作的history对象，但是BrowserRouter取的路由对象参数是的window.location，hash是window.location.hash。使⽤ react router 时，如果 history 模式 下 不⽀持 pushState，会通过 重新加载⻚⾯ (**window.location.href = href)**的⽅式实现⻚⾯跳转。等懒加载⻚⾯对应的js⽂件加载并执⾏完毕，触发更新，渲染懒加载⻚⾯。适合写测试用例时使用。
2023-12-16 19:48:45
97
原创 四十一----react基础
React 是⼀个声明式，⾼效且灵活的⽤于构建⽤户界⾯的 JavaScript 库。使⽤ React 可以将⼀ 些简短、独⽴的代码⽚段组合成复杂的 UI 界⾯，这些代码⽚段被称作“组件”。ui = render (data) -> 单向数据流react是基于mvc模型的框架，vue是基于mvvm模型的框架。
2022-12-01 22:20:18
5
原创 二十七----浏览器存储
所谓的跨页面使用指的是：你在浏览器里打开了两个窗口，一个访问的是。cooick产生的背景是因为，HTTP是无状态协议，在没有cooick之前，HTTP的请求头是没有任何状态标记的，这就导致一个问题，一、同源策略是浏览器的一个安全策略，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。发送的时候，也不会携带到的请求头中去，防止一些安全问题的产生，因不会放到请求头中，因此也减少了不必要的流量开销。（会话存储）这两个，这两个相比于cookie，在可存储的大小上，有了质的提升，可以存储4M左右的数据。
2022-09-18 17:51:14
141
1
原创 node升版本问题
但我遇到的问题，没有升级vue-cli，因为当时自动升级至cli5，中间还报错，干脆不升级了，直接卸载node-sass,sass-loader,然后按着这篇博文安装还是报错，Syntax Error: ValidationError: Invalid options object. Sass Loader has been initialized…，百度说时sass-loader版本太高或过低的问题，那么我就一直降又降回原来的7.1.0版本，好了。开始报和播主说的一样的错了，跟着博主说的改掉就好了。
2022-08-19 17:28:42
408
原创 十二--vue.js基础
一：vue.js简介vue是一个响应式的前段视图层框架。响应式：我们在编写模版代码时，仅需关注数据变化即可，数据变化，ui即会变化视图层：类似我们接触的其他前端模版，仅仅是ui层面的内容框架：库提供由其父代码调用的功能，而框架定义整个应用程序的设计。开发人员不调用框架，而是调用库，相反，框架以某种特定方式调用和使用代码。1、vue.js的简单demo例子1:<div id='app'><p>Message is: {{ message }}</p><
2022-01-07 20:46:37
428
1
原创 十一--nodejs网络及部署（二）
一、httpHTTP协议（HyperText Transfer Protocol，超文本传输协议）是用于从WWW服务器传输超文本到本地浏览器的传输协议。它可以使浏览器更加高效，使网络传输减少。它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内容首先显示(如文本先于图形)等。HTTP是客户端浏览器或其他程序与Web服务器之间的应用层通信协议。在Internet上的Web服务器上存放的都是超文本信息，客户机需要通过HTTP协议传输所要访问的超文本信息。HTTP包含命令和传输信
2021-12-31 17:40:40
159
原创 十一--nodejs网络(一)
一：网络OSI七层模型第七层：应用层，为操作系统或网络应用程序提供访问网络服务的接口。应用层协议的代表包括： HTTP，HTTPS，FTP，TELNET，SSH，SMTP，POP3等。第六层：表示层，把数据转换为接受者能够兼容并且适合传输的内容，比如数据加密，压缩，格式转换等。第五层：会话层，负责数据传输中设置和维持网络设备之间的通信连接。管理主机之间的会话进程，还可以利用在数据中插入校验点来实现数据的同步。第四层：传输层，把传输表头加至数据形成数据包，完成端到端的数据传输。传输表头包含了协议等信
2021-12-29 21:01:57
1085
原创 十--nodejs原理（事件循环）
一、事件循环什么是事件循环？事件循环使得nodejs可以通过将操作转移到系统内核中来执行非阻塞I/O操作（尽管javascripts是单线程的）。由于大多数现代内核是多线程的，因此它们可以处理在后台执行的多个操作。当这些操作之一完成时，内核会告诉nodejs，以便可以将适度的回调添加到轮询队列中以最终执行。通俗的说在nodejs内部使用了第三方库libuv，nodejs会把IO，文件读取等异步操作交由他处理，而nodejs主线程可以继续去处理其他的事情。libuv会开启不同的线程去处理这些延时操作，处
2021-12-26 19:16:19
777
原创 十--nodejs原理(events and global)
一、events模块events模块是node的核心模块之一，几乎所有常用的node模块都继承了events模块，比如http、fs等。1、同个事件可以设置多个事件监听器var EventEmitter = require('events');class Man extends EventEmitter{}var man = new Man();man.on('wakeup',function(){ console.log('man has woken up');});man.on('w
2021-12-24 22:10:01
107
原创 十--nodejs原理（stream）
一、streamshell通过管道|连接各部分，其输入输出的规范是文本流，在Node.js中，内置的Stream模块也实现了类似功能，各部分通过.pipe()连接。Stream提供了以下四种类型的流：var Stream = require('stream')；var Readable = Stream.Readable;var Writable = Stream.Writable;var Duplex = Stream.Duplexvar Transform = Stream.Transfo
2021-12-23 22:38:44
269
原创 十--nodejs原理（buffer）
1、Buffer1)Arraybuffer对象是用表示通用的，固定长度的二进制数据缓冲区。Arraybuffer不能直接操作，而是要通过类型数组对象或DataView对象来操作，它们会将缓冲区数据表示为特定格式的数据，并通过这类格式来读写缓冲区内容，可以理解为一块内存，具体存什么需要其他声明。var buffer = new ArrayBuffer(8);//声明一个长度为8的缓冲区域，8位为一个字节var view = new Int16Array(buffer);//以16位整数数组划分字节长度为
2021-12-22 21:19:01
1192
原创 九--nodejs基础
1、nodejs是什么？nodejs是一个服务端运行环境，它是基于js语言规范基础上，封装了一些服务端的运行时对象，让我们能实现非常多的业务功能。如果我们只使用js的话，只能做一些简单的逻辑运算，nodejs就是基于js语法增加与操作系统之间的交互2、node安装与版本切换1）node安装可以通过官网直接下载二进制安装文件或者通过源码自行编译安装。2）nodejs版本切换经常nvm（node version manager）和n工具来实现。它提供了⼀种直接通过shell 执⾏的⽅式来进⾏安装。简单
2021-12-21 22:45:57
295
原创 八--JS作用域、this和原型链（二）
1、为什么要面向对象？面向对象（OOP），对象就是一个容器，一般是类，它是面向对象编程的最小单元，面向对象编程的优点是逻辑迁移灵活，代码可复用性高，高度模块化。对象是一个容器，里边封装了方法和属性。方法为对象行为，属性为对象状态//简单对象const course = { teacher: '云隐', leader: '黄小杨', startCourse: function(name) { return `开始${name}课`; }}//函数对象funct
2021-12-11 17:35:10
421
1
原创 八--JS作用域、this和原型链（一）
1、JS作用域及作用域链一个函数里面有函数，最外层的函数的生命周期是最久的，它们的地址和值就是栈的形式，先进后出。它们的变量作用域查找，是从内向外的一个方式查找。 let a = 'global'; console.log(a); function course() { let b = 'zhuawa'; console.log(b); session(); function session() { let c = 'this';
2021-12-10 21:27:13
468
1
原创 七--js基础
当valueof和toString同时存在时，不管一元加号还是字符串拼接的加号，都会先对象转为基本类型，所以会先找valueOf(),若valueof返回基本类型，结果就时valueof的值，若返回对象或没有，就找toString(),若toString返回对象或没有，则报错。添加修改原型链上的属性会影响已创建或未创建的实例，给原型对象重新赋值新的对象，不会影响已经创建的实例的原型链，因为已创建的实例依旧指向原来的地址，新的实例才会指向新的原型对象指向的地址。bind比apply,call更高效，优先。
2021-12-06 20:10:43
228
原创 CSS基础--absolute与overflow
overflow对absolute元素的剪裁规则用一句话表述就是：绝对定位元素不总是被父级overflow属性剪裁，尤其当overflow在绝对定位元素及其包含块之间的时候。即如果overflow不是定位元素，同时绝对定位元素和overflow容器之间也没有定位元素，则overflow无法对absolute元素进行剪裁。因此下面HTML中的图片不会被剪裁：<div style="overflow: hidden;"> <img src="1.jpg" style="position
2021-11-27 17:00:30
1654
1
原创 CSS基础--float的兄弟position:absolute二
1、具有相对特性的无依赖 absolute 绝对定位一个绝对定位元素，没有任何 left/top/right/bottom 属性设置，并且其祖先元素全部都是非定位元素，其位置在哪里？很多人都认为是在浏览器窗口左上方。实际上，还是当前位置即html代码布局的位置，不是在浏览器左上方。正是这种错误认知导致凡是使用absolute 绝对定位的地方，一定父容器 position:relative，同时 left/top 等属性定位，甚至必同时使用 z-index 属性设置层级。请牢记下面这句话：absolu
2021-11-23 19:01:27
363
原创 六----es6详解及实战二
1、解构赋值const data = {name:'1',teacher:'2',}const {name,teacher}=data;//解构赋值，需要key一一对应const data1 = [1,2,3];const [a,b,c] = data1;当有多个引用使用别名const data = {name:'1',teacher:'2',class:{name:'er',title:'duck'}}const {name:teachername,teacher,
2021-11-17 23:22:44
88
原创 CSS基础--float的兄弟position:absolute一
当absolute和float同时存在的时候，float属性是无任何效果的。元素一旦position属性值为absolute或fixed，其display计算值就是block或者table。，absolute有一个平时不太被人注意的差异，那就是absolute的自适应性最大宽度往往不是由父元素决定的，本质上说，这个差异是由“包含块”的差异决定的。换句话说，absolute元素具有与众不同的“包含块”1、absolute的包含块（1）根元素（很多场景下可以看成是）被称为“初始包含块”，其尺寸等同于浏览器可
2021-11-17 18:02:16
242
原创 六----es6详解及实战一
一、常用es6const，let，箭头函数，解构赋值，扩展运算符…，class，promise，async:await，generator产生器，symbol数据类型，set，map等等。1、consta、定义常量，无法改变，但是对于引用类型的数据是可以改变的；b、不允许重复声明，会报错；c、有块级作用域的概念d、无变量提升；e、有暂时性死区问题es5定义常量：Object.defineProperty(window,'arg2'{value:1,writeable:false})es
2021-11-16 22:30:11
254
原创 CSS基础--overflow二
1、依赖overflow的样式表现有一种效果就离不开overflow:hidden声明，即单行文字溢出点点点效果。效果的核心是textoverflow:ellipsis。效果实现必需的3个声明如下：.ell { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }目前，对-webkit-私有前缀支持良好的浏览器还可以实现多行文字打点效果，但是却无须依赖overflow:hidden。比方说，最多显示2行内容，
2021-11-15 18:10:07
1667
原创 四----ts了解
一、为什么要用ts?1）ts是js的加强版，它给js增加了可选的静态类型和面向对象编程，它的功能比js只多不少。2）ts是面向对象的语言，它包含类和接口的概念；3）ts在开发时就能给出编译错误，而js需要运行时才能发现；4）ts作为强类型语言，明确数据类型，代码可读性比较强；5）ts中有很多很方便的特性比如可选链。二、1、基础类型：number,string,array,boolean,object定义a为number类型，且给它赋值1。let A :number = 1;2、枚举 e
2021-08-22 21:51:56
3115
原创 三----浏览器相关
一、浏览器事件1、浏览器事件模型分为三步，分别是捕获阶段、目标阶段，冒泡阶段，它们之间的关系是：捕获–>目标–>冒泡。Window.addEventListener(‘click’,function(){},true)//这是捕获阶段进行触发Window.addEventListener(‘click’,function(){},false)//这是冒泡阶段进行触发例如：一个结构html–>body–>div–>span;这时点击了div区域，事件触发阶段为html的捕
2021-08-19 16:38:19
65
原创 二----js模块化理解
一、模块化主要是为了更好的管理代码，将复杂问题拆分成子问题，关注分离，方便替换，复用，拓展，多人合作。二、闭包是模块化机制的基石。模块化机制解决了命名污染，全局污染，变量冲突等基础问题内聚且私有，变量不会被外界污染怎么引入其他模块，怎么暴露给其他模块引用依赖顺序问题循环引用，边界等问题三、目前的几种模块化规范amd,cmd,commonjs,esm等。1、amdamd代表是ReqiureJS，它适用于浏览器端加载，是异步的，但是它是依赖前置即依赖一股脑先加载。使用：define('a
2021-08-09 16:28:19
143
原创 一----promise理解
听过路白大大的课之后对promise有一些理解以此记录：1、promise A+规范要求有三个状态，分别是pending,fulfilled,rejected。promise实例初始化时是pending状态。实例初始化时会把new promise传入的方法马上执行。class myPromise{ resolveList = []; rejectList = []; _status = null; constructor(fn){ this.status = 'pending'; this.
2021-08-08 22:57:23
82
1
原创 css基础--overflow一
1、overflow剪裁界线border boxoverflow:hidden，利用BFC的“结界”特性彻底解决浮动对外部或兄弟元素的影响，overflow:hidden声明不会影响元素原先的流体特性或宽度表现。overflow属性原本的作用指定了块容器元素的内容溢出时是否需要裁剪，也就是“结界”只是其衍生出来的特性，“剪裁”才是其本职工作。一个设置了overflow:hidden声明的元素，假设同时存在border属性和padding属性，类似于下面的CSS代码：.box { width: 2
2021-06-30 20:43:26
2312
原创 css基础--float 的天然克星 clear/BFC
1、什么是clear属性clear: none | left | right | bnone：默认值，左右浮动来就来。left：左侧抗浮动。right：右侧抗浮动。both：两侧抗浮动。假设容器宽度足够宽，有10个元素，设置了如下CSS代码：li { width: 20px; height: 20px; margin: 5px; float: left; } li:nth-of-type(3) { clear: both; }最后显示如下图所示原因在于，c
2021-06-30 17:38:20
82
原创 css基础--流的破坏与保护之float
1、浮动的本质就是为了实现文字环绕效果。而这种文字环绕，主要指的就是文字环绕图片显示的效果。1）包裹性；2）块状化并格式化上下文；3）破坏文档流；4）没有任何margin合并；所谓“包裹性”，由“包裹”和“自适应性”两部分组成。（1）包裹。假设浮动元素父元素宽度200px，浮动元素子元素是一个128px宽度的图片，则此时浮动元素宽度表现为“包裹”，就是里面图片的宽度128px，代码如下：.father { width: 200px; } .float { float: left; }
2021-06-28 20:27:43
138
原创 css基础---vertical-align三
1、vertical-align文本类属性值vertical-align:text-top：盒子的顶部和父级内容区域的顶部对齐。vertical-align:text-bottom：盒子的底部和父级内容区域的底部对齐。
2021-06-25 19:22:35
325
原创 css基础--vertical-align二
1、inline-block与baselinevertical-align属性的默认值baseline在文本之类的内联元素那里就是字符x的下边缘，对于替换元素则是替换元素的下边缘。但是，如果是inline-block元素，则规则要复杂了：一个inline-block元素，如果里面没有内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘；否则其基线就是元素里面最后一行内联元素的基线。例子：两个同尺寸的inline-block水平元素，唯一区别就是一个是空的，一个里面有字
2021-06-23 20:29:28
118
原创 css基础--vertical-align
1、vertical-align属性值分为以下4类：线类，如baseline（默认值）、top、middle、bottom；文本类，如text-top、text-bottom；上标下标类，如sub、super；数值百分比类，如20px、2em、20%等。数值百分比类根据计算值的不同，相对于基线往上或往下偏移，到底是往上还是往下取决于vertical- align的计算值是正值还是负值，如果是负值，往下偏移，如果是正值，往上偏移。vertical-align的默认值是baseline，即基线对齐，
2021-06-22 20:04:56
2225
1
原创 css基础--line-height二
1、坊间流传着这么一种说法：“要想让单行文字垂直居中，只要设置line-height大小和height高度一样就可以了“。.title { height: 24px; line-height: 24px; }误区之一：要让单行文字垂直居中，只需要line-height这一个属性就可以，与height一点儿关系都没有。也就是说，我们直接.title { line-height: 24px; }就可以了，坊间传闻的说法会误导大小一定要同时设置height属性才可以。误区二：行高
2021-06-18 19:01:54
598
原创 css基础--内联元素与流-line-height一
块级元素负责结构，内联元素接管内容1、x-height首先需要了解一下x-height的含义。通俗地讲，x-height指的就是小写字母x的高度，术语描述就是基线和等分线（mean line）（也称作中线，midline）之间的距离。ascender height: 上下线高度。cap height: 大写字母高度。median: 中线。descender height: 下行线高度。CSS中有些属性值的定义就和这个x-height有关，最典型的代表就是vertical- align:mid
2021-06-17 20:00:06
486
原创 css基础--border属性
1、border不支持百分比border-width还支持若干关键字，thin：薄薄的，等同于1px。medium（默认值）：薄厚均匀，等同于3px。thick：厚厚的，等同于4px。border属性的默认宽度大小是medium，2、border-style:默认none;实现一个没有下边框的边框效果：div {border: 1px solid;border-bottom: none;}或者div {border: 1px solid;border-bottom: 0;}
2021-06-17 14:13:04
7791
原创 css基础--margin二
1、块级元素的上外边距（margin-top）与下外边距（margin-bottom）有时会合并为单个外边距，这样的现象称为“margin合并”。从此定义上，我们可以捕获两点重要的信息。（1）块级元素，但不包括浮动和绝对定位元素，尽管浮动和绝对定位可以让元素块状化。（2）只发生在垂直方向，需要注意的是，这种说法在不考虑writing-mode的情况下才是正确的，严格来讲，应该是只发生在和当前文档流方向的相垂直的方向上。由于默认文档流是水平流，因此发生margin合并的就是垂直方向。2、margin合并
2021-06-11 16:41:13
499
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人