- 博客(88)
- 收藏
- 关注
RSS订阅原创 前端跨域问题
代理（Proxy）也称网络代理，是一种特殊的网络服务，允许一个（一般为客户端）通过这个服务与另一个网络终端（一般为服务器）进行非直接的连接。CORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。一定要注意跨域是浏览器的限制，你用抓包工具抓取接口数据，是可以看到接口已经把数据返回回来了，只是浏览器的限制，你获取不到数据。发送请求中，配置请求的根路径。
2024-04-23 21:55:26
336
原创 Less与Sass
语法：SCSS是基于CSS的超集，它使用和CSS相同的语法，并通过添加一些新的功能和规则来扩展CSS。Less语法与常规CSS语法非常相似，但引入了一些新的特性和语法规则，使得样式表的编写更加简洁和可维护。SCSS和Less是两种流行的CSS预处理器，它们在语法和功能上有一些区别，尽管它们的目标都是提供更灵活和可维护的CSS编写方式。这些是SCSS和Less之间的一些主要区别。SCSS（Sassy CSS）是一种CSS预处理器，它是CSS的扩展，允许开发者使用更灵活、可维护和可扩展的方式编写样式表。
2024-02-01 16:02:23
1145
原创 React Hooks 详解之 useState
如果我们在条件语句中定义了 useState，这样的话会导致可能第一次只有两个 useState，对应的count和num的索引为0和1。这样的话num的索引值发生了变化，它在不同情况下从数组中取得的值就是不一样了，不是它自身的值，这样就会导致错误。通过上面的介绍，可以加深我们对useState的理解，当然这不是官方的实现方式，只是简化后便于理解的方式。的值，每次修改后都会触发 Count 组件的重新渲染。根据上面分析的 useState 的功能，我们初步实现一个简单的 useState。
2024-01-29 11:07:10
1227
原创 函数式编程
其实，函数式编程是一种编程范式，除了函数式编程之外还有命令式编程，声明式编程等编程范式。命令式编程命令式编程是面向计算机硬件的抽象，有变量、赋值语句、表达式、控制语句等，可以理解为 命令式编程就是冯诺伊曼的指令序列。它的主要思想是关注计算机执行的步骤，即一步一步告诉计算机先做什么再做什么。创建一个存储结果的集合变量 results遍历这个数字集合 numList；一个一个地判断每个数字是不是大于 5，如果是就将这个数字添加到结果集合变量 results 中。i++){声明式编程声明式编程。
2023-12-05 15:02:12
268
原创 算法中的时间复杂度，空间复杂度
算法（Algorithm）是指用来操作数据、解决程序问题的一组方法。对于同一个问题，使用不同的算法，也许最终得到的结果是一样的，但在过程中消耗的资源和时间却会有很大的区别衡量不同算法之间的优劣主要是通过时间和空间时间维度：是指执行当前算法所消耗的时间，我们通常用「时间复杂度」来描述。空间维度：是指执行当前算法需要占用多少内存空间，我们通常用「空间复杂度」来描述通常会遇到一种情况，时间和空间维度不能够兼顾，需要在两者之间取得一个平衡点是我们需要考虑的。
2023-11-28 10:19:21
294
原创 什么是算法？
因此，算法的设计和选择要同时结合数据结构，简单地说数据结构的设计就是选择存储方式，如确定问题中的信息是用数组存储还是用普通的变量存储或其他更加复杂的数据结构。算法（Algorithm）是指解题方案的准确而完整的描述，是一系列解决问题的清晰指令，算法代表着用系统的方法描述解决问题的策略机制。一个程序=算法+数据结构，数据结构是算法实现的基础，算法总是要依赖于某种数据结构来实现的，两者不可分割。日常在编写任何代码的都需要一个良好的算法思维，选择好的算法或者数据结构，能让整个程序效率更高。
2023-11-28 10:18:10
129
原创 Node.js详解
事件驱动就是当进来一个新的请求的时，请求将会被压入一个事件队列中，然后通过一个循环来检测队列中的事件状态变化，如果检测到有状态变化的事件，那么就执行该事件对应的处理代码，一般都是回调函数。例如在执行了访问数据库的代码之后，将立即转而执行其后面的代码，把数据库返回结果的处理代码放在回调函数中，从而提高了程序的执行效率。比如读取一个文件，文件读取完毕后，就会触发对应的状态，然后通过对应的回调函数来进行处理。操作的时候不会造成任何的阻塞，当完成之后，以时间的形式通知执行操作。是一个开源与跨平台的。
2023-11-16 10:01:51
644
原创 linux之shell
Bourne Again shell（bash） ，是 sh 的一个进阶版本，比 sh 更优秀， bash 是目前大多数 Linux 发行版以及 macOS 操作系统的默认 Shell。其本身并不是内核的一部分，它只是站在内核的基础上编写的一个应用程序，它和 QQ、微信等其它软件没有什么区别，特殊的地方就是开机立马启动，并呈现在用户面前。语言编写的应用程序，它是用户使用 Linux 的桥梁。变量名外面的花括号是可选的，加不加都行，加花括号是为了帮助解释器识别变量的边界，所以推荐加花括号。
2023-11-16 10:00:50
67
原创 Linux之输入输出重定向和管道
一条命令的执行需要键盘等的标准输入，命令的执行和正确或错误，其中的每一个双向箭头就是一个通道，所以数据流可以流入到文件端（通过组合符号将两者结合一起，无论进程输出的信息是正确还是错误的信息，都会重定向到指定的文件里。管道就是把两个命令连接起来使用，一个命令的输出作为另一个命令的输入。所有输入的行都将在输入结束字符串之后发送给命令。的内容作为标准输出，然后利用管道，将其作为。如果该文件已经存在，会把文件内容覆盖。如果该文件不存在，则新建一个文件。或者以追加的形式，重定向输入到。文件中，并且会清空原有的。
2023-11-15 10:04:10
335
原创 linux之用户管理
将 “其他用户” 区分为用户组成员和其他人后，若文件所有者希望对部分用户开放权限，而对其他人继续保持私有，则只需要将这部分用户与文件所有者划入一个用户组。例如，小 A 希望个人文件不被其他用户读取，而如果不对文件进行权限设置，共享了主机资源的小 B 也可以读取小 A 的个人文件，这是不合理的。以 “用户与用户组” 的概念，建立用户与文件权限之间的联系，保证系统能够充分考虑每个用户的隐私保护，很大程度上保障了。既然是多用户的系统，那么最常见的问题就是权限，不同的用户对于不同的文件都应该有各自的权限。
2023-11-15 10:02:56
1059
原创 linux 系统下文本编辑常用的命令
的默认模式，在这个模式下，你不能输入文本，但是可以让我们在文本间移动，删除一行文本，复制黏贴文本，跳转到指定行，撤销操作，等等。发展出来的一个文本编辑器，代码补全、编译及错误跳转等方便编程的功能特别丰富，在程序员中被广泛使用。是老式的字处理器，不过功能已经很齐全了，但是还是有可以进步的地方。输入模式我们熟悉的文本编辑器的模式，就是可以输入任何你想输入的内容。n：代表重复前一个搜寻的动作，即再次执行上一次的操作。如果想从插入模式回到命令模式，使用按下键盘左上角的。可以说是程序开发者的一项很好用的工具。
2023-11-14 10:11:54
127
原创 linux系统下文件操作常用的命令
文件的存储方式分为3个部分，文件名、文件内容以及权限，其中文件名的列表是存储在硬盘的其它地方和文件内容是分开存放的，每个文件名通过。是一个开源的操作系统（OS），是一系列Linux内核基础上开发的操作系统的总称（常见的有Ubuntu、centos）删除文件1不会影响删除文件2，对于硬链接来说，删除任意一方的文件，共同指向的文件内容并不会从硬盘上删除。，一旦文件1和文件2之间有了硬链接，那么修改任何一个文件，修改的都是同一块内容。使链接的两个文件共享同样文件内容，就是同样的。的一个快捷方式，它指向的是。
2023-11-14 10:10:47
274
原创 进程与线程
线程可以看做轻量级的进程，同一类线程共享代码和数据空间，每个线程都有自己独立的运行栈和程序计数器（PC），线程之间切换的开销小。：没有线程的进程可以看做是单线程的，如果一个进程内有多个线程，则执行过程不是一条线的，而是多条线（线程）共同完成的；一个进程至少有一个线程，一个进程可以运行多个线程，这些线程共享同一块内存，线程之间可以共享对象、资源，如果有冲突或需要协同，还可以随时沟通以解决冲突或保持同步。操作系统中最核心的概念就是进程，进程是对正在运行中的程序的一个抽象，是系统进行资源分配和调度的基本单位。
2023-11-13 10:04:41
196
原创 操作系统概念
操作系统是管理计算机硬件与软件资源的程序，是计算机的基石操作系统本质上是一个运行在计算机上的软件程序 ，用于管理计算机硬件和软件资源操作系统存在屏蔽了硬件层的复杂性。操作系统就像是硬件使用的负责人，统筹着各种相关事项操作系统的内核（Kernel）是操作系统的核心部分，它负责系统的内存管理，硬件设备的管理，文件系统的管理以及应用程序的管理。内核是连接应用程序和硬件的桥梁，决定着系统的性能和稳定性。
2023-11-13 10:03:55
148
原创 设计模式之发布订阅、观察者模式
然而，在发布订阅模式中，发布者和订阅者不知道对方的存在。上述过程中，如果公司自己去管理快递的配送，那公司就会变成一个快递公司，业务繁杂难以管理，影响公司自身的主营业务，因此使用何种模式需要考虑什么情况两者是需要耦合的。例如生活中，我们可以用报纸期刊的订阅来形象的说明，当你订阅了一份报纸，每天都会有一份最新的报纸送到你手上，有多少人订阅报纸，报社就会发多少份报纸。上述代码，发布者和订阅者需要通过发布订阅中心进行关联，发布者的发布动作和订阅者的订阅动作相互独立，无需关注对方，消息派发由发布订阅中心负责。
2023-11-10 10:05:33
755
原创 设计模式之代理模式
在生活中，代理模式的场景是十分常见的，例如我们现在如果有租房、买房的需求，更多的是去找链家等房屋中介机构，而不是直接寻找想卖房或出租房的人谈。代理模式的关键是，当客户不方便直接访问一个对象或者不满足需要时，提供一个替身对象来控制这个对象的访问，客户实际上访问的是替身对象。缓存代理可以为一些开销大的运算结果提供暂时的存储，在下次运算时，如果传递进来的参数跟之前一致，则可以直接返回前面存储的运算结果。使用代理模式代理对象的访问的方式，一般又被称为拦截器，比如我们在项目中经常使用。
2023-11-10 10:02:10
474
原创 设计模式之策略模式
举个例子，公司的年终奖是根据员工的工资和绩效来考核的，绩效为A的人，年终奖为工资的4倍，绩效为B的人，年终奖为工资的3倍，绩效为C的人，年终奖为工资的2倍。策略模式不仅仅用来封装算法，在实际开发中，通常会把算法的含义扩散开来，使策略模式也可以用来封装 一系列的“业务规则”上述通过策略模式完成表单的验证，并且可以随时调用，在修改表单验证规则的时候，也非常方便，通过传递参数即可调用。语句，并且违反了开放封闭原则，如果应用中还有其他的表单，需要重复编写代码。，负责接收用户的要求并委托给策略规则对象，如下。
2023-11-09 10:03:47
423
原创 设计模式之工厂模式
工厂模式是用来创建对象的一种最常用的设计模式，不暴露创建对象的具体逻辑，而是将将逻辑封装在一个函数中，那么这个函数就可以被视为一个工厂。应用场景也容易识别，有构造函数的地方，就应该考虑简单工厂，但是如果函数构建函数太多与复杂，会导致工厂函数变得复杂，所以不适合复杂的情况。上述简单工厂模式和工厂方法模式都是直接生成实例，但是抽象工厂模式不同，抽象工厂模式并不直接生成实例， 而是用于对产品类簇的创建。其就像工厂一样重复的产生类似的产品，工厂模式只需要我们传入正确的参数，就能生产类似的产品。
2023-11-09 10:02:44
193
原创 设计模式之单例模式
单例模式（Singleton Pattern）：创建型模式，提供了一种创建对象的最佳方式，这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建。在前端中，很多情况都是用到单例模式，例如页面存在一个模态框的时候，只有用户点击的时候才会创建，而不是加载完成之后再创建弹窗和隐藏，并且保证弹窗全局只有一个。现在很多第三方库都是单例模式，多次引用只会使用同一个对象，如。上述这种实现称为惰性单例，意图解决需要时才创建类实例对象。
2023-11-08 10:05:24
435
原创 常见的设计模式
不断去学习设计模式，会对我们有着极大的帮助，主要如下：从许多优秀的软件系统中总结出的成功的、能够实现可维护性、复用的设计方案，使用这些方案将可以让我们避免做一些重复性的工作设计模式提供了一套通用的设计词汇和一种通用的形式来方便开发人员之间沟通和交流，使得设计方案更加通俗易懂大部分设计模式都兼顾了系统的可重用性和可扩展性，这使得我们可以更好地重用一些已有的设计方案、功能模块甚至一个完整的软件系统，避免我们经常做一些重复的设计、编写一些重复的代码。
2023-11-08 10:03:45
574
原创 Git中的 fork, clone,branch
译为分支，其作用简单而言就是开启另一个分支， 使用分支意味着你可以把你的工作从开发主线上分离开来，以免影响开发主线。处理分支的方式十分轻量，创建新分支这一操作几乎能在瞬间完成，并且在不同分支之间的切换操作也是一样便捷。如果想将你的修改合并到原项目中时，可以通过的 Pull Request 把你的提交贡献回 原仓库。，英语翻译过来就是叉子，动词形式则是分叉，如下图，从左到右，一条直线变成多条直线。，译为克隆，它的作用是将文件从远程代码仓下载到本地，从而形成一个本地代码仓。的目录，并在这个目录下初始化一个。
2023-11-07 09:58:50
177
原创 前端常用的版本管理工具
记录文件所有历史变化，这是版本控制系统的基本能力随时恢复到任意时间点，历史记录功能使我们不怕改错代码了支持多功能并行开发，通常版本控制系统都支持分支，保证了并行开发的可行多人协作并行开发，对于多人协作项目，支持多人协作开发的版本管理将事半功倍。
2023-11-07 09:56:11
260
原创 在Vue项目中应用TypeScript
与link类似在VUE项目中应用typescript，我们需要引入一个库其是基于库而来，这个库vue官方推出的一个支持使用class方式来开发vue单文件组件的库methods 可以直接声明为类的成员方法计算属性可以被声明为类的属性访问器初始化的 data 可以被声明为类属性data、render 以及所有的 Vue 生命周期钩子可以直接作为类的成员方法所有其他属性，需要放在装饰器中可以看到上述typescript版本的vue class的语法与平时javascript。
2023-11-06 10:13:38
104
原创 在 React项目中应用TypeScript
单独的使用TypeScript并不会导致学习成本很高，但是绝大部分前端开发者的项目都是依赖于框架的例如与VueReact这些框架结合使用的时候，会有一定的门槛使用TypeScript编写React代码，除了需要TypeScript这个库之外，还需要安装至于上述使用@types的库的原因在于，目前非常多的JavaScript库并没有提供自己关于TypeScript的声明文件所以，ts并不知道这些库的类型以及对应导出的内容，这里@types实际就是社区中的库，定义了目前市面上绝大多数的。
2023-11-06 10:11:49
424
原创 TypeScript之命名空间与模块
但就像其它的全局命名空间污染一样，它很难去识别组件之间的依赖关系，尤其是在大型的应用中。在正常的TS项目开发过程中并不建议用命名空间，但通常在通过 d.ts 文件标记 js 库类型的时候使用命名空间，主要作用是给编译器编写代码的时候参考使用。这样，在一个新的名字空间中可定义任何标识符，它们不会与任何已有的标识符发生冲突，因为已有的定义都处于其他名字空间中。命名空间定义了标识符的可见范围，一个标识符可在多个名字空间中定义，它在不同名字空间中的含义是互不相干的。变量，但是所处的空间是全局的。
2023-11-02 09:59:50
111
原创 TypeScript之装饰器
后面的使用场景中，借助装饰器的特性，除了提高可读性之后，针对已经存在的类，可以通过装饰器的特性，在不改变原有代码情况下，对原来功能进行扩展。装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上。求值后必须也是一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。上述可以看到，当装饰器作为修饰类的时候，会把构造器传递进去。同样的，本质也不是什么高大上的结构，就是一个普通的函数，的三个参数，如果是类的属性，则没有传递第三个参数。是一个实验性特性，若要使用，需要在。
2023-11-02 09:58:29
290
原创 TypeScript之高级类型
可以看到，如果只是掌握了typeScript的一些基础类型，可能很难游刃有余的去使用typeScript，需要了解一些typescript的高阶用法并且typescript在版本的迭代中新增了很多功能，需要不断学习与掌握。
2023-11-01 10:17:37
59
原创 TypeScript之泛型
的时候，定义函数，接口或者类的时候，不预先定义好具体的类型，而在使用的时候在指定类型的一种特性的时候，这种情况下就可以使用泛型。类型去替代，但这也并不是很好的方案，因为我们的目的是接收什么类型的参数返回什么类型的参数，即在运行时传入参数我们才能确定类型。例如要设计一个函数，这个函数接受两个参数，一个参数为对象，另一个参数为对象上的属性，我们通过这两个参数返回这个属性的值。中，定义函数，接口或者类的时候，不预先定义好具体的类型，而在使用的时候在指定类型的一种特性。通过泛型约束就可以达到多类型约束的目的。
2023-11-01 10:15:26
302
原创 TypeScript之函数以及与JavaScript函数的区别
允许创建数项名称相同但输入输出类型或个数不同的子程序，它可以简单地称为一个单独功能可以执行多项任务的能力。上述只定义了函数的两个参数类型，这个时候整个函数虽然没有被显式定义，但是实际上。里，虽然已经支持类、命名空间和模块，但函数仍然是主要定义行为的方式，函数重载，必须要把精确的定义放在前面，最后函数实现时，需要使用。这里的函数重载也只是多个函数的声明，具体的逻辑还需要自己去写，当函数的参数可能是不存在的，只需要在参数后面加上。函数名的时候，会出现完整的函数定义类型，通过。类型的参数进行拼接，也可以接收。
2023-10-31 10:05:13
71
原创 TypeScript之类
抽象类做为其它派生类的基类使用，它们一般不会直接被实例化，不同于接口，抽象类可以包含成员的实现细节。除了日常借助类的特性完成日常业务代码，还可以将类（class）也可以作为接口，尤其在。同样，类继承后，子类可以对父类的方法重新定义，这个过程称之为方法的重写，通过。关键字，虽然本质依然是构造函数，但是使用起来已经方便了许多。基类，派生类通常被称作子类，基类通常被称作 超类。上述的类都能发现一个特点就是，都能够被实例化，在。这些属性存在于类本身上面而不是类的实例上，通过。
2023-10-31 10:02:23
74
原创 TypeScript之接口
的核心功能之一就是对类型做检测，虽然这种检测方式是“鸭式辨型法”，而接口的作用就是为为这些类型命名和为你的代码或第三方代码定义一个约定。简单来讲，一个接口所描述的是一个对象相关的属性和方法，但并不提供具体创建此对象实例的方法。是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的。去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。这些属性并不一定全部实现，上述传入的对象必须拥有。有些时候，我们想要一个属性变成只读属性，在。例如有一个函数，这个函数接受一个。
2023-10-30 10:33:27
629
原创 TypeScript之枚举类型
在日常生活中也很常见，例如表示星期的SUNDAY、MONDAY、TUESDAY、WEDNESDAY、THURSDAY、FRIDAY、SATURDAY就可以看成是一个枚举。枚举是一个被命名的整型常数的集合，用于声明一组命名的常数,当一个变量有几种可能的取值时,可以将它定义为枚举类型。包括后端日常返回0、1 等等状态的时候，我们都可以通过枚举去定义，这样可以提高代码的可读性，便于后续的维护。通俗来说，枚举就是一个对象的所有可能取值的集合。通常情况下我们很少会使用异构枚举。
2023-10-30 10:31:36
215
原创 TypeScript详解
超集，不得不说另外一个概念，子集，怎么理解这两个呢，举个例子，如果一个集合 A 里面的的所有元素集合 B 里面都存在，那么我们可以理解集合 B 是集合 A 的超集，集合 A 为集合 B 的子集。其是一种静态类型检查的语言，提供了类型注解，在代码编译阶段就可以检查出数据类型的错误。通过类型批注提供在编译时启动类型检查的静态类型，这是可选的，而且可以忽略而使用。如果缺乏声明而不能推断出类型，那么它的类型被视作默认的动态。等数据格式，对象的类型就是用接口来描述的。的语法，所以任何现有的。对于基本类型的批注是。
2023-10-27 10:12:48
59
原创 React之服务端渲染
但是像一些事件处理的方法，是无法在服务端完成，因此需要将组件代码在浏览器中再执行一遍，这种服务器端和客户端共用一套代码的方式就称之为。浏览器开始进行渲染和节点对比，然后执行完成组件内事件绑定和一些交互，浏览器重用了服务端输出的。结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程。路径，然后在已有的路由表内查找到对应的组件，拿到需要请求的数据，将数据作为。文件，用于监听3000端口的请求，当请求根目录时，返回。上面的过程中，已经能够成功将组件渲染到了页面上。
2023-10-26 10:59:24
453
原创 React之如何捕获错误
对于错误边界无法捕获的异常，如事件处理过程中发生问题并不会捕获到，是因为其不会在渲染期间触发，并不会导致渲染时候问题。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。可以看到在错误信息下方文字中存在一个组件栈，便于我们追踪错误。的内部状态被破坏，导致整个应用崩溃，这是不应该出现的现象。组件，这种组件可以捕获发生在其子组件树任何位置的。为了解决出现的错误导致整个应用崩溃的问题，错误，并打印这些错误，同时展示降级。，而并不会渲染那些发生崩溃的子组件树。也有自身对于错误的处理的解决方案。
2023-10-26 10:57:36
304
原创 React之如何进行性能优化
通过上面初步学习，我们了解到react代码层面工程层面框架机制层面通过这三个层面的优化结合，能够使基于react项目的性能更上一层楼。
2023-10-25 10:21:58
348
原创 React之Jsx如何转换成真实DOM
在react源码中，虚拟Dom转化成真实Dom整体流程如下图所示：使用React.createElement或JSX编写React组件，实际上所有的 JSX 代码最后都会转换成React.createElement(...) ，Babel帮助我们完成了这个转换的过程。createElement函数对key和ref等特殊的props进行处理，并获取defaultProps对默认props进行赋值，并且对传入的孩子节点进行处理，最终构造成一个虚拟DOM对象。
2023-10-25 10:17:42
725
原创 React之diff原理
可以准确地发现新旧集合中的节点都是相同的节点，因此无需进行节点删除和创建，只需要将旧集合中节点的位置进行移动，更新为新集合中节点的位置。如果当前节点在新集合中的位置比老集合中的位置靠前的话，是不会影响后续节点操作的，这里这时候被动字节不用动。发现新树中，R节点下没有了A，那么直接删除A，在D节点下创建A以及下属节点。过程还没完，还会整体遍历老集合中节点，看有没有没用到的节点，有的话，就删除。运算，如果不是一个类的组件，那么直接删除这个组件下的所有子节点，创建新的。节点的移动操作开销是比较昂贵的，没有。
2023-10-24 11:25:43
406
原创 React中如何提高组件的渲染效率
在实际开发过程中，前端性能问题是一个必须考虑的问题，随着业务的复杂，遇到性能问题的概率也在增高除此之外，建议将页面进行更小的颗粒化，如果一个过大，当状态发生修改的时候，就会导致整个大组件的渲染，而对组件进行拆分后，粒度变小了，也能够减少子组件不必要的渲染。
2023-10-24 11:23:48
326
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人