初探 node 接口开发
接口请求与其它资源请求没有什么不同，都是借助 http 协议返回对应的资源，这篇文章简单介绍一下 node 开发接口以及如何管理多个接口情况和接口风格。 标题关联了 node，主要因为 node 开启一个服务器是很简单，而且语法基本相同没有太多负担，这篇文章主要讲解思路，换算到其它语言也是可以的。 ...
ios屏幕适配
这篇文章算是迟来的总结，最近做了一个 h5 项目内嵌到 app 页面内联，默认情况下 app 那边不会做任何处理，也就是顶部和底部需要额外处理一下 bg 做法 默认情况下 ios 的顶部状态栏是20px，如果存在刘海则是44px，当然实际开发中也不需要使用 js 来进行判断，因为 ios11 之后新...
文字高亮
bg 如上图，可能在搜索之类的时候需要将搜索内容进行高亮，下面聊聊小程序和 web 上如何实现。 web 上做法 可以通过正则表达式/(高亮的文字)/来实现 这里实现比较简单，稍微注意一下replaceapi 即可，它还可以接收一个函数作为参数，具体内容这里不做讲解了只简单实现一下。 小程序做法 不...
深浅拷贝和extend
前言 深浅拷贝和 extend 是项目中常用的工具类函数，今天就动手实现一下 下面会重复这几个基础函数，为了简洁下面不会出现相关定义 浅拷贝用法 从上面例子可以看到，当两个对象出现相同字段的时候，后者会覆盖前者，而不会进行深层次的覆盖。 由此可以得到一个结论：浅拷贝可以简单理解为只拷贝对象的一层属性...
使用 canvas 实现贪吃蛇
童年使用的诺基亚基本上都会搭载这款小游戏，最近心血来潮想用 canvas 来实现这个游戏就有了这篇文章，下面讲解一下实现的思路，本文的最终代码已经放到了codesandbox上。 当然实现的方式并不止 canvas 这一种，还可以使用 html + css 的形式，这里不讨论优劣取舍，让我们快速开始...
基于History实现前端路由
History是 HTML5 新增的标准，对比hash它的展示更加优雅，但低版本 ie 还有兼容问题。 首先History表示窗口浏览历史，可以通过pushState方法添加历史记录，以及通过go方法来实现跳转，还有popstate事件可以监听到记录变更。 下面就来分析实现一个History路由的基...
基于hash实现前端路由
前端路由分为两部分，hash 路由和 History 路由，例如我们常用的 vue-roter 就包含这两部分，这里并不探讨框架是如何进行封装的，而是使用原生的 api 来实现这样一个功能。 预计分为两部分，这里先介绍 hash 路由，实现基本的接受响应和前进后退（为了方便，下面代码不做任何兼容处理...
GitHubActions构建定时任务
写这篇文章是无意之间看到阮一峰老师发布的GitHub Actions 入门教程里面介绍了 GitHub Actions 的一些概念，碰巧我之前用爬虫 + vuePress 构件了一个typescript 的中文手册，下面就以每天定时构建这个应用为背景介绍如何使用 GitHub Actions 完成下...
优雅处理图片异常
前言 不同浏览器对加载失败图片的图标展示不统一，所以给定一个默认的失败图片就尤为重要。 正好前几天处理了一下公司首页图片 error 默认图片的问题，就趁着记忆没有消失分享一下这篇文章。 error img 标签有一个 error 事件，通过它我们可以捕捉到异常，使用起来也很简单 全局 上面的方法没...
global对象获取
global 在开发中经常经常使用，例如下面一段代码调用的就是 global 内置的对象 这里的 Math 对象就是 global 内置的，在浏览器环境下我们可以通过window.Math.min显示调用，而在 node 环境下我们则要通过global.Math.min来调用，在实际中我们不会通过w...
从form表单来看策略模式
前言 之前写程序的时候为了快速开发写了许多if、else if的语句，当时开发倒是挺爽的，事后维护的时候想骂人，为了不坑自己和其他小伙伴，下面从零开始用一个基础表单 + 策略模式清除if分支语句 上面是一个很常见的表单元素，里面有账号和密码以及手机号，我们需要在提交之前对他进行一些校验，这里默认的规...
IntersectionObserver实现图片懒加载
传统的图片懒加载实现思路是判断图片的 top 区域是否小于父级区域，且自身高度加上 top 大于 0， 例如 不过这样写的话有一个问题就是我们监听的事件会重复多次触发，所以我们还需要写一个节流或者防抖函数，不过使用IntersectionObserver我们可以轻松实现，首先看下兼容性 Inters...
VuePress插件开发不完全指南
最近用 vuepress 把社区的 typeScript 翻译文章打包成了一个在线文档，不过有一些插件社区没有或者实现的不符合自己定制需求，所以决定自定义实现一个，这篇文化以掘金复制代码功能为例子。 先看一下开发完成的界面 1 先看一下官方给出的架构图 是不是感觉有点头疼，这里记不住没有关系，我们只...
漫谈系统权限设计
这里不会介绍具体实现的方式，要根据公司的业务来进行调整，下面就聊一聊基本设计的思路。 权限的设计对于一个后台来说至关重要，不过也要根据情况来选择，比如我们不会在一个博客或者个人网站的后台中写上权限控制，因为这是没有必要的，但是对于面向不同用户的产品来说就很有必要了，举个例子来说，滴滴打车的乘客和车主...
选择器那些事
失踪人口冒个泡 优先级 入门学习的时候一定就听说过这些概念，在菜鸟教程之类的网站上也肯定学习过，比如类的优先级为 10、标签的优先级为 1，这些都是辅助我们记忆的，下面就来说一说容易出错的点。 这里输出的margin为多少？ 答案是20px，对于类和属性选择器以及伪类优先级是一致的，当然这个例子只是...