- 博客(31)
- 收藏
- 关注
RSS订阅
原创 whistle 代理 抓包 本地替换
whistle-前端调试利器欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎...
2019-01-18 10:15:53
10534
原创 面试总结-基础js
1、概念：当浏览器开辟出供代码执行的栈内存后，代码并没有自上而下立即执行，而是继续做了一些事情，把当前作用域所有带var和function关键字进行提前的声明和定义，这个阶段就叫做变量提升。2、变量提升机制：（函数优先级高于变量优先级）带var的只提前申明，"var a"如果没有赋值，默认值是undefined;带function不尽提前声明，而且还定义了，定义其实就是赋值，准确的来说就是让某个变量和某个值产生关联。自执行函数不进行变量提升（没名字）
2024-07-10 19:55:21
657
转载 常用的前端JavaScript方法封装
转载：https://mp.weixin.qq.com/s/1k_j2W-l_RhH1tWUG1Rn7Q常用的前端JavaScript方法封装1、输入一个值，返回其数据类型**function type(para) { return Object.prototype.toString.call(para)}2、数组去重function unique1(arr) { return [...new Set(arr)]}function unique2(arr) { v
2022-05-12 16:12:12
317
原创 手撕Promise之从0开始实现完整的Promise的对象-all/race函数实现
var MyPromise = function (fn) { // 更新状态和值 this.PromiseState = 'pending' this.PromiseResult = undefined // 定义then的回调函数 this.thenCallback = undefined; // 定义catch的回调函数 this.catchCallback = undefined; var _this = this; var resolve = function
2022-02-24 15:46:21
411
原创 手撕Promise之从0开始实现完整的Promise的对象-catch函数实现
var MyPromise = function (fn) { // 更新状态和值 this.PromiseState = 'pending' this.PromiseResult = undefined // 定义then的回调函数 this.thenCallback = undefined; // 定义catch的回调函数 this.catchCallback = undefined; var _this = this; var resolve = functio
2022-02-24 15:08:54
301
原创 手撕Promise之从0开始实现完整的Promise的对象-then函数实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l
2022-02-23 15:52:08
339
原创 JavaScript跳出循环的几种方法（break、return、continue等）附带demo
日常开发中也常用到，但是就是用的不知所以，云里雾里。哈哈哈，你是不是和我一样。接下来我们一起学习吧，有问题欢迎留言指出来。跳出循环的方式：break,、return,、continue、抛出异常。相同之处：都会将此时进行的语句停止。不同之处：break：是立即结束语句，并跳出语句，进行下个语句执行。continue：是停止当前语句，继续执行该语句。return：停止函数，必须放在函数里面使用的语句环境不一样，break和continue是用在循环或switch语句中，return是用在函数语
2022-01-12 17:46:04
10425
原创 javascript 循环
在js中循环类型有：forfor infor eachfor of接下来，我们一起学习一下。1、简单for循环：当循环中数组的长度没有变化时，我们应该将数组的长度存储在一个变量中，这样效率会更高。下面是改进的写法： const arr = [1, 2, 3]; for (let i = 0,len = arr.length; i < len; i++) { console.log(arr[i]); }...
2022-01-12 15:41:47
494
原创 手把手教你优雅的生成前端脚手架（二）：脚手架增强功能-文件拉取【附源码地址】
话不多说！！！交互命令-使用commander代码如下#! /usr/bin/env nodeconst program = require('commander');program .version(require('../package').version) // --version 版本 .command('init <templateName> <projectName>') // 初始化命令 .description('初始化项目文件')
2021-06-16 11:33:57
444
原创 手把手教你优雅的生成前端脚手架（一）：初始化包并发布npm【附源码】
手把手教你优雅的生成前端自己的脚手架新建一个空项目初始化包增加bin和index.js文件编辑bin下面index.js文件，代码如下将当前package链接到全局发布npm包下载npm包增加功能废话不多说！！！新建一个空项目初始化包npm init -y然后在package.json新增两项 "bin": { "qiji-cli": "./bin/index.js" }, "private":falsebin目录下的qiji-cli表示，我们在命令行输入qiji-cli会
2021-06-16 11:04:18
516
原创 微前端在管理系统中的最佳实践
文章目录一、业务背景二、待解决的研发痛点三、微前端简介和实践原理简介整体方案构建优化作用域控制前后端分离四、总结一、业务背景近期的一个业务涉及对管理系统统进行重构，涉及业务主要是后端监控，包括服务器的CPU，内存、磁盘、QPS、QPM，JVM监控等，同时也包括用户和权限管理模块；前后端未分离，页面总数达到50+，整个项目加载后将近20M，相当庞大，我们要支持的既有之前代码的重构，又有新业务需求，工作量不小二、待解决的研发痛点本次技术选型，主要是解决之前开发时遇到的痛点：工程越来越复杂，打包越来越
2021-02-23 20:37:51
690
原创 初学Eslint，你很可能要踩的坑
Eslint安装⚠️：Eslint安装可用必须是在node和npm环境全局安装Eslintnpm install -g eslint生成package.json文件npm init生成 eslintrc.js文件eslint --init⚠️：如果我们的项目没有package.json文件，此时报错就会提示需要执行命令npm init执行命令完成后就会在根目录生成一个.eslintrc.js文件准备一个test.js文件，来测试一下function merge (
2020-07-07 11:03:37
1724
原创 从小白到入门react高阶组件
原文链接：https://segmentfault.com/a/1190000010371752知识高阶组件：他描述得是接受react组件作为输入，输出一个新的react组件。更通俗的讲：高阶组件是通过包裹（wrapped）被传入的react组件，经过一系列处理最终返回一个相对增强（enhanced）的React组件，供其他组件调用。实现一个高阶组件下面我们来实现一个最简单的高阶组件（...
2020-01-02 10:57:48
118
转载 Web图片资源的加载与渲染时机
最近在做图片预加载，用的的 new Image()，发现这样加载的图片尽然比css里面的图片优先加载，css不是比js先执行的吗？怎么还会比css里面的图片先加载呢？后来就想想需要知道Web图片资源的加载与渲染时机。浏览器的工作流程要研究图片的加载和渲染时机，首先先了解浏览器的工作原理，以Webkit引擎为例：从上图可以看出，浏览器加载一个web页面时，流程如下浏览器解析html —...
2019-12-19 16:30:06
459
原创 react 移动端轮播图
slider一组轮播的区域何时使用主要是针对于移动端常用于一组图片或卡片轮播demo演示[ 暂无]基本使用方法js: import PuiSlider from './pui-slider' render(){ return <div className="wrap" id="wrap"> <PuiSlider...
2019-10-23 16:50:09
1443
原创 webpack 零基础入门学习之路
零基础webpack的学习之路，主要是webpack 4的学习直接进入正题1.命令行安装新建一个空目录作为我们的跟目录，取名为testcd test 执行以下命令，初始化我们的node.js项目(-y 走默认),会自动生成一个package.json文件，来管理我们的依赖包等。npm init -y package.json如下：{ "name": "test",...
2019-10-12 16:04:53
141
原创 装饰器 decorator
decorator让你的页面更加华丽decorator是什么专业的讲，是一个表达式，用于修改类的行为；通俗的讲，好比你的手机，给他添加了一个外壳，但并不影响他通话和充电的功能；这就是装饰器。...
2019-09-12 17:02:57
159
原创 react异常捕获处理、边界处理
最近项目全面转向react,写了两个项目后发现render里面的异常无法捕获，就无法监控上报错误信息等，后来想了想这么强大的react，肯定会有处理方法。部分UI的异常，不能破坏了整个页面，在 React 16+引入了一种称为“错误边界”的新概念。错误处理指的是React组件中能捕获子组件树中的任何Javascript异常，打印出来，并且展示出备用UI的生命周期方法 从而避免了组件树崩溃。它能...
2019-08-29 11:21:38
2442
原创 日常问题（不同浏览器的兼容性问题、知识点记录等）
移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法原因：preventDefault会阻止默认事件，包括点击和浏览器默认的滚动等解决办法：在QQ和微信（当然还包括其他浏览器，不过我没测试过）中如果有需要用到touch事件做的特效一定要在touchstart或者touchmove中添加event.preventDefault...
2019-08-15 10:32:28
428
原创 前端开发规范
基本原则篇- 结构、样式、行为分离尽量确保文档和模板只包含 HTML 结构，样式都放到样式表里，行为都放到脚本里。- 缩进统一Tab缩进- 文件编码使用不带 BOM 的 UTF-8 编码。在 HTML中指定编码 ；无需使用 @charset 指定样式表的编码，它默认为 UTF-8 （参考 @charset）；- 省略外链资源 URL 协议部分省略外链资源（图片及其它媒体...
2019-04-12 14:50:11
336
原创 mobx 状态管理器
常用api一、observable1、什么是observable，是一种让数据的变化可以被观察的方法2、基本用法,observable对于任意处理对象有两种 a：数组、对象、es6的map用observable包装为可观察的对象import { observable,isArrayLike } from './mobx'//1.数组const arr =observable([...
2019-04-10 15:36:16
400
原创 canvas进度水球
首先，直接上图看看我们要实现的效果canvas的性能优化1、使用requestAnimationFrame制作动画2、清除画布尽量使用 clearRect一般情况下的性能：clearRect > fillRect > canvas.width = canvas.width;3、尽量少调用 canvasAPI ，尽可能集中绘制4、像素级别操作尽量避免浮点运算5、使用 fo...
2019-04-02 19:59:34
523
原创 canvas 基础用法
canvas是html5中诞生的一款HTML标签，用于绘制图像。元素本身没有绘制的能力，必须使用脚本来完成实际的绘图任务。绘制canvas的主要步骤获取canvas标签获取绘制上下文绘制图形首先来一个简单的demo绘制矩形html如下：&lt;canvas id="c1" style="width:500px;height:500px;"&gt;&lt;/canva
2019-03-12 18:34:45
231
原创 当input遇到fix产生的问题，导致页面功能或者展示有问题。
随着手机的普及，移动端的开发也成了一个重要的方向，但由于设备的不统一会造成一些兼容性问题在ios手机上，对于一些页面长度刚好是手机的长度。键盘弹起收起后，页面不会回到原来的长度。这个时候页面底部会有一些空白和fix的按钮不能点击。解决办法：input失去焦点是，页面滑动 item.addEventListener('blur',()=&gt;{ window.scroll(0,0);...
2019-03-11 20:07:01
356
原创 quicklink 预加载
quicklink 为你的页面实现秒开quicklink是什么是一个通过资源预加载来提升后续方案的轻量级工具库。旨在提升浏览器中，用户访问后续页面的加载速度。当我们提到性能优化，往往想到的是用户访问当前的这个页面，例如如何压缩资源、减少http请求、精简js代码等来提升页面的访问速度。而quicklink换用了另外一种思路，帮你预加载接下来你最可能访问的资源，这样之后访问这个页面就会感到非常...
2019-02-19 16:38:28
573
原创 whistle 界面功能 常见功能
常见功能大家都知道 Fiddler、Charles，不过这个工具能远比后两者更加适合 Web 开发者、使用更简单、功能也更加实用，不夸张的说。完全可以替代Fiddler、Charles界面功能（详情url）常见功能(主要是上面的第二条，rules)绑定host (相当于浏览器的host文件，如果找不到再去找本地的host文件)11.18.21.98 plus.m.jd.com...
2019-01-24 11:54:24
1624
原创 whistle https 移动端 pc抓包
whistle抓包https欢迎继续学习whistle https抓包上一篇博客，我们一起学习了pc和移动端的http抓包，现在我们一起来学习https的抓包，对于抓包https，最重要的就是安装证书，下面把我学到的介绍给大家。pc安装设置（介绍的是mac安装）话不多说，直接上图移动端安装ios手机设置代理后，在safari地址栏输入rootca.pro,提示安装证书（扫描二维码...
2019-01-22 14:54:28
1647
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人