- 博客(72)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 前端开发工具集
在线编程1. StackBlitzStackBlitz将大家最常用的IDE Visual Studio Code 搬进了浏览器。除此以外，StackBlitz快速配置 Angular、React、Ionic、TypeScript、RxJS、Svelte等各类的JavaScript框架。有了它，只需几秒就可以开始写代码了。2. CodePenCodePen 的界面很简洁，三个编辑器和一个预览容器，并且预览效果会实时更新3.CodeSandbox4.Jsfiddle5.Jsbi...
2021-10-12 13:44:29
6673
原创 前端学习资源集合（持续更新中）
JavaScript现代JavaScript教程：最好的JavaScript学习教程，没有之一 JavaScript|MDN ：比较权威的JavaScript教程网站github排名统计github trending：https://github-trending.com/ github 中国区：http://githubrank.com/ github 全球：https://gitstar-ranking.com/静态站点搭建工具vuepress：https://www.vuepre
2021-03-24 09:34:41
121
原创 protobufjs入门小册
背景protobuf是google提供的一个开源序列化框架，类似于XML，JSON这样的数据表示语言，其最大的特点是基于二进制，因此比传统的XML表示高效短小得多。虽然是二进制数据格式，但并没有因此变得复杂，开发人员通过按照一定的语法定义结构化的消息格式，然后送给命令行工具，工具将自动生成相关的类，可以支持php、java、c++、python等语言环境。通过将这些类包含在项目中，可以很轻松的调用相关方法来完成业务消息的序列化与反序列化工作。1.protobuf.jsprotobuf.js是基于
2023-06-21 00:50:05
1492
原创 MQTT.js前端使用手册
的客户端库，使用 JavaScript 编写，主要用于 Node.js 和 浏览器环境中。是目前 JavaScript 生态中使用最为广泛的。MQTT.js广泛用于在线协同、长轮询等，需要WebSocket 网络协议的 实时的，频繁的，长时间响应的业务场景。1. 定义主题，其中分为：推送的具体主题名、订阅的主题名（可以使用+或#实现通配配置）2. 消息使用方式分为：(1)通过事件监听，调用方法。(2)直接获取并使用数据。MQTT.js主要是使用以下服务。
2023-05-26 00:56:46
731
原创 前端：Monorepo手册
onoRepoMonoRepo 是一种将多个项目代码存储在一个仓库里的软件开发策略（mono 意为单一，repo 意为 仓库）。与之相对的是另一种流行的代码管理方式 MultiRepo，即每个项目对应一个单独的仓库来分散管理。
2023-02-20 09:11:20
776
原创 实践笔记——工具包调试
1.序当你在开发组件库或其他npm库的时候，如果你想知道它在一个前端项目中被使用的效果时，你可以怎么做？通过目录路径引入 通过npm 发布到npm源后再安装调试 缺点：污染了npm版本线，且需要频繁npm install，效率也不高 package引入目录路径 缺点：需要频繁npm install npm/yarn link 使用yalc2.npm link使用1. 使用npm link建立软链在子项目里运行：npm link在父项目里运行：npm
2022-05-30 19:53:33
273
原创 浅谈 TypeScript 类型系统
讲到TypeScript一定离不开它的类型系统，强类型约束是对原本弱类型的JavaScript的补充。而相对Java、C#等后端语言的标明类型系统（Nominal Type System），TypeScript采用的是结构类型系统（Structural Type System）。标明类型系统比较的是类型本身，具备非常强的一致性要求。结构类型系统比较的并不是类型定义本身，而是类型定义的形状。高级类型type Point = { x: number; y: number;};type N
2022-03-03 19:06:25
469
原创 Three.js系列：坐标信息
1. 层级结构Three.js描述的场景Sence，是一个以Sence为根节点的层级结构，如下图所示。其中Group不是必须的，并且可嵌套的。2. 坐标差异2.1.概念世界坐标和本地坐标根据参照物的不同，Three.js将坐标分为世界坐标和本地坐标。即世界坐标是以Sence为参照进行描述的坐标信息，本地坐标是以父层级为参照进行描述的坐标信息。一般，不明确指明是世界坐标，大多说的是本地坐标信息。屏幕坐标和世界坐标在屏幕上，对于用户的操作我们能获取的只能是屏幕坐标。在处理其与
2021-12-25 00:38:36
4388
原创 一次讲清JavaScript的原型知识
1.概念实例对象、构造对象、原型对象Javascript里将对象分为实例对象和构造对象，而构造对象都包含一个原型对象，可以通过属性prototype访问。对象可以通过属性constructor访问其构造对象，通过属性__proto__访问其构造对象的原型对象。实例对象、构造对象、原型对象三者的关系，如图所示：原型链一个实例对象通过（__proto__ ）指向它的构造对象的原型对象。该原型对象也有一个自己的原型对象，层层向后直到null，构成了最终的原型链。创建对象在ES6之后的.
2021-12-11 00:29:42
712
原创 CSS布局系列一：标准、浮动、定位
标准浮动设置浮动floatnone：默认值，表示元素不进行浮动 left：表示元素浮动，并其所在的块容器左侧 right：表示元素浮动，并其所在的块容器右侧 inline-start：表示元素浮动，并其所在的块容器开始一侧 inline-end：表示元素浮动，并其所在的块容器结束一侧清除浮动clearnone：默认值，表示元素不会清除之前的浮动。 left：表示元素被向下移动，用于清除之前的左浮动 right：表示元素被向下移动，用于清除之前的右浮动。 both：
2021-12-10 00:10:22
867
1
原创 前端面试经
1面：笔试题 实现左边固定宽度右边自适应的布局，至少2种方式并简述优缺点。 递归实现fibonacci，要求带缓存。 判断是否括号匹配 设计表单提交的数据结构，至少2种方式并简述优缺点。 简述浏览器加载过程，并针对加载过程可以做哪些性能优化 自我介绍 HTTP缓存 this指向 new实现 vue 3新特性 响应式原理 diff算法 mysql索引原理，什么时候需要加索引 redis原理...
2021-11-30 12:25:04
84
原创 Web多端适应原理与方案详解
1.概念1.1.屏幕指标物理上，一个屏幕是有尺寸、像素分辨率和密度指标的。如上图所示。其中显示的1920*1080是水平像素数*垂直像素数，ppi即是每英寸像素数。1.2.CSS像素px是CSS像素的基本单位，不同于硬件上的物理像素，CSS像素是逻辑像素。在谈论CSS像素时一定要清楚它的上下文：标准的屏幕像素密度下，1个css像素对应一个物理像素。 对于高屏幕像素密度，就会存在1个css像素对应多个物理像素的情况。因此，将物理像素/css像素的比值称为设备像素比（dpr）。...
2021-10-14 15:15:04
1468
2
原创 JavaScript 获取dom位于文档的坐标
//获取element的x坐标function getElementLeft(element){ var actualLeft = element.offsetLeft; var current = element.offsetParent; while (current !== null){ actualLeft += current.offsetLeft; current = current.offsetParent; } re.
2021-10-09 00:02:23
752
原创 新项目上线前怎么做，手把手攻略
项目随着PM的鞭策和大家的努力，项目开发阶段接近尾声，开始进入发版阶段。本文分成发版前中后三个方向进行讲述。项目发布前1. 代码封板：在测试/产品验收对代码进行封版，不然依旧有无尽的优化需求，甚至会影响上线交付的质量和时间。2. 收集数据库脚本3.部署方案：对于新项目是需要明确使用现有或者新购、云服务器物理地址和厂商来，最终确认服务器的网络地址。系统环境及其场景：开发环境：技术同事实现需求环境。测试环境：测试同事进行功能冒烟测试、ST测试UAT环境：业务部门、...
2021-09-24 15:22:46
1087
原创 Springboot项目使用interceptor+ThreadLocal实现登录
1.背景知识1. ThreadLocal：ThreadLocal又称线程变量，该变量的作用范围为当前线程，具备线程隔离的特性。2. 一次请求就是一个线程2.实践2.1.配置拦截器1@Componentpublic class LoginIntercept implements PathPatternInterceptor { Logger logger = LoggerFactory.getLogger(LoginIntercept.class); @Autow.
2021-09-22 15:55:02
922
原创 技术资料该怎么写？
开发除了写代码还需要写相关技术文档。发现工作中挺少讲文档知识的。大多数文档目录是以项目为起点进行归档的。一个产品开发的文档目录如下立项 需求 技术 测试 其他其中，技术资料会包括以下模块，根据项目的大小、性质来决定是否需要。架构 功能架构 技术架构 部署架构 安全架构 前端架构 后端架构 设计 数据库设计 接口设计 界面设计/交互和视觉设计 算法设计 模型设计 ...
2021-09-15 17:47:55
242
原创 Maven入门小册
一、简介Maven的主要内容有生命周期：clean、validate、compile、test、package、verify、install、site、deploy 仓库：本地、中央、远程 POM配置：pom.xml二、安装1. 下载安装官网下载解压即可2. 配置环境变量打开环境变量配置新增M2_HOME值为maven安装路径编辑path变量，新增％M2_HOME％/bin;3.修改配置打开安装目录下的conf/settings.xml进行设置4. 查看默认
2021-08-31 00:03:04
222
原创 JavaScript转码和解码知识
转码encodeURI不会对下列字符转码ASCII字母 数字 ~!*()'@#$&*=:/,;?+应用场景：对整个url进行转码encodeURIComponent不会对下列字符转码ASCII字母 数字 ~!*()'应用场景：对url的某个部分禁止转码escape不会对下列字符转码ASCII字母 数字 @*/+应用场景：对单纯的字符串进行转码解码decodeURI：为encodeURI对应得解码方法encodeURIComponent
2021-08-17 17:16:17
745
原创 Element Ui DatePicker显示周数
elementui日历上竟然没有显示周次的功能。于是自己在源码上改进了下，具体代码参考https://github.com/betty-chan/element显示效果如下：因为elementui已不再维护，如果需要引入自己修改后的element可以通过上传npm或者使用我打包后的github项目。使用github项目需要配置package.json如下 "dependencies": {"element-ui":"git+https://github.com/be...
2021-07-26 09:32:08
494
原创 egg-sequelize关联查询三种方法
1. 在Service里定义关联查询import { Service } from 'egg';export default class sroceService extends Service { /* * 分页查询 */ public async findSorce(query, page) { let { ctx } = this ctx.model.TSorce.belongsTo(ctx.model.TUser, {
2021-07-21 15:20:48
1859
1
原创 Vue自定义指令——实现一键复制
实现clipboard.jsconst clipboard = { install(Vue, options) { Vue.directive('clipboard', { inserted(el, binding, vnode) { el.addEventListener('click', () => { let text; if.
2021-06-21 16:50:35
660
原创 CSS布局系列四：网格布局
概念弹性盒子由容器和子元素组成。容器(Flex container)：通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。子元素(flex item)：容器中的每个单元称为子元素容器中存在两条多轴：主轴（默认水平方向）和侧轴（默认垂直方向）————————————————版权声明：本文为CSDN博主「betty_grant」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csd
2021-06-02 11:59:42
1346
原创 docker使用小册
1.Docker概述 介绍docker首先会提及传统的跨平台的开发虚拟化方案，类似java虚拟机的传统虚拟机方案。下面的图片比较了 Docker 和传统虚拟化方式的不同之处，可见容器是在操作系统层面上实现虚拟化，直接复用本地主机的操作系统，而传统方式则是在硬件层面实现。Docker 的优势不仅如此，可以比较一番。特性 Docker 虚拟机 启动速度 秒级 分钟级 性能 近似物理机 性能损耗大 体量 极小（MB） 较大（GB） .
2021-05-26 17:50:19
61
原创 Echarts系列——饼图
<template> <div id="chartLine" class="chart"></div></template><script>/*基础折线图，需要dataset：source、dimensions*/export default { props: { config: { type: Object, default() { return { ti.
2021-04-07 14:16:47
283
原创 Echarts系列——多折线图
Echarts5 支持使用dataset，使用dataset来设置数据。<template> <div id="chartLine" class="chart"></div></template><script>/*基础折线图，需要dataset：source、dimensions*/export default { props: { config: { type: Object, def
2021-04-07 14:13:04
971
原创 你需要了解的埋点知识
背景知识 埋点是一种常见的数据采集方式。参考https://manual.sensorsdata.cn/sa/latest/tech_knowledge-7543368.html
2021-03-18 15:46:31
83
原创 CSS布局系列二：table布局
Table 布局概念元素 display选项 说明 table table/inline-table caption table-caption 表格标题 thead table-header-group tbody table-row-group tfoot table-footer-group tr table-row 表格行 th/td table-cell ...
2021-03-05 09:33:18
687
2
原创 色彩学了解一下
HSL色彩模型人眼感知可以将多样的颜色可以分成两个大类无彩色系和有彩色系。其中无彩色系可以简单理解成黑白灰，彩色系就是除了黑白灰的其他颜色。根据人眼对色彩的感知方式，可以使用三个分量（色相H、彩度、明度L）来描述一种颜色。色立体...
2021-02-20 15:18:20
449
原创 nginx入门小册--linux系统
安装根据系统来安装$ sudo yum install epel-release && yum install nginx [On CentOS/RHEL]$ sudo dnf install nginx [On Debian/Ubuntu]$ sudo apt install nginx [On Fedora]常用命令检测配置文件：sudo ng
2021-02-18 10:16:22
76
1
原创 VUE CLI环境变量的使用
模式默认情况下，一个 Vue CLI 项目有三个模式：development模式用于vue-cli-service servetest模式用于vue-cli-service test:unitproduction模式用于vue-cli-service build和vue-cli-service test:e2e我们可以通过 --mode选项修改命令行默认的模式，如：vue-cli-service build --mode development环境文件所...
2021-01-30 10:01:53
213
原创 CSS布局系列三：flex布局
Flex布局概念弹性盒子由容器和子元素组成。容器(Flex container)：通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。子元素(flex item)：容器中的每个单元称为子元素容器中存在两条轴：主轴（默认水平方向）和交叉轴（默认垂直方向）设置容器的属性flex-direction：设置容器中元素的排列方式row(默认值)：横向布局（主轴水平），起点在左端 row-reverse：横向布局（主轴水平），起点在右端 col
2021-01-25 10:05:26
1884
原创 JavaScript中位运算的巧妙应用
JavaScript中位运算的巧妙应用了解运算符~-按位非 &-按位与 |-按位或 ^-按位异或 <<-无符号左移 <<<-有符号左移 >>-无符号右移 >>>-有符号右移*可以根据箭头指向来区分左移还是右移应用场景1. 使用~~、>>、<<、|来向下取整~~11.11is 1111.11>>0 is 1111.11<<0 is 1111.11.
2021-01-07 10:32:29
88
原创 nginx入门小册--windows系统
安装http://nginx.org/en/download.html下载解压即可目录结构Conf：配置文件 html：静态文件 logs：日志文件常用命令打开命令行窗口（window下是cmd），进入到安装目录再执行命令优雅退出：nginx -s quit 强制退出：nginx -s stop 重启：nginx -s reopen 启动：start nginx.exe配置案例场景一：设置代理 server { listen
2020-12-28 16:53:06
60
原创 vue+js 下载文件
第一步先把要下载的模板放在public目录下第二步使用如下方法download()进行下载，其中url前加上`${process.env.BASE_URL}`，例如`${process.env.BASE_URL}fileResources/template.xlsx`,function download (url, filename) { const anchor = document.createElement("a"); anchor.href = url; a
2020-12-28 10:28:49
1822
原创 实践笔记——Vue登录重定向失败
问题描述Vue登录重定向失败解决过程1. 网上寻找类似案例说是：使用动态路由下，进行异步请求的同时，不能进行重定向。2. 对第一条的说法进行解读解决方法和知识
2020-12-15 11:32:39
1471
原创 JavaScript实现图片压缩
图片压缩图片压缩的原理是使用canvas对象的drawImage()方法将Image对象压缩绘制到画板上。代码实现如下 //图片压缩 compress( base64, // 源图片 rate = 1.5, // 缩放比例 callback // 回调方法 ) { //处理缩放，转格式 var _img = new Image(); _img.src = base64; _img.onlo.
2020-12-08 09:21:43
409
原创 使用node调试代码
node <file>说明：执行文件，可结合console.log()输出结果node --inspect<file>说明：在浏览器中进行调试，可大断点
2020-11-25 18:18:18
101
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人