自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

cookcyq__的博客

Keep leaning!

  • 博客(80)
  • 收藏
  • 关注

原创 CSS & JS 关于设置 overflow: auto; 元素无法监听滚动问题

是否是 height:100% 搞的鬼<!DOCTYPE html><html><head> <title>Test</title> <style type="text/css"> #box{ height: 100%; overflow: auto; } h1{ height: 100px; } </style></head><body><d

2022-03-02 21:37:09 1357

原创 git & 关于git reset --soft / --hard / --mixed 的区别

–soft: 之前的修改保留在暂存区.–mixed (default): 之间的修改保留在工作区–hard: 之前的修改直接丢掉举例准备工作首先我们先做一下准备工作:新增两条记录新建 1.txt 文件,并提交到本地仓库。git inittouch 1.txt && echo 'Hello,world' > 1.txtgit add .git commit -m'新增 1.txt'新建 2.txt 文件,并提交到本地仓库touch 2.txt &&am

2022-02-28 20:46:42 452

原创 PHP & 理解 Laravel 中 Jobs & Queue (任务队列)的作用、使用

一、介绍1.2 什么是任务现实中每件事都可以当做一个任务,而在业务中,比如发送邮箱就是一个任务,推送通知就是一个任务,定时删除 log 也是一个任务,你甚至可以说输出一个hello,world 也是一个任务。1.2 什么是队列队列这词听起来很抽象,但其实它的构成就是把所有任务放到一个容器里面就叫做队列[任务1, 任务2, 任务3]它的执行顺序是任务1、任务2、任务3、即FIFO (先进先出) 模式。二、任务队列有什么用作用解决阻塞问题:当某个任务执行时间耗费很久时且响应结果不受影

2022-02-27 08:42:35 3006

原创 PHP & Laravel 中 Facades 与 Dependency Injection(面门、依赖注入) 的用法、区别

一、门面与依赖注入的区别门面是静态调用依赖注入是实例调用二、使用方式三、门面与 help function 有何区别两者之间没有啥不同,有时 Facades 内部也是调用了 helper functions,像下面是等价的return Illuminate\Support\Facades\View::make('profile');return view('profile');...

2022-02-26 13:47:33 344

原创 PHP & 理解 Laravel 中的 Dependency Injection (依赖注入)作用,以及 Service Container

一、什么是依赖注入依赖注入 名词看起来很抽象,但理解和用起来却异常简单。它最基本的作用就是为我们 免写 new 和 implements,是的就是这么简单,不要被这个抽象名词给吓到。二、正常使用使用 Laravel 提供的 依赖注入 很简单,这里有几种使用方式。在外部定义一个 ToolsService 类,然后作为参数传递进去// route/web.phpuse Illuminate\Support\Facades\Route;class ToolsService{ public f

2022-02-25 20:12:56 602

原创 PHP & 理解 Laravel 中 Event & Listener 的作用和使用

1. Event 和 Listener 是什么、有何作用Event 与 Listener 两者不可分割,是要结合在一起使用的,触发 一个 Event ,下面绑定的 Listeners 就会跟着触发。事实上我们用普通函数也可以同样实现 Event & Listener 功能,但设计模式中规范了一个类只做一件事,即采用单一原则。不过业务总是会发生一个类包含多件事,为了能够保持单一原则, Event & Listener 就可以派上用场,所以本质上就是将多个功能抽象提取出来放到 Event

2022-02-20 10:27:20 1594

原创 PHP & 理解 autoload 、PSR-0、PSR-4 的因缘并分析 PS0-0 与 PSR-4 的差异到底在哪里

1. include & require我们知道一个 A.php 文件若想引入 B.php 文件里的类,就需要通过 include / require 的方式将 B.php 引入。这种方式对小项目来说没啥问题,但对大型项目来说,通常会包含很多公共文件,比如:Foo/Bar/Dog.php,按照传统方式我们在每个所需的地方将这个文件引入即可,但这样会造成如下问题:每个地方都要引入 Foo/Bar/Dog.php ,操作实在繁琐代码量增多重复粘贴容易出现残漏情况那有没有办法解决这个问题呢

2022-01-30 09:32:54 1775

原创 PHP & 理解 Namespace (命名空间)

前言假设我们有 Tools/A/Foo.php 、Tools/B/Foo.php 文件,这两个 Foo.php 定义了同一个类,然后从 C.php 引入这两个文件,大家说会出现什么情况?代码如下# Tools/A/Foo.phpclass Foo{ public function __construct() {} public function say() { echo "Hello,world"; }}# Tools/B/Foo.phpclass Foo{ public funct

