JavaScript
文章平均质量分 70
夏河始溢
垆边人似月,皓腕凝霜雪。
展开
-
一四七、web+小程序骨架屏整理
智能小程序骨架屏。原创 2023-05-17 16:53:57 · 1043 阅读 · 0 评论 -
一四三、人脸识别颜值自动点赞、关注
image:必选,要截取的 image 或者 video 元素。dw:可选,裁剪图片放在画布上的宽度(放大或缩小)dh:可选,裁剪图片放在画布上的高度(放大或缩小)sx:可选,被截取图片的裁剪开始位置的 x 坐标。sy:可选,被截取图片的裁剪开始位置的 y 坐标。dx:必选,裁剪图片放在画布上位置的 x 坐标。dy:必选,裁剪图片放在画布上位置的 y 坐标。drawImage() 参数介绍。sw:可选,被截取图片的裁剪宽度。sh:可选,被截取图片的裁剪高度。原创 2023-03-28 17:30:40 · 310 阅读 · 0 评论 -
一三八、代码优化篇,函数缓存(单例+代理)
每次接口请求依赖服务端接口或者客户端返回pnone字段,并且可能短时间多次请求。一种处理方式是返回值后使用全局状态管理,每次使用判断全局有没有另一种方式就是缓存这个函数,以及返回值,每次调用这个函数如果有值就直接返回缓存的结果原创 2022-11-11 16:23:01 · 160 阅读 · 0 评论 -
一三七、Node koa2 + vue 实现文件分片上传
大文件上传会消耗大量的时间,而且中途有可能上传失败。这时我们需要前端和后端配合来解决这个问题。原创 2022-11-08 16:16:06 · 785 阅读 · 1 评论 -
一三六、从零到一实现自动化部署
上一篇讲到服务器部署Node项目、Vue spa静态项目、ssr项目然而每次都要去手动部署,不仅麻烦,对Nginx,Linux不熟悉的也不友好,目前的常见的自动化部署有jenkins、docker等,但是有一定的学习成本,本文通过Node+vue的实现一键自动化部署。原创 2022-11-03 10:48:43 · 658 阅读 · 0 评论 -
一三五、服务器部署Node项目、Vue spa静态项目、ssr项目
部署ssr的时候,因为ssr项目是启一个node服务,配置nginx的时候proxy_pass一直监听的是开发环境的端口,一直访问不了,后端发现端口不对,所以在nuxt.config.js 需要配置server的port、host,建议和开发环境的端口保持一直,减少心智负担😭。到服务器后台 防火墙>添加规则 填写自己的端口 确定 (顺便把mysql web要使用的端口也添加)部署后访问不了,一直以为是代码或者部署流程的原因,后来发现是防火墙端口没开启😭。我学习使用,买的腾讯轻量应用服务器¥198 4年。原创 2022-10-28 18:42:42 · 1486 阅读 · 0 评论 -
一三一、koa、axios、vuex、redux中间件实现机制
前言前端中的库很多,开发这些库的作者会尽可能的覆盖到大家在业务中千奇百怪的需求,但是总有无法预料到的,所以优秀的库就需要提供一种机制,让开发者可以干预插件中间的一些环节,从而完成自己的一些需求。本文将从koa、axios、vuex和redux的实现来教你怎么编写属于自己的插件机制。对于新手来说:本文能让你搞明白神秘的插件和拦截器到底是什么东西。对于老手来说:在你写的开源框架中也加入拦截器或者插件机制,让它变得更加强大吧!axios首先我们模拟一个简单的 axios,const原创 2021-05-21 15:52:18 · 318 阅读 · 0 评论 -
一三零、使用react Fiber原理优化页面渲染卡死问题
一、页面卡顿分析在浏览器中,js 线程和渲染线程共用一个主线程遇到一些复杂的计算任务时,JavaScript 运行时间过长,就会阻塞渲染线程上的任务,导致掉帧优化方案有很多:拆分计算任务,匀到多帧通过 worker 开启多线程计算采用 wasm 加速计算二、拆分计算任务,匀到多帧React是怎么做的?React 在页面更新时,会自顶向下计算 virtual dom 上的不同处。如果计算任务耗时过长,渲染线程在 16 ms 中无法执行任务,页面会出现掉帧/卡死现象。React F原创 2021-05-14 11:40:38 · 1091 阅读 · 0 评论 -
一二九、24 个面试常问的XX和XX的区别
1. 箭头函数和普通函数的区别a. 箭头函数和普通函数的样式不同,箭头函数语法更加简洁、清晰,箭头函数是=>定义函数,普通函数是function定义函数。b. 箭头函数会捕获其所在上下文的 this 值,作为自己的 this 值,定义的时候就确定并固定了。c. 箭头函数不能作为构造函数使用,也不能使用new关键字(因为箭头函数没有自己的this,它的this其实是继承了外层执行环境中的this,且this指向永远不会改变,作为构造函数其的this要是指向创建的新对象)。d. 箭头函数没有自己的转载 2021-05-06 16:33:38 · 1735 阅读 · 0 评论 -
一二八、【源码阅读篇】ahooks -- useVirtualList(虚拟列表)
useVirtualList使用文档import { useEffect, useState, useMemo, useRef, MutableRefObject } from 'react';import useSize from '../useSize';export interface OptionType { itemHeight: number | ((index: number) => number); // 行高度,静态高度可以直接写入像素值,动态高度可传入函数 over原创 2021-03-18 21:11:15 · 854 阅读 · 0 评论 -
一二八、小程序埋点方案
一、TypeScript 基础类型Boolean 类型Number 类型String 类型Symbol 类型Array 类型Enum (枚举)类型Any 类型Unknown 类型类型都可以赋值给 any,所有类型也都可以赋值给 unknown。这使得 unknown 成为 TypeScript 类型系统的另一种顶级类型(另一种是 any)。Tuple 类型数组一般由同种类型的值组成,但有时我们需要在单个变量中存储不同类型的值,这时候我们就可以使用元组。let tupleT原创 2021-03-17 17:44:57 · 3665 阅读 · 0 评论 -
一二零、JavaScript实现深拷贝
function clone(Obj) { var buf; if (Obj instanceof Array) { buf = []; //创建一个空的数组 var i = Obj.length; while (i--) { buf[i] = clone(Obj[i]); } ..原创 2020-11-05 16:47:06 · 202 阅读 · 0 评论 -
一一四、Vue 3 核心原理 -- reactivity实现
vue 3 一个简单的例子<template> <button @click="increment"> Count is: {{ state.count }}, double is: {{ state.double }} </button> <button @click="addOtherCount"> otherCount is: {{ otherCount }}, double is: {{ otherDouble }}转载 2020-07-23 14:33:07 · 796 阅读 · 0 评论 -
一一三、获取目标月份第一天零点零分零秒的时间戳
//时间戳转换function formatDateTime(inputTime) { let date = new Date(inputTime); let y = date.getFullYear(); let m = date.getMonth() + 1; m = m < 10 ? ('0' + m) : m; let d = date.getDate(); d = d < 10 ? ('0' + d) : d; let h = date.getHours(原创 2020-07-10 16:50:58 · 592 阅读 · 0 评论 -
一一一、算法与数据结构
React组件通讯链表链表的创建以及增删改查操作链表链表的创建以及增删改查操作/*======定义结构======*/let node = function(element) { this.element = element this.next = null}let linkedList = function() { this.head = new node('head') this.find = find this.insert = insert this.updat原创 2020-06-07 21:09:17 · 194 阅读 · 0 评论 -
一零四、前端性能优化详解
5-1 前端性能优化介绍根据当今网络上的所有主要浏览器公司的说法,如果每个网站都想要排名靠前,表现良好并确保客户满意,那么每个网站都需要快。毕竟,如果您的网页加载速度很慢,那么您会立即增加客户开始在其他地方搜索信息,而不是坚持下去的风险。这也是为什么很多公司去找专门的技术人员来做SEO(Search Engine Optimization),即搜索引擎优化。 因为,页面的加载会影响到爬虫的爬...原创 2020-01-19 18:18:06 · 1914 阅读 · 0 评论 -
一零二、Vue中自定义emoji表情包
最近有需求要在后台管理支持自定义的emoji输入,记录一下开发过程。1. 表情包命名2. 定义表情包符合3. 编写emoji组件4. 页面中使用5. emoji展示1. 表情包命名表情包数量太多,命名到手抖 推荐使用神器 Everything 2. 定义表情包符合多端使用的话需要统一表情包的符号{ "xdx_001": "[-|xdx_001|-]" ...原创 2019-12-18 20:12:23 · 5245 阅读 · 9 评论 -
一零一、JavaScript的数组操作合集
数组的并集,交集,差集的实现现在有两个数组 arr1 和 arr2let arr1 = [1,2,3,4,4]let arr2 = [3,4,5,6,7]1.数组的并集:let union = new Set([…arr1,…arr2])2.数组的交集let intersect = new Set([…arr1].filter(item => arr2.has(item)...原创 2019-12-02 11:58:30 · 284 阅读 · 0 评论 -
一零零、Promise.resolve()详解
Promise.resolve等价于下面的写法有时需要将现有对象转为 Promise 对象,Promise.resolve方法就起到这个作用。Promise.resolve('foo')// 等价于new Promise(resolve => resolve('foo'))Promise.resolve方法的参数分成四种情况。参数是一个 Promise 实例如果参数是 P...转载 2019-11-28 15:57:56 · 4616 阅读 · 0 评论 -
九六、Javascript十大常用设计模式
Javascript十大常用设计模式一、工厂模式二、单体模式三、模块模式四、代理模式五、职责链模式六、命令模式七、模板方法模式八、策略模式九、发布订阅者模式十、中介者模式一、工厂模式工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。(工厂模式是为了解决多个类似对象声明的问题;也就是为了解决实列化对象产生重复的问题。)优点:能解...原创 2019-10-19 16:54:36 · 612 阅读 · 0 评论 -
八四、MVVM框架进阶与实现(手动实现一个简易版vue)
MVVM框架介绍M(Model,模型层 ),V(View,视图层),VM(ViewModel,视图模型,V与M连接的桥梁)MVVM框架实现了数据双向绑定当M层数据进行修改时,VM层会监测到变化,并且通知V层进行相应的修改修改V层则会通知M层数据进行修改MVVM框架实现了视图与模型层的相互解耦几种双向数据绑定的方式1 发布-订阅者模式(backbone.js)一般通...原创 2019-05-14 18:41:35 · 463 阅读 · 0 评论 -
八二、eslint,stylelint的基本配置使用
代码规范ESLint基本概念官网: https://eslint.org/中文网址: http://eslint.cn/基本概念: javascript代码检测工具,帮助我们统一团队的代码风格 优势: 1、内置很多检查规则,同时支持自定义规则 2、NodeJS开发的,方便安装 可配置的信息: Environments - 指定脚本的运行环境。每种环境都有一组特...原创 2019-05-10 15:45:24 · 2189 阅读 · 0 评论 -
六五、JS-SDK 上传base64编码图片到七牛云
一、接口说明POST /putb64/&lt;Fsize&gt;/key/&lt;EncodedKey&gt;/mimeType/&lt;EncodedMimeType&gt;/crc32/&lt;Crc32&gt;/x:user-var/&lt;EncodedUserVarVal&gt;Host: upload.qiniup.comAuth原创 2018-06-05 11:28:29 · 2071 阅读 · 0 评论 -
四二、js操作DOM(dom)改变css3属性时封装方法使自动识别浏览器添加css3属性前缀
CSS3属性很多需要带各浏览器的前缀,当使用DOM操作来改变CSS3属性时代码会很多并且麻烦一、封装prefixStyle.js let elementStyle = document.createElement('div').stylelet vendor =(() => {let transformNames = {webkit:'webki原创 2017-09-15 10:51:32 · 852 阅读 · 0 评论 -
八十、Taro使用简介(Taro 是一套遵循 React 语法规范的 多端开发 解决方案---微信/百度/支付宝/字节跳动小程序、H5、React-Native 等)
Taro 是一套遵循 React 语法规范的 多端开发 解决方案。现如今市面上端的形态多种多样,Web、React-Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信/百度/支付宝/字节跳动小程序、H5、React-Native 等)运行的代码。原创 2019-05-09 10:36:35 · 3272 阅读 · 0 评论 -
七九、apply()、call()和 bind() 是做什么的,它们有什么区别
相同点:三者都可以改变 this 的指向不同点:apply 方法传入两个参数:一个是作为函数上下文的对象,另外一个是作为函数参数所组成的数组var obj = { name : 'sss'}function func(firstName, lastName){ console.log(firstName + ' ' + this.name + ' ' + last...原创 2019-04-29 18:16:16 · 317 阅读 · 0 评论 -
七八、各大公司前端面试题+答案(持续更新)
阿里使用过的Koa2中间件koa-bodyparser , koa-router , koa-session , koa-staticKoa-body原理npm install koa-bodyparser --save//使用const bodyParser = require('koa-bodyparser');app.use(bodyParser())//在代码中...原创 2019-04-22 18:32:08 · 2470 阅读 · 2 评论 -
五二、js字符串截取函数slice()、substring()、substr()
js截取字符串的三个函数:slice(start,[end]),substring(start,[end])和substr(start,[length])相关属性:slice()第一个参数代表开始位置,第二个参数代表结束位置的下一个位置,截取出来的字符串的长度为第二个参数与第一个参数之间的差;若参数值为负数,则将该值加上字符串长度后转为正值;若第一个参数等于大于第二个参数,则返回空字符串.subst原创 2017-12-20 14:59:29 · 6987 阅读 · 1 评论 -
四八、js封装格式化时间(将 Date 转化为指定格式的String)
// 对Date的扩展,将 Date 转化为指定格式的String// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,// 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)// 例子:// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-0原创 2017-11-16 17:06:42 · 736 阅读 · 0 评论 -
四五、使用form表单提交,post请求提交参数,跳转页面。
一、Html表单提交 继续出单-->form action="" id="nameform" method="post" v-show="false"> input type="text" name="systemId"> input type="text" name="params"> input type="text" name="signData">form>原创 2017-10-31 09:51:30 · 12093 阅读 · 0 评论 -
四三、getBoundingClientRect的用法
getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。1.语法:这个方法没有参数。const rect = this.$refs.progressBar.getBoundingClientRect()2.返回值类型:TextRectangle对象,每个矩形具有四个整数性质( 上, 右 ,原创 2017-09-27 14:00:28 · 611 阅读 · 0 评论 -
四一、js判断移动端及浏览器内核
var browser = { versions: function() { var u = navigator.userAgent; return { trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') > -1, //opera内核 webKit: u.indexOf('Ap原创 2017-09-08 17:39:56 · 2772 阅读 · 0 评论 -
三三、常见的HTTP响应状态码
常见的HTTP相应状态码200:请求被正常处理204:请求被受理但没有资源可以返回206:客户端只是请求资源的一部分,服务器只对请求的部分资源执行GET方法,相应报文中通过Content-Range指定范围的资源。301:永久性重定向302:临时重定向303:与302状态码有相似功能,只是它希望客户端在请求一个URI的时候,能通过GET方法重定向到另一个URI上304:转载 2017-05-22 20:21:58 · 520 阅读 · 0 评论 -
二七、str.split('').reverse().join();
"Hello world".split("").reverse().join("")这样是把Hello world倒序输出splite("")可以将字符串按某个字符或者其他分割。返回数组如"hello".split("e") //["h","llo"]join是相反,把数组拼接为字符串。如 ["a","b","c"].join(",") //"a,b,c"原创 2017-05-09 22:37:59 · 4438 阅读 · 1 评论 -
二二、函数调用模式案例
script> function Foo(){ getName = function(){ alert(1); }; return this; } function getName(){ alert(5); } Foo.getName = function(){ alert(2); }; Foo.prototype.原创 2017-04-24 16:08:31 · 302 阅读 · 0 评论 -
十五、this 的值详解
var obj = { foo: function(){ console.log(this) }} var bar = obj.fooobj.foo() // 打印出的 this 是 objbar() // 打印出的 this 是 window请解释最后两行函数的值为什么不一样。转载 2017-04-19 11:05:56 · 343 阅读 · 0 评论 -
十八、浏览器兼容性问题
1.DOCTYPE 影响 CSS 处理2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中4.FF: 设置 padding 后, div 会增加 heigh转载 2017-04-22 16:58:03 · 589 阅读 · 0 评论 -
五三、提取浏览器 url 中的参数名和参数值,生成一个key/value 的对象
提取浏览器 url 中的参数名和参数值,生成一个key/value 的对象原创 2017-12-20 17:08:26 · 1672 阅读 · 0 评论 -
五十、判断一个字符串中出现次数最多的字符,并统计这个次数
var str = 'adsdddlfjjlaaaaddddsfdf';var json = {};for (var i = 0; i str.length; i++) { if(!json[str.charAt(i)]){ json[str.charAt(i)] = 1; }else{ json[str.charAt(i)]++; }};var iMax =原创 2017-11-27 11:02:32 · 379 阅读 · 0 评论 -
七七、JavaScript节流和防抖
1、防抖触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间思路:每次触发事件时都取消之前的延时调用方法function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function () { clearTimeout(timeout...原创 2019-03-12 10:37:48 · 143 阅读 · 0 评论