会飞的犟驴-CSDN博客

原创 var、let、const 的本质区别

声明方式作用域变量提升初始赋值重复声明改变值var函数作用域有不需要允许可以let块作用域无不需要不允许可以const块作用域无需要不允许不可以改变值用 var/let 声明的是变量，可改变值用 const 声明的是常量，不可改变值作用域用 var 声明的变量不允许在其所在函数作用域之外使用用 let/const 声明的变量/常量不允许在其所在块级作用域之外使用变量提升用 var 声明的变量有变量提升，所以在变量声明之...

2021-02-24 11:02:48 223

原创【vue高级】MVVM实现原理第三篇编译模板Compile

我们已经有了数据，接下来就是要用数据替换掉html中的插值，以 {{}} 为例先把数据写复杂一点点data: { a: { a: 1 }, b: 2,},页面结构也复杂一点点<div id="app"> <p>{{a.a}}</p> <p>{{b}}</p></div>现在页面显示是这样我们需要编译一下，编译文档内容，自然需要文档dom和vue实例我们要把它拿到文档碎片中去操作function Comp

2021-02-04 17:44:51 150

原创【vue高级】MVVM实现原理第二篇数据劫持Observe

回想一下 vue 的使用方法<div id="app"> {{a}}</div><script> let vm = new Vue({ el: '#app' data: { a: 1 } })</script>我们这一篇的任务就是将 data 里面的属性全部通过 Object.defineProperty() 来进行定义那么我们接下来便实现 Vue 这个构造函数用过 vue 的同学都知道，通过 vm.$options

2021-02-04 17:10:41 288 1

原创【vue高级】MVVM实现原理第一篇 Object.defineProperty

MVVM就是所谓的双向数据绑定，特点是数据影响视图，视图影响数据；经常用来作对比的有 angular 和 vue，angular 靠的是脏值检测，vue 靠的是数据劫持和发布订阅模式。下面就来介绍一下 vue 的双向数据绑定是怎样实现的Object.definePropertyvue 使用的是 Object.defineProperty，顾名思义，是为对象定义属性新增属性先来为对象添加一个属性let obj = {}Object.defineProperty(obj, 'like', {

2021-02-04 16:22:19 149

原创 ES6模块与CommonJS模块的差异

ES6模块与CommonJS模块的差异CommonJS 模块输出的是一个值得拷贝，ES6 模块输出的是值得引用CommonJS 模块是运行时加载，ES6 模块是编译时输出接口CommonJS 加载的是一个对象（即 module.exports 属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一个静态定义，在代码静态解析阶段就会生出CommonJS 模块的 require() 是同步加载模块，ES6 模块的 import 命令是异步加载，有一个独立的模块依

2021-01-25 17:57:15 102

原创 ubuntu安装mongodb

1、安装mongodb去官网找到合适的版本，我这里用的4.0.21复制链接后使用wget命令下载：解压：移动到想要安装的目录：2、创建mongodb数据存储和日志文件cd /usr/local/mongodb/mkdir datamkdir logscd ./logstouch mongodb.logcd ../bintouch mongodb.confmongodb.conf中添加配置vi mongodb.conf#数据库路径dbpath=/usr/local/

2021-01-20 16:52:46 480

原创 CSS高度动态过渡动画

这个效果很常见，当我们需要鼠标移入移出控制元素的显示隐藏<div class="dynamic-height-btn">Hover Me</div><div class="dynamic-height-box fold"> 我是动态高度内容我是动态高度内容我是动态高度内容我是动态高度内容我是动态高度内容我是动态高度内容我是动态高度内容</div>const box = document.querySelector('.dynamic-heig

2021-01-20 15:18:50 7528 2

原创 display:none与visibility:hidden比较

父元素为 display: none，子孙元素页在劫难逃；父元素为 visibility: hidden，而子元素可以设置为 visibility:visible，并且生效设置为 display:none 的元素和设置为 visibility:hidden 的元素都无法获取焦点设置为 display:none 的元素无法响应任何事件，无论是捕获、命中目标和冒泡阶段均不可以；设置为 visibility:hidden 的元素可在冒泡阶段响应事件，因为设置为 visibility:hidden 的元素的子.

2021-01-20 10:17:56 201

原创水平垂直居中的优雅实现

1、定宽高.parent { position: relative;}.child { position: absolute; width: 200px; height: 100px; top: calc(50% - 50px); left: calc(50% - 100px);}1、不定宽高.parent { position: relative;}.child { position: absolute; top:

2021-01-18 14:54:10 89

原创在线协同编辑器Etherpad介绍与使用

1、介绍Etherpad 是一个基于 nodejs 的在线文档编辑器，服务端性能可以得到保证，多个客户端的操作是即时同步的，而且对文档数据提供了存储的支持。2、运行命令行进行项目根目录后，运行 /bin/run.sh，项目即可运行到 127.0.0.1:9001，输入 /admin 可进入管理员界面进行配置管理（开启 admin 管理界面需要将 settings.json 中的 users 注释去掉）。在管理员界面修改 settings 后可进行保存和重启。3、权限控制默认情况下，一个记事本能被任

2021-01-18 13:51:49 3913

原创前端开发重要基础知识

1. 元素水平居中与垂直居中1.1 水平居中如果它是一个行内元素，就对它的父元素应用：text-align: center如果它是一个块级元素，就对它自身应用：margin: auto1.2 垂直居中基于绝对定位的解决方案（分元素宽高固定和不固定两种情况）基于视口单位的解决方案（只适用于在视口中居中的场景基于 Flexbox 的解决方案（最佳解决方案），Flexbox 还可以将匿名容器（即没有被标签包裹的文本节点）垂直居中2. 简述box-sizing属性的作用content-b

2021-01-18 13:44:12 1361

原创块级格式上下文（BFC）详解及应用

BFC是什么BFC（Block Formatting Context，块级格式上下文）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。创建BFC的方式根元素（<html>）浮动元素（元素的 float 不是 none）绝对定位元素（元素的 position 为 absolute 或 fixed）行内块元素（元素的 display 为 inline-block）overflow 计算值（Computed）不

2021-01-18 13:23:06 535

sinat_39592712的博客