前端
技术爱好者Joker
技术爱好者
展开
-
图片主题色
根据图片的主题色,推荐对比度大的颜色原创 2023-03-08 16:00:57 · 150 阅读 · 0 评论 -
移动端1像素边框处理
移动端1像素边框处理原创 2022-12-15 19:02:57 · 208 阅读 · 0 评论 -
babylon创建文字
babylonjs原创 2022-07-11 20:56:58 · 702 阅读 · 0 评论 -
前端性能优化
关于前端:页面加载性能之Web-Vitals原创 2022-03-09 11:51:38 · 108 阅读 · 0 评论 -
博客汇总项目
使用Typescript编写和发布npm包原创 2022-02-16 14:50:58 · 190 阅读 · 0 评论 -
nvm的使用
nvm的使用原创 2022-02-15 10:55:49 · 2101 阅读 · 0 评论 -
es module 和 commonjs 模块化实践
喜欢的建议收藏,不迷路原创 2021-11-28 02:28:34 · 1220 阅读 · 0 评论 -
原生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原创 2021-04-15 23:27:40 · 69 阅读 · 0 评论 -
排序算法-常用的排序算法
常用的排序算法冒泡排序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原创 2021-04-09 13:26:29 · 98 阅读 · 0 评论 -
SSR 、CSR、预渲染、同构等首屏优化技术要如何选择?
作为开发者,你可能经常会面对这样一件事情,需要你做出影响整个应用架构的决策,而web开发者的核心决策之一就是应用逻辑和渲染工作的实现,判断渲染工作应该处于架构中的什么位置,是客户端还是服务器呢?由于现在有很多不同构建网站的方法,因此这些决策变得更加困难,为了更好地理解在做出决定时所选择的架构,我们需要对每种方法有充分的理解,并且在谈到它们时能够有一致的术语,关于对术语的理解,我们可以先来看看与渲染有关的词:SSR: 指的是服务器渲染(Server-Side-Rendering),也就是在服务器上将客户端原创 2021-03-27 22:14:46 · 1082 阅读 · 0 评论 -
简单实现promise
function Promise(task) { this.PENDING = "pending"; this.RESOLVED = "resolved"; this.REJECTED = "rejected"; this._status = this.PENDING; this._resolvedCallback = []; this._rejectedCallback = []; if (!(task insta...原创 2021-02-23 16:17:04 · 233 阅读 · 2 评论 -
前端知识
viewport 是什么?原创 2021-02-19 14:06:08 · 113 阅读 · 0 评论 -
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...原创 2021-01-27 09:26:48 · 668 阅读 · 0 评论 -
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:原创 2021-01-26 16:47:38 · 375 阅读 · 0 评论 -
vue实现高阶组件
什么是高阶组件:高阶组件就是一个函数,且该函数接受一个组件作为参数,并返回一个新的组件。例子:// 一个函数就是一个组件。所以组件是函数这个命题成立了。所谓高阶组件其实就是一个高阶函数, 即返回一个组件函数的函数// 回忆高阶组件的定义:接收一个组件作为参数,返回一个新的组件// Vue中组件就是个函数,但是在引入之前仍只是一个options对象,所以这样就很好明白了 Vue中组件开始只是一个对象,即高阶组件就是:一个函数接受一个纯对象,并且返回一个新纯对象// 1.高阶组件(HOC)应原创 2020-12-29 17:20:00 · 2083 阅读 · 0 评论 -
使用echarts绘制曲线图
<template> <div class="home-container"> <total-product-info :merchantCount="merchantCount" :todayConsume="todayConsume" :todayRecharge="todayRecharge" :todayFeeYuan="todayFeeYuan" ></total-produc...原创 2020-12-21 17:53:21 · 4157 阅读 · 1 评论 -
数值转换成比例
/** * 比例计算 * @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.原创 2020-12-18 11:33:40 · 261 阅读 · 0 评论 -
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原创 2020-12-14 14:25:16 · 194 阅读 · 0 评论 -
使用git rebase, git reset 注意事项
总结:不管当前分支是否只有自己在使用,在rebase之后,需要强制推送到远端分支时,使用git push --force-with-lease origin feature参数来保证分支安全原创 2020-12-08 21:49:21 · 420 阅读 · 0 评论 -
前端页面添加水印
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',原创 2020-11-04 19:35:43 · 2125 阅读 · 2 评论 -
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原创 2020-10-23 16:07:23 · 335 阅读 · 0 评论 -
虚拟键盘遮挡输入框的解决方案
// 虚拟键盘遮挡输入框的解决方案(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.原创 2020-10-10 17:04:28 · 406 阅读 · 0 评论 -
手机端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原创 2020-10-10 16:59:24 · 67 阅读 · 0 评论 -
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>原创 2020-10-10 16:52:12 · 355 阅读 · 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 = ...原创 2020-09-28 16:50:13 · 364 阅读 · 0 评论 -
图片下载-js实现
/** * * @param {String} requestUrl 图片路径 * @param {String} saveFileName 保存的图片名称 * @param {String} fileFormat 图片格式 如:png, jpg, jpeg */function imgDownload(requestUrl, saveFileName, fileFormat) { saveFileName = saveFileName || "image"; fileFormat..原创 2020-08-25 11:37:29 · 129 阅读 · 0 评论 -
使用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..原创 2020-08-01 17:30:22 · 211 阅读 · 0 评论 -
使用css 实现动感菜单
html <nav> <ul> <li><span>1</span></li> <li><span>2</span></li> <li><span>3</span></li> <li><span>4</span></li> ..原创 2020-08-01 15:32:57 · 180 阅读 · 0 评论 -
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...原创 2020-07-29 20:31:44 · 327 阅读 · 0 评论 -
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 (...原创 2020-07-28 10:51:55 · 239 阅读 · 0 评论 -
throttle的实现
什么是throttle,直接翻译就是节流的意思,打个比方,比如说中国的三峡大坝,闸门每一分钟打开一次,那么水就是一分钟流一下。在我们的应用中一般用在需要降低频率的地方,比如说:window的onresize,窗口变化时时触发onresize方法,如果我们在onresize做一些dom的操作,显然会大大降低浏览器的性能,所以我们可以降低触发onresize的频率来得以控制。 抢票软件的抢票功能(比如支付宝的抢券),用户连续点击抢票按钮发送http请求到后台,每点击一次按钮发送一次请求,会加剧后台的并发性原创 2020-07-27 14:25:27 · 1535 阅读 · 0 评论 -
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..原创 2020-07-25 17:28:32 · 379 阅读 · 0 评论 -
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.原创 2020-07-20 16:32:27 · 117 阅读 · 0 评论 -
normalize.css 样式重置
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css *//* Document ========================================================================== *//** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of fon.原创 2020-07-17 11:16:34 · 171 阅读 · 0 评论 -
如何使用css画一个三角形
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul{ clear: both;...原创 2020-07-15 19:58:49 · 240 阅读 · 0 评论 -
视觉差网页的实现原理
利用background-attachment: fixed; 配合js设置background-position来实现。具体的代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g原创 2020-07-15 17:58:10 · 590 阅读 · 0 评论 -
animation 逐帧动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body,html{ margin: 0; .原创 2020-07-13 20:52:43 · 166 阅读 · 0 评论 -
2020阿里的机试题
前些天看到阿里的招聘就顺便投了份简历,也没有抱有太大的希望能邀请面试,大概过了十多天突然手机响了,面试官要直接跟我聊聊,刚好那天没空,推到了第二天。然后在第二天面试官先让我做了一份机试题,我只做出了两题,一共是三题,这边记录下题目(就在当天晚上我前思后想,还是在睡觉前想出了第二题的解决方案):1.编写函数`convert(money)` ,传入金额,将金额转换为千分位表示法。例如:12345....原创 2020-04-02 11:20:40 · 2330 阅读 · 1 评论 -
Array.apply(null, { length: 20 })
今天注意到vue官方demo的一个例子:render: function (createElement) { return createElement('div', Array.apply(null, { length: 20 }).map(function () { return createElement('p', 'hi') }) )}一开始对...原创 2020-03-13 16:24:22 · 161 阅读 · 0 评论 -
Vue.js的构建版本
这里先列出所有的vue构建版本:根据是否需要编译器分为: 运行时版本 和 完整版 根据这个vue代码用在什么地方: 分为UMD (Universal Module Definition) / CommonJS / ES Modulevue.common.js属于: 基于 CommonJS 的完整构建可以用于 Webpack-1 和 Browserify 之类打包工具因为是完整构...转载 2020-03-10 16:54:03 · 429 阅读 · 0 评论