HuaiCheng9067的博客

原创 Vue3可编辑表格组件

基于Vue3的可编辑表格。

原创 跑马灯的两种实现方式

方式一：利用元素尺寸变化监听api，计算宽度，得出时间，进行无限次数动画。方式二：利用原生跑马灯标签，简单。：能自定义速度（0 - 1）。

原创 防止重复执行、重复点击、重复请求

在指定函数产生结果之前，防止重复运行指定的函数，比如，接口重复请求。

原创 Vue3 日期时间时区格式化

日期时间、时区处理

原创 捕捉浏览器资源加载404异常，自动重新加载页面。

资源加载404，自动刷新，获取最新资源。

原创 vue3 hooks之事件广播（支持跨标签页）

【代码】vue3 hooks之事件广播（支持跨标签页）

原创 VUE3，自定义控制keep-alive缓存

/ 读取路由组件实例的name属性。在vite.config.ts中。在进入别的一级菜单前。

原创 JS定时任务封装（支持精确倒计时）

定时任务、倒计时、浏览器、js、javascript、倒计时偏差

原创 前端四则运算库number-precision

四则运算

原创 购物车，JS计算优惠组合可能的全排列方法

全排列，购物车

原创 前端学习路线

原创 如何监听页面可见性，如处于后台、标签页切换、最小化、锁屏

监听页面是否没在激活的标签页、最小化、锁屏？

原创 监听H5的横竖屏

