- 博客(84)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 前端中高级知识要点总结（3w+长文）
本文整理前端常见的知识要点，方便随时复盘。内容主要涵盖JS基础、CSS、HTML，JS面向对象，渲染机制，网络HTTP，前端安全，设计模式，算法等方面。注：文章内容相对而言有一定的难度，所以需要读者有一定的基础。另外，若文章有何不妥之处或者你有任何疑问，欢迎留言讨论。一.JS基础1.手写实现call()call()、apply()和bind()这是前端人逃不过的三个方法，是从初级向中级进阶所必会的。通过使用这些方法，我们可以修改函数绑定的this，使其成
2020-10-09 22:59:51
10278
8
原创 前端学习与工作中常用网站推荐
一.视频学习网站1.慕课网（质量好，价格较贵，更专业，废话少）2.腾讯课堂（质量参差不齐，价格便宜，较啰嗦）。。。当然还有很多其他的视频学习网站，但我觉得就这两个就够质够量了。二.前端免费模板下载1.html5tricks有很多有趣的小程序2.源码之家各类模板灰常之多，不过也有很多广告3.代码家园整个网站看起来舒服，广告很少4.模板之家广告较...
2019-11-12 13:48:11
17460
13
原创 使用 fetch 获取接口返回的流式数据
前端进行提问，接口这边使用AI进行答疑，回答内容流式输出到前端。接口的 Response Headers 的 Content-Type 为。：开始也尝试使用过 axios，设置。，但并没有实现流式输出。
2024-02-02 10:33:29
728
原创 JSON.parse() 方法解析报错：Bad control character in string literal in JSON at position xx
这个是第一反应想到的方法，但比较麻烦，因为不确定聊天记录里还有那些特殊字符编码。通过这个方法，就可以得到一个解析好的对象，是不是很神奇？json 字符串中包含特殊字符编码。（垂直制表符），导致解析报错。
2023-06-15 16:23:31
1388
原创 JS 浮点数精度问题，以及 toFixed 的 bug
1.JS 浮点数精度问题由于 JS 存在精度问题，所以以下运算结果与预期不符。注：以下代码若无特殊说明，则均为谷歌浏览器下的运行结果。0.56 * 100 // 56.000000000000010.1 + 0.2 // 0.300000000000000040.3 - 0.1 // 0.19999999999999998所以不要用浮点数做以下判断if (0.1 + 0.2 === 0.3) {}当我们对浮点数做运算后要保留固定位小数时，也要进行处理0.5623 * 100 // 预期
2022-03-31 17:39:47
1940
原创 JS 复制内容到剪贴板
使用 JS 复制内容到剪贴板主要有两种方式：使用 clipboard.js 插件使用 document.execCommand() 原生方法1.使用 clipboard.js 插件改插件使用比较简单，兼容性较好。具体使用方法见：github clipboard.js2.使用 document.execCommand() 原生方法直接见代码：/** * 复制内容 * @param {String} value 需要复制的内容 * @param {String} type 元素类型 in
2022-02-23 14:31:01
6557
原创 JS 压缩图片
由于用户上传的图片大小不固定，为了节约带宽，前端需要做个图片压缩再上传到服务器。注意：本文中图片压缩方法只能将压缩后的图片固定保存为 “image/jpeg” 格式，不能设置为 “image/png” 格式（该格式压缩无效）。具体代码如下压缩相关的方法：/** * 文件转base64 * @param {File} file 需要转换的文件 * @param {Function} callback 回调函数, 执行回调后返回 base64 格式图片 */export function im
2021-09-10 12:46:26
1368
原创 用 JS 给图片加文字水印或图片水印
1.加文字水印示例代码： function blobToImg(blob) { return new Promise((resolve, reject) => { let reader = new FileReader() reader.addEventListener('load', () => { let img = new Image() img.src = reader.result img.addEv
2021-06-21 14:29:53
7761
1
原创 JS 设计模式总结
设计模式是在特定场景下针对某一问题的一种解决方案。合理的使用设计模式，将让编码事半功倍。学习设计模式前，需要读者掌握闭包、高阶函数、call/apply、this 等前置知识。一.设计原则设计模式有六大原则：单一职责原则、开放封闭原则（也称开闭原则）、里氏代换原则、合成复用原则、接口隔离原则和迪米特法则（也称为最小知识原则）。这里主要介绍三种：单一职责原则、开放封闭原则和最小知识原则。1.单一职责原则就一个类而言，应该仅有一个引起它变化的原因。在JavaScript中，由于类使用得并不多
2021-03-18 14:07:08
423
原创 有趣的前端面试题——后篇：答案篇
看代码得结果 题1var a = 1if (true) { console.log(a) let a = 2}结果：ReferenceError: Cannot access ‘a’ before initialization // 初始化之前无法访问 ‘a’考点：暂时性死区原因分析：如果区块中存在 let 和 const 命令，则这个区块对这些命令声明的变量从一开始就形成封闭作用域，这种现象就叫 “暂时性死区”。其本质就是，只要进入当前作用域，所要使用的变量就已经存在，但是不可获取，
2021-03-18 09:22:53
561
1
原创 有趣的前端面试题——前篇：题目篇
本文为——前篇：题目篇，想看答案及解析可见有趣的前端面试题——后篇：答案篇1.看代码得结果 题1var a = 1if (true) { console.log(a) let a = 2}2.看代码得结果 题2var a = {n: 1}var b = aa.x = a = {n: 2}console.log(a.n, b.n)console.log(a.x, b.x)3.看代码得结果 题3var c = 1function c(c) { console.log
2021-03-18 09:21:41
336
原创 axios 源码精读
前言阅读框架源码的好处在于提升编程水平，以及了解框架的设计思想，配合其官方文档，让我们对它的使用变得更加得心应手。axios 是一个小而精的框架，不像 vue 那般庞大复杂让人望而生畏，阅读也起来相对容易。在阅读源码前，建议掌握 call、apply、bind，Promise，闭包，this 指向，原型链等知识，以及一些设计模式。1.目录结构axios 的源码在 lib 目录，其结构如下在正式介绍源码前，先回顾一下 axios 的常见的使用姿势，以便更好的理解源码。2.axios 的使用姿势
2021-03-04 15:21:36
2646
8
原创 nuxt.js 从 ＜入门＞ 到 ＜开发＞ 到 ＜部署＞
1.创建nuxt项目https://www.cnblogs.com/bien94/p/12572527.html2.nuxt项目部署https://www.cnblogs.com/plBlog/p/11428131.html
2021-01-29 09:07:06
520
原创 获取 IE 浏览器版本以及判断是否开启 cookie
本文实现两个功能获取 IE 浏览器版本 判断浏览器是否开启 cookie1.获取 IE 浏览器版本2.判断浏览器是否开启 cookie
2020-12-16 13:54:48
348
原创 vue 开发中必备的 cli 配置
本文整理了一些 vue 开发中常用 vue-cli 配置，使用的 vue-cli 版本为 3.11.0，主要内容包括：移除preload 与prefetch 使用webpack-bundle-analyzer 做打包分析 使用terser-webpack-plugin 清除 console.log 使用compression-webpack-plugin 开启gzip 压缩 配置使用CDN 方式引入资源库 自定义打包的css/js/图片 文件名和路径 压缩图片文末给出了完整...
2020-12-10 17:59:24
7454
原创 Linux 服务器部署 vue（SPA） 与 nuxt（SSR）项目
1.安装 node下载 node 包，选择 Linux Binaries (x64) 版本：https://nodejs.org/en/download/解压tar -xvf node-v14.15.0-linux-x64.tar.xz配置环境变量vim /etc/profile往 .bash_profile 新增环境变量（在末尾）export NODEJS_HOME=/usr/local/node/node-v14.15.0-linux-x64export PATH=
2020-12-08 15:47:15
2075
2
原创 Vue SPA 解决浏览器缓存问题
如何让发布到线上的 vue 单页应用能及时更新到浏览器，而无需用户强制刷新页面呢？因为 js、css、图片等资源文件名带有 hash 值，只要文件名变了就会更新，所以可以设置缓存，但 html 文件名没有加 hash 值，所以不能缓存该文件。
2020-12-01 11:37:58
1830
原创 JS 常用运算符/操作符，让编码更简洁
本文整理一些 JS 中常用的运算符，其目的在于简化代码。1. ! 逻辑非如果要将一个值转为 Boolean 类型，我们常想到 Boolean() 转型函数来实现，其实也可以用 ! 逻辑非运算符实现!!val // 等价于 Boolean(val)2.&& 逻辑于对于以下代码可以用 && 逻辑于改写if (val) { myFunction()}改写后val && myFunction()对于赋值语句也可以这样写
2020-11-30 17:07:51
362
原创 JS 判断是否为对象或数组的几种方法
一.判断值是否是对象1.toString 方式【常用】Object.prototype.toString.call(val) === '[object Object]'注意：这里要使用 call 方法改变作用域2.constructor 方式val?.constructor === Object这里使用了 null 传导符(?.) 以防止出错3.typeof 与 instanceoftypeof 与 instanceof 并不能完全判断一个值为对象typeof 的取值
2020-11-27 16:42:03
40530
2
原创 vue 知识点复盘
本文整理了 vue 常用知识要点及实战技巧。1.vue生命周期 2.$on, $once 的使用 3.指令与修饰符 4.computed，watch 的使用与比较 5.组件间的通信方式 6.全局组件，局部组件，动态组件，异步组件，递归组件 7.单文件组件中 name 值的作用 8.v-show 与 v-if 的比较 9.key 的作用 10.双向绑定原理 11.默认插槽，具名插槽，作用域插槽 12.混入（mixin）13.函数式组件 14.自定义指令......
2020-10-19 14:56:54
1147
3
原创 前端文件下载各类方式汇总
我们比较容易想到以下两种下载方式（一）window.location.href这种方式比较常见，比如我们在一些网站上下载电子书，安装包之类的，一般都是这种方式下载的window.location.href = downloadUrl这种方式适用于下载一些静态资源（二）<a> 标签方式export function downloadApi() { return request({ url: '/testApi', method: 'get', r.
2020-10-12 10:29:49
3228
原创 Vue：禁用浏览器的前进后退
一.禁用前进后退功能在开发vue应用中，如何禁用浏览器的前进后退功能呢？网上搜到的答案基本如下：history.pushState(null, null, document.URL)window.addEventListener('popstate', function() { history.pushState(null, null, document.URL)})但应该放在哪儿？经过尝试，我是如此写的：main.js中，增加popstate监听window.add
2020-08-15 14:11:42
6714
4
原创 vue 组件突破 scoped 限制，实现样式穿透
<style lang="stylus" type="text/stylus" scoped> /* >>>代表穿透，不受scoped的限制 */ .wrapper >>> .swiper-pagination-bullet-active background #fff /* 轮播圆点被选中时的颜色 */ .wrapper &g...
2020-05-28 15:09:27
1998
原创 前端开发都需要掌握那些技术？
目前前端招聘一般都要求开发者掌握那些技术呢？我从近期的招聘信息中整理了以下内容。目录如下：一.网页开发 二.小程序 三.移动端 四.桌面端 五.其他技术一.网页开发这里指PC端网页开发，要求的技术主要有以下几类：......
2020-03-08 01:59:04
2798
原创 排序--冒泡排序与选择排序
最近复习大学学过的算法，这里做个笔记。排序，我们学过这里需要了解什么是时间复杂度，什么是空间复杂度。简单而言，时间复杂度指运行的次数，空间复杂度指消耗的内存。一.冒泡排序我们看下百度百科中的定义：它重复地走访过要排序的元素列，依次比较两个相邻的元素，如果顺序（如从大到小、首字母从Z到A）错误就把他们交换过来。走访元素的工作是重复地进行直到没有相邻元素需要交换，也就是说该元素...
2020-02-19 11:47:46
123
转载 响应式或移动端布局：不要用 rem ，用 px ?
最近看了一篇文章，让我对 rem 有了更多的了解。链接如下：https://www.zhihu.com/question/313971223/answer/628236155
2020-01-13 18:03:23
935
原创 解决 axios： “timeout of 5000ms exceeded” 超时的问题
最近遇到一个问题，在我开机后，启动后台服务器登录程序时会报请求超时的问题。网上找了下解决方法，最后成功解决。在看以下代码时，大家可以参考我的另一篇博文：vue开发中 axios 的封装具体代码如下：import axios from 'axios'import { BASE_URL } from './http'import router from '../router'/...
2019-12-13 10:03:29
44249
2
转载 Error: Cannot find module '@babel/core’
最近在安装完：@babel / plugin-proposal-optional-chaining，和@ babel / plugin-proposal-nullish-coalescing-operator时，发现报错Error: Cannot find module '@babel/core’主要原因是：babel-loader和babel-core版本不对应babel-loa...
2019-12-11 10:51:06
3805
原创 vue 相关的 UI 库和插件
本文整理一些自己使用过的UI库和插件一.vue相关的UI库1.element ui自己比较常用的ui库，后台系统还有vue-element-admin，后台效果请看https://panjiachen.gitee.io/vue-element-admin/#/dashboardhttps://panjiachen.github.io/vue-admin-template/#/...
2019-11-26 16:24:29
776
1
原创 vue深度监听（监听对象和数组的改变）与立即执行监听。
1.vue中监听对象数据属性值的改变，可以使用深度监听 data () { return { form: { status: '', cpufrequency: '', systemstacksize: '', scalabilityclass: '' } } }, watch...
2019-11-22 09:38:48
7175
转载 vue开发：[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider ma...
在基于 Element-ui 写项目的时候，Chrome 提醒：[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive....
2019-11-19 17:08:53
11300
6
原创 vue开发中 axios 的封装
下面代码参考了vue-element-admin中的封装方式，request.js 文件如下import axios from 'axios'import { BASE_URL } from './http'import router from '../router'// create an axios instanceconst service = axios.create(...
2019-11-16 10:28:48
1559
原创 实现QQ客服功能：qq的Tencent://Message/协议
网页中打开qq联系客服：<a target="blank" href="tencent://message/?uin=97792****&Site=咨询&Menu=yes">QQ联系客服</a>uin后面跟qq号这个需要开通qq推广：https://shang.qq.com/v3/index.html注：最终代码以开通后生成的代码为标准...
2019-11-11 12:23:33
6869
原创 element 使用过程中遇到的问题及解决方法
记录一些使用element框架的疑问与坑使用版本：2.12.01.element 表格某项格式化formatter这里有个问题：当鼠标移动到表格上时，会再次触发formatter，而这个是没有必要的，我们只需格式化一次，但不知道它这么做的原因是啥。span-method配置也是这种问题2.element-ui表格合并span-method表格合并这块需要自己写合并规则，有一点...
2019-10-31 14:47:15
4972
5
原创 flex布局踩坑记录
最近经常用到flex布局，记录一下遇到的问题1. ellipsis没有效果解决方法：需要在其父级元素上设置 width：02.图片明明设置了固定宽高，为何当页面过小时还是会被压缩变形解决方法：给图片设置 flex-shrink: 0;3.火狐浏览器设置flex: 1未生效解决方法：在设置flex: 1的容器上设置 min-width: 0 或者 min-height: ...
2019-09-27 14:43:46
644
原创 vue错误：Duplicate keys detected: '/main'. This may cause an update error.
错误原因：v-for循环的key值重复了。比如，我当前项目用path作为key这两个key值是一样的，所以报此错误
2019-09-06 15:58:09
3758
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人