2022-01-27 11:07:42 387

原创 JS 什么是浅拷贝和深拷贝、有什么区别、作用

前言本文的浅拷贝、深拷贝只有引用类型,基本类型没有这概念,如果你还不知道什么是基本类型 / 引用类型 可以参考前面写过的 JS 什么是基本类型和引用类型,然后再回头看本文,或许对你有帮助,下面开始进入正文。1. 什么是浅拷贝拷贝的只有一层,多层会受影响(这个影响指的是修改数据时双方都会同步更新,无法真正的断开)。浅拷贝方式以下有几种1、使用扩展符 [...]代码如下let colors = ['red', 'orange', 'blue', 'yellow', [{name: 'Jack'}]

2022-01-07 21:05:34 1209

原创 HTML & JS 锚点定位的几种方式及优缺陷

一、HTML 锚点定位优点:1、页面刷新依然锚点到对应位置缺陷:1、地址栏上会出现 #2、没有丝滑滚动效果第一种:绑定 id<!DOCTYPE html><html><head> <title>Test</title></head><body><a href="#sixteen">点击</a><h1>1</h1><h1>2</

2022-01-04 22:51:36 2718

原创 JS 什么是基本类型和引用类型、有什么区别?

一、基本类型1、基本类型有:undefined / null / number / string / boolean / bigint / symbol2、基本类型数据放在栈内存中3、基本类型数据是不可变的let str = 'hello,world'str[0] = 'x'console.log(str) // 输出:hello,world 证明第 3 点,数据是不可变的// 误区:重新给 str 赋值不代表数据是可变的,其本质是重新开辟一份新的数据放在栈内存中str = 'Tony'

2022-01-03 21:48:05 3074 1

原创 JS 关于 this 指向的几种情况

一、this 指向 window1、全局函数里面的 this 指向 window2、箭头函数里面的 this 指向 window// 定义全局变量 title 与函数 foovar title = 'hello,world' // 注意:若使用 let 定义则不属于全局变量function foo() { console.log(this.title)}function arrow() { let title = 'hello,arrow' return () => { re

2022-01-02 14:57:33 3865

原创 JS 什么是函数节流、函数防抖、有什么区别、作用是什么?

1、前文函数节流 和 函数防抖 虽然这俩名词听起来很抽象,但理解起来却跟纸老虎似的,不过它们在实际工作中用的频率确实非常高,因此这两个名词概念是必须要掌握的,下面我们开始进入正文。2、什么是函数节流假设我们有个搜索输入框,正常情况下用户每输入一次我们就会拿它的值去请求相应数据,如图:我们可以看到每按一次 m 就会请求一次,图中按了 9 次 就会请求 9次,假设有 10w 个人按照这种频率同时输入,对于小企业来说服务器应该是扛不住的,解决这个问题也很简单,既然频率那么快,那我们就把频率降低设置每隔

2021-12-26 22:23:03 512

原创 scp 和 sftp 是什么、怎么用

前言scp 和 sftp 是一种远程文件加密传输协议,讲通俗点就是用来操控本地/远程文件,不知道你注意到了没有,它们开头都带了 s,是的,它们嵌套了一层 ssh 加密协议。像 sftp 它的传统版本就是 ftp,但这种协议不安全,传输数据是都是明文的,很容易受到攻击窃取,所以才有了后来的 sftp,其实就跟 http / https 同个道理。如果你还没了解过 ssh 可以参考我之前写过的 ssh 是什么、有什么用 ,不想了解也没关系,因为这两命令使用起来非常简单,下面我们进入正文。1. scp

2021-12-21 21:25:58 7522 5

原创 ssh 端口转发是什么、有什么用

前言一开始我对 ssh 端口转发这个名词概念很模糊,听起来也很晦涩难懂,不知道它的作用到底是什么,有什么用处,于是便开始查找相关资料、理解、运用,后来发现其实也没那么复杂,理解和用起来异常简单。首先,ssh 端口转发可分为:本地端口转发、远程端口转发、动态端口转发下面我会单独给每种端口转发类型进行讲解。1. 本地端口转发首先在本地主机运行:格式ssh -L local-port:target-host:target-port tunnel-host -N案例ssh -L 8080:wwww

2021-12-20 21:17:07 2148 2

原创 ssh 是什么、怎么用、有哪些误区、

前言相信有少许人包括我曾经认为 ssh 就是用来免密登录的,其实不然,它可涉及到非常多的东西,像 sftp / scp / winscp / 等都离不开 ssh,下面我们开始进入正文。ssh 是什么ssh 是一种远程加密传输协议,并不是所谓的免密登录这一作用,那只是它的一小部分,你可以理解它跟 https 一样,是一种加密协议,有助于提高安全性,这样是不是更好理解了?另外 ssh 在许多系统中都内置了,如 window、linux、macssh 有什么用ssh 加强了远程应用程序,它代替了传统远

2021-12-19 12:09:31 4050

原创 Git 配置 https 或 ssh 免密登录

提示: git 本身就属于 linux 环境,因此 window 使用 git 是同等于 linux 的下面开始进入正文https 配置第一种:长期存放账号和密码 并放在windows 或 linux凭据中git config credential.helper store第二种:设置凭据有效期,其单位为秒,下面表示1个小时后账号和密码将过期需要重新登录git config credential.helper 'cache --timeout=3600' 以上任意一种配置后重新使用 p.

2021-12-16 21:48:16 2901

原创 Git 取消 git 文件跟踪/监听的几种方式及注意事项

前言:为什么要取消文件监听?取消文件监听自有它的好处,比如平时开发你可以使用自己的脚本对项目进行更改、打补丁、等等。最常见的手段就是直接修改项目的配置文件 .gitignore (如果没有就创建一个) 然后写上你要忽略的文件,比如node_modules/dist/test/config/index.js但问题来了, .gitignore 的修改会被 git 监听到,如果你不介意的话,那么到这里就结束了,但如果你也不想要 .gitignore 也被监听到,那就继续往下看。第一种:–assum

2021-12-15 22:22:59 5317

原创 Git 命令缩写配置/删除

日常工作中经常用到 git 命令,敲久了难免会感到啰嗦、疲劳,比如git push origin your_branchgit pull origin your_branchgit cherry-pick log等等都是经常使用的,为此有必要给一些常用的命令进行缩写配置,提高工作效率。当前项目配置别名方式1:git config alias.名字 "写上命令"// 例如git config alias.ps "push origin"// 使用git ps master// git

2021-12-15 07:48:04 777

原创 JS File 和 Blob 是什么

File / Blob 是什么Blob 是最原始的文件对象,File 是基于 Blob 改造的,因此 Blob 的属性/方法在 File 中同样可以使用,你可以理解为 File === Blob,像 input 选择文件后会返回的文件信息就是属于 File怎么操作 File / BlobJS 提供的 FileReader 、URL.createObjectURL() 都可以处理 File / BlobFileReaderFileReader 可以用来读取 File / Blob , input 选

2021-12-14 21:37:07 2420

原创 css 总结日常工作用到的选择器

css 选择器是日常工作中必须要掌握的一部分,事实上只要能灵活运用它,是可以节省许多 JS 的,这点我深有体会,关于 css 选择器怎么使用官方已经足够详细了,而且掌握选择器不是一天两天的事,需要自己不断积累运用,这里不在阐述,下面是笔者整理日常工作中长用到的选择器列表供给新手看,以免学习太多比较偏僻的选择器。选择器标签选择器:尽量少用,因为 css 的计算从右往左,而标签又是全局性的,性能略差div / span / a / nav / haeder / main / footer / form

2021-12-13 08:04:28 570

原创 css 块元素/内联元素的 padding / margin / border / outline 排版规则

padding / margin / border / outline 是 css 日常工作中经常用到的几个属性,而在 html 标签中有两种元素类型:块元素(占用一行)自动换行 / 内联元素(占用内容)不换行比如 div 就是块元素、 span 就是内联元素。那么对于这两种元素类型设置这些属性后会有什么变化呢?其实我们只需事先记住:内联元素设置的只会影响内联元素、块元素设置的只会影响块元素,然后再结合下面的案例,相信你很快就可以明白是什么意思。padding块元素:包含元素尺寸、仅影响所有块

2021-12-12 10:19:41 486

原创 css 总结日常工作用到的 px / % / rem / em / vh / vw 尺寸单位

css 关于尺寸单位 px / rem / em / vh / vw

2021-12-12 07:29:10 520

原创 css var() 变量的用法、作用

css var 变量的用法、好处

2021-12-11 22:08:39 1289

原创 css 几行代码实现 <>箭头、三角形▲

css 几行代码就能实现上下左右箭头 > < …

2021-12-11 14:27:37 1213

原创 css :before / :after 伪类选择器的真正作用及使用场景

css :before / :after 伪类选择器的真正作用及使用场景

2021-12-10 21:28:17 6082 8

原创 Js & Vue 实现瀑布布局的几种思路

实现瀑布布局思路方案1: 每个元素设置绝对定位实现思路为每个元素设置 left / top取列数高度最小的那列作为本次插入目标优点:实现过度效果更灵活,比如删除一个元素时,所有元素重新排位,可以使布局错乱感较美观。缺陷:元素都是定位的,内容动态变化时每个元素的位置得重新计算。效果图方案2: 先布列,再分配元素实现思路提前创建好列数取列数高度最小的那列作为本次插入目标优点:计算量较少,每列的元素高度随内容进行自适应。缺陷:动画效果较少,比如删除一个元素

2021-12-09 22:03:03 450

原创 Vue3 关于 reactive 函数嵌套 computed / inject / props 的情况

关于 Vue3 reactive 函数嵌套 computed / inject / props 的情况

2021-12-09 08:01:07 3876

原创 Vue3 学习指南总结(不定期更新)

以下是笔者整理 vue3 日常工作所用到的文章,会不定期更新,如果是新手的话建议按照顺序阅读。

2021-12-08 21:04:47 581 1

原创 Vue3 如何使用多语言 vue-i18n

Vue3 如何使用多语言 vue-i18n

2021-12-07 20:38:19 1707

原创 Vue3 如何使用 vuex

Vue3 如何使用 vuex

2021-12-06 21:58:26 1438 2

原创 Vue3 如何使用 vue-router 以及路由权限拦截

Vue3 如何使用 vue-router 以及路由权限拦截

2021-12-06 21:19:25 5232

原创 Vu3 setup 函数的用法、作用

Vu3 setup 函数的用法、作用

2021-12-03 20:16:51 1831

原创 Vue3 理解 provide / inject 的作用、使用

通过上面案例我们还能清楚的看到父组件和子组件任意方改动数据时都会同步更新,但建于后续的维护,官方的推荐做法是由调用。属性,这里就会有问题,如果父组件的数据需要送到 N 层子组件,那么就要传递 N 次。多层嵌套的问题,有了它,只需声明一次数据就够了,使用方式也很简单。本文就到这里,对于使用 TS 项目的同学,建议前往。父组件中管理并提供函数,子组件只需引入调用即可。函数的组件负责维护,这里便是由父组件。函数,使用方式也很简单,是。父组件的数据,我们只需在。函数导出数据, 然后。的数据, 子组件只需。

2021-12-02 20:22:10 8623 2

原创 Vue3 理解 toRef 和 toRefs 的作用、用法、区别

Vue3 轻松理解 toRef 和 toRefs 的作用、用法、区别,并举例一些简单案例。

2021-12-01 21:46:46 33553 21

原创 Vue3 理解 ref 和 reactive 的用法、区别

Vue3 理解 ref 和 reactive 的用法、区别Vue3 新出的这俩属性 ref / reative 跟 Vue2 中的 data 一样是用来定义数据的,使用了这两个后, data 基本就用不到了,下面是笔者对这两个属性的一个总结:ref 常用于基本类型:Boolean / Number / String / ...reactive常用于引用类型:Object / Array ....用法如下:<template> <div v-if="show">

2021-11-29 21:16:46 2966

原创 Vue 理解 v-for 中 key 的真正作用

3333

2021-11-28 10:00:36 402

原创 TypeScript 日常基本语法

是一款用来检查 Javascript 数据类型的工具语言。帮助开发者在代码编译成 JavaScript 前检测数据类型是否正确,如果不正确则给出相应的 提示,有助于开发效率和代码的稳定性。每个项目在使用 时,根目录都会生成一个 文件,这个文件可以用来告诉 在编译器期间时使用什么样的规则去进行检测,下面是默认配置:TS 的配置选项有很多,这里就不一一演示了,有兴趣的自行查阅相关资料,接下来我们开始进入正文。2. 定义元组元组也属于数组,不同的是它可以定义,不过有一些地方需要注意,看代码:3.

2021-11-27 08:18:03 807 2

原创 Js & Vue 使用 appendChild 后源元素(节点)消失了

据官方文档 [https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild]里面的开头说明:明确指出源节点消失是引用问题,要想保留源(元素)节点可以使用 Node.cloneNode(true) 属性,其中 true 表示深拷贝。...

2021-11-24 21:41:22 1576

原创 Js & Vue 几行代码实现一个简单的滚动加载触发(思路)

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar

2021-11-24 21:33:11 604

ChromeSetup

压缩包

2024-10-17

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除