- 博客(51)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 vue源码解析：深入理解vue底层原理
vue工作机制Vue响应式的原理definePropertyclass Vue { constructor(options) { this._data = options.data; this.observer(this._data); } observer(value) { if (!value || typeof value !== "object") { r...
2019-11-26 15:57:17
1765
1
转载 你不知道的 TypeScript 泛型
上面已经铺垫了一番，大家已经知道了值和类型的区别，以及 TS 究竟帮我们做了什么事情。但是直接理解泛型仍然会比较吃力，接下来我会通过若干实例，慢慢带大家走进泛型。首先来思考一个问题：为什么要有泛型呢？这个原因实际上有很多，在这里我选择大家普遍认同的一个切入点来解释。如果你明白了这个点，其他点相对而言理解起来会比较轻松。还是通过一个例子来进行说明。学习 Typescript 并不是一件简单的事情，尤其是没有其他语言背景的情况。而 TS 中最为困难的内容之一恐怕就是泛型了。
2023-08-28 10:50:32
251
转载 深入浅出微前端
前端在2016年，微前端的概念诞生。中定义翻译成中文为用来构建能够让 多个团队 独立交付项目代码的 现代web App 技术，策略以及实践方法。微前端也是借鉴后端微服务的思想。微前端就是将不同的功能按照不同的纬度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于先拆后合。除了single-spa这种基于底座的微前端解决方案，webpack5的联邦模块也能实现，YY团队的EMP基于此实现了去中心模式，脱离基座模式，每个应用之间都可以批次分享资源。可以通过这篇文章尝尝鲜，后面再继续研究。
2023-08-15 17:03:32
1110
转载 WebSocket使用及优化（心跳机制与断线重连）
与http不同，websocket支持全双工通信（即：在客户端和服务之间双向通信）在websocket问世之前，客户端与服务器通常采用http轮询和Comet等方式保持长链接。于是websocket便诞生了，它不仅节省资源和带宽，更是能实现长链接作用，只需客户端主动与服务端握手一次，即可进行实时通信，实现推送技术。原文：https://www.cnblogs.com/HelloWorld-Yu/p/14599514.html。//添加索引，方便在客户端列表查询某个socket连接。//存放已连接的客户端。
2023-02-17 08:27:20
6993
1
转载 nvm的下载，安装与使用详解
安装nodejs方式有很多种。第一种：官网下载 通过nodejs官网下载安装 ，但有个缺陷，不同版本的nodejs无法顺利的切换。第二种: NVM安装 NVM可以帮助我们快速切换 node版本。但是安装NVM过程中有很多坑，网上找了很多文档都没解决问题。这里自己总结下，帮助大家顺利安装软件。 官方下载地址：https://github.com/coreybutler/nvm-windows/releases推荐下载nvm-setup.zip这一个，可能有的下载教程会推荐你下载nvm-noinstal
2022-06-15 09:26:05
48201
2
转载 闭包，看这一篇就够了——带你看透闭包的本质
闭包函数：声明在一个函数中的函数，叫做闭包函数。闭包：内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。
2022-06-14 19:21:15
282
转载 js 数字加减乘除精度问题，解决小数点后多位小数
在javascript中，当你使用小数进行加减乘除运算时，你会发现，所得到的结果有时后面带有长长的一段小数，使运算变得复杂，并且影响计算结果。上网查询了一下原因，大致如下：在javascript中，带小数的数据运算时总会出现好多位小数.这是因为在javascript中浮点数的计算是以2进制计算的。于是在网上找了一下解决方法，在此做一下总结，以便以后使用，同时，希望对有需要的朋友有所帮助。解决方法思路：将小数化成整数后再作运算。具体代码如下：/** * 加法运算，避免数据相加小数点后产生多位数和计算.
2021-12-15 16:00:36
1611
原创 CSS伪元素（以:after为例）插入图片
看一眼效果图，我们要实现一个多行文本溢出显示省略号的展开（用图片代替）收起效果<div class="wrapper"> <input id="exp1" class="exp" type="checkbox"> <div class="text"> <label class="btn" for="exp1"></label> 浮动元素是如何定位的 正如我
2021-07-02 16:12:13
10874
转载 CSS 实现多行文本“展开收起”
CSS 实现多行文本“展开收起” 多行文本展开收起是一个很常见的交互， 如下图演示实现这一类布局和交互难点主要有以下几点位于多行文本右下角的“展开收起”按钮“展开”和“收起”两种状态的切换当文本不超过指定行数时，不显示“展开收起”按钮说实话，之前单独看这个布局，即使借助 JavaScript 也不是一件容易的事啊（需要计算文字宽度动态截取文本，vue-clamp就是这么做的），更别说下面的交互和判断逻辑了，不过经过我的一番琢磨，...
2021-07-01 10:08:31
745
1
转载 React Hooks 原理与最佳实践
1. 前言React Hooks 是 React 16.8 引入的新特性，允许我们在不使用 Class 的前提下使用 state 和其他特性。React Hooks 要解决的问题是状态共享，是继 render-props 和 higher-order components 之后的第三种状态逻辑复用方案，避免了 JSX 嵌套地狱问题。2. 状态逻辑复用一般来说，组件 = UI + 逻辑，长期以来我们都在考虑 UI 的复用，在逻辑这一层面却不容易很好的复用。对用户而言，组件就像一个黑盒，应该拿来即用。但当组件的
2021-04-27 10:28:54
601
原创 js高频手撸代码题总结
javascript1、什么是防抖和节流，他们的应用场景有哪些防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间示例代码：function debounce(fn,wait){ let timer; return function(...args){ let _this=this; if(timer){ clearTimeout(timer) } tim
2021-04-26 16:09:56
260
原创 插入排序，了解一下
???? 个人理解：先把第二元素存起来，然后跟前面的元素进行比较，如果符合规则就插入比较元素的前面或后面；然后在把第3个元素存起来，在跟前面的元素进行比较，如果符合规则就插入比较元素的前面或后面；以此慢慢递进完成排序（正序：插入就是每次新取一个数，然后倒序地往前找，找到比它小的就插入后面）???? 大佬理解：其实插入排序就和打扑克的时候抓牌一样，新摸一张，然后再已排好的队列里面去插入他???? 算法步骤：将第一待排序序列第一个元素看做一个有序序列，把第二个元素到最后一个元素当成是未排序序列。从头到尾
2021-03-04 14:24:52
150
1
转载 一次关于Vue的自我模拟面试
来，先介绍一下Vue的响应式系统Vue为MVVM框架，当数据模型data变化时，页面视图会得到响应更新，其原理对data的getter/setter方法进行拦截（Object.defineProperty或者Proxy），利用发布订阅的设计模式，在getter方法中进行订阅，在setter方法中发布通知，让所有订阅者完成响应。在响应式系统中，Vue会为数据模型data的每一个属性新建一个订阅中心作为发布者，而监听器watch、计算属性computed、视图渲染template/render三个角色同时作
2021-01-07 15:15:40
147
1
原创 前端解析excel文件流并下载（兼容ie）
export default (url, options) => { options.timeout = 180000;//毫秒 options.responseType = 'blob';//毫秒 return request( url, options ).then(res => { if('msSaveOrOpenBlob' in navigator){//兼容ie var data=
2020-12-07 16:06:52
555
原创 解决在ie11浏览器下echarts图不显示问题
因为是react项目，所以使用了echarts-for-react（基于echarts的封装），实际效果在谷歌浏览器正常显示，但在ie11中无法显示。问题分析：可能对echarts的外部容器设置了动态显示隐藏属性，导致echarts实例不能正常的销毁重建（在我的实际业务场景中，是需要在modal弹出层上创建一个echarts图，弹出层会根据用户点击显示隐藏）解决方案：import ReactEcharts from 'echarts-for-react';在render方法中加入 <.
2020-12-07 15:17:41
1962
转载 关于async/await、promise和setTimeout执行顺序
前段时间领导给我们出了一道题，关于async/await、promise和setTimeout的执行顺序，网上查了查资料，这是头条的一道笔试题，记录一下，加深理解。 题目如下： async function async1() { console.log('async1 start'); await async2(); console.log('asnyc1 end');}async function async2() { console.log('async2'...
2020-11-21 14:29:17
166
原创 教你实现一个简单的对象深拷贝
function deepClone(object){ //判断是否为对象 if(!object||typeof object !=='object') return; //判断数组情况 let newObject=Array.isArray(object)? []:{}; for(let key in object){ //检测一个属性是否是对象的自有属性，而不是从原型链继承而来的 if(object.hasOwnProperty(key)){ //检测对象属性，如果是对象则递归执
2020-11-21 14:03:17
234
原创 教你实现一个函数柯里化，你学废了吗
函数柯里化指的是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术function curry(fn,args){ //获取函数需要的参数长度 let length=fn.length; args=args||[]; return function(){ let subArgs=args.slice(0); //拼接得到现有的所有参数 for(let i=0;i<arguments.length;i++){ subArgs.push(arguments[i.
2020-11-21 08:59:42
275
原创 教你如何手写call、apply、bind函数
Function.prototype.myCall=function(context){ //判断调用对象 if(typeof this!=="function"){ console.err('type error'); } //获取参数 let args=[...arguments].slice(1), result=null; //判断context是否传入，如果未传入则设置未window context=context||window; //将调用函数设为对象的方法 conte
2020-11-20 20:01:16
177
原创 js防抖、节流函数实现
一、概念：函数防抖： 在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计 时。函数节流： 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行， 如果在同一个单位时间内某事件被触发多次，只有一次能生效二、实现：//函数防抖function debounce(func, wait = 50){ // 缓存一个定时器id let timer = null; // 这里返回的函数是每次用户实际调用的防抖函数 // 如果已经设定过定时器了就清空上一次
2020-11-20 19:04:00
205
转载 看完这篇还搞不懂webpack，求你打我
一、什么是webpackwebpack是一个打包工具，他的宗旨是一切静态资源皆可打包。有人就会问为什么要webpack？webpack是现代前端技术的基石，常规的开发方式，比如jquery,html,css静态网页开发已经落后了。现在是MVVM的时代，数据驱动界面。webpack它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。二、webpack核心概念1、Entry（入口）
2020-07-08 17:12:33
927
原创 如何实现一个async/await
/** * async的执行原理 * 其实就是自动执行generator函数 * 暂时不考虑genertor的编译步骤（更复杂） */const getData = () => new Promise(resolve => setTimeout(() => resolve("data"), 1000))// 这样的一个async函数 应该再1秒后打印dataasync function test() { const data = await getData()
2020-07-07 17:03:00
510
原创 一行代码实现bind
Function.prototype.fakeBind=function(obj){return (...args)=>this.apply(obj,args)}测试一下function f(arg){console.log(this.a,arg)}f.bind({a:3})(4) //3,4f.fakeBind({a:3})(4) //3,4
2020-07-07 16:31:21
94
原创 如何实现一个简单的promise
一个简单的 Promise 的粗糙实现，关键点在于当 pending 时， thenable 函数由一个队列维护当状态变为 resolved(fulfilled) 时，队列中所有 thenable 函数执行当 resolved 时， thenable 函数直接执行rejected 状态同理class Prom { static resolve (value) { if (value && value.then) { return value }
2020-07-07 16:15:31
266
原创 判断一个字符串中出现次数最多的字符，统计这个次数
一、var str = 'asdfssaaasasasasaa';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=0;var iIndex='';for(var i in json){ if(json[i]>iMax){ i
2020-05-21 16:23:32
885
原创 聊聊前端性有哪些性能优化方案
1、减少请求数量【合并】如果不进行文件合并，有如下3个隐患1、文件与文件之间有插入的上行请求，增加了N-1个网络延迟2、受丢包问题影响更严重3、经过代理服务器时可能会被断开但是，文件合并本身也有自己的问题1、首屏渲染问题2、缓存失效问题所以，对于文件合并，有如下改进建议1、公共库合并2、不同页面单独合并【图片处理】1、雪碧图CSS雪碧图是以前非常流行的技术，把网站上的一些图片整合到一张单独的图片中，可以减少网站的HTTP请求数量，但是当整合图片比较大时，一次加载比较慢。随着字体图
2020-05-21 16:02:40
313
原创 聊一聊bind、apply、call的用法和区别
三者都可以改变函数的this对象指向。三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window。三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入。bind 是返回绑定this之后的函数，便于稍后调用；apply 、call 则是立即执行apply方法apply接受两个参数，第一个参数是this的指向，第二个参数是函数接受的参数，以数组的形式传入，..
2020-05-19 19:45:14
301
原创 送你101道javascript面试题(三)
42. setInterval方法的返回值什么?setInterval(() => console.log("Hi"), 1000);A：一个唯一的idB：指定的毫秒数C：传递的函数D：undefined答案: A它返回一个唯一的id。 此id可用于使用clearInterval()函数清除该定时器。43. What does this return?[..."Lydia"];A: [“L”, “y”, “d”, “i”, “a”]B: [“Lydia”]C: [[],
2020-05-15 17:31:43
925
原创 一些老生常谈的前端面试题
一、css篇1、移动端1px问题，如何解决？原因：由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的移动显示屏下会显示成2px，所以在高清屏下看着1px总是感觉变胖了解决方法：一．在ios8+中当devicePixelRatio=2的时候使用0.5pxp{ border:1px solid #000;}@media (-webkit-min-device-pixel-ratio: 2) { p
2020-05-09 15:47:58
4288
1
原创 终于搞定微信小程序canvas分享海报
canvas drawer做微信小程序中最好用的 canvas 绘图组件之一。当前环境下，大家都非常需要分享到朋友圈这个功能，但是实现起来各有心酸（坑比较多），所以才有了如下的 canvas 绘图工具。具有如下特性：简单易用 —— 一个 json 搞定绘制图片功能全 —— 满足 90% 的使用场景绘制文本（换行、超出内容省略号、中划线、下划线、文本加粗）绘制图片绘制矩形保存图片多图绘制…代码量小体验克隆项目到本地，拿来即用想在手机上使用配置自己的 appid 即可。
2020-05-09 15:07:11
876
2
原创 微信小程序canvas商品分享海报
先上效果图1、wxml <button class="footer-item" bindtap="creatShareImageTap">分享</button> <view class='share-mask' hidden="{{shareMask == false}}" catchtouchmove='true'></view> <...
2020-04-28 16:10:24
640
1
原创 微信小程序计算用户到商家的距离
一、通过经纬度测距 getDistance: function(lat1, lng1, lat2, lng2) { // lat1用户的纬度 // lng1用户的经度 // lat2商家的纬度 // lng2商家的经度 var radLat1 = lat1* Math.PI / 180.0; var radLat2 = lat2* Math.PI...
2020-04-16 15:40:40
1018
原创 js正则匹配0~1000内的数字，最多保留两位小数
/^(([1-9]\d{1,2}(\.\d{1,2})?)|\d((\.\d{1,2})?)|1000|1000.0|1000.00)$/
2020-04-13 09:24:04
4520
转载 TypeScript安利指南
骚年，你感受过debug一年找不到问题，最后发现是变量名写错时的绝望吗？骚年，你感受过生产线上代码出现Uncaught TypeError时的恐惧吗？骚年，你感受过写代码找一万个文件还找不到方法定义时的委屈吗？拿起键盘，让我们对谋害生命的代码拖进垃圾箱！(划掉)前言据了解，目前有相当一部分同学不想去学习ts，毕竟没(xue)时(bu)间(dong)。很不幸两个月前我也是其中的一员。在看到...
2020-01-02 18:05:29
180
原创 送你101道javascript面试题(二)
22. cool_secret可以访问多长时间?sessionStorage.setItem("cool_secret", 123);A：永远，数据不会丢失。B：用户关闭选项卡时。C：当用户关闭整个浏览器时，不仅是选项卡。D：用户关闭计算机时。答案: B关闭选项卡后，将删除存储在sessionStorage中的数据。如果使用localStorage，数据将永远存在，除非例如调...
2019-12-31 10:31:53
647
原创 送你101道javascript面试题(一)
1. 下面代码的输出是什么？function sayHi() { console.log(name); console.log(age); var name = "Lydia"; let age = 21;}sayHi();A: Lydia 和 undefinedB: Lydia 和 ReferenceErrorC: ReferenceError 和 21D: u...
2019-12-30 11:16:29
331
转载 webpack源码解析系列（一）
引言webpack 对于每个前端儿来说都不陌生，它将每个静态文件当成一个模块，经过一系列的处理为我们整合出最后的需要的 js、css、图片、字体等文件。来自官网的图很形象的阐述了 webpack 的功能 —— bundle js / css / ... （打包全世界ヾ(◍°∇°◍)ﾉﾞ）写在前面的话在阅读一个东西的源码之前，首先需要了解这个东西是什么，怎么用。这样在阅读源码过程中才能在大...
2019-12-24 15:20:40
369
ThinkPHP5快速入门.pdf
2019-12-24
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人