- 博客(43)
- 收藏
- 关注
RSS订阅原创 100行代码教你写个卡牌翻翻乐小游戏
卡牌翻翻乐这种小游戏相信大家都玩过，一组卡牌随机翻面平铺在面前，用户点击卡牌翻转，两两配对消除卡牌，游戏的玩法主要是通过玩家自己对卡牌位置的记忆，快速匹配出相同的卡牌予以消除。那么我们自己来写一个这个小游戏，大致的思路会是什么呢？首先我们先找来卡牌素材，这里取的是12张生肖图案【图片来源于网络侵删】。那么我们就一共要展示24张卡片，布局上我们就按6x4的格子摆放吧。那么接下来主要工作分为：1、打乱顺序随机摆放卡牌2、卡牌翻转动画3、卡牌翻转后的匹配规则，如果未匹配，两张牌自行翻转回去；
2022-09-22 11:50:36
2428
1
原创 css属性z-index解析
z-index属性决定了HTML元素的层级，也就是z轴的位置。因为z轴方向是垂直于视口指向用户，所以值越大说明在z轴方向上离用户端更近。
2022-09-07 15:38:39
753
原创 web打印页面加载数据耗时
从客户端发起请求到接收响应的时间","下载服务端返回数据的时间","DOM 加载完成的时间","页面load的总耗时","检查本地缓存的耗时","http请求总耗时","网页重定向的耗时","DNS查询的耗时","TCP链接的耗时","DOM 解析耗时","首次可交互时间",...
2022-08-12 16:21:37
551
原创 Svelte入门基础简介
Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。Svelte在语法上非常简单，和vue很像，但是api会简单很多，因此代码量会少很多，并且没有虚拟DOM，所以代码体积会小很多，也没有很复杂的状态管理。...
2022-07-12 11:50:54
1364
原创 Vue2.0 瞧一下vm.$mount()
vm.$mount()不经常用，因为在我们实例化Vue的时候我们可以传入属性el: "#app"，目的在于将实例挂载到DOM元素下，但如果不传el选项，就需要手动挂载，这个时候唯一的方法就是调用$mount()方法。就像在vue项目的main.js里我们经常会写到这样一句话:$mount()函数的表现在完整版和只包含运行时版本之间有差异，差异在于编译过程，也就是完整版会首先检查template或者el选项提供的模板是否已经转换为渲染函数，如果没有，就要先编译为渲染函数，再进入挂载流程。所以两个版本之间是包含
2022-06-29 16:38:23
633
原创 优雅得捕获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
1593
原创 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
175
原创 css 一口气实现切角+边框+投影+内容背景色渐变
单纯用css实现切角+边框+投影+内容背景色渐变所有效果，因为UI没给背景切图，寻思这个理论上用css就能实现。看一下最终要实现的效果：首先不谈内容紫蓝色渐变，一个单纯的四切角+黑色边框+轮廓投影，其实就直接用网上铺天盖地的background:linear-gradient 实现切角+ 套一层小了1px的伪元素实现边框+ filter: box-shadow实现投影就行了，效果和代码如下：<html> <body> <div class=..
2021-10-26 18:23:26
1353
2
原创 VUE2.0 模板编译原理（二）：优化器
二、优化器优化器的作用是在AST中找到静态子树并打上标记，即那些永远不会发生变化的节点，例如纯文本节点。打标记的作用： 在生成VNode的过程中，除了首次渲染，每次重新渲染，不需要为静态子树创建新节点，会直接克隆已存在的静态子树； 虚拟DOM的patch过程中可以跳过，因为没有比较的必要，它是不变的，节省js脚本运算成本。 实现的主要步骤： 在AST中找到所有静态节点并标记； 在AST中找到所有静态根节点并标记。 在AST中，static属性为true的就是静
2021-10-20 15:51:44
273
1
原创 VUE2.0 模板编译原理（一）：解析器
vue的template里可以填充变量、表达式、指令，这些在HTML没有的功能就是靠模板编译实现的。模板编译的作用就是将模板转换为渲染函数，渲染函数执行的时候都会生成当前最新的vnode进行页面渲染。模板--[输入]-->模板编译--[输出]-->渲染函数这个过程分为三个步骤：1、解析器：模板解析成AST（抽象语法树）；2、优化器：遍历AST标记静态节点，这样在虚拟DOM更新节点时避免重新渲染静态节点；3、代码生成器：使用AST生成render函数。一、解析
2021-10-20 11:34:23
1190
原创 瞧一眼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
270
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
142
原创 ios嵌入h5去掉“橡皮筋”回弹
UI在走查页面的时候好几次提到了这个问题，在h5页面最顶部或者底部拉页面的时候，还会出现一块页面之外的空白，松开手页面回弹回去，UI表示这样看起来页面像是截断了很不友好，能否拉了之后还是背景色而不是白色。首先想到的就是外面包一层高度为需要视窗高度的fixed div，然后让里面的内容滚动。可惜的是在ios上滑动出现问题——当scroll bar消失后，页面滑不动了。于是搜索一下怎么去掉ios的“橡皮筋”，于是看到了插件，其原理就是在支持-webkit-overflow-scrolling属性的元素上
2021-09-22 17:27:08
2268
原创 Vue2.0 $nextTick源码理解
$nextTick的原理其实就是Js执行机制的问题，即微任务和宏任务那套东西。同步视图更新：每次属性值改变，渲染函数的watcher会重新求值完成重新渲染，所以多个属性值修改会导致对此重新渲染。异步视图更新：将执行更新操作的watcher放进一个队列中，并通过id避免重复放入，然后当所有突变完成后，再一次性执行队列里的观察者的更新方法，同时清空队列。所以再wacther对象的update方法里，可以看到：update () { /* istanbul ignore else */
2021-09-16 10:08:08
339
原创 VUE+Canvas实现简单的五子棋游戏
之前的canvas小游戏系列欢迎大家戳：《VUE实现一个Flappy Bird~~~》《VUE+Canvas实现上吊火柴人猜单词游戏》《VUE+Canvas 实现桌面弹球消砖块小游戏》《VUE+Canvas实现雷霆战机打字类小游戏》《VUE+Canvas实现财神爷接元宝小游戏》在布局上，五子棋相比那些目标是随机运动的游戏，实现起来相对简单许多，思路也很清晰，总共分为：（1）画棋盘；（2）监听点击事件画黑白棋子；（3）每次落子之后判断是否有5子相连，有则赢。最复杂的恐怕
2021-05-07 13:58:54
5284
34
原创 ES2020 空值合并操作符??和可选链操作符?.
在之前的开发中，由于很多时候后台接口对数据库没有的值，直接就不会返回对应的字段，于是js里写了很多let result = resp.data || """或者三元运算符?:之类的。对于查询接口，后端有时候会说，如果查询默认值或者全选，你就传个null或者空呗，于是又写了params.id =params.id || null。显然这样不严谨的写法会引出很多问题，比如id为0时。针对这一问题，ES2020引入了新的操作符——空值合并操作符（??），很简单，类似于或操作符 || ，它只判断 x ??.
2021-04-26 17:32:49
830
3
原创 VUE+Canvas实现财神爷接元宝小游戏
之前的canvas小游戏系列欢迎大家戳：《VUE实现一个Flappy Bird~~~》《VUE+Canvas实现上吊火柴人猜单词游戏》《VUE+Canvas 实现桌面弹球消砖块小游戏》《VUE+Canvas实现雷霆战机打字类小游戏》如标题，这个游戏大家也玩过，随处可见，左右方向键控制财神移动，接住从天而降的金元宝等，时间一到，则游戏结束。先来看一下效果：相比于之前的雷霆战机要打出四处飞的子弹，这次元素的运动轨迹就很单一了，垂直方向的珠宝和水平移动的财神爷，类似于之前的代码，这里就
2021-04-21 17:07:32
3327
12
原创 Canvas递归画一棵树
点生线，线生面，只要有了基本的构图元素，我们可以用canvas画出各种图案，画棵树简直就是小case了。画树的思路很简单，大树干分叉出若干的树枝，以不同角度和长度延伸出去并逐渐变细，树枝的末端再延伸树枝，所以很容易想到用递归来实现。所以递归函数里是在画一层树枝，需要的参数就是：startX：树枝起始的x轴坐标startY：树枝起始的y轴坐标length：长度angle：分叉角度depth：剩余层数branchWidth：该层的树枝粗细于是我们可以实现画出躯干的函数：
2021-04-19 16:49:04
1647
4
原创 VUE+Express+MongoDB前后端分离，实现一个便签墙（一）
计划来实现一个便签墙系列，这个东西做简单也简单，往复杂了做功能也很多，记录一下从零到有的开发过程吧，希望最后能把这个项目做得很完善。首先是前后端分离架构，前端用vue，后台我们就用express，数据库用mongodb吧。在脑袋里过一下，最最开始，要完成一个怎样的雏形呢？先把用户登录管理放在一边，当然是便签的增删改查+显示啊！那么，我们就来实现“初号机”，一张张便签的显示，增加，修改，删除。1、怎么说也得先把样式画出来先别管接口，先把纯前端的问题解决先，我们先来一个像模像样的“黑板”，对
2021-04-16 16:53:17
1513
7
原创 VUE+Canvas实现雷霆战机打字类小游戏
是的，又是我，在折腾小游戏的路上流连忘返了，之前用vue+canvas实现了一系列简单的小游戏，感兴趣的小伙伴可以戳戳以往的几个帖子：《VUE实现一个Flappy Bird~~~》《VUE+Canvas实现上吊火柴人猜单词游戏》《VUE+Canvas 实现桌面弹球消砖块小游戏》今天就来实现一个雷霆战机打字游戏，玩法很简单，每一个“敌人”都是一些英文单词，键盘正确打出单词的字母，飞机就会发射一个个子弹消灭“敌人”，每次需要击毙当前“敌人”后才能击毙下一个，一个比手速和单词熟练度的游戏。首先
2021-04-12 18:21:39
4484
16
原创 VUE+Canvas 实现桌面弹球消砖块小游戏
大家都玩过弹球消砖块游戏，左右键控制最底端的一个小木板平移，接住掉落的小球，将球弹起后消除画面上方的一堆砖块。那么用VUE+Canvas如何来实现呢？实现思路很简单，首先来拆分一下要画在画布上的内容：（1）用键盘左右按键控制平移的木板；（2）在画布内四处弹跳的小球；（3）固定在画面上方，并且被球碰撞后就消失的一堆砖块。将上述三种对象，用requestAnimationFrame()函数平移运动起来，再结合各种碰撞检查，就可以得到最终的结果。先看看最终的效果：一、左右平移的木板
2021-04-07 16:21:53
6192
17
原创 VUE+Canvas实现上吊火柴人猜单词游戏
在网上偶尔看到上吊火柴人猜单词游戏，游戏很简单，首先单词是隐藏的，用户开始键盘输入字母，如果包含这个字母，就显示出来，如果猜错了，上吊的小人就画出一笔，直到小人全部画完整了时还没猜出单词的全部，就算输。游戏简单，其实实现也很简单，这里就用vue+canvas来实现，当然了，用JQ或者SVG实现都可以，大同小异~~主体当然分为2块：1、分步骤画出上吊的小人 2、随机单词伴随用户输入的显示这里就先来实现画上吊的火柴人：（1）上吊的架子：吊小人的架子很简单，就是几条直线，注意canvas的..
2021-04-06 16:20:57
1820
原创 el-table动态添加列
在开发管理系统过程中碰到一些需求，针对表格，运营人员需要自己添加一些列，然后输入内容保存，以此来实现产品的高可配性，接下来我们就来实现这个功能。对于这些动态添加的列，后端用JSON字符串的形式存储起来最为方便，这里我们假定存储在custom字段中，例如：custom:"{\"测试\":1}" 这种形式。所以我们的el-table中，一部分为固有表头字段，而动态列则通过数组循环生成。1、首先假设返回的表格数据为：tableData: [ { date:..
2021-04-01 14:07:31
15815
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
3781
4
原创 VUE实现一个Flappy Bird~~~
Flappy Bird是一个非常简单的小游戏，在app上大家都玩过。这里就用VUE来实现一个简单的PC版Flappy Bird，娱乐一下~~~~~要实现这个游戏，首先来分析一下游戏界面里哪几块东西需要动起来：1、第一当然就是上下移动的小鸟；2、横向移动的背景图，让小鸟看起来在横向飞行；3、从画面右端进入的一排排管道。这样很明确了，我们让上面3块内容按照规律运动起来，然后再加上规则边界判断和计分，就可以得到一个完整的游戏。所以就一块块来解决。先来定义一些常量和变量：let raf
2021-03-17 16:23:56
3262
13
原创 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
3630
4
原创 VUE 弹窗组件实现动态挂载
有时候在开发中遇到这种需求，需要在某些页面中动态加载一个弹窗，比如未登录的时候，在点击某些地方，需要弹出登录框要求登录。如果在每个页面都import进去未免太过繁琐，在根页面引入后监听也不咋好的感觉。因此，可以使用VUE.extend动态挂在组件。以登录框组件为例：首先，自然是要一个登录组件页面，login.vue，这个按照自己的需求写就行了。然后，新建login.js，代码如下：import Vue from "vue";import login from "./login.vue
2020-12-10 15:06:10
2268
原创 D3 力导图 实现节点最短路径搜索
直接上完整html代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>图的最短路径搜索</title></head><body> <svg width="800" height="600"></svg> <script src="https://d3
2020-11-27 16:36:09
491
原创 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
1411
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
136
原创 【学习笔记】正则表达式详解——《高性能JavaScript》
正则表达式的运行效率受很多因素影响：1、匹配的目标文本千差万别，部分匹配&完全不匹配耗时要更长；2、不同浏览器对正则引擎的优化程度不同。工作原理：Step1: 编译将正则直接量或RegExp构造函数生成的对象转为原生代码程序。Step2:设置起始位置确定目标字符串的起始搜索位置。此处有各种优化措施，例如^开始的则判断起始位置如果失败，则不作后续位置的搜索操作；匹配第三字符是x的字符串，则先找到x再回退两个字符等。Step3:匹配每个正则表达示字元确定起始位置...
2020-11-27 15:09:43
148
原创 普通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
837
原创 CSS颜色8位hex写法在安卓不生效
最近开发嵌入app的h5页面，美工在给的高保图中有些色彩是“#ff822aff”的写法，与rgba类似，最后两位是透明度的意思。但是这种写法导致部分颜色在安卓手机上失效，无法正常显示相应的颜色。在ios和web上都是正常的。解决办法：将最后两位是ff的8位hex删掉'ff'，改为6位hex；如果不是ff，证明是含有透明度的，找到对应的透明度数值后，用rgba表示。...
2020-11-05 16:05:58
974
翻译 d3.js v4 Force官方API
d3的力导图运用了速度表示的韦尔莱算法。 d3.forceSimulation(nodes)：使用指定的nodes数组创建一个新的simulation，但不含引力（with no forces）。如果未指定nodes，默认为空数组。模拟器会自动执行；使用simulation.on在模拟运行时监听tick事件。如果希望手动运行模拟，需要调用simulation.stop，然后根据需要调用sim...
2019-08-14 10:19:27
2308
原创 canvas实现动态粒子鼠标互动连线背景效果
动态粒子连线背景实现：不支持IE，因为IE不支持requestAnimationFrame，需要用setInterval或者setTimeout模拟每一帧更新。<html> <head> <style> body{ margin:0; paddi...
2019-07-26 17:30:42
1464
原创 d3.js 画环形图和饼状图
利用d3.js中的pie生成器，加上arc弧https://github.com/d3/d3-shape/blob/v1.3.4/README.md#pies效果：代码：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/htm...
2019-07-23 14:53:50
1818
原创 d3.js canvas无自适应导致窗口缩放时影响节点坐标获取
问题：例如引力图中，缩放浏览器窗口，canvas无自适应调整大小时，会导致点击node时无法正确获取到坐标，从而影响拖拽等操作。解决：对window进行监听，回调中重新设置画布的宽高function updateWindow(){ x = w.innerWidth || e.clientWidth || g.clientWidth; y = w.innerHeig...
2019-07-11 14:32:12
884
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人