- 博客(54)
- 收藏
- 关注
RSS订阅转载 本地部署 easy-mock
在开始之前，假设你已经成功安装了Node.js（>= v8.9）&MongoDB（>= v3.4）&Redis（>= v4.0）。Node.js 安装配置：Node.js 安装配置 | 菜鸟教程MongoDB 安装教程：Windows 平台安装 MongoDB | 菜鸟教程Redis 安装教程：Redis 安装 | 菜鸟教程tips小提示node.js 和 mongodb 安装的时候一般一直 next 下去就可以了。 redis 下载下来是压...
2022-02-22 11:01:50
199
转载 CSS 选择器的优先级
优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。!important > 行内样式 > ID选择器 > 类选择器=伪类=属性 > 标签 > 通配符 > 继承 > 浏览器默认属性选择器越具体，其优先级越高// HTML<div id="test"> <span>Text</span></div>// CSSdiv#test s..
2022-02-17 16:42:19
4043
原创 浅析 React
React是一个用于构建用户界面的 JavaScript 库一、如何引入 React01.从 CDN 引入 React引入 React <script src="https://cdn.bootcdn.net/ajax/libs/react/ 18.0.0-alpha-6f3fcbd6f-20210730/umd/react.development.min.js"> </script>引入 React DOM <s..
2021-10-22 15:54:40
167
原创 浅析 v-model
简易的双向绑定改内存，页面会变化，改页面，内存变化<template> <div id="app"> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> <p> <button @click="message ='simpson'">set message to.
2021-09-11 22:40:51
109
原创 Vue 进阶构造属性
direvtives 指令自己创造指令1.声明一个全局指令Vue.directive('y',directivesOptions)Vue.directive('y',{ inserted:function(el){ el.addEventListener('click',() => {console.log('y')}) }})2.声明一个局部指令directives: { y: { inserted(el) { e
2021-09-10 13:52:03
111
原创 Vue 模板语法
模板语法Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。模板 template 的三种写法1. V
2021-09-09 19:03:50
1412
2
原创 浅析 Vue 修饰符 sync
Vue 修饰符 sync 是一个编译时的语法糖，功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步绑定到父组件中。我们知道Vue 有三条规则：组件不能修改 props 外部数据 this.$emit 可以触发事件并传参 $event 可以获取 $emit 的参数Vue 推荐以update:myPropName的模式触发事件取代真正的双向绑定。举个例子，在一个包含 title prop 的假设的组件中，可以用以下方法表达对其赋新值的意图：this.$emit(...
2021-09-08 09:13:37
189
原创 computed 和 watch 的区别
computed 是计算属性的意思，watch 是监听的意思computed 是用来计算出来一个值的，这个值调用的时候不需要加括号，会根据依赖进行缓存，依赖不变，computed 的值不会重新计算watch 是来监听的，有2个选项，immediate：表示是否要在第一次渲染的时候执行这个函数 deep：如果我们监听一个对象，那么我们是否要看这个对象里面属性的变化 如果某个属性变化了，就去执行一个函数...
2021-09-07 20:29:55
82
原创 Vue 数据响应式
响应式就是一个物体能对外界的刺激做出反应Vue 的 data 就是响应式const vm = new Vue({data:{n:0}})如果修改 vm.n，那么 UI 中的 n 就会响应Vue 2 通过 Object.defineProperty 来实现数据响应式何为响应式网页？改变窗口大小，网页内容会做出响应，就是响应式网页...
2021-09-05 15:44:23
482
原创 Vue 构造选项
一、何为构造选项我们一般把 Vue 的实例命名为 vmconst vm = new Vue(options)vm 对象封装了对视图的所有操作，包括数据读写、事件绑定、DOM更新vm 的构造函数是 Vue，按照 ES6 的说法，vm 所属的类是 Vueoptions 是 new Vue 的参数，一般称之为选项或构造选项二、options 的五类属性数据：data、 props、propsData、computed、methods、watchDOM:el、template、r...
2021-09-03 10:52:22
542
原创 浅析 Vue 的两个版本
一、Vue 的两个版本Vue 有两个版本，完整版和运行时版完整版：同时包含编译器和运行时的版本，编译器就是用来将模板字符串编译成为 JavaScript 渲染函数的代码运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切二、两个版本的区别 Vue 完整版 运行时版 评价 特点 有compiler 没有 compiler compiler 占40%体积 视图 .
2021-08-28 12:23:48
1802
原创 浅析 webpack
一、什么是 webpack?本质上，webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle二、webpack 的作用转译代码（ES6 转为 ES5，SCSS 转为 CSS） 构建 bulid 代码压缩 代码分析...
2021-08-25 15:06:19
106
转载 正则表达式快速入门
什么是正则表达式？在编写处理字符串的程序或网页时，经常会有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具。换句话说，正则表达式就是记录文本规则的代码。元字符元字符是构造正则表达式的一种基本元素常用的元字符 代码 说明 . 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线或汉字 \s 匹配任意的空白符 \d 匹配数字 \b 匹配单词的开始或结束 ^ 匹配字符串的开始 $
2021-08-24 16:06:46
789
原创 浅析 MVC
一、何为MVC？每个模块都可以写成三个对象，分别是 M、V、CM 是 Model，数据模型，负责数据相关的任务 V 是 View，视图层，负责用户界面 C 是 Controller，控制器，负责监听用户事件，然后调用 M 和 V 更新数据和视图接下来以代码展示三部分的工作内容Model 数据模型let Model={ data:{数据源}, create:{增加数据}, delete:{删除数据}, update(data){ O
2021-08-22 15:05:23
69
原创 promise 快速入门
在使用 promise 之前，如果异步任务有两个结果，成功和失败，有两种方法解决方法一：回调接受两个参数fs.readFile('./1.txt', (error, data) => { if (error) {console.log('失败'); return } console.log(data.toString()) //成功 })方法二：搞两个回调ajax('get', '/1.json', data => {}, er
2021-08-06 15:10:45
205
原创 异步与回调
什么是异步？什么是同步？能直接拿到结果，就是同步，比如医院挂号，拿到号才会离开窗口。 不能直接拿到结果，就是异步，比如餐厅等位取号，拿到号后，可以去做别的事。 可以每十分钟去餐厅问一下（轮询） 也可以扫码用微信接收通知（回调） 异步的结果可以通过轮询获取，轮询就是定时去询问结果拿到了没有 也可以通过回调获取，一般来说结果会被作为回调的第一个参数 异步的好处是可以把用来等待的时间拿去做别的事情什么是回调（callback）？写了却不调用，给别人调用的函数就是回调 比如我写一个函数 A，
2021-08-06 15:05:06
680
1
原创 AJAX 原理
什么是 AJAX？AJAX 是浏览器上的功能可以发请求，收响应 浏览器在 window 上加了 XMLHttpRequest 函数 用这个构造函数可以构造出一个对象 JS 通过它实现发请求，收响应四个步骤创建 HttpRequest 对象 （全称为 XMLHttpRequest） const request = new XMLHttpRequest()调用对象的 open 方法 request.open("GET", "URL")监听对象的 onload &am
2021-08-01 18:50:46
69
转载 DOM 事件委托
由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理事件委托（delegate），也被称为事件托管或事件代理，就是把目标节点的事件绑定到祖先节点上。这种简单而优雅的事件注册方式基于：事件传播过程中，逐层冒泡总能被祖先节点捕获。...
2021-07-27 21:31:17
301
原创 DOM 事件机制
2002年，W3C 发布标准DOM Level 2 Events Specification规定浏览器需要同时支持两种调用顺序：首先按照爷爷=>爸爸=>儿子的顺序看有没有函数监听然后按儿子=>爸爸=>爷爷的顺序看有没有函数监听有监听函数就调用，并提供事件信息，没有就跳过从外向内找监听函数，叫做事件捕获从内向外找监听函数，叫做事件冒泡addEventListener事件绑定 APIIE5：baba.attchEvent('oncli...
2021-07-26 19:58:53
141
原创 jQuery 功能概述
特殊函数 jQueryjQuery （选择器）用于获取对应的元素 但它却不返回这些元素 相反，它返回一个对象，称为 jQuery 构造出来的对象 这个对象可以操作对应的元素jQuery 是构造函数吗?是因为 jQuery 函数确实构造出了一个对象不是因为不需要写 new jQuery() 就能构造一个对象 构造函数都要结合 new 才行结论jQuery 是一个不需要加 new 的构造函数 jQuery 不是常规意义上的构造函数jQuery 对象代指 j...
2021-07-25 18:51:12
159
原创 封装 DOM
封装术语库我们把提供给其他人用的工具代码叫做库 比如jQuery、UnderscoreAPI库暴露出来的函数或属性叫做API(应用编程接口)框架当你的库变得很大,并且需要学习才能看懂，那么这个库就叫框架，比如Vue / React对象风格（命名空间风格）window.dom 是我们提供的全局对象增dom.create(`<div>hi</div>`) 用于创建节点 dom.after(node,node2) 用于新增弟弟 dom.bef
2021-07-25 18:50:51
170
原创 DOM 编程
获取元素的 APIwindow.idxxx 或者直接 idxxx document.getElementById('idxxx') document.getElementsByTagName('div')[0] document.getElementsByClassName('red')[0] document.querySelector(‘#idxxx’) document.querySelectorAll('.red')[0]获取特定的元素获取 html 元素docume.
2021-07-22 14:23:15
66
原创 算法与数据结构
三种语句搞定所有逻辑顺序执行语句语句1 语句2条件判断语句if...then...else... if...else if...else...循环语句while...do... for i from 1 to n...数据结构就是数据与数据之间的关系和结构 数据结构=数据形式+操作 不同形式的数据暴露不同的操作...
2021-07-20 11:01:53
118
原创 JS 总结
JS 公式对象.__proto__ === 其构造函数.prototype根公理Object.prototype 是所有对象的(直接或间接)原型函数公理所有函数都是由 Function 构造的 任何函数.__proto__ === Function.prototype 任意函数有 Object / Array / Function内存图构造函数是用来构造对象的 会预先存好对象的原型，原型的原型是根 new 的时候将对象的 __p 指向原型
2021-07-14 13:16:28
53
原创 JS 运算符
算术运算符number 运算加减乘除 余数 x % 7 指数 x ** 3 自增自减 x++ / ++x / x-- / --x 求值运算符 +x 负数运算符 -xstring 运算连接运算 '123' + '456'尽量少用自增自减 不同类型不要相加比较运算符> < >= <= == != === !==JS 三位一体0 == [] 0 == '0' 0 == '\t' 右边三个互不相等 == 会
2021-07-13 21:16:23
317
原创 JS 函数
具名函数function 函数名(形式参数1, 形式参数2){ 语句 return 返回值 }匿名函数具名函数，去掉函数名就是匿名函数 let a = function(x, y){ return x+y } 也叫函数表达式箭头函数let f1 = x => x*x let f2 = (x,y) => x+y // 圆括号不能省 let f3 = (x,y) => {return x+y} // 花括号不能省 let f4 = (x,y) =...
2021-07-12 10:45:40
128
原创 JS 函数的执行时机
为什么如下代码会打印 6 个 6let i = 0for(i = 0; i<6; i++){ setTimeout(()=>{ console.log(i) },0)}代码中 setTimeout 的意思就是执行完 for 循环之后，马上打印出 i 的值 因为只有一个i ，i 不小于 6 的时候才会退出循环，所以循环了6次，得到了6个6let 配合 for 循环可以打印出 0、1、2、3、4、5for(let i = 0; i<6; i+...
2021-07-10 15:19:44
50
原创 JS 对象分类
new 操作符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例new X() 自动做的事情自动创建空对象 自动为空对象关联原型，原型地址指定为 X.prototype 自动将空对象作为 this 关键字运行构造函数 自动 return this构造函数 XX 函数本身负责给对象本身添加属性 X.prototype 对象负责保存对象的共用属性代码规范大小写所有构造函数（专门用于创建对象的函数）首字母大写 所有被构造出来的对象，首字母小写
2021-07-08 15:45:54
82
原创 JS 数组
数组是一种特殊的对象JS 其实没有真正的数组，只是用对象来模拟数组典型的数组元素的数据类型相同 使用连续的内存存储 通过数字下标获取元素JS 的数组元素的数据类型可以不同 内存不一定是连续的（对象是随机存储的） 不能通过数字下标，而是通过字符串下标 意味着数组可以有任何 key 比如 let arr = [ 1 , 2 , 3 ] arr [ 'xxx' ] = 1创建数组新建let arr = [ 1 ,2 , 3 ]let arr = new Array..
2021-07-08 15:45:30
112
原创 JS 的数据类型
JS 至今有 8 种数据类型number string boolean symbol undefined null object bigint数组、函数、日期不是数据类型，它们是特殊的对象numberJS 里 number 是由64位浮点数组成的写法整数、小数、科学记数法、八进制、十六进制、二进制特殊值正0 和 负0 无穷大Infinity、+Infinity、-In...
2021-07-03 11:52:43
147
原创 数字和字符串的区别
数字和字符串功能不同1 != '1'数字能加减乘除，字符串不行字符串能表示电话号码，数字不行存储方式不同JS 中 数字是用64位浮点数的形式存储的JS 中 字符串是用类似 UTF-8 的形式存储的将十进制转换为二进制来存储数字十进制转换为二进制方法：二进制转换为十进制方法：用十六进制表示二进制因为二进制写起来慢二进制转换为十六进制方法：可以使用程序员计算器转换HEX 表示 16 进制，BIN 表示 2 进制OCT 表示 8 进制，DEC 表示
2021-06-30 19:07:22
7548
原创 JS 语法
JS 之父对 JS 的评价它的优秀之处并非原创，它的原创之处并不优秀表达式与语句表达式1+2 表达式的值为 3 console.log ('hi') 表达式的值为函数的返回值 console.log 表达式的值为函数本身1+23console.logƒ log() { [native code] }console.log ('hi')undefined语句var a=1 是一个语句表达式和语句的区别表达式一般都有值，语句可能有，可能没有..
2021-06-29 19:18:12
129
原创 canvas 绘制画板（1）
元素canvas 是一个可以使用脚本 (通常为 JavaScript ) 来绘制图形的 HTML 元素<canvas id="canvas" width="100" height="100"></canvas>该元素可以使用 CSS 来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果 CSS 的尺寸与初始画布的比例不一致，它会出现扭曲。通过使用 document.getElementById()方法来为 canvas 元素得到 DOM 对象。一旦有了元素对..
2021-06-28 18:45:28
298
原创 内存图与 JS 世界
操作系统常识（一切都运行在内存里）开机按开机键——主板通电——读取固件——加载开机程序——将文件里的操作系统加载到内存运行操作系统（以Linux为例）加载内核——启动初始化进程——启动系统服务（文件、安全、联网）——等待用户登录——登录后运行 shell bash 是一种 shell ，图形化界面也可以认为是一种 shell浏览器开启浏览器进程作为主进程，它会开启一些辅助进程，如网络服务，GPU加速，每新建一个网页，都有可能开启一个子进程。浏览器的功能发起请求，下
2021-06-27 13:11:51
51
原创 JavaScript 入门
JavaScript 的诞生1995年 布兰登 (Brendan Eich )为了应付公司安排的任务，用10天时间就把 JavaScript 设计出来了，他的设计思路是借鉴 C 语言的基本语法； 借鉴 Java 语言的数据类型和内存管理； 借鉴 Scheme 语言，将函数提升到"第一等公民"（ first class ）的地位； 借鉴 self 语言，使用基于原型（ prototype ）的继承机制。所以，JavaScript 语言实际上是两种语言风格的混合产物 ——（简化的）函数式...
2021-06-26 18:13:22
69
原创 部署 node.js 代码
ssh 远程登录步骤登录 root 账户 把本地公钥复制到阿里云的 ~/.ssh/id_rsa.pub 里echo '复制本地~/.ssh/id_rsa.pub内容' >> ~/.ssh/authorized_keys在本地用 ssh root@实例IP 远程操作云机器ssh root@实例IP可以在 host 里给 IP 取个别名 用 exit 退出云机器防止 ssh 卡住echo "Host *" >> /etc/ssh/ssh_config
2021-06-26 15:32:47
130
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人