- 博客(86)
- 收藏
- 关注
RSS订阅原创 Git存储原理——Git对象
了不了解Git存储原理，对于平常使用Git命令或者Git可视化工具的开发者来说，并不影响工作，但是如果懂原理，可以提升自己的技术视野和深度哦~
2022-08-14 22:35:42
417
原创 webpack学习笔记（六）：图片打包处理
本片文章将记录webpack中如何处理图片的打包问题。在介绍图片打包处理之前，先说明一下引入图片的三种方式：使用背景图片：将一个包裹图片的元素的css中的background属性设置为图片路径使用js导入：可以使用commonJS规范引入图片资源const imgUrl = require('图片路径')图片的dom对象.src=imgUrl使用img标签：<img src= '图片路径'>使用背景图片先准备一张图片资源：index.html中添加代码：在inde
2021-12-13 15:25:51
1442
1
原创 webpack学习笔记（五）：处理css样式文件
在一开始认识webpack已经知道webpack可以将所有资源作为一个个的模块进行处理，包括js/json/css/图片...等。然而，它只能将js/json作为模块打包处理。比如，我们在src下创建一个css目录，再创建一个index.css文件，内容如下：在index.html引入该css文件：配置文件如下：const HtmlWebpackPlugin = require('html-webpack-plugin')const path = require('path')module.e
2021-12-10 16:42:56
644
原创 webpack学习笔记（四）：关于html插件
在之前学习webpack时，我们都是在src目录下创建index.html文件，然后在html文件中引入打包后的js文件，如果在某种情况下我们要是把输出文件的名称由bundle.js改成bundle_1.js，那么就需要同步更改index.html中引入的js文件名称：有什么办法可以不用去关注输出文件的名称，而是可以让index.html自动引入呢？下面介绍一下html-webpack-plugin这个插件。首先，安装html-webpack-plugin插件在配置文件中引入该插件...
2021-12-10 09:33:28
866
原创 webpack学习笔记（三）：监听文件变化并编译
在上一篇webpack学习笔记中主要认识了webpack配置文件中相关的基础配置和命令的执行。这次学习如何在文件发生变化时自动打包编译。首先，我们来看一下配置文件const path = require('path')module.exports = { entry: './src/a.js', output: { filename: 'bundle.js' }, mode: 'development'}入口文件a.js：console.log('abc')在pac
2021-12-09 16:17:45
1115
原创 关于安卓微信浏览器中scrollTop的问题
前阵子在公司实现一个常见的需求，就是添加一个返回顶部的按钮，当滑动网页到一定程度后会出现这个按钮，需要获取到元素的滚动高度scrollTop。结果在pc端的浏览器可以生效，pc端浏览器中的移动端模式可以生效，在苹果手机上的微信浏览器也可以生效，唯独在安卓手机的微信浏览器不能生效。先展示一下核心代码：// 用vue写的项目，scrollToTop控制按钮显示与否，当滚动高度大于1000像素就出现按钮handleScroll () { let scrollTop = document.documentE
2021-12-08 18:11:33
1854
1
原创 webpack学习笔记（二）：认识配置和命令执行
在上一篇webpack学习笔记中，直接在命令行中使用webpack对项目进行打包时所使用的配置都是默认的，入口文件默认是src目录下的index.js文件，输出文件默认是dist文件夹下的main.js，这两个分别对应webpack中的Input和Output核心配置模块，而这些配置我们可以在webpack配置文件webpack.config.js中进行指定配置。在项目根目录下创建webpack.config.js文件，并且配置入口文件为a.js，出口文件为bundle.js。其中a.js内容：co
2021-12-05 23:41:50
361
原创 webpack学习笔记（一）：认识webpack
初识webpack根据官网介绍，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。这么说可能有点抽象，用过vue的同学可以这样想，vue框架中组件是以.vue结尾的，但是浏览器并不认识这类文件，需要把.vue文件译成浏览器能识别的代码，这就需要web
2021-12-05 16:56:59
559
原创 使用reduce方法实现数字千分化处理
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2021-10-24 19:31:17
214
原创 JavaScript中的相等判断
JavaScript中有四种相等性的判断算法：==宽松相等===严格相等同值相等(-0 !== +0) NaN === NaN零值相等(-0 === +0)JavaScript中相等性判断的方法：===严格相等(strict equality)==非严格相等（抽象/非约束）相等(loose equality)Object.is(v1, v2)严格相等不进行隐式类型转换，若比较的两个操作数类型相同，值也相同，则结果为true1 === '1' ? false1 === 2
2021-10-01 00:07:32
2794
原创 Ajax学习笔记——Ajax基础总结
1. AJAX 简介AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。2. AJAX特点2.1AJAX 的优点可以无需刷新页面而与服务器端进行通信。允许你根据用户事件来更新部分页面内容。2.2 AJAX 的缺点没有浏览历史，不能回退存在跨域问题(同源)SEO 不友3.使
2021-08-17 00:39:57
196
原创 Canvas学习笔记——马赛克案例
这篇文章要讲的是如何将一张照片变成马赛克的照片，利用Canvas中操作像素的方法可实现。马赛克的原理无非就是视觉上把原来的像素大小放大，将若干个小像素组成一个块变成大像素，比如可以将5*5的像素当作一个块，在这个块中随机选择一个像素的颜色作为整个块的颜色即可。实现代码如下：<!DOCTYPE html><html lang="en"><head> <script> window.onload = function() { let
2021-08-15 21:28:42
342
原创 canvas学习笔记——合成和刮刮乐案例
合成合成就是常见的蒙板状态，本质上就是如何进行图形的压盖，可以通过设置globalCompositeOperation属性的值来决定采用什么样的遮盖策略。我们可以先画一个具有重叠关系的方形和圆形：<script> window.onload = function() { let canvas = document.getElementById('test') if(canvas.getContext) { let ctx = canvas.ge
2021-08-14 15:18:38
143
原创 Canvas学习笔记——Canvas基础用法
Canvas是HTML5中的新增API，提供了一个通过Javascript和HTML的<canvas>元素来绘制图形。Canvas API主要聚焦于2D图形。<canvas>与一般标签一样可以设置宽高，建议在标签内设置宽高，而不要用css设置。用法1.绘制矩形常用方法：strokeRect()：以路径方式绘制矩形fillRect()：以填充方式绘制矩形clearRect()：清除矩形三个方法都有四个参数，都表示为起点横坐标，起点纵坐标，矩形宽，矩形高<scr
2021-08-13 23:21:16
346
原创 用JS实现数组去重的多种方式
数组去重的题目在面试中属于高频题目，因此在这里记录一下几种实现方式：方式一：Array.from()function unique(arr) { return Array.from(new Set(arr))}方式二：扩展运算符function unique(arr) { return [...new Set(arr)]}方式三：双重循环function unique(arr) { for(let i = 0; i < arr.length; i++) { fo
2021-08-09 19:58:24
100
原创 手写JS系列-深拷贝
我们知道JS中数据类型分为基本数据类型和引用数据类型，基本数据类型之间的赋值是在内存中重新分配空间且保存着一样的值，而引用类型之间的赋值只是复制引用值，当原来对象中的属性值发生变化，另一个对象的属性值也会发生变化，这种现象正常来说并不是我们想要的。深拷贝就是要实现复制一个对象，且保证两个对象在内存中互相独立，一个对象属性值的改变不影响已拷贝的对象中的属性值。简单的代码实现如下：let obj = { name: '小明', colors: ['red', 'green', 'blue'], a
2021-08-08 18:19:55
145
原创 手写JS系列-字符串模板
我们知道在ES6中，新增了反引号语法，使得反引号中可以插入变量，解析时可以将变量替换成实际值并且拼接到字符串中。这种模板字符串中变量的识别可以手写一个函数来简单实现：function render(template, data) { const reg = /\{\{(\w+)\}\}/ if(reg.test(template)) { const name = reg.exec(template)[1] template = template.replace(reg, data[
2021-08-08 17:21:18
368
原创 JS中new.target的用法
1. 什么是new.target?new.target允许你检测函数或构造方法是否是通过new运算符调用的，若函数或构造方法是由new.target调用的，则new.target属性的值指向该函数或构造函数，否则值为undefined。2. 示例普通的函数调用中，new.target的值为undefined，使用new运算符调用的函数值为函数本身，这可以用来判断一个函数的调用是否是使用new调用的function Person() { this.name = 'Mike' console
2021-08-06 20:08:40
2121
原创 正则表达式常见应用
匹配手机号let str1 = '17824229374'let reg1 = /^1[34578]\d{9}$/glet res1 = str1.match(reg1)console.log(res1);匹配qq号let str2 = '7382431'let reg2 = /^[1-9][0-9]{4,9}$/glet res2 = str2.match(reg2)console.log(res2);匹配十六进制颜色let str3 = '#78bd34..
2021-07-15 00:09:16
122
原创 HTTP首部有哪些？
HTTP首部和HTTP方法配合工作，共同决定了客户端和服务器能做什么。这里汇总了HTTP中常见的首部。1. 通用首部通用信息头部首部描述Connection允许客户端和服务器指定与请求/响应连接有关的选项Date说明报文是什么时间创建的Transfer-Encoding告知接收端为了保证报文的可靠传输，对报文采用了什么编码方式Update给出了发送端可能想要升级使用的新版本或协议Via显示了报文经过的节点（代理、网关）通用缓存首部首
2021-07-08 16:46:39
210
原创 css中元素脱离文档流后呈现特点？
通过设置浮动等方式而脱离文档流的元素，其特点也会发生变化，具体如下：块级元素块元素不再独占页面一行块元素的高度和宽度都会被内容撑开行内元素行内元素脱离文档流后会变成块级元素，特点和块级元素一样总结当元素脱离文档流后，不用再区分块级元素和行内元素了，可以统一看成是块级元素。...
2021-06-20 22:30:37
744
原创 2017蓝桥杯省赛JavaB组部分题目及解答
第二题标题：纸牌三角形A,2,3,4,5,6,7,8,9 共9张纸牌排成一个正三角形（A按1计算）。要求每个边的和相等。下图就是一种排法（如有对齐问题，参看p1.png）。这样的排法可能会有很多。如果考虑旋转、镜像后相同的算同一种，一共有多少种不同的排法呢？public class _02纸牌三角形 { static int ans; public static void main(String[] args) { int[] arr = {1, 2, 3, 4, 5, 6, 7
2021-06-16 12:32:43
207
原创 Linux常用命令
文件内容处理1. 对文件内容进行排序sort 文件名：可对文件内容进行排序sort -r 文件名：对文件内容逆序排序2. 检查文件中重复内容uniq 文件名：可以报告或删除文件中重复的行3.在文件中查找指定内容grep 查找内容 文件名：在文件中查找指定要查找的内容grep -c 查找内容 文件名：查找文件中包含查找内容的总行数4.逐行对不同文件进行比较diff 文件名1 文件名2：对两个文件进行比较diff3 文件名1 文件名2 文件名3：对三个文件进行比较5.逐字
2021-06-16 12:29:53
81
原创 Node中的核心模块总结
Node.js的核心模块主要有http、fs、url、querystring模块。http模块——创建HTTP服务器、客户端使用http模块只需在文件中通过require(‘http’)引入即可。该模块本身可以构建服务器，而且性能非常可靠。1、创建一个简单的Node.js服务器const http = require('http')const server = http.createServer(function(req, res) { res.writeHead(200, { 'co
2021-06-04 11:54:37
363
1
原创 CSS布局——两栏布局和三栏布局
在网站中，两栏布局和三栏布局是常见的网页布局方式，这篇文章将总结常见的两栏布局和三栏布局方案都有哪些。一、两栏布局以下的两栏布局方式属于左边宽度固定，右边宽度自适应的情形。方案一：float+margin1、首先准备一个块级父元素，父元素中有两个子元素，分别作为左右两栏；2、将左元素设置浮动，这时左元素脱离文档流，右元素位置上移；3、为防止右元素被左元素挡住，需要给右元素加外边距。这是最简单的一种布局方案。html结构：<div class="box"> <div c
2021-05-28 23:28:08
1409
原创 async和defer属性的区别
在<script>标签中存在两个相似的属性async和defer，这两者有什么区别呢？推迟执行脚本定义了defer属性的script脚本，会在遇到script标签时立即下载，但是等整个页面都解析完后才执行，也就是推迟脚本的执行。脚本推迟执行了，但是依旧按照标签出现的顺序执行，即第一个推迟脚本会在第二个推迟脚本之前执行，第二个推迟脚本会在第三个推迟脚本之前执行。defer属性只对外部脚本文件有效。异步执行脚本浏览器遇到定义了 async属性的脚本时，会异步加载脚本文件，即不会阻塞页面的解析
2021-05-28 10:50:22
337
原创 关于calc()的使用
calc()是css3中新增加的计算元素属性大小的函数，可以动态设定元素的宽度或高度。函数中可以执行加减乘除等简单的数学运算。这种适合用于自适应网页布局设计。1、使用规则可以使用“+”，“-”，“*”，“/”四则运算可以使用百分比、px、em、rem单位进行混合运算表达式中如果有“+”或者有“-”，运算符左右必须有空格-“*”和“/”可以没有空格2、样例设父元素宽度为300px：width: calc(25% + 10px)：子元素宽度为85px；width: calc(25% - 2
2021-05-15 10:26:53
558
原创 学习webpack过程中遇过的问题
解决办法就是用管理员身份打开PowerShell：输入：set-ExecutionPolicy RemoteSigned，回车，再根据提示输入Y即可
2021-05-07 13:39:22
140
原创 Javascript中的事件对象
1、事件对象在DOM中发生事件时，所有相关信息都会被收集并存储在一个名为event的对象中。这个对象包含了一些基本信息，比如导致事件的元素、发生的事件类型、可能与特定事件相关的任何其他数据等。2、 DOM事件对象在DOM合规的浏览器中，event对象是传给事件处理程序的唯一参数。不管以DOM0还是DOM2指定事件处理程序，都会传入这个event对象。DOM事件对象的属性和方法currentTarget：当前事件处理程序所在的元素；target：事件目标**在事件处理程序内部，this对象始终等
2021-03-20 21:24:45
191
原创 Javascript中的事件流和事件处理程序
1、事件流Javascript和HTML的交互是通过事件实现的。事件代表文档或浏览器窗口中某个有意义的时刻。事件流描述了页面接收事件的顺序。1.1 事件冒泡IE事件流被称为事件冒泡，这是因为事件被定义为从具体的元素（文档树中最深的节点）开始触发，然后向上传播至没那么具体的元素（文档）。比如有以下HTML页面：<!DOCTYPE html><html lang="en"><head> <title>Document</title>&
2021-03-20 18:50:58
199
原创 sessionStorage和localStorage介绍
Web Storage中定义了2个对象：sessionStorage和localStorage。这两种API提供了在 浏览器中不受浏览器页面刷新影响而存储数据的方式。Storage类型Storage类型用于保存名/值对数据，直至存储空间上限（由浏览器决定）。Storage实例有以下方法：clear()：删除所有值getItem(name)：取得给定name的值key(index)：取得给定数值位置的名称removeItem(name)：删除给定name的名/值对setItem(name, v
2021-03-20 12:59:28
350
原创 Javascript客户端存储-cookie
一、什么是cookieHttp cookie通常也叫做cookie，最初用于在客户端存储会话信息。这个规范要求服务器在响应http请求时通过发送Set-CookieHTTP头部包含会话信息。HTTP响应会设置一个名为name，值为value的cookie。名和值在发送时都会经过URL编码。浏览器会存储这些会话信息，并在之后每个请求中都会通过HTTP头部cookie再将它们发回服务器。这些发送回服务器的额外信息可用于唯一标识发送请求的客户端。1.1 cookie的限制cookie是与特定域绑定的。设置c
2021-03-20 12:37:22
631
原创 Javascript中的私有变量和静态私有变量
私有变量Javascript中没有私有成员的概念，所有对象属性都是公有的，但是有私有变量的概念。任何定义在函数或块中的变量，都可以认为是私有的，因为在这个函数或块的外部无法访问其中的变量。私有变量包括函数参数、局部变量、以及函数内部定义的其他函数。如：function add(num1, num2) { let sum = num1 + num2 return sum}上面这个函数中有三个私有变量：num1，num2，sum，这几个变量只能在函数内部使用，外部访问不到。如果这个函数有闭包，
2021-03-18 20:27:52
575
原创 Javascript中的闭包
闭包指的是那些引用了另一个函数作用域中变量的函数，通常是在嵌套函数中实现。比如下面实现的在对象数组中按照对象某个属性排序的方法：function comparison(propertyName) { return function(obj1, obj2) { let value1 = obj1[propertyName] let value2 = obj2[propertyName] if(value1 < value2) { return -1 }e
2021-03-18 18:17:46
79
原创 Javascript中的尾调用优化
什么是尾调用ES6新增了一项内存管理机制，让Javascript引擎可以在满足条件时可以重用栈帧。这项优化非常适合“尾调用”，即外部函数的返回值是一个内部函数的返回值。function outerFunction() { return innerFunction() }在ES6优化之前，执行这个例子会在内存中发生以下操作：执行到outerFunction函数体，第一个栈帧被推到栈上；执行outerFunction函数体，到return语句。计算返回值必须先计算inne
2021-03-18 15:17:56
231
原创 Javascript中的call、apply、bind方法
函数中的call()、apply()方法都会以指定的this值来调用函数，即会设置调用函数时函数体内this对象的值。applyapply()方法接收两个参数：函数内this的值和一个数组参数。第二个参数可以是一个数组实例，也可以是arguments对象。function add(a, b) { return a + b}function callAdd1(a, b) { return add.apply(this, arguments)}function callAdd2(a, b)
2021-03-18 10:52:09
94
原创 Javascript中的函数内部对象
在ES5中，函数内部存在两个特殊的对象：arguments和this。ES6新增了new.target属性。argumentsarguments是一个类数组对象，包含调用函数时传入的所有参数。这个对象只有以function关键字定义函数（相对于箭头函数）时才有。arguments对象不能显式的创建，它只有在函数开始时才可用。每个函数都有一个arguments属性，表示函数的实参集合，这里的实参是重点，就是执行函数时实际传入的参数的集合。arguments还有属性callee，length和迭代器S
2021-03-18 10:04:19
371
原创 Javascript中如何根据对象某个属性排序
假如有一个包含对象的数组，想要按照任意对象属性对数组进行排序，可以定义一个sort()方法需要的比较函数，这个比较函数接收两个参数，即要比较的值。这个比较函数还要根据哪个属性来排序，可以通过定义一个根据属性名来创建比较函数的函数来解决。function comparison(propertyName) { return function(obj1, obj2){ let value1 = obj1[propertyName] let value2 = obj2[propertyName
2021-03-18 08:04:34
694
原创 JS中的垃圾回收
Javascript通过自动内存管理实现内存分配和闲置资源回收。基本思路是：确定哪个变量不会再使用，然后释放它占用的内存。垃圾回收程序每隔一段时间就会执行。两种主要标记未使用变量的策略：标记清理和引用计数。标记清理标记清理是Javascript中最常见的垃圾回收策略。当变量进入上下文，比如在函数内部声明一个变量时，它会被加上存在于上下文中的标记。而在上下文中的变量，逻辑上讲永远不应该释放它们的内存，因为只要上下文的代码还在执行就有可能用到它们。当变量离开上下文会被加上离开上下文的标记。垃圾回收程序运
2021-03-17 22:48:15
68
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人