Jerry-Samon-优快云博客

原创 SpringMVC核心九大组件剖析

1 HandlerMapping(处理映射器)HandlerMapping本身是用来查找handler的也就是处理器。具体的表现形式可以是类或者方法。比如在实际开发过程中controller中进行标注的@RequestMapping的作用便是找到响应的处理器handler和intercepter.2 HandlerAdapter(处理器适配器)HandlerAdapter是一个适配器。因为SpringMVC中的handler可以是任意形式的。只要能处理请求即可。但是把请求交给servlert的时

2021-01-23 23:45:26 600

原创 Javascript核心编程 - 浅拷贝和深拷贝

JS中的数据类型：其中，前 7 种类型为基础类型，最后 1 种（Object）为引用类型，也是你需要重点关注的，因为它在日常工作中是使用得最频繁，也是需要关注最多技术细节的数据类型。而引用数据类型（Object）又分为图上这几种常见的类型：Array - 数组对象、RegExp - 正则对象、Date - 日期对象、Math - 数学函数、Function - 函数对象。在这里，我想先请你重点了解下面两点，因为各种 JavaScript 的数据类型最后都会在初始化之后放在不同的内存中，因此上面的数据类

2021-01-16 09:42:26 235 1

原创 JavaScript基础 - 数据类型总结

基本数据类型：一，基本类型：1 数字 number2 字符串 string3 布尔 boolean4 空对象指针 null5 未定义 undefined6 ES6新增的唯一值类型 symbol二，引用数据类型 1 对象数据类型 object 2 普通对象 {} 3 数组对象 [] 4 正则对象 /^$/ 5 日期对象 new Date 6 数学函数对象 Math三，函数数据类型 function数字类型Number:把字符串转换为数字：一但字符串中出现非有效数字字

2020-12-11 23:27:18 155 1

原创 Javascript学习笔记 -- this作用域

如果构造函数中含有return，那么return的值是个对象，那么this指向的是返回的对象。它的第一个参数就表示改变后的调用这个函数的对象。箭头函数本身没有return和arguments的，在箭头函数中的this实际上指的是上一层作用域的this,因此对象是不能独立形成作用域的。因此，这时的运行结果为0，证明this指的是全局对象。作为构造函数使用，通过构造函数生成一个函数，this指向的就是这个对象。它是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用。那么，this的值是什么呢？

2020-09-08 23:04:37 391 1

原创 Docker实战 -- Springboot + Vue 工程发布部署手记

项目背景为 Springboot Vue Node Mysql发布环境 Linux CentOS准备工作进行配置Linux的基础环境 Java Node Mysql大概分为五个步骤：1 工程文件上传至Linux(通常由Git进行同步)2 编写DockerFile3 制作Docker镜像文件4 制作容器5 容器发布一 Linux工程文件上传：通常使用Wi...

2020-05-07 22:40:01 283

原创 React开发高级篇 - React Hooks以及自定义Hooks实现思路

初始状态（initialState）：这是 state 的初始值。更新函数（setState）：这是一个你可以调用以更新 state 的函数。当前状态（current state）：这是 state 的当前值。更新函数（setState）：用于更新 state 的函数。具体解释：useState 允许你在函数组件内部使用状态。这是通过将状态存储在组件的执行上下文中实现的，而不是像类组件那样存储在实例对象中。

2024-12-08 18:16:42 1537

原创 React开发高级篇 - 高阶组件HOC技术总结系列二

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。简单点说，就是组件作为参数，返回值也是组件的函数，它是纯函数，不会修改传入的组件，也不会使用继承来复制其行为。相反，HOC 通过将组件包装在容器组件中来组成新组件。HOC 是纯函数，没有副作用。

2024-12-07 21:41:06 520

原创 React开发 - 技术细节汇总一

Immutable Data 就是一旦创建，就不能再被更改的数据；对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象；Immutable 实现的原理是 Persistent Data Structure（持久化数据结构）：也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。

2024-12-07 16:06:41 1089

原创 Vue SSR基础介绍与实践

在没有AJAX的时候，也就是web1.0时代，几乎所有应用都是服务端渲染（此时服务器渲染非现在的服务器渲染），那个时候的页面渲染大概是这样的，浏览器请求页面URL，然后服务器接收到请求之后，到数据库查询数据，将数据丢到后端的组件模板（php、asp、jsp等）中，并渲染成HTML片段，接着服务器在组装这些HTML片段，组成一个完整的HTML，最后返回给浏览器，这个时候，浏览器已经拿到了一个完整的被服务器动态组装出来的HTML文本，然后将HTML渲染到页面中，过程没有任何JavaScript代码的参与。

2024-12-01 12:47:49 885

原创 Vue Router开发常见技术点总结

最新的Vue Router已经发展到了 V4 版本。从发展趋势来看，后续的前端路由都会往函数式的编程方式发展（如useRouter, useRoute）。不管是React Router 还是 Vue Router，也都趋向于Hooks的使用。路由的目的：将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。

2024-12-01 11:47:05 991

