风火一回-优快云博客

原创 webpack+webpack server入门

webpack 基础使用，以及webpack server入门配置。

2024-06-27 16:01:23 1059

转载谷歌浏览器插件开发详解

请前往该转载地址学习：https://www.cnblogs.com/xinxihua/articles/18164765。

2024-06-25 14:20:37 83

转载 onChange事件详解

React 中，onChagne 事件是一个合成事件，由 ChangeEventPlugin 插件处理其监听。ChangeEventPlugin 插件会处理三类元素，select 和 file 监听 change 事件，input 和 textarea 监听 input 和 change 事件，checkbox 和 radio 监听 click 事件。

2024-05-15 19:49:23 1302

cookiecookie是保存在客户端本地的纯文本文件。其核心目的是为了解决服务器无法识别用户身份的问题。HTTP协议是无状态的cookie工作原理客户端发送一个请求到服务器服务器发送一个HttpResponse响应到客户端，其中包含Set-Cookie的头部客户端保存cookie，之后向服务器发送请求时，HttpRequest请求中会包含一个Cookie的头部服务器返回响应数据可以在浏览器调试栏中的Headers和Cookies中查看。cookie的属性属性项

2021-07-16 00:41:20 2020 1

原创 js校验远端图片是否存在

js校验远端图片是否存在，因为图片存在于服务器，是异步加载，所以需要使用Promise。 const checkImgExists = (imgurl) => { return new Promise((resolve, reject) => { const ImgObj = new Image(); // 判断图片是否存在 ImgObj.src = imgurl; ImgObj.onload = (res) => { res

2021-03-02 15:15:49 1032

原创 tapable详解

tapable详解tapable是webpack内部使用的一个流程管理工具，主要用来串联插件，完善事件流执行。1.安装tapableyarn add tapable2. 常用hooksimport { SyncHook, SyncBailHook, SyncWaterfallHook, SyncLoopHook, AsyncParallelHook, AsyncParallelBailHook, AsyncSeriesHook, A

2021-01-25 16:20:22 3900

原创 js隐式转换

js隐式转换js基础数据类型：string、number、boolean、null、undefined、symbol当运算符在运算时，如果运算符两边的数据类型不一致，那么CPU就无法进行计算。js的编辑器会自动将运算符两边的数据转换为同一类型，从而让计算机识别并可以进行计算，这一转换过程由编译器自动自行，不需要程序员手动操作，所以称之为隐式转换。隐式转换规则字符串转换：字符串 + 变量；所有与字符串相加的基础变量都将转换为字符串。例如：“”+变量 //将变量转换为字符串number

2020-07-07 09:56:26 583

原创 call、callee、caller详解

callcall用于改变函数指向。call是Funcrion.prototype的属性方法function add(a, b) { console.log(this); return a + b;}add(1, 2); //this=window，严格模式下为undefinedadd.call({ name: "新指向" }, 3, 4) //this={ name: "新指向" }calleecallee主要用于代替函数名，降低耦合性。callee是argu

2020-06-04 16:11:24 2764

原创 Babel 7

Babel-7babel是一个工具链，其主要用于将ES5以上对的版本代码转化为向下兼容的JavaScript语法。本文是针对babel7.10.0讲解的创建测试项目mkdir babel-testcd babel-testnpm init在babel-test根目录下创建.babelrc文件，用于配置babel。babel命令会从当前编译文件依次向上查找，直到找到.babelrc或babel.config.js为止。在根目录下新建source-code目录用于存放源码。

2020-06-02 16:54:19 944

原创 Egg简介

Egg前言Egg.js 为企业级框架和应用而生。基于Koa开发封装，性能优异，内置多进程管理，具有高扩展性，且提供了基于Egg定制上层框架的能力，帮助开发团队降低了开发维护成本。约定先于配置，相较于express更加灵活可配。KoaKoa是Express原班人马导致的，致力于web应用和API领域更小，更丰富的web框架。其和express设计风格类似，底层采用同一套HTTP基础库。koa采用中间件洋葱图，所有请求经过一个中间件时均会被执行2次，可以方便进行后置逻辑处理，而express中

2020-05-28 20:00:00 5764

原创 MYSQL SQL拼接工具

/** * * @param {*} type * @param {*} fields [{distinct:false,field：字段名,value:字段值},...] * @param {*} tableName * @param {*} where [{field:条件字段,relation:关系,value:条件值}] * @param {*} limit {bigin:起始数，end:结束数} * @param {*} orderBy [{field:排序字段,dir

2020-05-24 23:11:47 778

原创 React Hooks

React Hooks前言react hooks是react 16.8.0版本开始推广的。class声明的组件我们称之为有状态组件，function声明的组件我们称之为无状态组件。有状态组件拥有自己的状态和生命周期，在复用组件时我们需要考虑复用时是否对其自身状态造成影响。而函数组件数据全部依赖于props传入，更易管理。有状态组件通常我们数据初始化在componentDidMount生命周期，数据更新需要在componentDidUpdate再次重置自身状态。当项目复杂化后，这部分的代码维护容易

2020-05-20 19:26:07 812

原创面试集锦(五)

1.宏任务和微任务js是一门单线程语言，所以同一时间只能执行一个任务。为了防止主线程不阻塞，开发者提出了事件循环（Event Loop）。1.1任务执行的原则：js将任务分为了同步任务和异步任务。同步任务都在主线程上执行，形成一个执行栈。异步任务会进入到一任务列表注册他们，一旦异步任务有了执行结果，则将其放到一个任务队列中。当同步任务执行完成后，此时主线程空闲，则将异步任务队列放入执行栈中，依次执行。1.2 宏任务每次执行栈执行的的代码都可以看做一个宏任务。浏览器为了能够是js内部的

2020-05-12 19:40:56 453

原创 React教学（1）

React教学（1）React产生背景React 是Facebook 在2013年推出的一款前端框架。当时Facebook的开发者在实现首页状态栏的时候，要实现当前好友请求数、消息列表、状态列表3者的展示。发现当有一条新的消息出现时，不能及时的刷新显示的数字，点开一条新的消息也不能立即更新消息数字。问题出现的原因：传统的UI操作需要关注的细节太多了。应用程序的状态又太过分散在各处...

2020-04-13 21:42:57 916

原创面试集锦（四）

1.HTTPHTTP协议HTTP详情可参考：https://www.cnblogs.com/qdhxhz/p/8468913.htmlhttp1.0、http1.1、http2.0的区别http1.1开始支持长连接（keep-alive）,http1.0每次请求完成后就会断开连接。http1.1支持只发送header信息，节约了宽度。http1.0不支持http1.1支持host域，...

2020-04-07 18:10:00 289

原创面试集锦（三）

面试总结（三）1.语义化HTML中不同的元素代表不同的含义，使用具有含义的元素来书写HTML文档，即是语义化。选择合适的语义标签搭建的HTML文档，不仅便于开发着阅读、维护，也能让浏览器爬虫技术轻松解析。可访问性、可检索性、国际化、复用性。常见的h5语义化标签：https://blog.youkuaiyun.com/mafan121/article/details/80649634注意事项：...

2020-04-03 11:50:07 274

原创 vscode debug模式配置

vscode可以通过配置debug模式来实现断点调试。1.浏览器部分代码调试下载Debugger for Chrome插件配置如下json信息：{ "type": "chrome", "request": "launch", "name": "Launch Chrome", "url": ...

2020-03-25 15:58:20 11185

原创 css样式优先级

样式优先级CSS样式分为内联样式和外部样式，一般情况下：内联样式的优先级大于外部样式。即style样式>id选择器>class选择器>元素选择器。例如：.on{ width:20px; height:20px; line-height:20px; font-weight:bold; background-color: #BCC029;}.person-num&...

2019-12-13 15:52:07 701

原创 Vue filter详解

Vue filter源码详解1.解析表达式以reportDate | DFormat('YYYY-MM-DD') | SDefault为例。parseFilters 解析函数位于node_modules/vue/src/compiler/parser/filter-parser.js。主要作用是将表达式转换为可立即执行的函数字符串。//匹配任意非空字符、）、.、+、-、_、$、]//排除...

2019-12-09 19:24:16 1079

原创 Vue入门

Vue入门1.Mac下快速搭建Vue项目sudo npm install -g vue //下载vuesudo npm install -g vue-cli //下载vue-cli脚手架vue init webpack VueTest //用脚手架创建VueTest项目项目创建成功后，进入项目目录，tnpm run dev即可启动项目。问题描述mac下出现:bash...

2019-12-05 14:22:13 444

原创树结构布局

树结构布局前言本文讲解如何实现图形化树结构布局。布局规则：根节点始终处于画布中间同级节点不能相互重叠父节点永远处于子节点的水平中间位置准备工作以上图为例进行树结构布局设计，我们以每个节点的中心位置作为节点坐标。width:画布宽度nodeWidth: 节点的宽度nodeHeight: 节点的高度,levelHeight: 节点间的垂直间距（即每层间的垂直距离）dis...

2019-12-02 18:11:20 1678 5

原创常见的十大排序算法详解

常见的十大排序算法详解性能对比名词解释n: 数据规模k:“桶”的个数In-place: 占用常数内存，不占用额外内存Out-place: 占用额外内存稳定性：排序后2个相等键值的顺序和排序之前它们的顺序相同测试数组：arr: [2, 48, 4, 19, 27, 5, 14, 36, 38, 44, 3, 46, 47, 50, 26]冒泡排序算法思想：从数组头部...

2019-11-29 19:02:09 404

原创 React 深入理解

React 深入理解1.1 React父子组件传参父组件向子组件传参：在父组件中为子组件添加属性，在子组件中通过this.props.属性名获取。子组件向父组件传参：在父组件中为子组件添加事件属性，在子组件中通过this.props.事件名(参数),通过回调函数的方式将参数值传递给父组件。兄弟组件传参:兄弟组件无法直接进行参数传递，这时就需要用到状态提升的方式，将兄弟需传递的属...

2019-09-11 14:18:45 612

原创面试集锦(二)

面试集锦(二)1.React相关知识1.1 react生命周期react生命周期分为三个阶段：装载过程（Mount）、更新过程（update）、卸载过程（unmount）。参考：https://blog.youkuaiyun.com/mafan121/article/details/779653791.2 react父子组件传参父组件向子组件传参：props。在父组件中向子组件添加属性，子组件...

2019-08-29 15:25:52 230

原创 cookie的使用

cookie的使用1.1 cookie的原理HTTP协议本身是无状态的，一旦客户端和服务端完成数据交换后，连接就会断开，下次请求则会重建连接。这也就意味着服务器无法判断用户身份，每次请求都需要进行身份验证。cookie原理便是浏览器存储身份验证的唯一标识，然后发送给服务端，让服务端可以根据这个标识确认用户是否已经验证通过了。cookie是一个很小的文件，是浏览器存储在本机上的。它是一个纯文本...

2019-08-25 13:07:25 333

原创页面左右布局

页面左右布局例如:现有一个页面，需要左侧200px,右侧自适应页面宽度。页面代码如下：import React, { Component } from 'react';import styles from './CssLayout.less';export default class CssLayout extends Component { constructor(prop...

2019-08-24 22:03:41 2853

原创 js字符串转函数

js字符串转函数对于函数型的字符串，我们想要将其转换为一个函数然后执行，有2种常用的方法。1.eval()eval()具有可以解析表达式的特性，所以可以利用这一特性将字符串解析为一个函数。 let funcStr = "function test(value){alert(value)}"; let test = eval("(false || "+funcStr+")"); t...

2019-07-10 15:24:22 28704 4

原创 antd多选下拉框一行展示

antd多选下拉框一行展示我们都知道antd的select多选时，如果下拉框宽度不足，则自动浮动到下一行将下拉框撑大，但是这回影响到页面的整体布局。我们期望的效果是，下拉框只显示一行的值，超出一行的部分自动隐藏。下面有2种方案来实现这个效果。1.利用浮动原理设置下拉框的最大高度为一行的高度，然后超出的部分隐藏。 .ant-select-selection--multiple { ...

2019-06-15 13:48:11 10764 2

原创神奇的css

1.多行文本省略失效说明：使用多行文本显示省略号样式时，-webkit-box-orient: vertical;会被浏览器自动过滤。解决方案用注释打开autoprefixer属性，然后关闭。如下：.line-ellipsis-2{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ...

2019-02-20 14:22:08 380

原创 js分组（group by）

对数据进行分组，类似sql的groupBy。原理：遍历数组，将符合条件的数据放在一起，最后返回一个分组后的二维数组。//分组export const groupBy = (list, fn) =&gt; { const groups = {}; list.forEach(function (o) { const group = JSON.stringify...

2018-10-26 17:17:18 33662 1

原创 js防抖和节流

js防抖和节流应用场景对于一些会频繁触发的事件，例如scroll、resize、keydown、keyup、mousemove等，如果正常绑定这些事件的话，那么可能在短时间内会多次连续的触发这些事件，如果这些事件中含有dom操作的话就会对浏览器造成相当大的负担。对于这一类可能影响性能的事件，就需要做防抖动或者节流处理。防抖动定义：在一段时间内，多次触发事件后，事件函数只...

2018-09-04 09:51:33 1040

原创 canvas详解（3）-模糊问题

canvas详解（3）-模糊问题1.模糊的原因canvas绘图理论上应该是清晰的，但是有些屏幕上看到的确是模糊的，究其原因有3点：css样式影响canvas绘图是基于自身的宽高设置，必须明确指定宽高，不能使用百分比。如果出现线条锯齿状原因，一般都是因为，canvas的css样式放大了原本的canvas图形导致的。例如：<canvas id="test" wid...

2018-08-13 10:48:17 3368

原创 canvas详解（2）-事件处理

canvas详解（2）-事件处理上一章我们讲解了canvas的基本原理应用，这一章主要讲解一下事件如何处理。 canvas详解（1）-原理canvas因为是画布的原因，实际上我们可以将它当做一张图片，所以在html中，无论这个canvas包含多少元素，多少图形，他都只有一个tag显示。那么它当中的图形事件也只能添加到canvas元素自身上了。既然所有的的事件都只能添加到canvas元素...

2018-08-13 10:35:08 4554

原创 canvas详解（1）-原理

canvas详解(1)-原理原理canvas本身并不具备绘画能力，它本身只是一个画布，是一个容器。绘图能力是基于html5的getContext("2d")返回的CanvasRenderingContext2D对象来完成的。const canvas = document.getElementById("payAbilityLoginTree");//获取canvas dom对象...

2018-08-13 10:24:51 8305 2

原创 js浮点数加减乘除

js浮点数加减乘除js浮点数的加减乘除存在着严重的bug，例如：在google浏览器下，0.1+0.2=0.30000000000000004;这完全不是我们想要的结果。对于这一问题的解决方案就是重写浮点数的加减乘除方法,其原理是现将浮点数转换为整数。进行加减乘数，再除以相应的倍数，使之成为对应的浮点数结果。原理浮点数的加减乘数之所以会出现bug，跟javascript...

2018-08-02 10:52:08 2391

原创数字每3位逗号隔开

最近遇到一个需求需要将数字每3位逗号隔开。例如：1000 => 1,000故书写了如下方法：//数字处理为每3位逗号隔开export const dealNumber = (num) => { if (num != 0 && num) { num = num + ""; let decimalsStr = ""; ...

2018-07-27 14:03:14 5924

原创面试集锦（一）

1.优先级var z=1,y=z=typeof y;console.log(y);//string 由于typeof的优先级大于=，所以先执行y=typeof y,返回结果'undefined'。之后的赋值操作从右往左依次执行。所以结果为'string'2.执行顺序var a = 'glabol';function test(){ console.lo...

2018-06-11 17:06:08 329

原创 H5新特性

H5新特性HTML是用来表示一个网页架构的，其中的语义标签便是骨架。HTML5是一个新的网络标准，他不在遵循SGML(标准通用标记语言),所以不在需要DTD的声明。1 基础语义标签：<command>定义命令按钮</command><datalist>定义可选数据列表，与input配合可实现下拉框</datalist><...

2018-06-11 11:36:14 4318

原创 npm中--save-dev和--save的区别

npm中–save-dev和–save的区别1.常用几个参数-g:将模块安装到全局环境。--save:将模块安装到项目node_modules目录下，并在package.json的dependencies节点写入依赖。--save-dev:将模块安装到项目node_modules目录下，并在package.json的devDependencies节点写入依赖。--produ...

2018-06-04 10:52:48 936