- 博客(76)
- 收藏
- 关注
RSS订阅原创 Webpack & 理解 input & output 概念
如果还没用过 Webpack 请先阅读再回头看本文。Webpack 的核心只做两件事，输入管理（Input Management）和输出管理（Output Management），什么花里胡哨的插件和配置都离不开这俩概念，带着俩概念去看文档我相信你会有所收获，而不再被密密麻麻的配置搞得云里雾里。
2023-10-21 08:38:58
470
原创 Webpack & 基础入门以及接入 CSS、Typescript、Babel
Webpack 是一款 JS 模块化开发的技术框架，其运作原理是将多个 JS 文件关联起来构成可运行的应用程序。Webpack 拥有丰富的 plugins / loaders 插件生态圈，可以让 js 识别不同的语言如 .css, .scss, .sass, .json, .xml, .ts, .vue, .tsx 等等，这也让 Webpack 至今仍然在许多项目中仍有一席之地。尽管现在的构建工具百花齐放，如 vite, vue-cli, craco, esbuild, glup, rollup。
2023-09-30 14:00:53
2018
原创 JS & Lottie web 动画的使用
Lottie 是一款兼容跨平台 Android/IOS/Web 的动画操作库，只需引入一份 JSON 文件便可播放动画。JSON 文件是由一款叫做俗称AE的设计软件通过BodyMovin插件导出的。作为前端人员来说，我们不用关心如何制造这份 JSON 动画文件，是由设计师来提供的。
2023-09-22 07:15:55
793
原创 CSS & 实现让最后一排元素向左对齐并且整体要居中的几种方式
关于 grid 布局的更多用法可参考文档，这里我们只要了解 grid-tempelate-columns（设定列宽）、 gap（每个组件的外边距） 即可。整体不居中的其实是”容器宽度“与每排组件的宽度总和没有形成等量关系导致的，我们可以给容器设定。然而这种方案的缺陷是，若产品要求每排组件数量从 4个 改为 8 个时，我们又得重新计算。来完成，但带来的问题就是上述所说的，最后一排组件不会向左居中。以下所指的”组件“ = ”子元素“，”容器“ = ”父元素“。本文就到这里，若有更好的方案欢迎指出。
2023-09-09 23:46:00
981
2
原创 CSS & 滚动容器与固定 Tabbar 自适应的几种方式
其实，header 不用 fixied 也能达到吸顶效果，其原理是，给容器定高 + overflow 实现自己的滚动容器，但如果使用了错误的单位，比如本文一开始说的。这类动态计算 px 的单位在 IE9 前是不支持的，这里可以考虑借助 JS 提供的 getBoundingClientRect 函数来实现。即保留了原生滚动（不用设置 overflow），也实现了自适应，解决了底部留白的问题。而导致的，下面我将会介绍如何使用其它方案来解决。本文就到这里，若有问题或其它更好的方案欢迎指出。
2023-08-29 22:42:18
402
原创 Rollup & 的作用、使用教程、支持 Vue、以及与 Webpack / Babel 的区别
Rollup工具可以将代码转成不同模块，实现一套代码多端（浏览器/Node）引入。浏览器（代码通过 Script 标签引入）AMD（兼容 requirejs.js 框架）CommonJS（Node.js 代码通过 CJS 方式引入）UMD （浏览器、AMD、CJS 均支持，是目前最常见的模块选择方式）后面会提到每个命令的作用，这里了解即可。
2023-07-16 22:04:56
833
1
原创 JS & Node 模块化解释：AMD、UMD、CommonJS、 ESM
AMD就是为了解决命名污染而研发的，同时还支持按需加载，是第一个引入模块化开发的规范插件，要想使用AMD语法得借助一款插件RequireJS。注意，AMD 只适用于浏览器，虽然也支持 Node，但不如 Node 自家的 CJS，后面会讲。CommonJS也常被称为CJS，与ADMI一样属于模块化语法，不过它是用来兼容后端Nodejs语言，庆幸的是，CJS在 Node.js 中已内置，开箱即用，无需引入插件。UMD是AMDCommonJS。
2023-07-08 22:22:59
1412
1
原创 Vue3 & JSX 插槽、v-model 的用法以及 React JSX 的区别
Vue3 JSX 插槽、v-model 的用法以及与 React JSX 的区别。
2023-07-01 14:42:49
3724
2
原创 JS & setTimeout/setInterval、requestAnimationFrame 的关系以及回调函数、Promise、async/await 异步操作
掌握 setTimeout、回调函数、Promise/async 异步操作含义
2023-06-21 08:34:02
505
原创 JS & 介绍 Babel 的使用及 presets & plugins 的概念
Babel 给 ES6/7/8/9 Typescript、React / Vue3 JSX 等"语法糖"带来无限的可能。
2023-06-17 17:43:08
2543
原创 JS & 闭包、作用域的关系
闭包这词看起来虽高大上，但理解起来却跟纸老虎一样，非常容易理解，闭包指的是一组函数带有引用关系的，换句话说，函数内部访问外部的函数变量或属性就会构成闭包。所以，闭包在 JS 中无处不在。
2023-06-05 22:26:11
51
原创 JS & CSS 关于 Shadow dom 的用法
你是否好奇过，浏览器自带的元素的样式是如何实现的，例如videoinput，又或者在某些网站中看到一些非浏览器自带且没见过的元素？如果你打开 F12 查看定位该元素的信息，你会发现啥都没看到！其实它只是默认情况下被设置隐藏了，这里可以打开控制面板，按住 F1，将勾选即可：这便是 Shadow DOM 技术，如果你看到了一些非原生标签，它也是用到了 Shadown DOM ，下面我将简单介绍它的用法。
2023-05-26 09:34:31
1247
原创 数学算法&组合与排序
组合可以是现实的一切事物、例如 [衣服，鞋子，眼镜...] 等等，也可以表示一组数字 [1, 2, 3, 4, 5] ，从个人的使用角度来说，更多的意义代表的是数字，因此下面都会以数字作为案例。排序是组合的一部分，只是在数学中需要根据’次序‘来区分开称呼。
2023-05-23 21:17:08
1173
原创 JS & Nginx 用一个简单案例解释 nginx ssi，seajs 的作用、使用
JS & Nginx 用一个简单案例解释 nginx ssi，seajs 的作用、使用
2023-04-01 22:53:09
790
1
原创 React & 用一个简单案例体验一遍 React-dom & React-router & React-redux 全家桶
用一个简单案例帮你过一遍 React 全家桶——React-dom & React-router & Redux-redux
2023-03-18 15:30:58
824
原创 Vue3 & InjectionKey 的作用、使用
在 Vue3 中使用 TS 时，父组件通过provide函数注入的数据类型往往是未知的，而子组件调用inject引入数据时也无法确定具体的数据类型是什么，这就产生了可维护性问题，比如某位同事写了下面这段代码时import {对于colors导数的数据类型我们并不知道是什么，它可以是对象 or 数组亦或是字符串，只能顺瓜摸藤找到它的 provide，对于小项目找一下可能不花费什么时间，但对于大型项目来说很明显是不可取的，于是官方提供了函数来对传参进行类型约束，确保父子间传递的数据类型是可见、透明的。
2023-01-24 15:41:17
2884
原创 Vue3 & app.use 与 install 函数的作用
以上代码的作用在 vue 官方都有解释，但它还隐藏了与 vue-cli 构建有关的一个很有用的功能，类似的，其它插件如 i18n、vuex、vant 等都要借助 app.use 引入，构建属于自己的组件库，这样既可以单独维护，也可以减少主体项目的代码量。命令，此命令可以将文件打包成一个可作为依赖导入的 js 库，在 vue3 中，默认初始化 vue 的方式是这样的。方法，实现组件自引，一个库不止一个组件，你可以在。方法会在引入插件时自动被 vue 调用，方法，是的，组件本身也是一个对象，
2022-10-20 22:08:09
8201
原创 Vue3 & 详解 vue-cli 使用 --target lib 打包的方式
目前网上大部分的打包流程都不能满足我的理解和需求，而官方的解释也只说明一半，这次我就干脆将 vite/vue-cli 这两者的打包流程详细梳理下。在 vue-cli 使用打包项目后，默认会提供一个入口（通常是 index.html），然后引入一个 js 入口文件完成页面的渲染。其实 vue-cli 还支持将项目作为一个库的方式来进行打包，这里需要借助命令 ，此命令会将入口文件打包成一个库吗，具体可参考官方解释接下来我会逐步详解如何构建属于自己的库。
2022-10-15 17:16:40
5443
5
原创 代码规范 & 详细解释 husky、prettier、eslint、lint-staged 的作用和使用
详细解释 husky、prettier、eslint、lint-staged 的作用
2022-06-25 23:12:28
10066
9
原创 TypeScript & 高级语法 & 详细解释 in、keyof、extends、索引签名、Record、typeof 的含义（不定时更新）
很早就听过 TypeScript，当时自己试了下觉得挺简单的，就是给数据声明一个类型提高可读和维护性，不过当时 TS 还不盛行，项目也没机会用到就一直落着，随着 TS 不断普及，许多项目都开始引入了 TS，这不最近在 github 看到一些 TS 代码后，心里开始吐槽：这好好的非要给 JS 装饰的这么花里胡哨的？我都认不出来这是什么语言了，你确定这是提升 JS 语言可读性而不是添乱？有同学跟我一样的请举个手！后来静下心来想了想，既来之则安之，与其吐槽，不如静下心来好好重温下 TS ，在这期间也提取了一些有
2022-06-19 15:35:06
4122
5
原创 算法 & 递归优化之尾递归
1. 什么是尾递归尾递归是递归 衍生出来的一个优化手段名词，它的作用就是减少优化内存空间，我们都知道普通的递归每一层都依赖上一层的栈的信息，当这种依赖关系数量增大时，维护的成本可想而知，有了尾递归之后，我们可以将这种依赖性化为 0，从而提升空间上的优化2. 尾递归思想尾递归的核心思想是：将每一层计算的结果以参数传递出去，最后返回这个参数即可3. 案例分析3.1 简单理解function f(n) { if (n == 1) return 5000 return f(n-1)}f(4)
2022-05-25 19:56:15
302
原创 算法 & 理解递归
1、什么是递归函数调用本身就叫递归，这没啥好说的，真正要理解的是‘递 和 ‘归’ 这字的含义，在理解这两个字的概念前，我们首先要清楚的是函数调用中会存在一个调用栈的玩意，它就跟数组一样是个容器，遵循着进栈 与 出栈，这个进与出的消除循序是按照先进后出，递归对应着就是这种关系，递就是进，归就是出，栗如 f1 函数里头调用其它函数时，f1 函数先进，等到最后才出，看例子function f3() {}function f2() { f3() }function f1() { f2() }f1()
2022-05-23 09:57:15
130
原创 算法 & 理解快速排序
1. 什么快速排序快速排序是冒泡排序的升级版，排序本质是循环，快速循环，指的就是循环很快，那这个快速排序自然就是减少循环次数来提升更快的循环了。2. 快速排序思想快速排序主要的核心思想就是：选基点、后排序、再分治 最后递归重复2.1 选基点arr = [10, 2, 9, 12, 8, 20, 30, 4]在 arr 数组中选择任意一个数字作为左右两边比较的基点，比如我们选择 102.2 后排序将小于10的放左边、大于10的放右边arr = [2, 9, 8, 4, 10, 20,
2022-05-21 11:08:33
118
原创 Nginx & 详细举例 location -＞ index、return、rewrite、try_files、alias 各个属性的含义和注意事项
1、准备工作1.1 本案例以 centos7 系统作为演示，配置文件在 /etc/nginx/conf.d/test.conf 中，内容如下server { listen 8000; server_name 127.0.0.1; root /home/cookcyq/web/; error_page 404 /40x.html; error_page 500 502 503 504 /50x.ht
2022-04-24 16:44:22
7402
原创 Mysql & 理解字符集、排序规则的作用
1、字符集是什么在讲解字符集前，我们有必要思考一下，计算机是如何认识人类的语言的，也就是说是如何认识这些字符串的？我们都知道计算机只认识一堆 00110011… 二进制的玩意，它是怎么通过二进制认识到我们所输入的数据呢？这一切都与字符集有关。如果你懂得对象的键值对关系，对字符集的理解就轻松多了，比如：'00100001': 'A''00100010': 'B'...当用户输入 A 字符时，就会映射对应的二进制，字符集其实就是一堆字符与二进制进行关联绑定的名词。同样地，字符集的映射规则多姿多
2022-04-23 23:05:12
1408
原创 PHP & Laravel & 掌握 api 生成 token 的几种方式以及一些注意事项（坑）
介绍本章略长，采用了 3 种创建 token 方式，读者可以选择任意一节阅读，但本人建议全部看完，掌握多种生成 token 方式何乐而不为呢。准备工作创建 Laravel 项目并命名为 example-appcomposer create-project laravel/laravel example-appcd example-appphp artisan serve没有特殊情况的话可以看到项目已正常运行输出Starting Laravel development server: h
2022-04-19 14:19:16
4934
1
原创 解决报错 & PHP & TP5框架 & .env 文件产生问题如：Fatal error: Uncaught think\exception\ErrorException: in....
原因检查 .env 文件是否有特殊符号，比如注释中的 || 就是问题所在。# 这是一条注释，我加了 ||HOST=127.0.0.1.env 定义的每行每个键值对后面不要跟上注释，因为 tp5 解析时不会真正的当成是注释，而是会拼接处理，比如下面的 HOST 变量连接数据库时就会报：SQLSTATE[HY000] [2002] php_network_getaddresses: getaddrinfo failed: Name or service not known 表示获取网络地址失败
2022-04-11 17:26:27
3090
原创 解决报错 & JS & async/await & Uncaught (in promise) SyntaxError: Unexpected reserved word (at
1. 原因：在函数内使用 await 时，该函数本身必须携带 async，否则就不能使用 async/awaitconst foo = async () => { return new Promise((resolve) => { setTimeout(() => { console.log('Hello,world') resolve() }, 1000) })}const bar = () => { await foo() // 错误，ba
2022-04-05 20:31:39
6326
原创 Linux & Centos 7 & Mysql 主从同步的作用、搭建
1、什么是主从同步将一台服务器（主）的 Mysql 数据同步到另外一台服务器（从）的 Mysql 这一过程就叫主从同步。一个主服务器可以对应 N 台从（子）服务器同步同步、跟云同步的道理一样，起到一个备份、实时更新的作用而已。2、主从同步的好处与缺陷好处读写分离，减轻数据库压力，其主服务器负责写数据，从服务器负责读数据。去中心化，多台服务器保证了不用在担心某台服务器的 Mysql 挂掉而导致整个系统奔溃。缺陷操作不但就容易出现主从不同步情况，对于有强制数据的一致性的需求来说是不适
2022-03-15 21:11:08
1598
原创 Linux & Centos 7 下载 Mysql 完整详细步骤
查看 yum 有几个 mysql 包yum repolist all | grep mysqlmysql55-community/x86_64 MySQL 5.5 Community Server disabledmysql55-community-source MySQL 5.5 Community Server disabledmysql56-community/x86_64 MySQL 5.6 Communit.
2022-03-13 19:42:03
6448
3
原创 PHP & 理解 Laravel 中 Errors & Exceptions (错误与异常） 的作用、使用
一、介绍文本将从PHP原生错误/异常 讲解到 Laravel 错误/异常，耐心看完，相信你会有所收获。1.1 什么是错误在 PHP 中，最常见错误的级别有错误类型解释Deprecated比如 API 过期 ，属于低级错误Notice变量未定义Warning结果不符合逻辑，比如函数里面 $num + 100，但 $num 传递进来的是 ‘ab’Fetal致命错误，直接终止运行后面的运行，比如调用不存在的函数Prase最高级别错误，以上的都是运行
2022-03-06 16:05:38
1647
原创 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
1152
原创 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
364
原创 PHP & 理解 Laravel 中 Jobs & Queue （任务队列）的作用、使用
一、介绍1.2 什么是任务现实中每件事都可以当做一个任务，而在业务中，比如发送邮箱就是一个任务，推送通知就是一个任务，定时删除 log 也是一个任务，你甚至可以说输出一个hello,world 也是一个任务。1.2 什么是队列队列这词听起来很抽象，但其实它的构成就是把所有任务放到一个容器里面就叫做队列[任务1, 任务2, 任务3]它的执行顺序是任务1、任务2、任务3、即FIFO （先进先出） 模式。二、任务队列有什么用作用解决阻塞问题：当某个任务执行时间耗费很久时且响应结果不受影
2022-02-27 08:42:35
2504
原创 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
299
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人