原创 Vue状态管理 - Vuex & Pinia

如果是新项目建议直接使用Pinia.为什么推荐 Pinia 呢？mutation 已被弃用。我们认为它极其冗余。它们初衷是带来 devtools 的集成方案，但这已不再是一个问题了。更好的 TS 支持。无需要创建自定义的复杂包装器来支持 TypeScript，一切都可标注类型，API 的设计方式是尽可能地利用 TS 类型推理。无过多的魔法字符串注入，只需要导入函数并调用它们，然后享受自动补全的乐趣就好。无需要动态添加 Store，它们默认都是动态的，甚至你可能都不会注意到这点。

2024-11-30 16:35:08 1108

原创 Angular面试题汇总系列一

信号是一个值的包装器，可以在该值发生变化时通知感兴趣的消费者。信号可以包含任何值，从简单的原语到复杂的数据结构。信号的值总会通过 getter 函数读取，这使得 Angular 可以跟踪信号的使用位置。信号可以是可写的或只读的。可写信号可写信号提供了一个 API 来直接更新它们的值。在处理包含对象的信号时，有时直接改变该对象很有用。例如，如果对象是一个数组，你可能希望在不完全替换数组的情况下推送一个新值。});: 输入属性变化时调用。ngOnInit: 初始化完成后调用。

2024-11-26 22:07:03 1918

原创 Vue开发中常见优化手段总结

Vue 在大多数常见场景下性能都是很优秀的，通常不需要手动优化。然而，总会有一些具有挑战性的场景需要进行针对性的微调。在本节中，我们将讨论用 Vue 开发的应用在性能方面该注意些什么。

2024-11-26 17:02:42 1041

原创 Vue3新特性 - Composition Api

选项式 API 与 Composition API 属于两种心智模型，选项式就是我们所说的配置式，它通过前期的内容约定，结构规范保证程序健壮性及可读性。组合式显然比选项式灵活，除此以外，组合式实现了 UI 复用与状态逻辑复用的分离。我们都知道指令是为了增强组件的，我们常见的指令有：v-if、v-show、v-model、v-bind:value、v-on:click 等。指令的钩子函数，有点类似生命周期函数钩子指令钩子函数中的参数指令的逻辑处理// 在模板中启用 v-focus。

2024-11-25 17:34:03 909

原创 Vue2开发常用技术点剖析

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

2024-11-24 19:41:42 868

原创 Javascript编程 - this绑定

This 用法总结

2024-11-21 12:26:18 337

原创 Javascript函数式编程 - 代码组合原则

什么是代码组合f 和 g 都是函数，x 是在它们之间通过“管道”传输的值。组合看起来像是在饲养函数。你就是饲养员，选择两个有特点又遭你喜欢的函数，让它们结合，产下一个崭新的函数。代码组合：两个函数组合之后返回了一个新函数，也就是组合某种类型（本例中是函数）的两个元素本就该生成一个该类型的新元素。在 compose 的定义中，g 将先于 f 执行，因此就创建了一个从右到左的数据流。reverse 反转列表，head 取列表中的第一个元素；

2024-11-17 13:19:52 931

原创 Javascript函数式编程

纯函数是这样一种函数，即相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用。比如数组的 slice 和 splice，这两个函数的作用并无二致——但是注意，它们各自的方式却大不同，但不管怎么说作用还是一样的。slice 符合纯函数的定义：因为对相同的输入它保证能返回相同的输出；splice 却不同：会产生可观察到的副作用，即这个数组永久地改变了；// 纯的// 不纯的//=> [4,5]//=> []

2024-11-17 00:48:49 791

原创 Javascript垃圾回收机制-运行机制（大厂内部培训版本）

分代式机制把一些新、小、存活时间短的对象作为新生代，采用一小块内存频率较高的快速清理，而一些大、老、存活时间长的对象作为老生代，使其很少接受检查，新老生代的回收机制及频率是不同的，可以说此机制的出现很大程度提高了垃圾回收机制的效率。

2024-11-16 23:57:22 967

原创 Javascript模块化 - CommonJS - AMD - CMD - UMD 模块化方式详解

将一个复杂的程序依据一定的规则(规范)封装成几个块(文件)，并进行组合在一起；块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信；通过两者的比较，可以得出AMD模块定义的方法非常清晰，不会污染全局环境，能够清楚地显示依赖关系。AMD模式可以用于浏览器环境，并且允许非同步加载模块，也可以根据需要动态加载模块。CommonJS规范主要用于服务端编程，加载模块是同步的，这并不适合在浏览器环境，因为同步意味着阻塞加载，浏览器资源是异步加载的，因此有了AMD CMD解决方案；

2024-11-16 22:35:42 860

原创 Javascript高级篇 - 异步编程保姆级教程 Promise Async Await generator

await只能在async函数中使用，不然会报错；async函数返回的是一个Promise对象，有无值看有无return值；await后面最好是接Promise，虽然接其他值也能达到排队效；async/await作用是用同步方式，执行异步操作Q：async/await是一种语法糖，那么什么是语法糖呢？A：语法糖是简化代码的一种方式，用其他方式也能达到同样的效果，但写法可能没有这么便利。套了一层外衣ES6的class也是语法糖，因为其实用普通function也能实现同样效果。

