![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
文章平均质量分 86
javascript
陈坚泓
你越是认真生活,你的生活就会越美好!!!
展开
-
apply call bind 手写源码实现
手写实现 apply call bind转载 2022-08-10 19:00:00 · 347 阅读 · 1 评论 -
window.postMessage - 前端跨域通信
前端跨域通信原创 2022-08-08 17:46:27 · 3272 阅读 · 0 评论 -
前端实现Base64图片压缩(可直接复制使用)
前端实现Base64图片压缩原创 2022-07-29 18:00:28 · 49488 阅读 · 3 评论 -
前端通过 URL 获取 File 对象(现成代码)
前端通过URL获取File对象原创 2022-07-25 17:16:57 · 6599 阅读 · 2 评论 -
前端同源跨窗口通信 BroadcastChannel
前端同源跨窗口通信原创 2022-06-02 14:46:54 · 1276 阅读 · 0 评论 -
photo-sphere-viewer中文文档
photo-sphere-viewer中文文档安装插件Configuration 配置项container (required)adapter 适配器panorama (required)plugins 插件caption 标题size 全景图宽度高度markers 标注navbar 导航栏minFovmaxFovdefaultZoomLvlfisheyedefaultLongdefaultLatlongitudeRangelatitudeRangeautorotateDelayautorotateSpee原创 2021-12-30 19:15:34 · 29802 阅读 · 91 评论 -
HTML5的popstate、pushState、replaceState记录(Vue-Router实现)
HTML5的popstate、pushState、replaceState记录popstate示例hashchangehistory.pushState()语法参数描述示例history.replaceState()语法参数例子推荐阅读Vue源码学习目录Vue Router源码(四)路径切换你越是认真生活,你的生活就会越美好——弗兰克·劳埃德·莱特《人生果实》经典语录Vue-Router源码里路由切换跳转的实现原理是通过调用浏览器原生的 history 的 pushState 接口或者 repla原创 2021-10-11 22:26:05 · 1530 阅读 · 0 评论 -
FormData相关
一文读懂Vue插件使用FormData构造函数语法参数例子方法推荐阅读你越是认真生活,你的生活就会越美好——弗兰克·劳埃德·莱特《人生果实》经典语录FormDataFormData-MDN文档FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式,并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去,本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data",它会使用和表单一样的格式。如果你想转载 2021-08-11 20:22:06 · 225 阅读 · 0 评论 -
一文读懂 require.context ,实现前端工程自动化
一文读懂require.context,实现前端工程自动化带表达式的 require 语句context modulerequire.context示例:context module API (resolve(), keys(), id)vue项目动态导入全局组件Vue源码学习目录你越是认真生活,你的生活就会越美好——弗兰克·劳埃德·莱特《人生果实》经典语录带表达式的 require 语句webpack官网 依赖管理如果你的request 含有表达式(expressions),就会创建一个上下原创 2021-07-16 22:43:35 · 3498 阅读 · 7 评论 -
export && import相关
export && importexport语法描述命名导出:默认导出:重导出 / 聚合示例使用命名导出使用默认导出模块重定向import语法描述导入整个模块的内容导入单个接口导入多个接口导入带有别名的接口导入时重命名多个接口仅为副作用而导入一个模块导入默认值动态import示例标准导入动态导入推荐阅读你越是认真生活,你的生活就会越美好——弗兰克·劳埃德·莱特《人生果实》经典语录exportexport - MDN在创建JavaScript模块时,export 语句用于从模块中转载 2021-05-07 21:43:59 · 1469 阅读 · 0 评论 -
一文学会js里bind方法的模拟实现,掌握bind、apply和bind区别和用法
一文读懂js里bind方法的模拟实现bind返回函数的模拟实现传参的模拟实现构造函数效果的模拟实现构造函数效果的优化实现最终代码推荐阅读你越是认真生活,你的生活就会越美好——弗兰克·劳埃德·莱特《人生果实》经典语录bind一句话介绍 bind:bind() 方法会创建一个新函数。当这个新函数被调用时,bind() 的第一个参数将作为它运行时的this,之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN )由此我们可以首先得出bind 函数的两个特点:返回一个函数可转载 2021-03-06 10:28:43 · 301 阅读 · 0 评论 -
一文了解JS里的instanceof 和 typeof 的实现原理
一文了解JS里的instanceof 和 typeof 的实现原理typeof 实现原理instanceof 操作符的实现原理总结推荐阅读你越是认真生活,你的生活就会越美好——弗兰克·劳埃德·莱特《人生果实》经典语录typeof 实现原理typeof 一般被用于判断一个变量的类型,我们可以利用 typeof 来判断number, string, object, boolean, function, undefined, symbol 这七种类型,这种判断能帮助我们搞定一些问题,比如在判转载 2021-03-04 23:45:58 · 390 阅读 · 2 评论 -
一文读懂js闭包
一文读懂js闭包什么是闭包闭包的两种主要形式函数作为返回值闭包作为参数传递闭包的利弊好的地方不好的地方推荐阅读你越是认真生活,你的生活就会越美好——弗兰克·劳埃德·莱特《人生果实》经典语录什么是闭包js的作用域分两种,全局和局部,基于作用域链相关知识在js作用域环境中访问变量的权利是由内向外的,内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量,反之则不能,也就是说在外层作用域下无法获取内层作用域下的变量,同样在不同的函数作用域中也是不能相互访问彼此变量的转载 2021-03-04 20:29:13 · 266 阅读 · 1 评论 -
web页面录制与回放全栈小项目
web页面录制与回放全栈小项目技术栈相关文档项目代码项目效果推荐阅读你越是认真生活,你的生活就会越美好——弗兰克·劳埃德·莱特《人生果实》经典语录技术栈前端Vue后端Node Egg数据库mongo录制与回访实现rrweb,websocket相关文档rrweb:打开 web 页面录制与回放的黑盒子 rrweb - GitHubrrweb中文文档rrweb使用指南WebSocket - 网络通信协议MongoDB 常用命令汇总egg-websocket-plugin原创 2021-02-23 23:44:06 · 2306 阅读 · 4 评论 -
一文读懂JS继承相关知识点
一文读懂JS继承相关知识点Javascript 面向对象编程(一):封装一、 生成实例对象的原始模式二、 原始模式的改进三、 构造函数模式四、构造函数模式的问题五、 Prototype模式六、 Prototype模式的验证方法6.1 isPrototypeOf()6.2 hasOwnProperty()6.3 in运算符你越是认真生活,你的生活就会越美好——弗兰克·劳埃德·莱特《人生果实》经典语录Javascript 面向对象编程(一):封装Javascript是一种基于对象(object-ba转载 2021-02-04 00:07:15 · 1346 阅读 · 0 评论 -
WebSocket - 网络通信协议
WebSocket - 网络通信协议一、为什么需要 WebSocket?二、简介三、客户端的简单示例四、客户端的 API4.1 WebSocket 构造函数4.2 webSocket.readyState4.3 webSocket.onopen4.4 webSocket.onclose4.5 webSocket.onmessage4.6 webSocket.send()4.7 webSocket.bufferedAmount4.8 webSocket.onerror五、服务端的实现你越是认真生活,你的生转载 2021-01-27 22:41:57 · 564 阅读 · 0 评论 -
一文读懂 JavaScript 内存泄漏、垃圾回收机制
JavaScript 内存泄漏一、什么是内存泄漏?二、垃圾回收机制三、内存泄漏的识别方法浏览器命令行四、WeakMapWeakMap 示例你越是认真生活,你的生活就会越美好 —— 弗兰克·劳埃德·莱特(人生果实纪录片)勤学如春起之苗,不见其增,日有所长;辍学如磨刀之石,不见其损,日有所亏。 —— 陶渊明一、什么是内存泄漏?程序的运行需要内存。只要程序提出要求,操作系统或者运行时(runtime)就必须供给内存。对于持续运行的服务进程(daemon),必须及时释放不再用到的内存。否则,内存转载 2020-12-13 10:09:11 · 284 阅读 · 0 评论 -
JavaScript 作用域、变量提升
JavaScript 作用域JavaScript 作用域JavaScript 局部作用域JavaScript 全局变量JavaScript 变量生命周期函数参数HTML 中的全局变量ES6中的变量和作用域通过let和const决定块作用域const创建不可变的变量JavaScript 变量提升JavaScript 初始化不会提升在头部声明你的变量你越是认真生活,你的生活就会越美好——弗兰克·劳埃德·莱特《人生果实》经典语录JavaScript 作用域作用域是可访问变量的集合。在 JavaScr原创 2020-12-04 17:50:39 · 8048 阅读 · 0 评论 -
ES6--箭头函数
ES6--箭头函数this转自ES6标准新增了一种新的函数:Arrow Function(箭头函数)。为什么叫Arrow Function?因为它的定义用的就是一个箭头:x => x * x上面的箭头函数相当于:function (x) { return x * x}箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种像上面的,只包含一个表达式(放在同一行...原创 2019-11-20 23:06:12 · 1712 阅读 · 0 评论 -
一文读懂cookie、sessionStorage和localStorage的区别
一文读懂cookie、sessionStorage和localStorage的区别,读完后,面试相关的问题就基本没问题了由于`HTTP是一种无状态的协议`,服务器单从网络连接上是无法知道客户身份的。这时候`服务器`就需要给`客户端`颁发一个`cookie`,用来确认用户的身份。原创 2020-11-15 23:32:44 · 13590 阅读 · 2 评论 -
vue源码中值得学习的方法
vue源码中值得学习的方法1. 数据类型判断2. 利用闭包构造map缓存数据3. 二维数组扁平化4. 方法拦截1. 数据类型判断Object.prototype.toString.call()返回的数据格式为 [object Object]类型,然后用slice截取第8位~倒数一位,得到结果为 Objectvar _toString = Object.prototype.toString;function toRawType (val) { return _toString.call(val).s原创 2020-10-15 00:05:50 · 12434 阅读 · 0 评论 -
Chrome开发调试的九个技巧
开发调试的九个技巧【谷歌浏览器】1. 允许重复声明let和class2. 过滤请求3. 展开所有的子节点4. 滚动元素到视图5. 预设设备6. 预设网络状况7. 捕获快照7.1 捕获全屏快照7.2 捕获局部快照8. 快速清空站点缓存9. 更改调试面板主题Chrome版本window上谷歌浏览器为最新版本 - 版本 85.0.4183.121(正式版本)(64 位),mac上谷歌浏览器为最新版本 - Version 85.0.4183.121 (Official Build) (64-bit)Chro原创 2020-10-11 21:42:14 · 5629 阅读 · 2 评论 -
JavaScript两个快速调试的技巧(console.table & copy)
JavaScript两个快速调试的技巧console.table展示数据copy复制数据console.table展示数据在控制台上展示数组或对象,使用console.table比console.log更加直观明了。// 在控制台上运行console.table([ { firstName: 'John', lastName: 'Doe', age: 2 }, { firstName: 'William', lastName: 'Shakespeare', age: 3 }])展示为一原创 2020-10-11 20:54:54 · 1558 阅读 · 2 评论 -
为什么会出现 MVVM
对于MVVM的理解为什么会出现 MVVM 呢?MVVM框架Vue-MVVM 架构的最佳实践MVVM是Model-View-ViewModel缩写,也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型,View代表UI组件,ViewModel是View和Model层的桥梁,数据会绑定到viewModel层并自动将数据渲染到页面中,视图变化的时候会通知viewModel层更新数据。为什么会出现 MVVM 呢?MVC即 Model-View-Controller的缩写原创 2020-09-20 08:09:38 · 2827 阅读 · 0 评论 -
Vue的路由实现原理:hash模式 和 history模式
Vue的路由实现:hash模式 和 history模式hash 模式(Vue-router默认)示例:hash模式优缺点history 模式示例:history 模式的优缺点:传统路由跟前端路由不同前端路由有两种模式:hash 模式和 history 模式,接下来分析这两种模式的实现方式和优缺点。Vue官方文档-HTML5 History模式为了方便演示,需全局安装 light-server:yarn global add light-server// 或者npm -g install ligh原创 2020-09-07 23:03:26 · 6690 阅读 · 0 评论 -
vue的双向绑定原理及一步一步实现MVVM
vue的双向绑定原理及简单实现MVVM几种实现双向绑定的做法MVVM实现思路整理MVVM是什么MVVM框架与MVC框架的主要区别有两点:MVVM实现1、实现数据监听器Observer2、实现指令解析器Compile3、实现订阅者Watcher4、实现MVVM本文主要围绕几种实现双向绑定的做法、“实现数据监听器Observer”、“实现指令解析器Compile”、“实现订阅者Watcher”、“实现MVVM”这几个模块来阐述了双向绑定的原理和实现。并根据思路流程渐进梳理讲解了一些细节思路和比较关键的内容点原创 2020-09-01 22:09:12 · 5609 阅读 · 4 评论 -
这一次,彻底弄懂 JavaScript 执行机制(Event Loop)
这一次,彻底弄懂 JavaScript 执行机制关于javascriptjavascript事件循环又爱又恨的setTimeout又恨又爱的setIntervalPromise与process.nextTick(callback)例子例子例子写在最后js的异步事件循环Event Loopjavascript的执行和运行setImmediate关于javascriptjavascript是一门单线程语言,在最新的HTML5中提出了Web-Worker,但javascript是单线程这一核心仍未改变。所以一转载 2020-08-22 16:58:44 · 4507 阅读 · 2 评论 -
JS压缩工具UglifyJS使用
JS压缩工具UglifyJS使用简介使用UglifyJS的命令格式如下uglifyjs的options参考简介UglifyJS是个包含JS解释器、代码最小化、压缩、美化的工具集,是前端开发打包的最常用工具之一。uglify-js目前只能压缩JS代码,且只支持到ES5语法,尚不支持ES6。有ES6语法会报错uglify-es在上面基础上,可以压缩es6语法,不过不会转为es5语法使用使用效果,打包后的js,没有注释内容,没有空格且合并到一行,简化了函数参数和变量名新建一个文件夹,包含要原创 2020-07-26 16:10:21 · 15242 阅读 · 2 评论 -
Vue引入echarts.js轻松实现雷达图(现成代码,复制粘贴可用)
引入echarts.js轻松实现雷达图临时的需求引入相关代码参考临时的需求端午前的周五临近下班,业务这边想针对中年女性做一个创意测评活动,希望周一上线,测评结果部分需要有雷达图展示,所以引入echarts.js来实现效果图如下 – 点我可体验页面引入echarts官网介绍cnpm install echarts --saveimport echarts from 'echarts'<!-- 雷达图标签--><div class="chart-wrap"><原创 2020-07-01 22:42:12 · 5708 阅读 · 1 评论 -
一文了解JS的函数柯里化
JS__一文学会函数柯里化柯里化是什么简单例子实现柯里化柯里化好处参数复用面试题通用的柯里化封装方法最近跟着黄轶老师学习Vue.js 2.5.17-beta版本源码时,看到了源码中用了函数柯里化,这里来写一篇,记录一下,加深印象柯里化是什么百度百科上:在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。这个技术由 Christopher Strachey 以逻辑学家 Haskell Cu原创 2020-05-12 08:52:01 · 1417 阅读 · 2 评论 -
一文看懂JS里隐式转换、toString() 和 valueOf()
JavaScript的数据类型非常弱(弱类型语言)在使用算术运算符时,运算符两边的数据类型可以任意,比如,一个字符串可以和数字相加。之所以不同的数据类型之间可以做运算,是因为JavaScript引擎在运算之前会悄悄的把他们进行了隐式类型转换;原创 2020-05-11 23:29:52 · 7081 阅读 · 4 评论 -
JS一些功能封装
Vue项目中一些功能封装src/utils/index.js// 返回context父实例componentNameconst findUpwardComponent = (context, componentName) => { let parent = context.$parent let name = parent.$options.name while (pare...原创 2019-10-11 21:54:15 · 3920 阅读 · 0 评论 -
JS数组降维--Array.prototype.concat.apply([], arr)
JS数组降维--Array.prototype.concat.apply二维数组降为一维数组循环降维concat降维apply和concat降维Vue2.6.11版本源码降维多维数组降为一维数组递归降维把多维数组(尤其是二维数组)转化为一维数组是业务开发中的常用逻辑,最近跟着黄轶老师学习Vue2.6.1.1版本源码时,看到源码对二维数组降维的代码,所以这里来写一篇,记录一下,加强印象Vue源码...原创 2020-04-25 10:57:53 · 19610 阅读 · 19 评论 -
Vue-给对象新增响应式属性(使用Vue.$set()或者Object.assign())
Vue.$set给对象新增属性在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,不会更新视图。根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性...原创 2019-10-30 23:40:09 · 21630 阅读 · 4 评论 -
ES6-class关键字与继承、通过class手写一个简易的jQuery,考虑插件和扩展性
ES6-class关键字与继承、通过class手写一个简易的jQuery,考虑插件和扩展性原创 2020-04-19 20:49:23 · 5535 阅读 · 0 评论 -
VS Code快捷键以及html速写Emmet语法(提升前端开发效率)
VS Code快捷键以及html速写Emmet语法先占个位,后面补充原创 2020-04-15 07:39:00 · 1017 阅读 · 0 评论 -
高德地图开放平台(js免费引入)
高德地图开放平台简介异步加载高德地图开放平台官网简介高德地图 JS API 是一套 JavaScript 语言开发的的地图应用编程接口,移动端、PC端一体化设计,一套 API 兼容众多系统平台。目前 JS API 免费开放使用。JS API 提供了2D、3D地图模式,满足绝大多数开发者对地图展示、地图自定义、图层加载、点标记添加、矢量图形绘制的需求,同时也提供了 POI 搜索、路线规划、地...原创 2020-04-06 21:35:53 · 2605 阅读 · 0 评论 -
JS事件汇总,addEventListener添加事件监听
JS事件汇总JavaScript 事件JS事件汇总鼠标事件键盘事件表单事件读取事件其它事件addEventListener()添加事件监听JavaScript 事件HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。HTML 事件可以是浏览器行为,也可以是用户行为。JS事件汇总鼠标事件...原创 2020-03-25 23:34:16 · 2877 阅读 · 0 评论 -
js事件节流、防抖、事件委托
js事件节流、事件委托事件节流事件防抖事件委托(事件代理)事件冒泡事件委托的优点代码兼容性写法事件节流事件节流和防抖是为了解决开发过程中遇到性能问题,常见于onscroll、onresize,频繁点击button等原理设置一个时间间隔,时间间隔内只允许执行一次例子onresize问题,页面满屏布局,模块很多dom结构也相对复杂。所以在窗口频繁快速变化大小的时候页面反应异常卡顿。// ...原创 2020-03-23 00:03:56 · 12738 阅读 · 2 评论 -
理解 JavaScript 的 async/await
理解 JavaScript 的 async/await参考参考理解 JavaScript 的 async/await–边城async 函数的含义和用法–阮一峰原创 2020-03-12 08:04:30 · 764 阅读 · 0 评论