自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 《css世界》笔记-文档流

《css世界》笔记 何为“流”? “流”是CSS世界中的基本定位和布局机制; CSS世界构建的基石是HTML, html最具代表性的两个基石块级元素<div>, 内联元素<span>。 流体布局: 就是利用元素“流”的特性实现的各类布局效果,因为“流”本身具有自适...

2020-04-06 23:00:26

阅读数 6

评论数 0

原创 mac上安装nvm管理node版本以及nvm如何设置node默认版本

安装 curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash 验证 输入nvm --version 如果提示命令不存在 可以重新打开终端试一下 可能因为缺少.bash_profile...

2020-04-05 16:45:15

阅读数 7

评论数 0

原创 git push时,报错 Commit validation failed for commit

开头一堆废话,可直接跳到文末 事情是这样发生的: 一直用vscode作为代码编辑器,终端也是用vscode自带的。 某个阴天的上午,我准备git push我的代码,push之前,我先pull了一下远程代码,不巧的是,有冲突。 于是,全神贯注的解决完冲突后,重新commit了一下,commit时,没...

2020-04-03 16:00:42

阅读数 17

评论数 0

原创 关于如何生成sshkey

查看已有sshkey ls -al ~/.ssh 如果有sshkey,直接复制内容即可 生成新的sshkey ssh-keygen -t rsa -C "my-email@163.com" 默认会在相应路径下(/your_home_path)生成id_rsa和id_rsa....

2020-04-01 10:23:40

阅读数 19

评论数 0

原创 利用canvas影像合成实现刮刮卡效果

文章目录Canvas对象CanvasRenderingContext2D合成刮刮乐效果的实现 Canvas对象 HTML的canvas元素; 它定义了一个在客户端使用脚本绘图的API,可以直接为这个对象定义width和height。 也可以用toDataURL()方法从画布中导出图片。 不过实际绘...

2020-03-30 16:02:41

阅读数 17

评论数 0

原创 字节跳动一面的几道面试题

一面问题比较基础,但是由于平时使用vue+js, 字节跳动该岗位是react+ts,再加上面试表现的太紧脏,一面就凉凉了。。。。 下面凭记忆还原一下面试题,都很常见,如有错误欢迎指出 实现三列布局,左右宽度固定,中间列自适应 我的答案: 左右float, 中间用margin flex布局,左右固...

2020-03-19 00:32:55

阅读数 23

评论数 0

原创 记一道字节跳动的面试题 js操作dom的执行顺序

