霍霍的博客

原创 图片主题色

根据图片的主题色，推荐对比度大的颜色

原创 移动端1像素边框处理

移动端1像素边框处理

原创 babylon创建文字

babylonjs

原创 前端性能优化

关于前端:页面加载性能之Web-Vitals

原创 博客汇总项目

使用Typescript编写和发布npm包

原创 nvm的使用

nvm的使用

转载 删除git无用分支

平常我们都会有自己的工程，时间长了后，比如2-3年后，repo里一般都会充满了各种各样的分支，有很多其实已经没用了，典型的如已经合并到主干的分支，但目前的现状一般是没人理会这些分支，如下：avatar大家放任不管，主要还是因为有点麻烦，需要人工识别是否还需要，然后再一个个删除，非常琐碎。因为吃力不讨好，所以没人愿意干，既然没人愿意干，那么有没有更加高级的，通过机器的方式自动帮我们做呢？答案是肯定的。接下来，我们将通过git命令+groovy来打造一个牛逼的脚本工具，自动帮我们做这件事情。问题分解首先

原创 es module 和 commonjs 模块化实践

喜欢的建议收藏，不迷路

原创 原生bind、call和apply方法的实现

call 方法的实现Function.prototype.call = function (context, ...args) { const ctx = context || window; let i = 0; let funcName = ''; while(true) { if (!(`__CALL__${i}` in ctx)) { funcName = `__CALL__${i}`; break; } i++; } ctx

原创 图片压缩网站-免费压缩网站

https://tinypng.com/图片压缩网站，重点是免费~免费~免费，重要的事情说3遍。

原创 排序算法-常用的排序算法

常用的排序算法冒泡排序O(n^2)选择排序O(n^2)插入排序O(n^2)快速排序O(nlogn)归并排序O(nlogn)以下我们用Javascript语言来实现上面的算法冒泡排序function bubbleSort(arr) { var length = arr.length; for (var i = 0; i < length; i++) { for (var j = 0; j < length - i - 1; j++) { if (ar

原创 SSR 、CSR、预渲染、同构等首屏优化技术要如何选择？

作为开发者，你可能经常会面对这样一件事情，需要你做出影响整个应用架构的决策，而web开发者的核心决策之一就是应用逻辑和渲染工作的实现，判断渲染工作应该处于架构中的什么位置，是客户端还是服务器呢？由于现在有很多不同构建网站的方法，因此这些决策变得更加困难，为了更好地理解在做出决定时所选择的架构，我们需要对每种方法有充分的理解，并且在谈到它们时能够有一致的术语，关于对术语的理解，我们可以先来看看与渲染有关的词：SSR: 指的是服务器渲染（Server-Side-Rendering），也就是在服务器上将客户端

原创 简单实现promise

function Promise(task) { this.PENDING = "pending"; this.RESOLVED = "resolved"; this.REJECTED = "rejected"; this._status = this.PENDING; this._resolvedCallback = []; this._rejectedCallback = []; if (!(task insta...

原创 前端知识

viewport 是什么？

原创 nodejs之xlsx与json文件互转换

xlsx转jsonconst xlsx = require('node-xlsx');const fs = require('fs');const path = require('path');const sourcePath = './';const savePath = '../src/language/package';const excelNames = ['language.xlsx'];class Translate { constructor() { t...

原创 vue2.x抽象组件之Debounce

Debounce组件：<script>import { get, debounce, set } from 'lodash';export default { name: 'debounce', abstract: true, //标记为抽象组件 props: { events: String, wait: { type: Number, default: 0, }, options: { type:

原创 git版本管理办法

git版本管理办法一、版本分支描述及使用方法master 分支（主分支） 稳定版本因技术经理没有操作权限，暂不使用。 整个项目只有一个分支。online分支（在线分支） 稳定版本master分支的替代分支。 整个项目只有一个分支。 为了维护良好的生产环境发布历史记录，请及时打发布历史tag。develop 分支（单分支模式）单分支模式下研发人员开发分支。 适合项目比较简单或版本比较稳定情况。 整个项目只有一个分支。 不能与feature分支方式同时使用。 命名规范：固定值d.

原创 vue实现高阶组件

什么是高阶组件：高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。例子：// 一个函数就是一个组件。所以组件是函数这个命题成立了。所谓高阶组件其实就是一个高阶函数, 即返回一个组件函数的函数// 回忆高阶组件的定义：接收一个组件作为参数，返回一个新的组件// Vue中组件就是个函数，但是在引入之前仍只是一个options对象，所以这样就很好明白了 Vue中组件开始只是一个对象，即高阶组件就是：一个函数接受一个纯对象，并且返回一个新纯对象// 1.高阶组件(HOC)应

原创 使用echarts绘制曲线图

<template> <div class="home-container"> <total-product-info :merchantCount="merchantCount" :todayConsume="todayConsume" :todayRecharge="todayRecharge" :todayFeeYuan="todayFeeYuan" ></total-produc...

原创 数值转换成比例

/** * 比例计算 * @param {Array} list 数组 * @return {Array} */export function getRateCalculate(list) { if (!list || !list.length) { return []; } console.log(list); let totalRate = 0; const total = list.reduce((prev, cur) => { return pr.

原创 vscode常用插件

Bookmarks Chinese (Simplified) Language Pack for Visual Studio Code Debugger for chrome ESLint Git Graph GitLens Live Server Markdown All in One nginx.conf Prettier RegExp Preview and Editor shell-format SVG Viewer Vetur vscode-flow-ide vsco

原创 使用git rebase, git reset 注意事项

总结：不管当前分支是否只有自己在使用，在rebase之后，需要强制推送到远端分支时，使用git push --force-with-lease origin feature参数来保证分支安全

原创 前端页面添加水印

watermark.jsimport watermarkImg from '@/assets/img/watermark.png'/*Just return a value to define the module export.*/var watermark = {};var defaultSettings = { watermark_id: 'wm_div_id', //水印总体的id watermark_prefix: 'mask_div_id',

原创 spring中的IOC和DI，注解

bean.xml<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" x

原创 elementui 图片上传 el-upload

html:<el-upload ref="uploadRef" class="upload-demo" multiple action :file-list="form.rechargeVoucher" list-type="text" :before-upload="beforeUpload" :http-request="upload

原创 虚拟键盘遮挡输入框的解决方案

// 虚拟键盘遮挡输入框的解决方案(function (doc) { var docEl = doc.documentElement; docEl.addEventListener('touchstart', function (e) { let target = e.target; if (target.tagName.toLowerCase() === 'input') { var reg = /^(number|text|password)$/ if.

原创 手机端rem布局解决方案

config.js文件export default { maxClientWidth: 750}util.js文件import config from './config';// 屏幕适配(function (doc, win, undefined) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize', reca

原创 css 解决手机端1像素边框问题

手机端：1像素边框解决方案/** * @include border(0 0 0 1px, solid, red, 4px); * @module 背景与边框 * @description 为元素添加边框（包括1px边框） * @method border * @version 2.0.0 * @param {String} $border-width 指定边框厚度（单位为px），默认值：1px，取值与`border-width`属性一致，不同方向代表边框位置 <2.0.0>

原创 vue-i18n 翻译之 excel 解析

vue-i18n使用excel编写转换成对应语言包：const xlsx = require('node-xlsx');const fs = require('fs');const path = require('path');let sheets = xlsx.parse(fs.readFileSync(path.join(__dirname, 'a.xlsx')));let data = sheets[0]['data'];let obj = {};let keys = ...

原创 gitlab内容变化触发jenkins自动部署

转载 gitlab runner实现自动化部署

前言GitLab Runner是一个开源的项目，是用来执行GitLab中的项目的根目录下创建的.gitlab-ci.yml 脚本的工具。GitLab-CI可以比喻成管理工人的工厂，Runner是工厂里的工人，每个工人需要在工厂进行注册，所负责的项目不同，所做的工作也不同。当工厂某一个项目发生变动时，需要通知对应的工人去做对应的工作。具体部署流程图GitLab Runner简介1. Runner类型Shared Runner：所有工程都能够用的，且只有系统管理员能够创建 Specif

原创 如何彻底删除jdk

第一步：点击“控制面板”。第二步：点击“卸载程序”。第三步：进入到“程序和功能”界面，找到jdk的两个程序：①java 8 update 171（64-bit）；②java SE Development Kit8 update 171（64-bit）；右击卸载即可第四步：在“运行”中输入Regedit，打开注册表编辑器，找到HKEY_LOCAL_MACHINE/SOFTWARE/JavaSoft ，将JavaSoft文件夹及其子目录全部删除。...

原创 图片下载-js实现

/** * * @param {String} requestUrl 图片路径 * @param {String} saveFileName 保存的图片名称 * @param {String} fileFormat 图片格式 如：png, jpg, jpeg */function imgDownload(requestUrl, saveFileName, fileFormat) { saveFileName = saveFileName || "image"; fileFormat..

原创 使用css3制作3d图集

使用了一些转换器生成gif，忽略水印。html<main> <ul> <li><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1596272321&di=8654a0aaa39f3df06f07f321e69116cf&src=http..

原创 使用css 实现动感菜单

html <nav> <ul> <li><span>1</span></li> <li><span>2</span></li> <li><span>3</span></li> <li><span>4</span></li> ..

原创 flex-shrink计算规则

flex-shrink: 代码如下main{ width: 600px; border: 1px solid #000; height: 100px; display: flex; box-sizing: border-box; }div{ box-sizing: border-box; height: 100px; border-width: 1px; border-style: solid; border-color: red;}div:n...

原创 ES2016-ES2020 新特性

ES2016:es7 Array.prototype.includes()方法 求幂运算符** ES2017:es8 Async/Await Object.values()，Object.entries() String.prototype.padStart 和 String.prototype.padEnd Object.getOwnPropertyDescriptors() ES2018:es9 for await of (...

原创 throttle的实现

什么是throttle，直接翻译就是节流的意思，打个比方，比如说中国的三峡大坝，闸门每一分钟打开一次，那么水就是一分钟流一下。在我们的应用中一般用在需要降低频率的地方，比如说：window的onresize，窗口变化时时触发onresize方法，如果我们在onresize做一些dom的操作，显然会大大降低浏览器的性能，所以我们可以降低触发onresize的频率来得以控制。 抢票软件的抢票功能（比如支付宝的抢券），用户连续点击抢票按钮发送http请求到后台，每点击一次按钮发送一次请求，会加剧后台的并发性

原创 clip-path 绘制五角星

html 和css代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title></head><body> <div></div> <d..

原创 css3绘制进度条

repeating-linear-gradient ：p{ margin: 0; padding:0; width: 200px; height: 20px; background-image:repeating-linear-gradient(45deg, red 0px, 20px, yellow 20px, 20px, blue 40px); background-size: 2000px 20px; background-position: 200px; an.