一、事件处理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c...
前端开发
修改 node_modules 依赖包源码，利用 patch-package 制作该 npm 模块包的补丁
在日常开发中经常会遇到，npm依赖模块升级后有点小问题或者不符合我们的场景。 通常的解决方案，是提交一个issue或者PR，等待作者修改，又或者copy源码到本地，修改依赖指向本地。 这两种方案，都有明显的...
js 动态改变Input/Textarea值，vue双向绑定数据没有改变
给 input、textarea 组件设置快捷录入操作 vue 自带的修饰键+keydown 事件js 原生事件委托 onkeydown 事件 一、vue 自带的修饰键+keydown 事件 <input @keydown.ctrl.81="setValue"> 这个实现...
webpack-dev-server 启动项目 Invalid Host header
Invalid Host header 报错 webpack 构建项目，笔都希望设置 hosts ，利用特定的自定义域名浏览启动的项目，利用 hostname。 // hosts 设置 127.0.0.1 ifrontend.test.com 验证发现可以使用，但是页面提...
史上最全的常用正则表达式大全，涵盖基本的开发应用场景
一、校验数字的表达式 数字：^[0-9]*$n位的数字：^\d{n}$至少n位的数字：^\d{n,}$m-n位的数字：^\d{m,n}$零和非零开头的数字：^(0|[1-9][0-9]*)$非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2...
npm 常用命令大全
npm 是什么npm init 初始化npm install 安装模块npm uninstall 卸载模块npm update 更新模块npm prefix 查看工作空间npm ls 查看已安装模块npm outdated 查看过时的已安装模块npm help 查看命令的详情帮助npm co...
前端工程化之 css sprites 精灵图运用
postcss-sprites 一款图片精灵生成工具。 node 场景运用 // 安装 npm i -D postcss-sprites // css // input .all { background: url('../images/all.png') no-repeat; } .back { background: ...
Chrome 控制台调试打印之 console 花式调试大全
输出信息 console.log('默认消息！') console.info('提示消息！') console.error('错误消息！') console.warn('警告消息！') 数据表格式化 - table const data = [ { id: 1, name: '...
posthtml 虚拟语法树(AST)解析器及插件介绍
介绍 PostHTML 是一种使用 JS 插件转换 HTML/XML 的工具。PostHTML 本身非常小。它仅包含一个 HTML 解析器、一个 HTML 节点树 API 和一个节点树字符串化器。 所有 HTML 转换都是由插件完成的。这些插件只...
HTML解析器之htmlparser2使用详解
htmlparser2 提供了一个解析器——Parser，初始化它至少需要一个handler，options是可选的。 handler是一个对象，在这个对象上可以设置很多的钩子函数，Parser解析时会在每个阶段运行对应的钩子函数。 以下...