首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
有点意思
街角小林
创建于2021-12-28
订阅专栏
各种好玩的前端实践
等 118 人订阅
共40篇文章
创建于2021-12-28
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
如何手动解析vue单文件并预览?
开头 笔者之前的文章里介绍过一个代码在线编辑预览工具的实现(传送门:快速搭建一个代码在线编辑预览工具),实现了css、html、js的编辑,但是对于demo场景来说,vue单文件也是一个比较好的代码组
从一道算法题实现一个文本diff小工具
众所周知,很多社区都是有内容审核机制的,除了第一次发布,后续的修改也需要审核,最粗暴的方式当然是从头再看一遍,但是编辑肯定想弄死你,显然这样效率比较低,比如就改了一个错别字,再看几遍可能也看不出来,所
Web思维导图实现的技术点分析
思维导图是一种常见的表达发散性思维的有效工具,本文会完整的介绍如何从头实现一个简易的思维导图,最终成果预览:https://wanglin2.github.io/mind-map/
手写一个虚拟DOM库,彻底让你理解diff算法
本文会参考知名的snabbdom库来手写一个简易版的,配合图片示例一步步完成代码,一定让你彻底理解虚拟`DOM`的`patch`及`diff`算法。
前端下载图片的N种方法
前几天一个简单的下载图片的需求折腾了我后端大佬好几天,最终还是需要前端来搞,开始说不行的笔者最后又行了,所以趁着这个机会来总结一下下载图片到底有多少种方法。 先起个服务 使用expressjs起个简单
用console画条龙?
相识 console一定是各位前端er最熟悉的小伙伴了,无论是console控制台,还是console对象,做前端做久了,打开一个网页总是莫名自然的顺手打开控制台,有些调皮的网站还会故意在控制台输出一
快速搭建一个代码在线编辑预览工具
大家好,我是一个闲着没事热衷于重复造轮子的不知名前端,今天给大家带来的是一个代码在线编辑预览工具的实现介绍,目前这类工具使用很广泛,常见于各种文档网站及代码分享场景,相关工具也比较多,如....
【万字长文】从零配置一个vue组件库
本文会从零开始配置一个monorepo类型的组件库,包括规范化配置、打包配置、组件库文档配置及开发一些提升效率的脚本等,monorepo 不熟悉的话这里一句话介绍一下,就是在一个git仓库里包含多个独立发布的模块/包。 首先每个组件都是一个独立的npm包,但是某个组件可能又依赖…
手把手教你实现手绘风格图形🔵
是不是有点蠢萌,本文的主要内容是带大家手动实现上面的图形,最终效果预览:http://lxqnsys.com/#/demo/handPaintedStyle。话不多说,代码见。 万物基于线段,所以先来看线段怎么画,仔细看上图会发现手绘版线段其实是用两根弯曲的线段组成的,曲线可以…
使用konvajs三步实现一个小球游戏
记得以前玩过一个很简单的小游戏,一个球在动,然后底下一个板来接,如果没接住撞到底边游戏就结束了,虽然忘了它叫什么名字,但一直心心念念,魂牵梦萦,刚好最近临过年需求不饱和、刚好之前一直想做但是没动手,刚好这两天在学习konvajs,刚好就有了这篇小文章,很简单,只要三步,包你三分…
web文本划线的极简实现
等等,这个功能看似简单,实际上难点还是很多的,比如如何高性能的对各种复杂的文本结构划线、如何尽可能少的存储数据、如何精准的回显划线、如何处理重复划线、如何应对文本后续编辑的情况等等。 作为一个前端搬砖工,每当看到一个有意思的小功能时我都想自己去把它做出来,但是看了仅有的几篇相关…
带你实现一个简单的多边形编辑器
示例地址:https://lbs.amap.com/api/jsapi-v2/example/overlay-editor/polygon-editor-avoidpolygon。请先试用一下,接下来实现它的所有功能。 但是这样还不是我们要的,我们想要一个从始至终都是闭合的区域…
冬天到了,给你的网站下个雪吧
女朋友常逛的设计网站这两天页面上多了下雪的效果,于是问我我的网站能下雪吗,作为一个程序员我一般会说实现不了,但是作为男朋友,不能说不行。 当然,最好的方式是用canvas来画。 因为tan(θ)=sy/sx,θ=Math.atan(sy / sx),因为雨的线段默认是从上到下垂…
高仿一个echarts饼图
饼图,很常见的一种图表,使用任何一个图表库都能轻松的渲染出来,但是,我司的交互想法千奇百怪,布局捉摸不透,本身饼图是没啥可变的,但是配套的图例千变万化,翻遍ECharts配置文档都还原不出来,那么有两条路可以选,一是跟交互说实现不了,说服交互按图表库的布局来,但是一般交互可能会…
一个简单标注库的插件化开发实践
最近在提炼一个功能的时候发现可配置项过多,如果全都耦合在一起,首先是代码上不好维护、扩展性不好,其次是如果我不需要该功能的话会带来体积上的冗余,考虑到现在插件化的流行,于是小小的尝试了一番。 话不多说,开撸。 插件我理解就是一个功能片段,代码上可以有各种组织方式,函数或类,各个…
浅析浏览器书签的导入和导出
浏览器有个实用的功能,但是可能用的频率不高,就是书签/收藏的导入和导出,因为现在一般浏览器都有云同步功能,所以这个功能存在感不强。 浏览器书签是可以跨不同的浏览器导入的,所以意味着导出的文件肯定是有一个规范的,我简单搜了一下没有搜到,可能是各家约定俗成的规范,并没有一个正式的标…
【汉诺塔】小游戏开发教程
详细介绍及解法请参考文章:汉诺塔与递归。 最终的成果示例请点击:汉诺塔小游戏。 温馨提示:本篇教程属于从头到尾面面俱到型,虽然开发上本身是没什么难度的,但不妨碍把它做成一个很完善的游戏,所以它很长。 本项目使用vue作为基础框架。 使用这些视图框架的主要思想就是操作数据,视图更…
汉诺塔游戏与递归
汉诺塔部分核心内容来自《程序员的数学》一书。 戳这个网址试试吧:http://www.hannuota.cn/。三层是不是so easy,四层呢?五层呢?是不是就凌乱了,它的最少移动次数又是怎么计算出来的呢? 假设第一根柱子是起始柱,第二根为目标柱,第三根为中转柱。 让我们从只…
使用vue实现排序算法演示动画
嗯,舒服了很多,这个需求到这里就完了,但是事情并没有结束,我突然想到了以前看一些算法文章的时候通常会配上一些演示的动画,感觉跟这个很类似,那么是不是可以用这个来实现呢,当然是可以的。 之前看到这些动图的时候也有想过怎么实现,但是都没有深究,这次业务开发无意中也算找到了其中的一种…
如何实现一个vue组件库的在线主题编辑器
一般而言一个组件库都会设计一套相对来说符合大众审美或产品需求的主题,但是主题定制需求永远都存在,所以组件库一般都会允许使用者自定义主题,我司的vue组件库hui的定制主题简单来说是通过修改预定义的scss变量的值来做到的,新体系下还做到了动态换肤,因为皮肤本质上是一种静态资源(…