真正想要H5强制竖屏，兼容性上是比较难处理的，然而可以通过别的方式达到类似的效果；1、检测H5横竖屏2、检测到横屏时，给出提示，并隐藏页面元素（引导用户竖屏）话不多说，直接上代码window.addEventListener("resize", function (event) { clearTimeout(this.dialogTimeout) this.dialogTimeout = setTimeout( () =>{ if

原创 视口监控场景基本通用能力 - Vue指令

目的：提供便利的指令； 满足视口监控场景，需求的基础能力； 同时适用性能优化中的图片懒加载场景；使用时的注意事项：目标在根（target）的可见区域的的任何不可见部分都会被视为不可见 注意修饰符的使用代码部分：/** 使用时：v-InterView="回调函数"* 修饰符：* once表示只触发一次，默认每次都会触发* 指令值：* 若形如：callback callback为回调函数，此时target默认为祖先元素el...

原创 前端开发链路规范

协作规范一、UI协作规范统一工具 确定图标icon（推荐iconfont 或 图片） 明确尺寸边界（最小宽度、最大宽度） 明确内容边界（文字换行） 明确交互UI变化效果（鼠标形状、颜色值、阴影、loading、空数据提示等）二、前后端协作规范需求分析，技术难点讨论 确认接口公共参数、cookie、响应数据格式（如code、分页、msg提示等） 梳理数据来源 数据模型确认（前端交互所需要的数据是否齐全），输出mock数据模型 输出接口文档、参数说明、标记必传标识 联调前，接口做

原创 项目codereview心得

codereview目的：及早的发现代码功能上的缺陷与不足； 及时的纠正代码中不符合统一规范的地方； 促进团队成员之间的相互学习，相互促进的重要环节； 团队建设；在软件工程中，建议在提测之前，进行一次全面代码审查，其次，在上线之前1天，再做一次测试阶段修改的代码审核；检测方面：代码规范，如：命名、空格、缩进、大小写等； 代码稳定性，如：函数参数容错能力、循环边界处理； 代码精炼程度，如：不存在多余代码、重复代码、注释代码； 代码注释，如：说明需要什么物料（参数），有什么特别的地方，

原创 代码中特殊注释——TODO、FIXME、XXX、HACK

TODO：英语翻译为待办事项，备忘录。如果代码中有该标识，说明在标识处有功能代码待编写，待实现的功能在说明中会简略说明。FIXME：可以拆成短语，fix me ，意为修理我。如果代码中有该标识，说明标识处代码需要修正，甚至代码是错误的，不能工作，需要修复，如何修正会在说明中简略说明。XXX：如果代码中有该标识，说明标识处代码虽然实现了功能，但是实现的方法有待商榷，希望将来能改进，要改进的地方会在说明中简略说明。HACK：英语翻译为砍。如果代码中有该标识，说明标识处代码我们需要根据自己的需求去调整

原创 es5环境添加es6的伪代码

/** * 以下函数仅为es5环境提供更方便的es6代码 * 如果你的项目中使用了构建工具，如webpack，那么谨慎引入本js文件，因为有可能会覆盖掉es6原始代码。 * 作者：沙漠码农 * Email：huaicheng151201@163.com * Time: 2021/03/01 */(function(){ var ErrorMsg = function(msg){ throw new Error(msg); } var isFunction = funct.

原创 js运算四舍五入，保留小数位，小数位不足自动补0，统一个各浏览器的差异。

function tofixed(value, bit){ var pow = Math.pow(10, bit) var arr = (value*pow).toString().split(".") var result = "" if(arr[1] && arr[1].split('')[0] > 4){ result = (Number(arr[0]) + 1) / pow }else{ result = arr.

原创 手写实现Promise

function Demand (handel){ this.state = "PENDING" this.value = undefined var resolve = function(value){ this.state = 'FULFILLED' this.value = value this.then() this.finally() }.bind(this) var reject = function(value){.

原创 dhc-templete 脚手架

dhc-templete是一套基于webpack的vue基础集成的脚手架，可快速完成项目的前期准备阶段。主要集成文件模块区分、常用插件库的集成。全局安装：npm i dhc-templete g初始化：dhc-templete init接下来控制台会提示输入项目名，输入vue版本号（默认2），输入后回车等待生成完成即可！...

原创 关于CSS3中flex弹性布局的总结

鉴于网上各种长篇大论，本文意在精简，方便记忆的基础上总结，不讨论兼容性。1、任何一个元素都可以被定义为弹性盒子，即display: flex；任何一个弹性盒子都有一根主轴，默认水平方向。 任何一个弹性盒子都有一根负轴，默认垂直方向。 定义主轴方向：flex-direction: row | row-reverse | column | column-reverse; 主轴的对齐方式：justify-content: flex-start | flex-end | center | space.

原创 简单实现vue国际化plugin，可在vue2、vue3中使用

/*** * 国际化实现！！！ * huaicheng151201@163.com * 2020年11月1日 * * 参数说明 * options: * - locale: 初始化语言 * - messages: 语言配置项 * * 例如： { locale: "zh_CN", messages: { "zh_CN": { option: { .

原创 js倒计时精准度修复interval.js

由于js单线程，导致setInterval、setTimeout不准时的结果， 往往在有些业务当中，例如抢购活动，那用户会很在意这个倒计时的表现。github仓库：https://gitee.com/dmui/set-interval引入cdn地址interval.js：https://gitee.com/dmui/set-interval/raw/master/interval.js如何注册一个倒计时任务：var interval_1 = new SetInterval(func..

原创 快速实现拖拽，darg.js拿来即用！！！

可根据业务逻辑快速完成拖拽，拿来即用！！！github地址：https://gitee.com/dmui/darg/tree/master/引入cdn文件darg.js:https://gitee.com/dmui/darg/raw/master/darg.js如何完成拖拽注册：<style> .demo{ width: 80px; height: 80px; border-radiu..

原创 2021前端面试题Vue

1、框架类Vue2框架核心，响应式原理 Vue3做了哪些优化改动，watch与watchEffect的区别，依赖注入，响应式相互转换 介绍完整的生命周期，render会在哪几个周期执行 自定义指令 插件开发 vue.use()背后的逻辑 data为什么建议function方式 计算属性与watch的区别 v-show 与 v-if 的区别 $alots的用法，如果获取组件下面的所有子组件 组件间的通信方式 Vuex的几大属性，为什么mutation只能同步执行而action能异步执

原创 H5监听键盘弹起收回，用法超简单！兼容Android、iOS。

引入以下代码，仅需2行代码即可监听！/** * 兼容Android、iOS各浏览器 * H5键盘监控弹出（KeyboardUp）、收起（KeyboardDown）事件定义 * auth: huaicheng151201@163.com * time: 2020.11.20 * 用法： * 与click事件的绑定用法无异，如： window.addEventListener("KeyboardUp",function() { //键盘弹起来了 },false)

原创 Vue 3 改动汇总

以下列出vue3中与开发关注较高的改动，欢迎补充！1、v-for 指令不再必须指定 key 值，框架会自动生成。2、<template v-for=“...” >...</template>格式已支持指定 key 值。且将被渲染为原声的template元素。3、同一元素上 v-if 和 v-for 的优先级变更为 v-if 高于 v-for。4、v-bind="属性object" 与标签自身的属性值 合并优先级 由v-bind优先级高变更为 出现的先后顺序来判断。..

原创 h5页面兼容刘海屏快速解决方案

关键词条：viewport-fit:cover - 视图端口被缩放以填充设备显示@supports - css中用来检测浏览器是否支持某些css语法功能的一个标签，它和@media一样支持or(或者)、and(并且)、not(非)关键字用来做逻辑判断。safe-srea-inset-[top | right | bottom | left] - 设置确保安全边界兼容ios底部横条css代码：1、<meta name="viewport" content="...

原创 webpack打包，分环境配置插件之cross-env

在多环境下打包构建是很常见的。可以这样来做：npm install --save-dev cross-env在packjson文件中：{ "scripts": { "dev": "cross-env NODE_ENV=dev ***", "test": "cross-env NODE_ENV=test ***", "build": "cross-env NODE_ENV=production ***" }}然后在其他地方就可以通过process.en..

原创 mac字体渲染精细处理

问题根源：同样设置的字体，为什么和别人的代码渲染出来的效果在mac上会显得比较’莽‘？全局除了设置字体font-family外， 还需要设置：//抗锯齿，使得更精细平滑-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-smoothing: antialiased;-web...

原创 webpack4 demo

webpack.config.jsconst path = require("path");const webpack = require("webpack");const packagejson = require("./package.json");const HtmlWebpackPlugin = require('html-webpack-plugin');//引入h...

原创 初次尝试web浏览器消息通知，并震动提示

注意的是，本地测试服务是完全可以看到消息通知的，如果线上环境，必须要求https协议，否则自动视为拒绝。通知API可能不再从不安全的来源使用。您应该考虑将应用程序切换到安全源，比如HTTPS。见https://goo.gl/rStTGz了解更多细节。js代码：;(function(window){ var _notification = function(){...

原创 高级之路篇二十三：this总结

总之一句话：谁调用，this就指向谁。普通函数中 构造函数中 箭头函数中 原型链上的this getter、setter中 定时器回调函数中 作为对象方法中 dom事件处理函数中 内联事件函数中 在Function构造器中1、普通函数中：非严格模式下指向全局window 严格模式下undefined2、构造函数中：指向实例对象3、箭头函数中：箭...

原创 高级之路篇二十二：map、weakMap、set、weakSet、object、array的区别

1、mapMap对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。键值对结构。 任何值(对象或者原始值) 都可以作为一个键或一个值。 强引用存储 null会被当做undefined。 虽然NaN !== NaN , 但是map中 NaN是与NaN相等的。与object的一些对比：一个Object的键只能是字符串或者Symbols，但一个...

原创 高级之路篇二十一：全面解析js一等公民function

初识function：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。1、具名函数var fun = function(){....} 此种方式变量会提升，函数体留原地。function fun(){....} 此种方式变量函数体都会提升至最顶端，位于变量声明提前之前。2、匿名函数setTimeout(function(){.......

原创 全面解析var、const、let的区别

作用域：变量作用域（全局变量和局部变量） 、函数作用域（函数内部的变量）作用域链：其实就是一些可访问对象的集合。比如函数执行时会产生一个活动对象，活动对象中。在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，该内部属性...

原创 数组排序的几种方式

1、sort排序方法sort()将在原数组上对数组元素进行排序，即排序时不创建新的数组副本。如果调用方法sort()时没有使用参数，将按字母顺序(更为精确地说，是按照字符编码的顺序)对数组中的元素进行排序。要实现这一点，首先应把数组的元素都转换成字符串(如果有必要的话)，以便进行比较。如果想按照别的顺序进行排序，就必须提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序...

原创 如何快速随机打散一个数字数组？

随机就离不开Math.random()既然是一个数字数组，写过排序吧，有冒泡排序、sort排序等，都能排序成从小到大或从大到小的数组。那么暂且看看sort生序排列的写法：var a = [10,2,3,5,4,6,7,8,9,1];var randomSoftArr = function(arr){ arr.sort(function(a, b){ return ...

原创 高级之路篇十九：ES6之数组api

1、map2、for....of....3、includes4、Array.from()5、find()、findIndex()、indexOf、lastIndexOf6、Array.isArray()7、filter8、every9、some10、reduce11、reduceRight12、fill13、copyWithin...