- 博客(80)
- 收藏
- 关注
RSS订阅原创 openFramework microsoft-visual-studio 安装与使用
发现了一个非常棒的教程：https://maker.pro/custom/tutorial/how-to-install-openframeworks-for-microsoft-visual-studiohttps://maker.pro/custom/tutorial/how-to-install-openframeworks-for-microsoft-visual-studio按照这个教程安装和使用基本没啥问题，记录下自己安装过程中遇到的问题：因为我是做前端的，一度以为是集成到平常开发用的编
2022-03-30 11:35:00
620
原创 立即执行函数详解及常见面试题
面试题引发的思考一道很经典的面试题： for(var i = 0; i < 5; i++) { setTimeout(function () { console.log(i) }, 1000) }输出5个5，因为setTimeout为宏任务，此时全局i为5。其中一个解决办法是将var改为es6的let, 在es5中就得用立即执行函数来解决立即执行函数通常有两种写法：（function()
2021-01-05 22:43:26
446
原创 HTTP
HTTP是什么超文本传输协议，是一个客户端和服务器间通信必须遵守的协议，可用于传输文本、图片、音频视频等。建立在tcp/IP协议之上，依靠 IP协议实现寻址和路由、TCP 协议实现可靠数据传输、DNS 协议实现域名查找、SSL/TLS 协议实现安全通信。此外，还有一些协议依赖于 HTTP，例如 WebSocket 等。URIURI 主要有三个基本的部分构成：协议名：即访问该资源应当使用的协议，在这里是“http”；主机名：即互联网上主机的标记，可以是域名或 IP 地址，在这里是“nginx.or
2020-12-09 21:22:09
12767
1
原创 浏览器执行javaScript代码基础
一段 JavaScript 代码在执行之前需要被 JavaScript 引擎编译，编译完成之后，才会进入执行阶段。输入一段代码，经过编译后，会生成两部分内容：执行上下文（Execution context）和可执行代码。执行上下文是 JavaScript 执行一段代码时的运行环境，比如调用一个函数，就会进入这个函数的执行上下文，确定该函数在执行期间用到的诸如 this、变量、对象以及函数等...
2020-12-01 16:45:14
294
原创 vue基础
Vue常用指令v-if v-elsev-showv-if 会根据渲染条件元素会被适当地销毁和重建v-show 通过控制css属性display来控制元素的显示与否，元素是一直存在的v-if 有更高的切换消耗而v-show有更高的初始渲染消耗，某些元素在进入页面时依靠接口请求数据决定是否显示，后面基本上很少变化了，用v-if比较合适，页面上显示与否状态会频繁切换用v-show，比如某个元素的显示与否是用户通过按钮来控制的。V-forV-bind 绑定动态属性数据v-once 执行一次性地
2020-11-11 21:17:01
499
原创 vue响应式原理及自定义事件原理
vue 自定义事件原理和订阅发布模式订阅发布模式订阅发布模式重点就是有一个事件中心，注册和触发都是对同一个对象class EventEmitter { constructor() { this.subs = Object.create(null) } // 订阅事件 $on(eventType, handler) { this.subs[eventType] = this.subs[eventType] || [] thi
2020-11-03 21:33:21
551
原创 vue-router基础回顾与原理
vue-router基础可以参考这篇: https://www.jianshu.com/p/4c5c99abb864这边还是提两点面试容易考的，可以从上面这篇文字找到答案：$route 和 $router 的区别 router.push() router.replace()路由守卫详细可以参考这篇：https://blog.csdn.net/bingqise5193/article/details/102959259常用的守卫有beforeEach 常用于进入页面前判断用户是否有权限
2020-10-31 16:42:18
751
原创 彻底搞通Js中的异步
首先考虑如下的场景：请求2只有在请求1成功的情况下才能发出，那么只要在请求2的成功的回调函数中发出请求1即可，代码如下：回调地狱 function ajax(url) { let xhr = new XMLHttpRequest() xhr.open('GET', url) xhr.onload = function() { if(this.status === 200) { console.l
2020-10-25 19:43:51
122
原创 彻底搞通Js中的事件循环
基本原理js是单线程的，避免了多个线程同时操作同一个DOM产生矛盾的问题。但浏览器Js引擎执行一段代码块，会将同步任务放到主线程排队执行，异步任务放到任务队列，异步任务又分宏任务和微任务，比如常见的setTimeout / setInterval 为宏任务，promise.then/Mutation Observe为微任务(在这里需要注意的是，尽管promise.then是微任务，但是其注册是在状态确认后同步的，具体后面通过示例讲解)。当主线程执行完毕后会去检查微任务队列，微任务队列中所有的任务都会被依
2020-10-25 19:43:07
121
原创 vue+element-ui 编译出错 unexpected token的问题
问题描述为了使用element-ui中的一些新特性，升级版本后也升级了相应的vue,vue-loader等，但是出现如下问题：问题分析可以看到是由于解析不了jsx的语法出错，只需要增加对其的支持即可解决办法具体参考：https://github.com/vuejs/babel-plugin-transform-vue-jsx...
2020-10-19 11:43:37
2333
原创 防抖和节流
为什么要防抖和节流一些持续触发的事件，如 resize、scroll、mousemove、拖拽等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。一些的具体场景：监听浏览器滚动事件，返回当前滚条与顶部的距离，页面resize事件，常见于需要做页面适配的时候搜索框input事件，例如要支持输入实时搜索可以使用节流方案（间隔一段时间就必须查询相关内容），或者实现输入间隔大于某个值（如500ms），就当做用户输入完成，然后开始搜索，方案要看业务需求。那么具体看看防抖和节流：防抖
2020-10-10 19:58:28
133
原创 let var const 总结
首先总结下let/var/const三者的区别与联系总结1.let和var和const的区别let没有变量提升，var有，所谓的变量提升即能否在声名变量前访问变量let 有块级作用域，var没有，所以if for等块对var来说没有限制作用，对let有在全局作用域中let声明不会像var一样会在全局window对象中创建一个属性let会有暂时性死区，只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。const的作用很多时候和let是一样的，
2020-10-09 21:30:39
128
原创 原型、原型链、new做了什么、继承
原型和原型链比我们通过一个构造函数new了一个新对象，构造函数的原型prototype指向一个对象，所有通过该构造函数new的新对象可以共享它所包含的属性和方法。构造函数的原型prototype是一个对象，那么它也可以有自己的构造函数原型prototype，通过这样，形成一个原型链。原型链最终都可以上溯到Object.prototype。Object.prototype的__proto__是null。null没有任何属性和方法，也没有自己的原型。因此，原型链的尽头就是null。来看一个例子：func
2020-09-25 16:21:44
327
原创 js 事件高频总结
添加事件的三种方法 <button onclick="alert('surprise 0')">click me 0!</button> <button id="dom1">click me 1!</button> <button id="dom2">click me 2!</button> <script> const dom1 = document.getElementById('dom1')
2020-09-25 10:48:42
238
原创 js变量类型、传值、计算等基础总结
变量类型存储地址，空间基本数据类型存储在栈中，占空间大小固定undefined,nullull,Boolean,Number,String,Symbol引用数据类型存储在堆中，大小不固定，引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体对象由于引用数据类型的特殊性，在函数传值时需要特别注意，来看以下例子： let obj = { name: 'liaof' }
2020-09-24 15:45:46
157
原创 数组/对象/字符串方法练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数组方法练习</title></head><body> <script> // .
2020-09-22 16:32:17
159
原创 彻底理解作用域、闭包和this
搞定作用域、闭包和this作用域闭包this新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入作用域可以理解为是一个对象包含了当前执行环境的信息。当查找变量的时候，会先从当前作用域对象中查找，如果没有找到，就会去父级查找，
2020-09-16 22:24:26
409
原创 es6基础 --- 9、异步编程 promise
异步编程js中的单线程是指负责执行代码的线程只有一个，这样设计的初衷是js是用来操作DOM的，多线程会产生DOM操作冲突。缺点：执行耗时任务时会阻塞代码执行，出现假死状态。解决：有同步模式和异步模式。JS代码执行是单线程，但是浏览器是多线程的，因此可以借用浏览器的多线程去执行一些耗时任务，如ajax请求。是同步模式还是异步模式是由运行环境提供的API来决定的。取个例子：一段代码中用promise封装了一个ajax请求，利用浏览器的多线程去请求这个ajax请求，该段代码继续执行，请求完成后，p
2020-06-29 21:52:15
201
原创 es6基础 --- 5、函数相关：参数默认值、剩余参数、箭头函数
参数默认值 function foo (enable) { // 通常设置默认参数会通过短路运算符来设置，但如果enable传入可转为false的值时，仍会使用默认值，造成bug let e = enable || true; // 应用以下代码 let e1 = enable === 'undefined' ? true : enable; } // es6默认参数,注意：默认参数的设置必须为最后一个参数 function bar
2020-06-11 10:39:18
140
原创 es6基础 --- 4、对象相关：解构、对象字面量、Object.assign
对象解构通过key值提取相应的value <script> // 对象解构，通过key提取相应value const student = { name: 'lf', age: 18 } const name = 'tom'; // name: nameObj 重命名 以防与外部变量冲突 // 可设置默认值 const { name: nameObj = 'default'} = student; console.log(name
2020-06-11 09:54:25
556
原创 es6基础 --- 1、var/let/const 区别
let 与 var的区别 let有块级作用域 es5中有全局作用域、函数作用域，es6中新增了块级作用域，即用let声明的变量只能在if的{}及for的(){}内访问到。 let 没有变量提升 在使用let定义变量前访问变量出错 而不是 undefined// let 没有变量提升console.log(b); // undefinedvar b = 200;console.log(a);let a = 100; // Cannot access 'a' befor.
2020-06-09 21:31:03
194
原创 es6基础 --- 3、数组相关：数组解构、数组展开
数组解构按位置提取相应数据 <script> // 数组解构 const arr = ['foo', 'bar', 'baz']; // 按位置提取 const [foo, bar, baz] = arr; console.log(foo, bar, baz); // foo bar baz // 提取第三个 const [, , third] = arr; console.log(third); // baz // 提取第一个和剩余数组
2020-06-08 17:24:00
176
原创 es6基础 --- 2、字符串相关：模板字符串及一些方法
模板字符串 ``可支持多行字符串：直接在 ``内换行即可而不需要\n，对HTML字符串友好 可嵌入变量和JS语句${name} ${1+2} 不需要再拼接字符串啦 let name = 'fang' console.log(`这是一段换行的语句 换行啦……`) console.log(`可嵌入变量${1+2} 换行啦,${name}……`) // 插入HTML语句时非常好用 const box = document.getEle..
2020-06-08 16:56:03
100
原创 各种常用正则汇总(持续整理中)
每三位数字一个逗号(兼容小数整数)var num = '12345.9990';// 取整数部分 -- 转数组后逆转var reversedNum = num.split('.')[0].split('').reverse().join('');// 整数部分加逗号 -- 转数组后逆转回来 -- 加上小数部分// 分组1回溯替换， 分组1： 匹配三个数字， $1引用分组1var...
2019-12-26 11:19:20
183
原创 js location 与 navigator对象
location对象href: 地址栏protocol: 协议host: 主机名端口号 或 域名 hostname: 主机名 port: 端口号pathname: 路径, host后、hash前或search前的路径hash: #号及后面的内容，如遇到?则停止，后续是searchsearch: ?及其后面的内容, 如遇到#则停止，后续是hash常用方法...
2019-11-14 10:37:10
198
原创 js 对象/数组/字符串常见的几个方法(不熟悉的汇总)
对象Object.assign()方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）常用于引用值浅拷贝Object.assign({}, obj)给对象新增属性Object.assign(obj, obj1)Object.keys()/Object.values()/Object.entries()只能遍历可遍历（enumera...
2019-11-13 16:23:22
198
原创 es6 export import
export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。具名export/import// 第一种写法export var firstName = 'Michael';export var lastName = 'Jackson';export var year = 1958;// 函数export function multiply...
2019-11-09 19:57:23
353
原创 vue vue-router 各个守卫的详细理解
导航守卫分类导航守卫按照维度分三个：全局的：进入任何一个路由都会执行beforeEach：进入路由前执行 beforeResolve：在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用 afterEach：导航确认执行时执行，可理解为导航完成时执行路由的：进入某个路由才会执行beforeEnter: 进入该路由前组件的：进入某个组件才会执行组件...
2019-11-07 19:57:14
2812
1
原创 js ajax基础
作用对页面的局部内容刷新，且不会进行url跳转使用新建实例 let xhr = new XMLHttpRequest() 定义请求xhr.open("GET", "https://www.apiopen.top/journalismApi", true) 定义数据请求完成后的行为xhr.onload = function() {} 发送请求xhr.send()整体有如上...
2019-11-07 14:36:01
131
原创 js 渲染和加载
JSON是一种传输数据的格式,本质上就是对象，对象就是本地用的，json是用来传输的 JSON.parse() 将string转为json JSON.stringify() 将json转为stringDOM渲染domTree + cssTree = renderTree 浏览器依据renderTree进行绘制页面dom节点的增删/dom节点的宽高变化 ...
2019-09-26 09:57:39
470
原创 js 事件2
鼠标事件onmousedown 鼠标按下，可检测左右键的操作 onmouseup 鼠标抬起，可检测左右键的操作onclick 点击，由按下抬起这两个操作组成，只能检测左键的操作oncontextmenu 右键菜单onmousemove 鼠标移动 移动端 touchmoveonmouseenter 鼠标移入，老版本onmouseover 移动端 t...
2019-09-25 15:14:35
81
原创 css 基础捡漏（四） float 包裹浮动子元素
浮动元素产生了浮动流 块元素看不到浮动流的元素，即块元素会和浮动元素重叠（这也是父元素包裹不了浮动子元素的原因）BFC元素、inline属性元素，及文本能看到浮动元素，可以正常排列 父元素包括浮动子元素 利用伪元素什么是伪元素？一个标签自产生时就带有了两个伪元素 ::before ::after 比如新建了一个span，这两个伪元素所在位置如下<spa...
2019-09-24 15:08:30
320
1
原创 css 基础捡漏（三） margin塌陷 margin合并 BFC 及相关解决办法
看下面的例子，你会发现father距上方100px,而child并没有离父元素上方100px.这就是margin塌陷而father和mather间距也不是150px,而是100px,这就是margin合并<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...
2019-09-23 16:16:43
259
2
原创 css 基础捡漏（二）
常见inline block inline-block 元素 inline: a span em strongblock: p div h1-h5 ul ol forminline-block: img input注意： 凡是带有inline的元素，都有文字特性，因此img并排时中间会有间隙,原因是img两个标签之间有空格，去除这些空格则间隙消失 层定位 absolu...
2019-09-23 15:37:33
134
原创 css 基础捡漏（一）
link加载方式 加载的文件为异步加载（asyn) , 浏览器会开启另一个线程去同时下载css文件，一边下载html 选择器优先级及权重 优先级由高到低 权重 ！important infinity 行间样式 1000 id选择器 100 class选择器/属性选择器/伪类选择器 10 标签选择器/伪元素选择器 1 通配...
2019-09-23 14:57:03
141
原创 html 基础捡漏
访问百度，实际上是本机下载的一个副本百度，因此可以随意修改其代码，删除元素，通过元素--右键--检查可以直接定位元素 a //在手机上这么写可以拨打电话<a href="tel:18261533231">打电话</a>//发邮件<a href="mailto:[email protected]">发邮件</a> 协议限定符jav...
2019-09-22 16:17:22
260
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人