前端开发
文章平均质量分 67
前端开发中遇到的问题和经验积累
登楼痕
受尽寒苦而不厌,此乃修罗之道
展开
-
100行代码教你写个卡牌翻翻乐小游戏
卡牌翻翻乐这种小游戏相信大家都玩过,一组卡牌随机翻面平铺在面前,用户点击卡牌翻转,两两配对消除卡牌,游戏的玩法主要是通过玩家自己对卡牌位置的记忆,快速匹配出相同的卡牌予以消除。那么我们自己来写一个这个小游戏,大致的思路会是什么呢?首先我们先找来卡牌素材,这里取的是12张生肖图案【图片来源于网络侵删】。那么我们就一共要展示24张卡片,布局上我们就按6x4的格子摆放吧。那么接下来主要工作分为:1、打乱顺序随机摆放卡牌2、卡牌翻转动画3、卡牌翻转后的匹配规则,如果未匹配,两张牌自行翻转回去;原创 2022-09-22 11:50:36 · 2535 阅读 · 1 评论 -
css属性z-index解析
z-index属性决定了HTML元素的层级,也就是z轴的位置。因为z轴方向是垂直于视口指向用户,所以值越大说明在z轴方向上离用户端更近。原创 2022-09-07 15:38:39 · 765 阅读 · 0 评论 -
web打印页面加载数据耗时
从客户端发起请求到接收响应的时间","下载服务端返回数据的时间","DOM 加载完成的时间","页面load的总耗时","检查本地缓存的耗时","http请求总耗时","网页重定向的耗时","DNS查询的耗时","TCP链接的耗时","DOM 解析耗时","首次可交互时间",...原创 2022-08-12 16:21:37 · 564 阅读 · 0 评论 -
Svelte入门基础简介
Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作,而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。Svelte在语法上非常简单,和vue很像,但是api会简单很多,因此代码量会少很多,并且没有虚拟DOM,所以代码体积会小很多,也没有很复杂的状态管理。...原创 2022-07-12 11:50:54 · 1382 阅读 · 0 评论 -
Vue2.0 瞧一下vm.$mount()
vm.$mount()不经常用,因为在我们实例化Vue的时候我们可以传入属性el: "#app",目的在于将实例挂载到DOM元素下,但如果不传el选项,就需要手动挂载,这个时候唯一的方法就是调用$mount()方法。就像在vue项目的main.js里我们经常会写到这样一句话:$mount()函数的表现在完整版和只包含运行时版本之间有差异,差异在于编译过程,也就是完整版会首先检查template或者el选项提供的模板是否已经转换为渲染函数,如果没有,就要先编译为渲染函数,再进入挂载流程。所以两个版本之间是包含原创 2022-06-29 16:38:23 · 655 阅读 · 0 评论 -
Vue2.0中的$watch、$set、$delete源码解析
看一下vue2.x中,$watch、$set和$delete是怎么做的原创 2022-06-28 16:32:55 · 725 阅读 · 0 评论 -
Vuex5.0?大菠萝Pinia挺好的~
Pinia相比于Vuex,去掉了繁琐的mutations,以及一大堆inject操作,让代码更加清晰~原创 2022-06-15 17:41:00 · 802 阅读 · 0 评论 -
HTML+CSS+JS实现好看的风车屋
css实现一个浪漫的风车效果原创 2022-06-09 17:13:35 · 236 阅读 · 0 评论 -
优雅得捕获async/await的异常
在用Promise的时候,可以使用Promise.then().catch()捕获执行结果的错误异常,但是在用多个异步的时候,Promise的嵌套也影响阅读,所以就会用async/await,运用同步的方式来执行异步代码。对于async/await的异常,可以用try catch来捕获,但是如果一个步骤里有多个await操作,写一大堆try catch属实不美观。所以github上有大佬写了一个await-to-js,源码只有十几行:function to<T, U = Error>原创 2022-02-21 16:05:58 · 1608 阅读 · 0 评论 -
CommonJs和ES Module
commonJs实现原理:编译过程中将导出的代码js进行首尾包装进一个函数内:function wrapper (script) { return '(function (exports, require, module, __filename, __dirname) {' + script + '\n})'}模块加载的时候通过runInThisContext执行modulefunction,传入require那些参数。在使用require引入的时候,r原创 2021-11-02 16:15:02 · 181 阅读 · 0 评论 -
css 一口气实现切角+边框+投影+内容背景色渐变
单纯用css实现切角+边框+投影+内容背景色渐变所有效果,因为UI没给背景切图,寻思这个理论上用css就能实现。看一下最终要实现的效果:首先不谈内容紫蓝色渐变,一个单纯的四切角+黑色边框+轮廓投影,其实就直接用网上铺天盖地的background:linear-gradient 实现切角+ 套一层小了1px的伪元素实现边框+ filter: box-shadow实现投影就行了,效果和代码如下:<html> <body> <div class=..原创 2021-10-26 18:23:26 · 1369 阅读 · 2 评论 -
VUE2.0 模板编译原理(二):优化器
二、优化器优化器的作用是在AST中找到静态子树并打上标记,即那些永远不会发生变化的节点,例如纯文本节点。打标记的作用: 在生成VNode的过程中,除了首次渲染,每次重新渲染,不需要为静态子树创建新节点,会直接克隆已存在的静态子树; 虚拟DOM的patch过程中可以跳过,因为没有比较的必要,它是不变的,节省js脚本运算成本。 实现的主要步骤: 在AST中找到所有静态节点并标记; 在AST中找到所有静态根节点并标记。 在AST中,static属性为true的就是静原创 2021-10-20 15:51:44 · 285 阅读 · 1 评论 -
VUE2.0 模板编译原理(一):解析器
vue的template里可以填充变量、表达式、指令,这些在HTML没有的功能就是靠模板编译实现的。模板编译的作用就是将模板转换为渲染函数,渲染函数执行的时候都会生成当前最新的vnode进行页面渲染。模板--[输入]-->模板编译--[输出]-->渲染函数这个过程分为三个步骤:1、解析器:模板解析成AST(抽象语法树);2、优化器:遍历AST标记静态节点,这样在虚拟DOM更新节点时避免重新渲染静态节点;3、代码生成器:使用AST生成render函数。一、解析原创 2021-10-20 11:34:23 · 1222 阅读 · 0 评论 -
瞧一眼vue2.0的虚拟DOM
虚拟DOM是什么?为啥要使用它呢? 说白了就是把真实DOM转换为一定数据结构的js对象存储。这样做的原因很大程度是因为真实DOM是很复杂的结构,每次视图变化如果直接操作修改DOM,其复杂度和性能开销非常大,但是计算js可快多了,所以何不将DOM转换为js对象进行比对,然后根据计算出来的新旧DOM的差异有针对性地进行修改。并且虚拟DOM还可以维护程序的状态,即记录和跟踪上一次DOM的状态。vue2.0的虚拟DOM就是参考改造了snabbdom.js(目前最快的虚拟dom...原创 2021-10-13 17:38:44 · 277 阅读 · 2 评论 -
瞅瞅vue2.0 <keep-alive>
<keep-alive>作为一个内置组件,定义在src/core/components/keep-alive.js中:export default { name: 'keep-alive, abstract: true, props: { include: patternTypes, exclude: patternTypes, max: [String, Number] }, created () { this.cache = Ob原创 2021-10-08 15:49:27 · 148 阅读 · 0 评论 -
ios嵌入h5去掉“橡皮筋”回弹
UI在走查页面的时候好几次提到了这个问题,在h5页面最顶部或者底部拉页面的时候,还会出现一块页面之外的空白,松开手页面回弹回去,UI表示这样看起来页面像是截断了很不友好,能否拉了之后还是背景色而不是白色。首先想到的就是外面包一层高度为需要视窗高度的fixed div,然后让里面的内容滚动。可惜的是在ios上滑动出现问题——当scroll bar消失后,页面滑不动了。于是搜索一下怎么去掉ios的“橡皮筋”,于是看到了插件,其原理就是在支持-webkit-overflow-scrolling属性的元素上原创 2021-09-22 17:27:08 · 2359 阅读 · 0 评论 -
Vue2.0 $nextTick源码理解
$nextTick的原理其实就是Js执行机制的问题,即微任务和宏任务那套东西。同步视图更新:每次属性值改变,渲染函数的watcher会重新求值完成重新渲染,所以多个属性值修改会导致对此重新渲染。异步视图更新:将执行更新操作的watcher放进一个队列中,并通过id避免重复放入,然后当所有突变完成后,再一次性执行队列里的观察者的更新方法,同时清空队列。所以再wacther对象的update方法里,可以看到:update () { /* istanbul ignore else */原创 2021-09-16 10:08:08 · 392 阅读 · 0 评论 -
ES2020 空值合并操作符??和可选链操作符?.
在之前的开发中,由于很多时候后台接口对数据库没有的值,直接就不会返回对应的字段,于是js里写了很多let result = resp.data || """或者三元运算符?:之类的。对于查询接口,后端有时候会说,如果查询默认值或者全选,你就传个null或者空呗,于是又写了params.id =params.id || null。显然这样不严谨的写法会引出很多问题,比如id为0时。针对这一问题,ES2020引入了新的操作符——空值合并操作符(??),很简单,类似于或操作符 || ,它只判断 x ??.原创 2021-04-26 17:32:49 · 854 阅读 · 3 评论 -
VUE+Express+MongoDB前后端分离,实现一个便签墙(一)
计划来实现一个便签墙系列,这个东西做简单也简单,往复杂了做功能也很多,记录一下从零到有的开发过程吧,希望最后能把这个项目做得很完善。首先是前后端分离架构,前端用vue,后台我们就用express,数据库用mongodb吧。在脑袋里过一下,最最开始,要完成一个怎样的雏形呢?先把用户登录管理放在一边,当然是便签的增删改查+显示啊!那么,我们就来实现“初号机”,一张张便签的显示,增加,修改,删除。1、怎么说也得先把样式画出来先别管接口,先把纯前端的问题解决先,我们先来一个像模像样的“黑板”,对原创 2021-04-16 16:53:17 · 1530 阅读 · 7 评论 -
el-table动态添加列
在开发管理系统过程中碰到一些需求,针对表格,运营人员需要自己添加一些列,然后输入内容保存,以此来实现产品的高可配性,接下来我们就来实现这个功能。对于这些动态添加的列,后端用JSON字符串的形式存储起来最为方便,这里我们假定存储在custom字段中,例如:custom:"{\"测试\":1}" 这种形式。所以我们的el-table中,一部分为固有表头字段,而动态列则通过数组循环生成。1、首先假设返回的表格数据为:tableData: [ { date:..原创 2021-04-01 14:07:31 · 15900 阅读 · 7 评论 -
el-table自带排序,表格空值或无字段时排序结果混乱的解决办法
el-table自带sortable属性可以实现纯前端排序【当然表格有分页的话还是得靠后端排序】。然后在开发的过程中发现一个问题,就是当表格里要排序的某一列字段某些行是空值null或者后端没返回该字段为undefined【很常见的场景】,点击表头排序就会发现结果根本不准确。那么解决办法就是自定义sortChange函数,自己实现对当前表格data进行排序。1、首先在el-table标签上加上 @sort-change="sortChange"2、实现sortChange函数:sort原创 2021-03-29 13:38:17 · 4034 阅读 · 4 评论 -
vue-element-admin框架动态路由匹配时动态设置meta里的title
使用框架:vue-element-admin需求场景:有两个菜单页面都是表格,而且内容基本相似。避免代码冗余在router.js使用动态路由匹配,通过$route.params.type字段来判断显示,并且面包屑和标签栏显示对应的title。1、首先,动态路由匹配很简单,写上:{path: "content-monitor/:type",name: "content-monitor",component: _import("......原创 2021-03-01 15:19:34 · 3691 阅读 · 4 评论 -
VUE 弹窗组件实现动态挂载
有时候在开发中遇到这种需求,需要在某些页面中动态加载一个弹窗,比如未登录的时候,在点击某些地方,需要弹出登录框要求登录。如果在每个页面都import进去未免太过繁琐,在根页面引入后监听也不咋好的感觉。因此,可以使用VUE.extend动态挂在组件。以登录框组件为例:首先,自然是要一个登录组件页面,login.vue,这个按照自己的需求写就行了。然后,新建login.js,代码如下:import Vue from "vue";import login from "./login.vue原创 2020-12-10 15:06:10 · 2290 阅读 · 0 评论 -
VUE中el-autocomplete候选词高亮
关键代码:<el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="Please input molecule、companies or patent/ip" @select="handleSelect"> <template slot-scope="{ item }"> <div class="autocomplete-choos.原创 2020-11-27 15:48:47 · 1448 阅读 · 5 评论 -
【学习笔记】重绘和重排——《高性能JavaScript》
浏览器下载完所有组件(HTML、JS、CSS、Image)之后会解析生成两个内部数据结构:DOM树、渲染树(帧、盒)DOM变化->影响元素几何属性页面布局->浏览器重新计算:重排reflow;重排之后,浏览器重新绘制受影响部分:重绘repaint。重排何时发生:1、添加或删除可见的DOM;2、元素位置改变;3、元素尺寸改变(padding、margin、border、width、height等);4、内容改变;5、浏览器窗口resize6、滚动条出现.原创 2020-11-27 15:38:02 · 144 阅读 · 0 评论 -
【学习笔记】正则表达式详解——《高性能JavaScript》
正则表达式的运行效率受很多因素影响:1、匹配的目标文本千差万别,部分匹配&完全不匹配耗时要更长;2、不同浏览器对正则引擎的优化程度不同。工作原理:Step1: 编译将正则直接量或RegExp构造函数生成的对象转为原生代码程序。Step2:设置起始位置确定目标字符串的起始搜索位置。此处有各种优化措施,例如^开始的则判断起始位置如果失败,则不作后续位置的搜索操作;匹配第三字符是x的字符串,则先找到x再回退两个字符等。Step3:匹配每个正则表达示字元确定起始位置...原创 2020-11-27 15:09:43 · 164 阅读 · 0 评论 -
普通vue-cli初始项目转为服务端渲染SSR
1、第一步没啥好说的,利用vue-cli脚手架创建一个demo项目:vue init webpack vue-ssr-democd vue-ssr-demonpm install2、安装SSR依赖的模块:npm i -D vue-server-renderer3、随便加一个components/test.vue<template> <div> Just a test page. </div></template>原创 2020-11-21 15:36:22 · 855 阅读 · 0 评论 -
CSS颜色8位hex写法在安卓不生效
最近开发嵌入app的h5页面,美工在给的高保图中有些色彩是“#ff822aff”的写法,与rgba类似,最后两位是透明度的意思。但是这种写法导致部分颜色在安卓手机上失效,无法正常显示相应的颜色。在ios和web上都是正常的。解决办法:将最后两位是ff的8位hex删掉'ff',改为6位hex;如果不是ff,证明是含有透明度的,找到对应的透明度数值后,用rgba表示。...原创 2020-11-05 16:05:58 · 996 阅读 · 0 评论 -
vue中的axios拦截器拦截302状态码
项目中前端需要统一处理后端返回的状态码并给出弹窗提示,需要在全局环境下对axios设置拦截器。类似于401、403、500等状态码都可以在error回调中捕获到,但是302状态码是捕获不到的,因为当状态时302时,浏览器自行根据redirectUrl进行了跳转,所以无法在success回调中捕获弹窗,前端是无能为力的。解决办法:后端将302状态统一用401返回。axios.int...原创 2019-06-12 15:06:05 · 14528 阅读 · 0 评论 -
vue路由传参中的params和query不要随意乱用
vue中的路由传参主要是分为两种方式:params和query。主要用法就是写在push函数的参数对象中:this.$route.push({});params的写法: this.$router.push({name: 'myPathName', params: {id: '1234'}});在目标页面获取idlet id = this.$route.params.id;...原创 2019-06-12 14:51:04 · 3507 阅读 · 1 评论