2024-11-16 16:40:53 852

原创 Javascript 高级事件编程 - Axios & fetch

Ajax 是Async Javascript And Xml的简称，它是原生JavaScript的一种请求方案，利用 XMLHttpRequest 进行异步请求数据，实现无感刷新数据；Fetch 是 ES6 新推出的一套异步请求方案，它天生自带 Promise，同时也是原生的，如果在较小项目中为了项目大小着想和兼容性不是那么高的前提下不妨可以用它来进行异步请求也是不错的；Axios 是基于 Ajax 和 Promise 封装的一个库，可以利用Promise来更好的管控请求回调嵌套造成的回调地狱；

2024-11-16 12:09:44 1466

原创 JavaScript高级篇 - 浏览器事件详解 DOM事件以及独立封装事件Util和Ajax封装

console.log('我是DOM0级事件处理程序');console.log('我是DOM2级事件处理程序');}, false);console.log('我是IE事件处理程序')})DOM2级的好处是可以添加多个事件处理程序；DOM0对每个事件只支持一个事件处理程序；通过DOM2添加的匿名函数无法移除，上面写的例子就移除不了，addEventListener和removeEventListener的handler必须同名；

2024-11-15 23:17:37 964

原创 Javascript高级修炼 - 类数组对象arguments 与继承

所谓的类数组对象:拥有一个 length 属性和若干索引属性的对象只能通过 Function.call 间接调用。

2024-11-15 16:35:05 687

原创 Javascript面试对象编程 - 手写apply call bind new

内存分布：改变后：改变前：改变后：call() ：在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。注意两点：1）首先第一步：这个时候 this 就指向了 foo，但是这样却给 foo 对象本身添加了一个属性，所以们用 delete 再删除它即可。所以我们模拟的步骤可以分为：根据上述思路，提供一版：call除了可以指定this，还可以指定参数可以从 Arguments 对象中取值，取出第二个到最后一个参数，然后放到一个数组里。上述代码的Arg

2024-11-15 09:51:00 886

原创 JavaScript核心编程 - 原型链作用域与执行上下文

}执行过程如下：1.checkscope 函数被创建，保存作用域链到内部属性[[scope]]2.执行 checkscope 函数，创建 checkscope 函数执行上下文，checkscope 函数执行上下文被压入执行上下文栈3.checkscope 函数并不立刻执行，开始做准备工作，第一步：复制函数[[scope]]属性创建作用域链4.第二步：用 arguments 创建活动对象，随后初始化活动对象，加入形参、函数声明、变量声明AO: {length: 0},。

2024-11-10 21:29:42 996

原创前端开发中ES6的技术细节二

定义：用于定义基本操作的自定义行为本质：修改的是程序默认形为，就形同于在编程语言层面上做修改，属于元编程(meta programming)元编程（Metaprogramming，又译超编程，是指某类计算机程序的编写，这类计算机程序编写或者操纵其它程序（或者自身）作为它们的数据，或者在运行时完成部分本应在编译时完成的工作一段代码来理解。

2024-11-07 20:37:52 1111

原创前端开发中常见的ES6技术细节分享一

var: 在ES5中，顶层对象的属性和全局变量是等价的，用var声明的变量既是全局变量，也是顶层变量注意：顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象使用var声明的变量存在变量提升的情况在编译阶段，编译器会将其变成以下执行使用var，我们能够对一个变量进行多次声明，后面声明的变量会覆盖前面的变量声明在函数中使用使用var声明变量时候，该变量是局部的而如果在函数内不使用var，该变量是全局的let : let是ES6新增的命令，用来声明变量用法类似于

2024-11-06 16:45:26 1031

原创 2024 CSS保姆级教程四

CSS动画（CSS Animations）是为层叠样式表建议的允许可扩展标记语言（XML）元素使用CSS的动画的模块即指元素从一种样式逐渐过渡为另一种样式的过程常见的动画效果有很多，如平移、旋转、缩放等等，复杂动画则是多个简单动画的组合。css实现动画的方式，有如下几种：transition 实现渐变动画transition的属性如下：.basewidth;height;display;;;;;;;;;/*简写*/*/width;height;;;;</</

2024-11-05 17:13:27 904

原创 2024 CSS保姆高阶教程 - 重排重绘

当我们对 DOM 的修改导致了样式的变化（color或background-color），却并未影响其几何属性时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了重绘。当你获取布局信息的操作的时候，会强制队列刷新，包括前面讲到的offsetTop等方法都会返回最新的数据因此浏览器不得不清空队列，触发回流重绘来返回正确的值.在页面初始渲染阶段，回流不可避免的触发，可以理解成页面一开始是空白的元素，后面添加了新的元素使页面布局发生改变。因此浏览器为了获取这些值，也会进行回流。

2024-11-05 16:41:28 891

空空如也

空空如也