- 博客(103)
- 资源 (5)
- 收藏
- 关注
RSS订阅
原创 web基础知识梳理（思维导图）
最近种草了思维导图，发现这个东西好好用，然后刚好在准备秋招，花了两天时间梳理了一下基础知识，做了这个思维导图，内容可能还不够完善，后期会继续改进~~加油！！原文件链接：web基础知识梳理 web基础知识梳理思维导图原文件 ...
2018-08-25 21:07:28
7294
6
原创 使用html5与js实现音乐播放器
实现效果如下：1、HTML代码<div id="music"> <div id="container"> <h3 id="musicName">一月，银装轻舞-紫竹笛韵</h3> <img src="image/一月，银装轻舞-紫竹笛韵.jpg" id="musicImg
2018-08-22 22:34:04
25187
9
原创 关于/usr/local/bin/code: line 6: python: command not found报错
vscode使用code命令打开ide出现下面报错：/usr/local/bin/code: line 6: python: command not found/usr/local/bin/code: line 10: ./MacOS/Electron: No such file or directory原因m1/升级12.x 没有安装python，可手动安装python3// 安装brew/usr/bin/ruby -e "$(curl -fsSL https://raw.githubuse
2022-05-16 12:22:02
1761
原创 【mac】zsh安装教程
安装on-my-zshsh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"// 或者sh -c "$(wget https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh -O -)"卸载uninstall_oh_my_zsh安装Powerline Fonts先
2022-02-15 15:19:24
837
原创 升级webpack5的踩坑记录
升级webpack5的踩坑记录官方说明文档地址升级方式踩坑记录第一坑：使用html-webpack-plugin插件报错官方说明文档地址地址：https://webpack.js.org/中文地址： https://www.webpackjs.com/升级方式npm install --save-dev webpack踩坑记录第一坑：使用html-webpack-plugin插件报错插件版本不符，需要进行升级。npm uninstall html-webpack-pluginnpm
2022-02-15 15:18:43
980
原创 koa洋葱模型
一. 什么是洋葱模型？先看????const Koa = require('koa');const app = new Koa();const PORT = 3000;// #1app.use(async (ctx, next)=>{ console.log(1) await next(); //暂停当前程序 console.log(1)});// #2app.use(async (ctx, next) => { console.log(2
2022-02-15 15:15:14
972
原创 WebSocket笔记
一. 什么是WebSocketWebSocket 是一种在单个TCP连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接， 并进行双向数据传输。（维基百科）WebSocket 是一种计算机网络应用层的协议，用来弥补http协议在持久通信能力上的不足。WebSocket 的其他特点包括：建立在 TCP 协议之上，服务器端的
2021-12-01 16:55:51
724
原创 初探WebGL-基于Three.js绘制顶点不同颜色的旋转立方体
这篇文章简单介绍了WebGL的概念，以及常用的几种WebGL开发框架。然后选取Three.js作为WebGL开发框架，从零实现一个顶点不同颜色的旋转立方体。
2021-11-30 16:44:39
1070
原创 初探WebGL-Three.js初体验
refer：https://blog.youkuaiyun.com/qw8704149/article/details/115338710?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_title~default-5.no_search_link&spm=1001.2101.3001.4242.4
2021-11-25 15:48:37
574
转载 2021-10-28 nvm安装
这里写自定义目录标题nvm安装nvm安装报错443https://blog.youkuaiyun.com/hetingtingitsme/article/details/114447675
2021-10-28 23:38:44
267
原创 git submodule的进一步使用学习
git submodule的进一步使用学习了解子git的创建、删除方式平常使用的git submodule的场景都比较简单，所以就大概了解主包子包的关系，子包提交代码，主包提交代码的常规操作。但是在运行了主包的代码，产生了一些无需更改的文件，并且通过git checkout -f无法撤销更改。解决方式：删除整个git，但是这样暂存区代码就丢失了，故不采用删除无法撤销的子git，重新添加。具体方式参考以下博客：https://blog.youkuaiyun.com/guotianqing/article/d
2021-07-01 14:29:22
114
原创 gitignore 不起作用
新启项目过程中，不小心提交了dist等不应该提交的代码，修改.gitignore之后，重新提交代码之后发现增加的忽略文件还是被提交了。通过查阅资料，发现.gitignore只能忽略那些原来没有被track的文件，如果某些文件已经被纳入了版本管理中，则修改.gitignore是无效的。解决办法：需要清除掉git缓存git rm -r --cached ....
2021-03-01 17:04:39
210
原创 2021-01-19
css calc踩坑记录在写样式的时候经常会使用calc()函数，但是在less中发现，明明写的width: calc(100%- 20px)，打包编译之后样式变成了这样，width: 80%，这样，与我们的预期不符。解决办法：用～阻止less编译，进而确保calc计算表达式正确性。示例：width: calc(~'100%- 20px')...
2021-01-19 10:55:19
108
原创 html中document.body 与 document.documentElement的区别
项目中，经常会用到这两个来获取网页的滚动高度const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //考虑浏览器兼容但是具体有啥区别还是有点模糊，这里抽出时间整理一下。1.document.body返回html dom中的body节点 即<body>2....
2020-03-05 10:35:47
1346
原创 git中的 git stash 命令
在临时区域中存储本地Git更改。存储当前更改，但新（未跟踪）文件除外：git stash [save {{optional_stash_message}}]存储当前更改，包括新（未跟踪）文件：git stash -u交互式选择已更改文件的部分以进行存储：git stash -p列出所有藏匿处（显示藏匿名称，相关分支和消息）：git stash list应用存...
2019-11-10 19:15:46
356
原创 lodash学习——JavaScript原始库
Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。Lodash 的模块化方法 非常适用于：遍历 array、object 和 string 对值进行操作和检测 创建符合功能的函数一、安装1. 浏览器通过script引入<scriptsrc="lodash.js"></scr...
2019-10-31 18:36:03
360
原创 【Git】远程分支重命名
远程分支重命名需要先删除远程分支，然后重命名本地分支，最后将本地分支重新提交到远程。具体操作如下：1. 删除远程分支origin/devgit push --delete origin dev2. 本地分支重命名dev为newDevgit br -m dev newDev3. 提交本地分支到远程git pushoriginnewDev...
2019-10-31 11:47:30
506
原创 React route中exact用法
在学习自己配置路由是遇到这个问题，就是<Route path='/goods' component={Goods} /><Route path='/goods/:id' component={GoodDetail} />当匹配路由为/goods/:id，会匹配Goods组件和GoodDetail组件但是我们期望得到GoodDetail解决方法有两...
2019-10-28 10:43:30
2919
原创 node.js之环境配置
https://blog.youkuaiyun.com/qq_25804071/article/details/68954130
2019-10-21 17:46:10
108
转载 Git中的merge、rebase、cherry-pick以及交互式rebase
https://www.cnblogs.com/ludashi/p/8213550.html
2019-10-21 12:09:01
209
原创 koa——中间件机制中的http.createServer(app.callback())
中间件机制使用koa创建一个基本的 http serverconst Koa = require('koa');const http = require('http');const app = new Koa();// Create HTTP server.const server = http.createServer(app.callback());有点不太理解http....
2019-10-17 12:15:20
2569
原创 git commit信息修改 --amend
1、当前提交修改直接使用git commit --amend 进行修改即可2、历史提交修改这里需要用到rebase首先，git rebase -i HEAD~3，表示修改当前版本的倒数第三个提交，输入这条命令后会出来如下信息：pick ******* cmmit1pick ******* cmmit2pick ******* cmmit3按i输入，然后将需要修改的c...
2019-10-12 11:50:33
1728
原创 js取整方法
1. math.ceil 向上取整math.ceil(2.45) => 3,math.ceil(2.75) => 32. math.round 四舍五入math.ceil(2.45) => 2,math.ceil(2.75) => 33.math.floor 向下取整math.ceil(2.45) => 2,math.ceil(2.75) =...
2019-09-24 10:20:02
2145
原创 MAC&Windows——git多账户配置
git多账户配置上午刚给windows电脑配置好git多账户，下午就换mac了，还需要在配置一次，所以就想着把这两个写一起。需要注意：在每个项目文件夹提交修改时需要确认此时的用户git config user.namegit config user.email安装git一般全局配置用户名邮箱，所以需要取消之前设置的全局配置的用户名和邮箱，使用以下命令：git con...
2019-08-24 12:41:26
265
原创 JS——判断一个Object对象是否为空 && 判断是否为空对象、空数组
1、判断一个Object对象是否为空？常见方法 for...in 遍历属性let isEmpty = (obj)=>{ for(let i in obj){ return false; } return true;}JSON的stringify()方法let isEmpty = (obj)=>{ if(JSON.stri...
2019-08-22 17:33:10
1592
原创 页面吸底效果
1. bottomBar组件设置一直吸底（显示在屏幕底部）。特别注意，对于iPhone X需要在底部加长距离。1）设置吸底，使用position: fixed; 固定于页面底部，但页面划到底部，页面部分内容会被固定定位组件遮挡。解决方式：① 划动页面高度设置长一点② 页面高度不定，可以在页面最底部加一个空的div撑开页面的高度。2）判断是否为iPhone X，底部加长距离加判断...
2019-08-22 17:29:00
4356
原创 CSS-opacity子元素继承父元素透明度的解决方法
在写项目页面的过程中，遇到子元素继承父元素透明度的问题，查找了好多文档给出的都是第一种方法，这种方法主要解决简单场景的，而对于设置复杂的background时，该方法不再适用。分析原因：父元素背景颜色设置透明度opacity：0.5，子元素会继承，给子元素设置opacity：1，子元素的透明度也是在父元素0.5的基础上设置的。第一种方法：父元素背景颜色设置透明度时，避免使用back...
2019-08-12 20:08:02
4000
1
转载 JavaScript精简代码集合
源自：https://juejin.im/post/5cc55eb5e51d456e577f93f0日历创建过去七天的数组，如果将代码中的减号换成加号，你将得到未来7天的数组集合//创建过去七天的数组[...Array(7).keys()].map(days=>newDate(Date.now()-86400000*days));生成随机ID在原型...
2019-05-15 10:41:11
183
转载 Javascript toString()用法
在看微信推文有关总结的JavaScript精简代码的时候，阅读到：在原型设计时常用到创建ID功能（实际项目中也会有人用到，但并不安全）。// 生成长度为11的随机字母数字字符串Math.random().toString(36).substring(2);// hg7znok52x这里有用到JavaScript中的toString()方法，大概猜到是什么用法，但是不记得有看到...
2019-05-15 10:31:48
1086
1
原创 css布局--圣杯&双飞翼
圣杯布局(float + 负margin + padding + position)注意： 三者都设置向左浮动。 设置grail_main宽度为100%，设置两侧栏的宽度。 设置 负边距，grail_left设置负左边距为100%，grail_right设置负左边距为负的自身宽度。 设置grail的padding值给左右两个子面板留出空间。 设置两...
2018-09-03 16:52:15
182
原创 使用border属性绘制三角形、五角星、心形
1. 绘制三角形<p>直角三角形</p><section class="triangle1"> <style> #triangle1 { width: 0; height: 0; border-right: 50px solid transparent; border-bottom: 50px solid re...
2018-09-03 10:37:15
1823
原创 【freeCodeCamp】 Intermediate Algorithm Scripting
1. Sum All Numbers in a Range我们会传递给你一个包含两个数字的数组。返回这两个数字和它们之间所有数字的和。最小的数字并非总在最前面。function sumAll(arr) { var sum = 0; arr.sort(function(a,b){ return a-b; }); for(var i=arr[0];i<=arr[...
2018-09-01 12:13:47
224
原创 HTML5媒体元素audio，video
音频(audio)和视频(video)1、支持格式音频支持格式：mp3，wav，ogg<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素
2018-08-31 22:12:50
487
原创 实现高度，左右宽度已知，中间自适应的三栏布局的5种方法
实现方式：float 绝对定位 flexbox布局 table grid网格布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三栏自适应布局</title> <style t
2018-08-24 10:58:47
476
原创 跨域：JSONP与CORS
一、跨域跨域问题一般只出现在前端开发中使用 javascript 进行网络请求的时候，浏览器为了安全访问网络请求的数据而进行的限制。为什么会产生跨域？同源策略：协议、域名、端口三者相同，有一个不相同就是不同源同源限制了哪些行为？Cookie、Localstorage和IndexDB无法读取 DOM和JS对象无法获取 Ajax请求发送不出去解决JS跨域问题的方法有8种：...
2018-08-23 17:04:31
435
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人