js世界-CSDN博客

原创 React架构

React的定位从官网看到React的理念：制约快速响应的因素有:当遇到大计算量的操作或者设备性能不足使页面掉帧，导致卡顿。发送网络请求后，由于需要等待数据返回才能进一步操作导致不能快速响应。这两类场景可以概括为：CPU的瓶颈IO的瓶颈React如何解决CPU瓶颈主流浏览器刷新频率为60Hz，即每（1000ms / 60Hz）16.6ms浏览器刷新一次。在每16.6ms内，需要完成执行JS–>布局–>绘制。当JS执行时间过长，超出了16.6ms，这次刷新就没有时

2022-02-28 20:17:24 828

原创采用 @svgr/webpack 支持 svg 作为组件引入

需求由于 antd 默认的 Icon 图标很有限，所以决定采用自定义 SVG 图标方式来拓展。Antd Icon开始实战按文档介绍的，我先安装了 @svgr/webpack，但由于是采用的 umi 搭建的脚手架，所以需要采用 webpack-chain 来自定义 webpack 配置： chainWebpack(config) { config.module.rules.delete('svg') config.module .rule('svg') .

2022-02-18 20:18:12 4477

原创算法之时间复杂度

我们需要一个不用具体的测试数据来测试，就可以粗略地估计算法的执行效率的方法，以此来追求最低的算法复杂度，提升代码质量。复杂度分为时间复杂度和空间复杂度。在介绍时间复杂度之前，先说下大 O 复杂度表示法。大 O 复杂度所有代码的执行时间 T(n) 与每行代码的执行次数 n 是成正比的可以用一个公式来表示这种关系：T(n) = O(f(n))T(n)：表示代码的执行时间n：表示数据规模的大小f(n)：表示一个公式，像上面的 2n + 2 或 (2n²+2n+3)，表示所有代码执行的次数

2021-11-02 12:24:32 509

原创 css 世界之条纹背景

水平与垂直条纹线性渐变 linear-gradient 需求：采用 css 实现个横向与纵向的条纹背景，类似如下：横向条纹首先我们都知道 linear-gradient 属性是用来实现线性渐变的，比如background:linear-gradient(blue,red);可以看到颜色从蓝色过渡到了红色。通过给这颜色加上终止位置，就可以限制渐变的范围。比如：background:linear-gradient(blue 20%,red 80%);可以看到顶层的 20%.

2021-10-23 00:28:53 1159

原创 css 世界之边框内圆角

需求做一个容器，只在内侧有圆角，而边框或描边的四个角在外部仍然保持直角的形状。通俗做法用两个元素来实现这个效果：// css.meaningful { width: 200px; background: #389e0d; padding: 0.8em;}.meaningful > div { background: #595959; border-radius: 1em; padding: 1em;}// html<div class="meaningful"&g

2021-10-20 09:23:30 527

原创 css 世界之多重边框

多重边框代码box-shadow 方案box-shadowbox-shadow 大家应该都不陌生，是用来设置投影的。不太为人所知的是，它还接受第四个参数（称作“扩张半径”），取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值(即前三个参数都为0)，得到的"投影"其实就是一道实线边框。// cssdiv { width: 100px; height: 60px; margin: 2.

2021-10-20 00:01:03 106

原创 Electron 菜单

示例代码一、自定义菜单分成三个步骤定义菜单内容let menuTemp = [{ label: 'File', click() { }}]其中数组里的每一项都是个 menuItem2. 根据上述的模板数据生成一个 menuconst menu = Menu.buildFromTemplate(menuTemp)将上述的自定义菜单添加到 app 里Menu.setApplicationMenu(menu)示例：// 在主进程 main.js 中let menu.

2021-10-13 19:26:33 1219 1

原创 Electron 进程间通信

Electron 桌面应用有两个进程，分别为主进程和渲染进程。一、主进程和渲染进程介绍主进程(Main Process)应用启动时，会创建个主进程一个应用有且只有一个主进程只有主进程可以进行 GUI 的 API 操作，即调用 Native APIs渲染进程(Renderer Process)Windows 中展示的界面通过渲染进程表现，DOM 操作，node js一个应用可以有多个渲染进程要通过主进程才可以访问原生 API(Native APIs)，要先跟主进程进行 ipc 通信

2021-10-08 19:24:55 862

原创浏览器中的网络

HTTP/0.9只有请求行，因为一个请求行足够表达要获取的内容只有响应体，因为只要返回数据即可，不需要告诉客户端编码、语言等信息返回的文件内容是以 ASCII 字符流来传输的，因为是获取 HTML 文件HTTP/1.0加上了请求行，告诉服务器返回什么类型的文件、采取什么形式的压缩、提供什么语言的文件以及文件的具体编码accept: text/htmlaccept-encoding: gzip, deflate, braccept-Charset: ISO-8859-1,utf-8a

2021-08-31 19:00:48 118

原创浏览器中的JavaScript执行机制

一个变量包含创建、初始化、赋值三个阶段function的创建、初始化和赋值均会被提升。var的创建和初始化被提升，赋值不会被提升。let的创建被提升，初始化和赋值不会被提升。变量提升函数和变量声明部分都会提升到代码开头。变量声明会设置初始值 undefined函数则分成以下两种JS 的执行流程编译阶段编译完后会生成执行上下文和可执行代码执行上下文里包含变量环境、词法环境、this、outer其中变量环境保存了变量提升的内容运行阶段在变量环境中查找自定义的变量和函数

2021-08-30 23:55:58 126

原创从输入URL到页面展示，发生了什么

theme: fancyhighlight: xcode这是我参与 8 月更文挑战的第 12 天，活动详情查看： 8月更文挑战用户输入，回车浏览器会判断是输入搜索内容，还是请求的 URL，如果是搜索内容，地址栏会使用默认的搜索引擎，来合成新的带搜索关键字的 URL;如果是 URL，加上协议合成合法的 url浏览器进程会通过进程间通信(IPC)将 URL 请求发送至网络进程。接着下面的 HTTP 流程准备渲染进程浏览器进程会判断新打开的页面与当前页面是否属性同一站点，是的话就利用.

2021-08-30 00:03:13 134

原创 React hook 相关内容

一、useReducer 与 useStateuseReducer 可以传给子组件个 dispatch 函数，子组件可以通过传递不同的 action，来达到不一样的处理（比如加 1 或减 1），而用 useState 就要定义多个并且传递多个二、为什么 useState 返回的是个数组，而不是对象因为数组只是定义了个顺序，组件方要使用什么名字都可以;对象则定义死了 key，并且无法在一个组件里填写多个，因为一个组件的 state 命名要唯一三、副作用只要不是将数据转成视图，像是 ajax 请求

2021-08-28 23:05:01 187

原创算法之时间与空间复杂度

为什么需要复杂度分析？如果发布上去通过运行代码的方式来查看运行效率，会有如下问题：测试结果非常依赖测试环境测试环境中硬件的不同会对测试结果有很大的影响测试结果受数据规模的影响很大如果测试数据规模太小，测试结果可能无法真实地反应算法的性能所以，我们需要一个不用具体的测试数据来测试，就可以粗略地估计算法的执行效率的方法。这就是我们今天要讲的时间、空间复杂度分析方法。大 O 复杂度表示法算法的执行效率，粗略地讲，就是算法代码执行的时间。但是，如何在不运行代码的情况下，用“肉眼”得到一段代码的执

2021-08-27 17:31:40 479

原创提升 webpack 构建速度

随着版本的迭代，业务的发展，代码会越来越多，这时候 webpack 的构建速度有可能就会变慢。构建时间的长短直接关联着我们的工作效率，所以很有必要熟悉下如何提升 webpack 构建速度。速度分析在提升 webpack 构建速度之前，先使用 speed-measure-webpack-plugin 进行速度分析。示例如下：const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");const smp = new Sp

2021-08-26 22:41:28 1408 1

原创你不得不懂的 webpack

1、webpack 简介webpack is a module bundler (模块打包⼯具)Webpack 是⼀个打包模块化 JavaScript 的⼯具，它会从⼊⼝模块出发，识别出源码中的模块化导⼊语句，递归地找出⼊⼝⽂件的所有依赖，将⼊⼝和其所有的依赖打包到⼀个单独的⽂件中是⼯程化、⾃动化思想在前端开发中的体现2、安装 webpack2.1、环境准备安装 node 版本参考官⽹发布的最新版本，可以提升 webpack 的打包速度一直下一步即可安装成功2.2、全局安装 web

2021-08-25 17:57:13 127

原创常用 UML 总结

为什么要做需求分析？为了便于和客户、策划沟通，通过文档的形式来展示自己对客户需求的理解程度，免得做偏了，做出来的不是客户或策划需要的。开发成本上，优先级等方面考虑弄清楚用户要解决什么问题，从用户提供的，用户未提供但潜在存在的等方面全面地理解、挖掘、分析出用户真实、准确的需求用例图一、用例图是什么场景下使用从客户的角度来描述系统功能，在需求分析文档里使用二、组成元素参与者：使用该系统的人或事物，以人形图标表示用例：代表系统某项完整的功能，用椭圆表示关系：定义用例之间的关系，有泛化关系，扩展

2021-08-13 17:22:30 111

原创浏览器安全之网络安全（HTTPS）

为什么要使用 HTTPS 协议在将 HTTP 数据提交给 TCP 层之后，数据会经过用户电脑、WiFi 路由器、运营商和目标服务器，在这中间的每个环节中，数据都有可能被窃取或篡改。比如用户电脑被黑客安装了恶意软件，那么恶意软件就能抓取和篡改所发出的 HTTP 请求的内容。或者用户一不小心连接上了 WiFi 钓鱼路由器，那么数据也都能被黑客抓取或篡改。什么是 HTTPS 协议实际上就是在 HTTP 协议栈中引入安全层，所有经过安全层的数据都会被加密或者解密安全层有两个主要的职责：对发起 HTT

2021-08-12 20:50:01 1486 1

原创你真的了解 setState 吗？

setState 算是 React 里被使用的最高频的 api，但你真的了解 setState 吗？比如下面这段代码，你能清楚的知道输出什么吗？import { Component } from 'react'export class stateDemo extends Component { state = { count: 0 } componentDidMount() { this.setState({ count: this.state.count + 1 }) console

2021-08-11 20:59:40 674

原创浏览器安全之 Web 页面安全

浏览器安全分为 Web 页面安全、浏览器网络安全和浏览器系统安全。1、为什么需要安全策略假设这样一个场景：你先打开了个银行网站，并登录了，然后不小心打开了个恶意网站，由于没有安全策略，此时恶意网站完全可以对银行网站进行任意操作，比如更改银行网站的 DOM 元素，甚至获取 cookie 等信息，伪造接口请求等，可想而知是很恐怖的。所以在没有安全保障的 Web 世界中，我们是没有隐私的，因此需要安全策略来保障我们的隐私和数据的安全。2、同源策略说到安全策略，就不得不提同源策略，那何为同源策略呢？要理解

2021-08-10 18:30:33 858

原创强制缓存与协商缓存

为什么要采用缓存在任何⼀个前端项⽬中，访问服务器获取数据都是很常⻅的事情，但是如果相同的数据被重复请求了不⽌⼀次，那么多余的请求次数必然会浪费⽹络带宽，以及延迟浏览器渲染所要处理的内容，从⽽影响⽤户的使⽤体验。因此考虑使⽤缓存技术对已获取的资源进⾏重⽤，是⼀种提升⽹站性能与⽤户体验的有效策略。缓存的原理缓存的原理是在⾸次请求后保存⼀份请求资源的响应副本，当⽤户再次发起相同请求后，如果判断缓存命中则拦截请求，将之前存储的响应副本返回给⽤户，从⽽避免重新向服务器发起资源请求。HTTP 缓存HTT

2021-08-09 16:05:26 244

原创手写傻瓜式 React 全家桶之 React-Redux

上一篇手写了 Redux 源码，同时也说明了 Redux 里头是没有 React 相关的 API，这篇咱们来写下 React-Redux，那么 React，Redux 以及 React-Redux 关系是：Redux： Redux 是一个应用状态管理js库，它本身和 React 是没有关系的，换句话说，Redux 可以应用于其他框架构建的前端应用。React-Redux：React-Redux 是连接 React 应用和 Redux 状态管理的桥梁。React-redux 主要专注两件事，一是如何向

2021-07-25 18:17:27 176

原创手写傻瓜式 React 全家桶之 Redux

一、什么是 ReduxA Predictable State Container for JS Apps（JS应用的可预测状态容器）**可预测：**实际上指的是纯函数（每个相同的输入，都会有固定输出，并且没有副作用）这个是由 reducer 来保证的，同时方便了测试状态容器：在 web 页面中，每个 DOM 元素都有自己的状态，比如弹出框有显示与隐藏两种状态，列表当前处于第几页，每页显示多少条就是这个列表的状态，存储这些状态的对象就是状态容器。虽说 Redux 是 React 全家桶的一员，但

2021-07-24 20:13:52 163 4

原创 webpack 手写 loader 与 plugin，手写简易版本的 webpack

前言本文示例手写 loader什么是 loader?loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 “load(加载)” 模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的得力方式。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS 文件！

2021-07-05 18:59:26 537

原创 react Hook 之 memo，useCallback，useMemo 性能优化

前言本文示例基础示例需求：编写个父子组件父组件import React, { useState } from 'react'import Child from './child'export default function Parent(props: any) { const [num, setNum] = useState(0) const handleClick = () => { setNum(num + 1) } return ( <div>

2021-05-20 17:06:35 390 2

原创 vscode 中 prettier 和 ESLint 冲突解决

问题有一天，领导让接手了个带有 eslint 配置的老项目，这个 eslint 配置是打在 node_modules 里。在熟悉的代码时候，我调制并保存了下，此时由于 VS Code 安装了 prettier 插件，采用 prettier 对代码进行了格式化，可此时在终端报了各种错误，如下图：这是由于 eslint 跟 prettier 在校验上的不一致，由于在 VS Code 的 setting.json 里配制了"editor.formatOnSave": true // 保存就格式化修复

2021-05-19 18:08:46 2508 2

原创 javascript 设计模式之迭代器模式

概念迭代器模式提供一种方法顺序访问一个聚合对象中的各个元素，而又不暴露该对象的内部表示。特点：为遍历不同数据结构的 “集合” 提供统一的接口；能遍历访问 “集合” 数据中的项，不关心项的数据结构从 Array.prototype.forEach 说起let arr = [1, 2, 3]arr.forEach((item) => { console.info(item) // 1 2 3})在数组上遍历是没有问题的,但将它作为在 NodeList 就会发现报错<d

2021-05-18 21:10:08 139 6

原创 javascript 设计模式之状态模式

概念状态模式：允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。从电灯说起需求：实现一个开关功能的电灯代码实现：class Light { constructor() { this.state = 'off' // 默认关灯 this.button = null } init() { const button = document.createElement('button') th

2021-05-18 16:53:21 249

原创 javascript 设计模式之策略模式

概念策略模式：定义一系列的算法（这些算法目标一致），把它们一个个封装起来，并且使它们可以相互替换。从公司绩效谈起每家公司年终奖的发放都会根据该年度员工表现给予一定的奖惩，当然 A 公司也不例外， A 公司的年终绩效制度如下：等级为 S 的，年终奖为工资的 4倍等级为 A 的，年终奖为工资的 3 倍等级为 B 的，年终奖为工资的 2 倍等级为 C 的，年终奖为工资的 0.3 倍代码实现如下：var calculateBonus = function (performanceLevel

2021-05-18 11:57:56 282 1

原创 javascript 适配、代理、装饰者模式的比较

适配器模式：将一个类（对象）的接口（方法或属性）转化成客户希望的另外一个接口（方法或属性），使得原本由于接口不兼容而不能一起工作的那些类（对象）可以正常协作。简单理解就是为兼容而生的 “转换器”。代理模式：使用者无权访问目标对象，中间加代理，通过代理做授权和控制装饰者(decorator)模式，又名装饰器模式，能够在不改变对象自身的基础上，在程序运行期间给对像动态的添加职责。与继承相比，装饰者是一种更轻便灵活的做法。适配器：特点在于兼容，并不预处理请求，直接将请求转接给原方法，新方法与原.

2021-05-17 17:22:48 112

原创 javascript 设计模式之适配器模式

概念适配器模式：将一个类（对象）的接口（方法或属性）转化成客户希望的另外一个接口（方法或属性），使得原本由于接口不兼容而不能一起工作的那些类（对象）可以正常协作。简单理解就是为兼容而生的 “转换器”。本文代码生活中的适配器比如生活中去香港或国外，电源接口跟国内不同就需要一个转换器再比如Type-c 转接口，比如我之前用的耳机线都是圆头的，直到最近买了个小米10，发现它的手机孔竟然是方形的，好在厂商有送了个转换器，我才能继续听歌比照上面的定义，类：小米10类的接口：方形客户(我

2021-05-15 19:01:23 219 3

原创 javascript 设计模式之装饰者模式

概念装饰者(decorator)模式，又名装饰器模式，能够在不改变对象自身的基础上，在程序运行期间给对像动态的添加职责。与继承相比，装饰者是一种更轻便灵活的做法。就好比手机扣，有了手机扣了方便观看视频，但对于手机原先的所有功能，像是拍照仍然可以直接使用。手机扣只是起到锦上添花作用，并不一定要有。再好比房子对于人这辈子的意义来说，也不是必须名，没有也不影响你一天天的过，只是说有了相当于安了个家，但并不会因为有了个房子，你就百事皆顺，孩子读书门门精，说偏了，哈哈。为什么要使用装饰者模式初始需求:.

2021-05-15 17:02:19 247 2

原创 javascript 设计模式之单例模式

概念单例模式：确认一个类只有一个实例，并提供一个访问它的全局访问点可以看出单例模式要满足两个条件只有一个实例可以全局访问模式类型实现方式：使用一个变量存储类实例对象（值初始为 null/undefined ）。进行类实例化时，判断类实例对象是否存在，存在则返回该实例，不存在则创建类实例后返回。“简单版本” 单例模式class SingleObject { constructor(name) { this.name = name; this.

2021-05-14 10:52:15 729 2

原创 javascript 设计模式之发布订阅者模式

前言上一篇讲到观察者模式，这篇要讲下发布-订阅模式。有人可能会说了：这两个不是一回事吗？确实这两个模式的核心思想、运行机制上没有本质的差别。但还是有些差别，要不然我这篇要讲啥，且听我娓娓道来生活中的发布订阅者模式还记得上次那个小明、小红、小二去楼盘买房的事？小明最近看中了一个楼盘，到了售楼处之后才被告知，该楼盘的房子还未开盘，具体开盘时间还没定。除了小明，一起来的还有小红，小二人，为了第一时间得知楼盘开盘时间，他们都把电话号码留给了销售员王五，王五也答应楼盘一开盘就会发消息通知他们。过了不久

2021-05-12 19:53:40 239 1

原创 javascript 设计模式之观察者模式

什么是观察者模式观察者模式观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个目标对象，当这个目标对象的状态发生变化时，会通知所有观察者对象，使它们能够自动更新。 —— Graphic Design Patterns生活中的观察者模式小明最近看中了一个楼盘，到了售楼处之后才被告知，该楼盘的房子还未开盘，具体开盘时间还没定。除了小明，一起来的还有小红，小二人，为了第一时间得知楼盘开盘时间，他们都把电话号码留给了销售员王五，王五也答应楼盘一开盘就会发消息通知他们。过了不久，新楼盘

2021-05-11 21:06:04 193 1

原创 JS 面向对象之继承

JS 里面有很多没那么好懂的内容，像是闭包，继承，this。我打算将这些内容揉碎了分别输出文档。这篇讲继承，查看完整代码请戳：继承为什么要有继承从 JS 创始人 Brendan Eich 讲起JS 也是面向对象语言，一切都是对象，必须要有一种机制，将所有对象联系起来。但 Brendan Eich 的创始人又不想在 JS 中引入"类"，因为一旦引入“类”， JS 就会变成一种完整的面向对象编程语言，这显示太正式，不是创建 JS 语言的初衷。受 C++ 和 JAVA 里new命令的影响，他就把 ne

2021-05-07 20:40:20 420 1

原创 JS 面向对象之封装

JS 是面向对象语言，提到面向对象，就不得不说它的三要素之封装。原始模式var cat1 = {name:"guaiguai",color:"白毛"}var cat2 = {name:"huaihuai",color:"黑色"}存在问题：多生成几个实例，代码就会很冗余，写起来也很麻烦cat1 与 cat2 之间看不出来有啥关联工厂模式function createCat(name,color) { return { name:name, color:color }}.

2021-04-30 19:43:35 557 1

原创手写 Promise 源码实现

关乎手写Promise，网上已经有好多相关资料，我也查阅过相关资料，但大多不够全，并且有些没那么易懂，所以自己想从头写个通俗易懂的Promise。查看完整代码请戳：手写Promise

2021-04-18 08:45:37 207 3

原创 useRef详细总结

useRef定义const refContainer = useRef(initialValue);refContainer对象里会有个current属性，当更新current值时并不会re-render，这是与useState不同的地方更新useRef是side effect(副作用)，所以一般写在useEffect或event handler里useRef类似于类组件的this为什么使用useRef返回的 ref 对象在组件的整个生命周期内保持不变示例1：由于每次渲染周期获取到

2021-04-12 18:52:18 75662 21

原创 hook

为什么要使用Hook优化了类组件的三大问题方便复用状态逻辑类组件渲染属性(prop render)和高阶组件导致层级冗余，通过自定义hook可以很方便达到复用

2021-02-14 07:37:25 114

原创 TypeScript之泛型

为什么要用泛型定义时就限制类型function echo(arg:number):number{ return arg}只能传入number类型，无法传入string等类型const result = echo(2)采用anyfunction echo(arg:any):any{ return any}是可以支持传入任何类型，可传入与返回的类型可以不一致。比如我们输入个number类型，我们只知道任何类型的值都有可能返回泛型定义在定义函数，接口或类时，不预先指定

2021-02-07 15:22:25 305

空空如也

空空如也