- 博客(57)
- 收藏
- 关注
RSS订阅
原创 一些非常基础的内容合集
块元素、内联元素、空元素有哪些，它们之间的区别？行内元素有：a、b、span、img、input、select、textarea、em、img、strong（强调的语气）;块级元素有：ul、ol、li、dl、dt、dd、h1、h2、h3、h4…p、section、div、form等;空元素： input type=“hidden”/&amp
2018-10-16 09:50:20
664
原创 ps清理文件
/Applications/Utilities/ 中Adobe的相关文件/Applications/ 中Adobe的相关文件/Applications/Utilities/Adobe Creative Cloud Experience/CCXProcess/Users/Shared/ 中Adobe的相关文件资源库/Application Support/ 中的Adobe相关文件/Users/【用户名称】/Library/Preferences/ 中Adobe的相关文件..
2021-05-02 17:17:17
289
原创 linux环境安装nginx笔记
安装依赖yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel下载安装包切换至目标文件夹，下载nginx，并进行解压# 切换至/usr/localcd /usr/local# 创建文件夹nginx-intall文件夹mkdir nginx-install# 切换至nginx-install文件夹cd nginx-install# 下载安装包 以1.9.13版本为例wget http://nginx.org
2020-11-05 10:46:26
157
原创 Reflect 的一些个人理解
Vue 3.0出来后，各种源码剖解的文章多了起来，其中Proxy和Reflect两个API频繁出现。查询了一下阮一峰大佬的文档后，自己也有了一些些理解：Reflect对象与Proxy对象一样，也是 ES6 为了操作对象而提供的新 API。其中Reflect是让以前类似Object.defineProperty()等方式变成Reflect.defineProperty(），让他们更具函数行为的特征。Reflect对象的静态方法Reflect.apply(target, thisArg, args)R
2020-06-17 14:47:53
450
原创 防抖&节流函数的实现
防抖和节流函数算是非常基础的工具函数了，说一下个人的简单理解：防抖：用户操作会在一定等待一段时间后执行function，如果用户在等待时间范围内重复操作，则重新计算等待时间（相当于有施法前摇时间，如果你重复释放技能，则技能前摇重新计算。）节流：用户频繁操作下，function必须经过一定的时间间隔后才会执行，如每10秒才可以执行一次。相当于有冷却时间的function具体实现：防抖：function debounce(fn, wait) { var timer = null;
2020-06-11 17:47:20
718
原创 实现上下固定中间自适应布局
常见移动端的整体布局，下面用绝对定位absolute和flex弹性布局实现absolute 绝对定位.header { position: absolute; top: 0; width: 100%; height: 100px; background: red;}.container { position: absolute; top: 100px; bottom: 100px; width: 100%; background: green;}.fo
2020-06-11 10:59:06
489
原创 css处理单行文本&多行文本溢出省略
/单行文本溢出/p {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}/多行文本溢出/(高度确认的情况下)p {position: relative;line-height: 1.5em;/高度为需要显示的行数行高，比如这里我们显示两行，则为3*/height: 3em;overflow: hidden;}p:after {content: “…”;position: absolute;bottom
2020-06-11 10:43:38
197
原创 通过tranfrom画一条 0.5px 的线
画一条0.5px的线在移动端是常见的需求，常见的实现方法如下，相对来说兼容性和实现效果比较好。实现方法如下：tranfrom.perfect__line{ height:1px; width: 100px; tranfrom: scaleY(0.5); transform-origin: 50% 100%;}...
2020-06-11 10:23:39
433
1
原创 Http 1.1 中 Cache-Contro，e-tag和打包js文件中的hash值之间的关系
Cache-Control是HTTP1.1 中的强缓存属性，除了常用的max-age和no-cache外，其他的值的作用如下：public，资源允许被中间服务器缓存。浏览器请求服务器时，如果缓存时间没到，中间服务器直接返回给浏览器内容，而不必请求源服务器。private，资源不允许被中间代理服务器缓存。浏览器请求服务器时，中间服务器都要把浏览器的请求透传给服务器。no-cache，不管本地副本是否过期，每次访问资源，浏览器都要向服务器询问，如果文件没变化，服务器只告诉浏览器继续使用缓存（304）。
2020-05-09 11:46:52
573
原创 常用源码总结
$nextTick 的源码理解一句话总结，就是把nextTick里的回调函数放到一个callback队列里面，先后查找promise、MutationObserver、setImmediate、setTimeout、等浏览器微任务或宏任务是否可以进行操作，是的话就把callback队列放到函数回调中执行。如果使用nextTick不传入callback函数的话，在2.1.0版本后的Vue里，则会抛...
2020-05-06 11:22:42
131
原创 个人Vscode 配置
{ /* ----------------编辑器样式配置---------------- */ // 资源管理器位置 "workbench.sideBar.location": "left", "editor.tabSize": 2, // "explorer.confirmDelete": false, "workbench.colorTheme": "Dra...
2020-03-11 11:21:34
257
原创 常用的一些正则表达式
为数字加上千分号var string1 = "12345678",string2 = "123456789";reg = /(?!^)(?=(\d{3})+$)/g; // 前面不是起始位置且后面有3个数字的位置后+逗号var result = string1.replace(reg, ',')console.log(result); // => "12,345,678"re...
2020-02-27 17:13:23
121
原创 浏览器禁止缓存
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="0" />
2019-09-17 08:57:52
130
原创 exports、module.exports和export、export default之间的区别（简单版）
直接简单粗暴进入正题，本文只是为了在记忆模糊的时候快速纠正。先来个总结：require: node 和 es6 都支持的引入(CommonJS规范)export / import : 只有es6 支持的导出引入module.exports / exports: 只有 node 支持的导出(CommonJS规范)然后分别具体看看先关的使用方法：CommonJS规范：简单来说：Com...
2019-05-10 10:59:16
1914
原创 深拷贝解决方案
虽然深克隆有简单粗暴的一句话方式let newArr2 = JSON.parse(JSON.stringify(arr));但是会带来爆栈的危险// Maximum call stack size exceeded所以有大佬想出来了栈方式function cloneForce(x) { // 用来去重 const uniqueList = []; let r...
2019-04-22 10:25:34
315
转载 React Loadable处理动态加载Route的Loading效果
Loadable 是一个高阶组件，是一个动态导入加载组件的高阶组件。yarn add react-loadable简单粗暴，简单来看看使用示例：import Loadable from 'react-loadable';function MyLoadingComponent({ error, pastDelay }) { if (error) { return <d...
2019-03-01 10:12:35
1942
转载 es2018正则的一些妙用方法
Named Capture Groups可以让正则捕获的内容命名，比起下标来说更可读。语法：?直接举个例子:const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;const [match, year, month, day] = re.exec("2020-03-04");console....
2019-02-19 11:26:52
399
原创 防抖与节流的一些理解
防抖和节流都是为了减轻浏览器和服务器的压力，至于是使用防抖还是节流，就要根据具体业务来进行具体分析和使用。防抖防抖的作用就是触发事件后等待一定时间后执行一次方法，如果在该时间内再次触发事件，则会重新开始等待。举个例子function debounce(fn, delay) { var timeout = null; return function() { if(timeout...
2019-02-18 10:21:04
218
原创 Less 和 Sass 的使用差异和一些理解
Sass和Less都属于CSS预处理器，简单的理解就是“用一种专门的编程语言，进行 Web 页面样式设计，不同的处理器通过不同的编译器转化为正常的 CSS 文件，以供项目使用”。差异：最基础的差异就是less与Sass处理机制不一样前者是通过客户端处理的，后者是通过服务端处理，相比较之下前者解析会比后者慢一点。主要原因是因为Sass是基于Ruby的，是在服务器端处理的。很多开发者不选择L...
2019-02-14 09:33:21
294
原创 js作用域的一些理解
在使用ES6语法之前，javascript只有全局作用域和函数作用域，而使用了let 和 const后，有了块级作用域，块级作用域简单来说就是就是大括号“｛｝”，每一个{}就是一个新的作用域。例子：var a = 1;if(a) { var b = 2;}for (var c = 3; c < 10; c++) { //......}以上的 a ,b ,...
2019-02-13 09:38:28
149
原创 H5 活动利用Canvas把用户信息和二维码合并到图片内。
之前一直都在写业务类的页面，非常少接触canvas，最近公司要出一个测试类的H5活动页面，需要在用户完成测试后把用户输入的资料和二维码合并在测试结果图中。其中有个坑，就是canvas是不能使用rem单位的，所以开头我就打算动态取页面中img的宽度来进行2倍图的绘画，结果掉进了这个坑里非常烦恼，然后突然想到其实只要按设计给你的图片的原先尺寸进行绘画就行了，并不需要动态进行宽高设置。下面是实现代码...
2019-01-25 16:56:13
1031
原创 mongodb 时间储存与查找
查询指定时间范围的数据:在mysql里面可以用between…and…或者 &gt;、&gt;=、&lt;、&lt;=来查询指定的时间范围数据，但是mongodb有自己的语法。mongodb里比较，用 “gt&amp;quot;、&amp;quot;gt&amp;quot; 、&amp;quot;gt"、"gte”、 “lt&
2019-01-21 10:13:25
888
原创 小程序NodeJs后台如何获取OpenId、UnionID和解密encryptedData
最近折腾了下小程序，搭了个Koa2框架的后台来测试一下各种数据的获取方法，特意来写下OpenId、UnionID的获取方式顺便也加深下自己的记忆。先来看看UnionID的获取途径：绑定了开发者帐号的小程序，可以通过以下途径获取 UnionID。调用接口 wx.getUserInfo，从解密数据中获取 UnionID。注意本接口需要用户授权，请开发者妥善处理用户拒绝授权后的情况。如...
2019-01-14 15:21:40
2706
1
原创 koa2获取小程序openid和解码uid
最近在折腾小程序的node后台，还是处于入门阶段，写一下也让自己深刻记录一下如何获取小程序的openid和uid。首先需要在在小程序后台获取小程序的appId和AppSecret，然后在小程序获取session_key所需的code。小程序端代码wx.checkSession({ success () { //session_key 未过期，并且在本生命周期一直有效 }, ...
2018-12-20 12:01:04
1444
4
原创 linux下mysql一些常用操作命令
登录mysql -u用户名 -p退出exit 或者 quit 或者 \q显示数据库show databases;切换数据库use 数据库名称;显示表show tables;新建表CREATE TABLE User(Id_ int not null,Account varchar(30) not null,PwassWord varchar(30) not ...
2018-12-19 09:49:32
198
原创 HTTP的几种请求类型和状态码解释
HTTP协议的请求方法有GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT。来看看每一种的详细讲解:1） GET最常见的一种请求方式，当客户端要从服务器中读取文档时，当点击网页上的链接或者通过在浏览器的地址栏输入网址来浏览网页的，使用的都是GET方式。GET方法要求服务器将URL定位的资源放在响应报文的数据部分，回送给客户端，使用GET方法时，请求参...
2018-12-13 14:35:56
449
原创 基于腾讯云CentOS服务器部署小程序后台
首先通过ssh连接你的服务器第一步：下载NodeJs以8.9.3版本为例下载： wget https://npm.taobao.org/mirrors/node/v8.9.3/node-v8.9.3-linux-x64.tar.xz解压： tar -xzvf node-v8.9.3-linux-x64.tar.gz 然后 tar -xvf node-v8.9.3-linux-x64....
2018-12-12 11:57:56
636
转载 meta viewport总结
<!DOCTYPE html> H5标准声明，使用 HTML5 doctype，不区分大小写<head lang=”en”> 标准的 lang 属性写法<meta charset=’utf-8′> 声明文档使用的字符编码<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/...
2018-12-10 16:53:42
126
原创 正则常用方法理解
默认情况：JavaScript 正则默认： 正则匹配成功就会结束，不会继续匹配。如果想查找全部，就要加标识 g（全局匹配）常用方法：test()规则：正则表达式搜索字符串指定的值，从而去匹配字符串。如果匹配成功就返回 true，如果匹配失败就返回 false。使用方法:let rep = /abc/gi;rep.test('abcasdasd'); // truesear...
2018-11-19 11:44:06
183
转载 理解Object.defineProperty
一般情况下，定义对象可以使用构造函数或字面量的形式。var obj = new Object; //obj = {}obj.name = "张三"; //添加描述obj.say = function(){}; //添加行为es6后，我们还可以使用Object.defineProperty定义新属性或修改原有的属性。语法：Object.defineProperty(obj, p...
2018-11-19 11:06:07
489
原创 URL.createObjectURL()的使用方法
URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。URL.createObjectURL(blob)和FileReader.readAsDataURL(file)很相似：区别通过F...
2018-11-16 09:22:15
137359
12
原创 深拷贝和浅拷贝的问题
不拷贝 =》 赋值举个例子：let a = { a:1, b:2, c:{ d:10, e:20 }}let b = a;b.a = 20;console.log(a.a) // 20直接赋值的话，对象是指向同一内存，所以修改对象b的属性，对象a的属性同时也会改变浅拷贝 => Object.assign(),和解构赋值.举个例子let a =...
2018-11-15 16:12:26
124
原创 页面兼容iPhone X的显示方法。
在适配iPhone X 的时候，首先要在head处添加meta，使页面充满屏幕然而iPhone X 增加了底部手势的提醒，如果页面内容过于贴近底部，会造成按钮误触的情况，为了避免这种情况，可以使用IOS的env变量来设置底部导航栏或者其他的元素。举个例子：&amp;amp;lt;div class=&amp;quot;header&amp;quot;&amp;amp;gt;&amp;amp;lt;/div&
2018-11-14 11:34:49
886
转载 关于Js的递归函数
之前一直理解不了递归函数的执行顺序，直到看了网上的一个非常傻瓜式的示例，终于理解了一点。例子如下。以阶乘为例：function factorial(n) { if (n == 1) return n; return n * factorial(n - 1)}console.log(factorial(5)) // 5 * 4 * 3 * 2 * 1 = 120例子作者...
2018-11-12 17:03:07
2646
原创 js判断数据类型方法。
JS判断类型的方式一共有以下几种，typeof、instanceof、 constructor、 prototype、还有第三方库。分开说明：typeof// Numberstypeof 37 === ‘number’;typeof 3.14 === ‘number’;typeof Math.LN2 === ‘number’;typeof Infinity === ‘numbe...
2018-11-08 17:32:45
177
原创 关于函数防抖和函数节流
函数防抖与节流是很相似的概念，但它们的应用场景不太一样。函数防抖简单来说就像法师释放技能的读条，如果你在施法读条时重复选择释放技能，那么读条时间将重新计算。举个例子：function debounce(func, delay) { var timeout; return function(e) { console.log("清除",timeout,e.ta...
2018-11-06 09:35:05
134
转载 Nginx基础配置
nginx.conf的基础配置转自技术胖：掘金文章#运行用户，默认即是nginx，可以不进行设置user nginx;#Nginx进程，一般设置为和CPU核数一样worker_processes 1; #错误日志存放目录error_log /var/log/nginx/error.log warn;#进程pid存放位置pid /var/run/nginx...
2018-11-01 11:06:16
105
原创 koa2解决跨域请求问题
安装cnpm install koa2-cors -S引入const app = new Koa();const bodyParser = require('koa-bodyparser');app.use(cors({ origin: function (ctx) { // if (ctx.url === '/test') { retu...
2018-10-26 14:15:38
2656
原创 Vue中用v-model实现父组件和子组件之间的数据通信
在Vue中实现父子组件之间的数据通信，除了用传统的Props/emit还有sync外，还能使用v-model来实现（2.2.0 新增）。类型：{ prop?: string, event?: string }model允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作...
2018-10-22 18:06:16
3856
原创 移动端适配问题，选vw还是rem？还是其他方式？
最近在学习前端页面的适配问题，问了身边几个前端岗位工作的的朋友移动端的适配方式，结果每个人都给出了不一样的适配方式，前段时间正火热的rem适配方式，现在已经慢慢vw赶上了，感叹前端技术变化真是快。接下来总结一下最近的学习：移动端适配是选vw还是rem？其实并不是所有场景下的移动端页面都适合的，采用vw或rem的方案的本质是布局等比例的缩放，这类方案可以保证页面各元素之间位置尺寸的比例关系，并...
2018-10-19 09:29:22
3200
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人