- 博客(86)
- 资源 (1)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 前端中高级知识要点总结(3w+长文)
本文整理前端常见的知识要点,方便随时复盘。内容主要涵盖JS基础、CSS、HTML,JS面向对象,渲染机制,网络HTTP,前端安全,设计模式,算法等方面。注:文章内容相对而言有一定的难度,所以需要读者有一定的基础。另外,若文章有何不妥之处或者你有任何疑问,欢迎留言讨论。一.JS基础1.手写实现call()call()、apply()和bind()这是前端人逃不过的三个方法,是从初级向中级进阶所必会的。通过使用这些方法,我们可以修改函数绑定的this,使其成
2020-10-09 22:59:51
10767
8
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 前端学习与工作中常用网站推荐
一.视频学习网站1.慕课网(质量好,价格较贵,更专业,废话少)2.腾讯课堂(质量参差不齐,价格便宜,较啰嗦)。。。当然还有很多其他的视频学习网站,但我觉得就这两个就够质够量了。二.前端免费模板下载1.html5tricks有很多有趣的小程序2.源码之家各类模板灰常之多,不过也有很多广告3.代码家园整个网站看起来舒服,广告很少4.模板之家广告较...
2019-11-12 13:48:11
17592
13
原创 用 div 元素实现输入框的效果,并允许插入其他元素
在输入框中,允许插入其他标签元素,这在普通的 input 元素上是没法实现的,这里我们可以利用元素的 `contenteditable` 属性来实现此类效果。
2024-05-30 17:02:32
918
原创 Web API 之 URLSearchParams 实战解析
在实际项目中,往往需要我们对当前页面的链接参数做一些操作。这里就使用到了Web API。下面就开始介绍 URLSearchParams 的使用方法。
2024-05-06 11:42:47
622
原创 H5 与 App、网页之间的通信
本文整理工作中 H5 嵌入 Android、iOS 与 PC 网页后,如何与各端通信。(提供 H5 端的代码)
2024-03-20 14:27:18
1110
原创 AI答疑,如何使用 fetch 获取接口返回的流式数据
最近进行了AI答疑相关的需求开发,总共进行了两次版本迭代,在此做个记录并分享前端的实现过程。
2024-02-02 10:33:29
1532
原创 JSON.parse() 方法解析报错:Bad control character in string literal in JSON at position xx
这个是第一反应想到的方法,但比较麻烦,因为不确定聊天记录里还有那些特殊字符编码。通过这个方法,就可以得到一个解析好的对象,是不是很神奇?json 字符串中包含特殊字符编码。(垂直制表符),导致解析报错。
2023-06-15 16:23:31
1883
原创 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
2225
原创 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
6612
原创 JS 压缩图片
由于用户上传的图片大小不固定,为了节约带宽,前端需要做个图片压缩再上传到服务器。注意:本文中图片压缩方法只能将压缩后的图片固定保存为 “image/jpeg” 格式,不能设置为 “image/png” 格式(该格式压缩无效)。具体代码如下压缩相关的方法:/** * 文件转base64 * @param {File} file 需要转换的文件 * @param {Function} callback 回调函数, 执行回调后返回 base64 格式图片 */export function im
2021-09-10 12:46:26
1418
原创 用 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
8165
1
原创 JS 设计模式总结
设计模式是在特定场景下针对某一问题的一种解决方案。合理的使用设计模式,将让编码事半功倍。学习设计模式前,需要读者掌握闭包、高阶函数、call/apply、this 等前置知识。一.设计原则设计模式有六大原则:单一职责原则、开放封闭原则(也称开闭原则)、里氏代换原则、合成复用原则、接口隔离原则和迪米特法则(也称为最小知识原则)。这里主要介绍三种:单一职责原则、开放封闭原则和最小知识原则。1.单一职责原则就一个类而言,应该仅有一个引起它变化的原因。在JavaScript中,由于类使用得并不多
2021-03-18 14:07:08
470
原创 有趣的前端面试题——后篇:答案篇
看代码得结果 题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
617
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
351
原创 axios 源码精读
前言阅读框架源码的好处在于提升编程水平,以及了解框架的设计思想,配合其官方文档,让我们对它的使用变得更加得心应手。axios 是一个小而精的框架,不像 vue 那般庞大复杂让人望而生畏,阅读也起来相对容易。在阅读源码前,建议掌握 call、apply、bind,Promise,闭包,this 指向,原型链等知识,以及一些设计模式。1.目录结构axios 的源码在 lib 目录,其结构如下在正式介绍源码前,先回顾一下 axios 的常见的使用姿势,以便更好的理解源码。2.axios 的使用姿势
2021-03-04 15:21:36
2684
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
540
原创 获取 IE 浏览器版本以及判断是否开启 cookie
本文实现两个功能获取 IE 浏览器版本 判断浏览器是否开启 cookie1.获取 IE 浏览器版本2.判断浏览器是否开启 cookie
2020-12-16 13:54:48
381
原创 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
8063
原创 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
2262
2
原创 Vue SPA 解决浏览器缓存问题
如何让发布到线上的 vue 单页应用能及时更新到浏览器,而无需用户强制刷新页面呢?因为 js、css、图片等资源文件名带有 hash 值,只要文件名变了就会更新,所以可以设置缓存,但 html 文件名没有加 hash 值,所以不能缓存该文件。
2020-12-01 11:37:58
1903
原创 JS 常用运算符/操作符,让编码更简洁
本文整理一些 JS 中常用的运算符,其目的在于简化代码。1. ! 逻辑非如果要将一个值转为 Boolean 类型,我们常想到 Boolean() 转型函数来实现,其实也可以用 ! 逻辑非运算符实现!!val // 等价于 Boolean(val)2.&& 逻辑于对于以下代码可以用 && 逻辑于改写if (val) { myFunction()}改写后val && myFunction()对于赋值语句也可以这样写
2020-11-30 17:07:51
375
原创 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
42587
2
原创 前端文件下载各类方式汇总
我们比较容易想到以下两种下载方式(一)window.location.href这种方式比较常见,比如我们在一些网站上下载电子书,安装包之类的,一般都是这种方式下载的window.location.href = downloadUrl这种方式适用于下载一些静态资源(二)<a> 标签方式export function downloadApi() { return request({ url: '/testApi', method: 'get', r.
2020-10-12 10:29:49
3301
原创 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
7073
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
2029
原创 前端开发都需要掌握那些技术?
目前前端招聘一般都要求开发者掌握那些技术呢?我从近期的招聘信息中整理了以下内容。目录如下:一.网页开发 二.小程序 三.移动端 四.桌面端 五.其他技术一.网页开发这里指PC端网页开发,要求的技术主要有以下几类:......
2020-03-08 01:59:04
3719
原创 排序--冒泡排序与选择排序
最近复习大学学过的算法,这里做个笔记。排序,我们学过这里需要了解什么是时间复杂度,什么是空间复杂度。简单而言,时间复杂度指运行的次数,空间复杂度指消耗的内存。一.冒泡排序我们看下百度百科中的定义:它重复地走访过要排序的元素列,依次比较两个相邻的元素,如果顺序(如从大到小、首字母从Z到A)错误就把他们交换过来。走访元素的工作是重复地进行直到没有相邻元素需要交换,也就是说该元素...
2020-02-19 11:47:46
132
转载 响应式或移动端布局:不要用 rem ,用 px ?
最近看了一篇文章,让我对 rem 有了更多的了解。链接如下:https://www.zhihu.com/question/313971223/answer/628236155
2020-01-13 18:03:23
1068
原创 解决 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
44934
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
3913
原创 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
844
1
原创 vue深度监听(监听对象和数组的改变)与立即执行监听。
1.vue中监听对象数据属性值的改变,可以使用深度监听 data () { return { form: { status: '', cpufrequency: '', systemstacksize: '', scalabilityclass: '' } } }, watch...
2019-11-22 09:38:48
7235
转载 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
11607
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
1587
原创 实现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
7005
原创 element 使用过程中遇到的问题及解决方法
记录一些使用element框架的疑问与坑使用版本:2.12.01.element 表格某项格式化formatter这里有个问题:当鼠标移动到表格上时,会再次触发formatter,而这个是没有必要的,我们只需格式化一次,但不知道它这么做的原因是啥。span-method配置也是这种问题2.element-ui表格合并span-method表格合并这块需要自己写合并规则,有一点...
2019-10-31 14:47:15
5109
5
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人