面了一轮字节跳动,遇到一个面试题记录一下 题目如下 function demo () { const now = new Date().valueOf() document.body.style.backgroundColor = 'red'; while(new Dat...

2020-03-18 23:45:31

阅读数 19

评论数 0

原创 h5解决滚动穿透

/** * 添加fix定位解决滚动穿透 * @return {Number} 文档滚动高度 */ scrollAddfix() { let theTop = 0; // 文档滑动距离 ...

2020-03-11 16:37:02

阅读数 14

评论数 0

原创 window.performance对象

通过window.onpageshow的事件对象的persisted属性可以判断页面是否是从缓存读取的。 但试了几次,不管刷新还是前进后退persisted都是false。 查了一下看到一个新对象 window.performance属性如下: 其中有个navigation属性,里面的type也...

2020-03-10 15:58:16

阅读数 15

评论数 0

原创 document对象和window的常用事件

document readystatechange 当document.readyState的值发生变化时就会触发以上事件 readyState的值有: 1. loading DOM还在加载中(此时貌似js还没开始执行,js里捕获不到这个状态) 2. interactive DOM已经加载完毕,c...

2020-03-10 15:17:45

阅读数 14

评论数 0

原创 js里的位运算|&^~>>

几种位运算的含义: | 按位或运算 0010 | 1000 = 1010 & 按位与运算 0010 & 1000 = 0000 ^ 按位异或运算 >> 右移一位,高位原本是1就补1,否则补0 << 左移一位,低...

2020-03-08 20:49:16

阅读数 39

评论数 0

原创 cookie、session、Token、JWT究竟是怎么用的?

实际项目中经常用到cookie,session,token,知道是授权、验证用户身份用的,最近看了一个公众号文章,趁热记录一下它们究竟怎么工作的。 凭证:访问应用时对用户进行身份认证和授权的东东。 cookie和session http是无状态的协议,每个请求都是独立的,服务端无法确认当前访...

2020-03-01 22:10:10

阅读数 100

评论数 0

原创 mockjs在项目中的使用方法详解

Mockjs是一个模拟数据生成器,用于帮助前端开发,使其独立于后端进程,并减少一些单调性,特别是在编写自动化测试时。 一、项目实战 1. 安装mockjs npm install mockjs --save-dev 2. 引入mockjs,模拟数据 // 新建一个mock.js文件 impor...

2020-02-29 23:02:57

阅读数 125

评论数 0

原创 git pull 代码时报错refusing to merge unrelated histories

出现场景: 本地新建一个文件夹开始开发项目,开发完成后要同步到git仓库,此时在根目录运行以下指令 git init git add . git commit -m 'initial commit' git pull origin dev // 执行这里就报错了 执行到...

2020-02-27 23:52:01

阅读数 87

评论数 0

原创 h5初始化样式

@fontFamilyDefault: PingFang SC, miui, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, sans-seriff; body, button, inpu...

2020-02-27 22:43:55

阅读数 100

评论数 0

原创 过滤emoji表情

实际项目中,input输入框经常用来输入手机号,姓名,邮箱等内容,会对文本格式进行限制,例如只能输入数字,字幕或者汉字。而iOS输入法中自带emoji表情,要过滤emoji表情时可以使用以下方法 filterEmoji(str) { if (typeof str !== 'str...

2020-01-19 14:45:54

阅读数 100

评论数 0

原创 使用原生drag拖放元素时,event对象的dataTransfer属性们

拖放元素时,拖放事件发生顺序如下: dragstart ->drag -> dragenter -> dragover ->drop ->dragend 还有一个dragleave 他们的event对象特有一个dataTransfer属性,主要用于源元素和目标元素之...

2020-01-03 10:48:03

阅读数 111

评论数 0

原创 qs—对象序列化为查询参数和URL解析成对象的库

安装 npm install qs 使用 let qs = require('qs') // 或者 import qs from 'qs' 方法 对象序列化为URL查询参数 let obj = {a: 1, b: 2, c: 3}; let str ...

2020-01-02 16:21:38

阅读数 90

评论数 1

原创 H5中ondrop事件监听不到,原因竟然跟dragover事件有关!!

问题及解决方法 被拖拽元素拖到目标元素后,本想通过目标元素监听ondrop事件来进行业务处理,但是实现过程中发现ondrop事件并没有触发。代码如下: <!DOCTYPE html> <html lang="en"> <head> ...

2019-11-20 21:20:18

阅读数 86

评论数 0

原创 React系列: immutable.js的使用方法

immutable常用api 一,List import {List} from 'immutable' 1.List() const emptyList = List() //创建一个空的List结构的数据 const plainArray = [ 1,...

2019-10-25 10:51:20

阅读数 39

评论数 0

原创 Vue—nextTick的实现原理

使用nextTick 全局使用: // DOM 还没有更新 Vue.nextTick(function () { // DOM 更新了 }) // 作为一个 Promise 使用 Vue.nextTick().then(function () { // DOM 更新了 }) 实例方...

2019-10-09 16:50:10

阅读数 66

评论数 0

原创 React系列: setState以及setState更新机制

在React中,数据是自顶向下单向流动的,即从父组件到子组件。这样组件之间的关系变得简单并且可预测。 state和props是React组件中最重要的改建,如果顶层组件初始化props, 那么React会向下遍历整颗组件树,重新尝试渲染所有的子组件。而state只关心每个组件自己内部的状态,这些...

2019-09-27 14:57:41

阅读数 114

评论数 0

原创 React系列:React的生命周期

React声明周期 React组件的生命周期可以分为挂载,渲染,卸载几个阶段。 组件挂载时: class App extends Component { static propTypes = { // ... }; static defaultProps = { ...

2019-09-25 10:21:31

阅读数 56

评论数 0

原创 React系列:组件性能优化 (shouldComponentUpdate, PureComponent, PureRender, Immutable)

react中有时候会有一些不必要的render,例如:1. 父组件传递props给子组件,即使props没有更新,子组件也会重新render;2. setState两次值相同,也会render 优化方法 1. shouldComponentUpdate shouldComponentUpdate接...

2019-09-18 17:51:02

阅读数 49

评论数 0

原创 React系列: redux - bindActionCreators的使用方法

react-redux的connect方法 接受4个参数: mapStateToProps(state, [ownProps]) 接受完整的redux状态树作为参数,返回对象的所有key都会成为组件的props mapDispatchToProps(dispatch, [ownProps]) 接...

2019-09-17 15:26:24

阅读数 147

评论数 0

原创 vue-router源码分析(二)--HTML5History

首先:HTML5History也继承自History var HTML5History = (function(History$$1){...})(History) function getLocation (base) { //处理url var path = decodeURI(w...

2019-09-12 13:43:31

阅读数 66

评论数 0

原创 VueRouter源码(三)--RouterView, RouterLink

注册为vue组件 RouterView 和RouterLink组件在install方法中注册成了Vue的组件 function install (Vue) { ... Vue.component('RouterView', View); Vue.component(...

2019-09-12 13:42:57

阅读数 99

评论数 0

原创 vue里使用bpmn绘制流程图(四)

1. 替换节点汉化 点击扳手图标可以将当前节点替换成新的节点。节点名称默认是英文,此处可以汉化 控制弹框显示的源码在 bpmn-js\lib\features\popup-menu\ReplaceMenuProvider.js中 import translation from &...

2019-09-11 10:58:17

阅读数 1180

评论数 1

原创 vue里使用bpmn绘制流程图(三)

自定义工具栏和节点形状 工具栏的源码在 bpmn-js\lib\features\palette\PaletteProvider.js中 PaletteProvider中定义了getPaletteEntries方法,用于新增工具栏项目 PaletteProvider.prototype...

2019-09-11 09:15:48

阅读数 906

评论数 0

原创 vue里使用bpmn绘制流程图(二)

上回记录到在页面上生成并编辑流程图; 但是实际使用中,往往需要进行自定义; 下面就根据实际需求来一步一步实现自定义。 不同的节点用不同的颜色区分 插件提供的接口方法 this.viewer.importXML(diagramXml, err => { if (err) ...

2019-09-10 18:02:31

阅读数 814

评论数 0

原创 vue里使用bpmn绘制流程图(一)

安装 1.HTML中使用,通过script标签引入 <script src="https://unpkg.com/bpmn-js@5.0.3/dist/bpmn-modeler.development.js"></script> 2.npm安装...

2019-09-10 16:51:26

阅读数 3950

评论数 1

原创 H5把页面表格数据导出到本地文件,导出为本地csv文件

参考iview的表格导出 导出表格需要有表头数据和具体数据 //表头 let columns = [ { title: '品牌', key: 'brandName' }, { title: '品种', key: 'bre...

2019-08-27 15:34:27

阅读数 120

评论数 0

原创 Compression Plugin Invalid Options options should NOT have additional properties

webpack打包时想要压缩js和css文件, 按照以前的项目拷贝了如下配置 new CompressionWebpackPlugin({ asset: '[path].gz[query]', algorithm: 'gzip', ...

2019-08-26 13:59:39

阅读数 100

评论数 0

原创 vue 双向数据绑定(补充)--数组

上回写到,vue里通过new Observer实例,来对数据进行劫持,重写get和set,在set里会触发订阅者的更新,从而实现数据同步更新。 补充一下数组的处理 var Observer = function Observer (value) { this.value = value; ...

2019-08-23 11:53:03

阅读数 76

评论数 0

原创 Vue双向数据绑定的原理源码解析

vue的双向数据绑定通过数据劫持+发布订阅实现的 数据劫持的实现 vuejs里定义了一个observe(value, asRootData)方法, 该方法会检测传入的value是否已经被劫持过,如果是直接返回,如果不是,会用value实例化一个Observer实例,Observer方法中,...

2019-08-19 10:51:56

阅读数 59

评论数 0

原创 函数柯里化应用

函数柯里化 把使用多个参数的函数转换成一系列使用一个参数的函数,返回接受余下参数并且返回结果的新函数;(也就是:只传递一个部分参数来调用这个函数,让他返回一个新函数去处理余下的参数) 日常应用 动态创建函数:(dom元素添加事件监听是,根据兼容性判断生成不同的函数) //只在函数第一次执行时判...

2019-08-12 16:16:55

阅读数 45

评论数 0

原创 安卓Android系统,H5页面键盘弹出后,页面挤压变形或者底部输入框被遮挡的解决办法

键盘弹出挤压页面至变形 如下页面,背景图片height: 100%; 底部输入框部分用position:absolute定位,当键盘弹出时,页面整体被挤压; 解决方法 页面加载后获取视图高度为height, 监听window.onresize,指定容器高度为height 存在的问题: 偶尔会出...

2019-08-08 16:31:07

阅读数 96

评论数 0

原创 vue2项目从webpack3升级到webpack4过程全记录以及多页面打包

升级各种插件,尤其是babel系列,从6升级到了7 babel7系列的安装大多是@babel/开头,至少需要安装以下插件 "@babel/core": "^7.4.5", //核心包 "@babel/plugin-synta...

2019-07-29 15:08:00

阅读数 94

评论数 0

原创 https通信机制(http + ssl/tls)

https(http+ssl) https协议不是应用层的新协议,只是HTTP通信接口部分用SSL 或 TLS协议代替 一般情况,HTTP直接和tcp通信,使用SSL时,变成HTTP先和SSL通信,然后SSL在和TCP通信 SSL独立于HTTP,其他运行在应用层的协议,比如SMTP,Teln...

2019-07-29 11:02:57

阅读数 38

评论数 0

原创 nvm管理node版本

1,安装nvm 下载链接nvm安装包 选择“nvm-noinstall.zip”包下载 2,解压安装包,双击indtall.cmd,输入nvm包所在的路径,C:\nvm-noinstall然后回车 例如解压到C:\nvm-noinstall 3,生成setting.txt文件后,输入 ...

2019-07-09 11:11:52

阅读数 51

评论数 0

提示
确定要删除当前文章?
取消 删除