RawMarin-优快云博客

原创一些非常基础的内容合集

块元素、内联元素、空元素有哪些，它们之间的区别？行内元素有：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;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp

2018-10-16 09:50:20 701

原创 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 336

原创 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 190

原创 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 493

原创防抖&节流函数的实现

防抖和节流函数算是非常基础的工具函数了，说一下个人的简单理解：防抖：用户操作会在一定等待一段时间后执行function，如果用户在等待时间范围内重复操作，则重新计算等待时间（相当于有施法前摇时间，如果你重复释放技能，则技能前摇重新计算。）节流：用户频繁操作下，function必须经过一定的时间间隔后才会执行，如每10秒才可以执行一次。相当于有冷却时间的function具体实现：防抖：function debounce(fn, wait) { var timer = null;

2020-06-11 17:47:20 1162

原创实现上下固定中间自适应布局

常见移动端的整体布局，下面用绝对定位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 535

原创 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 219

原创通过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 468 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 601

原创常用源码总结

$nextTick 的源码理解一句话总结，就是把nextTick里的回调函数放到一个callback队列里面，先后查找promise、MutationObserver、setImmediate、setTimeout、等浏览器微任务或宏任务是否可以进行操作，是的话就把callback队列放到函数回调中执行。如果使用nextTick不传入callback函数的话，在2.1.0版本后的Vue里，则会抛...

2020-05-06 11:22:42 152

原创个人Vscode 配置

{ /* ----------------编辑器样式配置---------------- */ // 资源管理器位置 "workbench.sideBar.location": "left", "editor.tabSize": 2, // "explorer.confirmDelete": false, "workbench.colorTheme": "Dra...

2020-03-11 11:21:34 297

原创常用的一些正则表达式

为数字加上千分号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 148

原创浏览器禁止缓存

2019-09-17 08:57:52 154

原创 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 1953

原创深拷贝解决方案

虽然深克隆有简单粗暴的一句话方式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 350

转载 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 1980

转载 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 427

原创防抖与节流的一些理解

防抖和节流都是为了减轻浏览器和服务器的压力，至于是使用防抖还是节流，就要根据具体业务来进行具体分析和使用。防抖防抖的作用就是触发事件后等待一定时间后执行一次方法，如果在该时间内再次触发事件，则会重新开始等待。举个例子function debounce(fn, delay) { var timeout = null; return function() { if(timeout...

2019-02-18 10:21:04 246

原创 Less 和 Sass 的使用差异和一些理解

Sass和Less都属于CSS预处理器，简单的理解就是“用一种专门的编程语言，进行 Web 页面样式设计，不同的处理器通过不同的编译器转化为正常的 CSS 文件，以供项目使用”。差异：最基础的差异就是less与Sass处理机制不一样前者是通过客户端处理的，后者是通过服务端处理，相比较之下前者解析会比后者慢一点。主要原因是因为Sass是基于Ruby的，是在服务器端处理的。很多开发者不选择L...

2019-02-14 09:33:21 317

原创 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 179

原创 H5 活动利用Canvas把用户信息和二维码合并到图片内。

之前一直都在写业务类的页面，非常少接触canvas，最近公司要出一个测试类的H5活动页面，需要在用户完成测试后把用户输入的资料和二维码合并在测试结果图中。其中有个坑，就是canvas是不能使用rem单位的，所以开头我就打算动态取页面中img的宽度来进行2倍图的绘画，结果掉进了这个坑里非常烦恼，然后突然想到其实只要按设计给你的图片的原先尺寸进行绘画就行了，并不需要动态进行宽高设置。下面是实现代码...

2019-01-25 16:56:13 1073

原创 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 956

原创小程序NodeJs后台如何获取OpenId、UnionID和解密encryptedData

最近折腾了下小程序，搭了个Koa2框架的后台来测试一下各种数据的获取方法，特意来写下OpenId、UnionID的获取方式顺便也加深下自己的记忆。先来看看UnionID的获取途径：绑定了开发者帐号的小程序，可以通过以下途径获取 UnionID。调用接口 wx.getUserInfo，从解密数据中获取 UnionID。注意本接口需要用户授权，请开发者妥善处理用户拒绝授权后的情况。如...

2019-01-14 15:21:40 2774 1

原创 koa2获取小程序openid和解码uid

最近在折腾小程序的node后台，还是处于入门阶段，写一下也让自己深刻记录一下如何获取小程序的openid和uid。首先需要在在小程序后台获取小程序的appId和AppSecret，然后在小程序获取session_key所需的code。小程序端代码wx.checkSession({ success () { //session_key 未过期，并且在本生命周期一直有效 }, ...

2018-12-20 12:01:04 1500 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 227

原创 HTTP的几种请求类型和状态码解释

HTTP协议的请求方法有GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT。来看看每一种的详细讲解:1） GET最常见的一种请求方式，当客户端要从服务器中读取文档时，当点击网页上的链接或者通过在浏览器的地址栏输入网址来浏览网页的，使用的都是GET方式。GET方法要求服务器将URL定位的资源放在响应报文的数据部分，回送给客户端，使用GET方法时，请求参...

2018-12-13 14:35:56 511

原创基于腾讯云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 667

转载 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 142

原创正则常用方法理解

默认情况：JavaScript 正则默认：正则匹配成功就会结束，不会继续匹配。如果想查找全部，就要加标识 g（全局匹配）常用方法：test()规则：正则表达式搜索字符串指定的值，从而去匹配字符串。如果匹配成功就返回 true，如果匹配失败就返回 false。使用方法:let rep = /abc/gi;rep.test('abcasdasd'); // truesear...

2018-11-19 11:44:06 238

转载理解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 511

原创 URL.createObjectURL()的使用方法

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。URL.createObjectURL(blob)和FileReader.readAsDataURL(file)很相似：区别通过F...

2018-11-16 09:22:15 138644 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 151

原创页面兼容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&amp

2018-11-14 11:34:49 927

转载关于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 2682

原创 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 202

原创关于函数防抖和函数节流

函数防抖与节流是很相似的概念，但它们的应用场景不太一样。函数防抖简单来说就像法师释放技能的读条，如果你在施法读条时重复选择释放技能，那么读条时间将重新计算。举个例子：function debounce(func, delay) { var timeout; return function(e) { console.log("清除",timeout,e.ta...

2018-11-06 09:35:05 164

转载 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 124

原创 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 2703

原创 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 3889

原创移动端适配问题，选vw还是rem？还是其他方式？

最近在学习前端页面的适配问题，问了身边几个前端岗位工作的的朋友移动端的适配方式，结果每个人都给出了不一样的适配方式，前段时间正火热的rem适配方式，现在已经慢慢vw赶上了，感叹前端技术变化真是快。接下来总结一下最近的学习：移动端适配是选vw还是rem？其实并不是所有场景下的移动端页面都适合的，采用vw或rem的方案的本质是布局等比例的缩放，这类方案可以保证页面各元素之间位置尺寸的比例关系，并...

2018-10-19 09:29:22 3312

空空如也

空空如也