前端知识
文章平均质量分 52
左手121
这个作者很懒,什么都没留下…
展开
-
Promise.all 限制并发
实现function PromiseLimit(funcs, limit = 5) { const list = [...funcs] const result = [] const executing = [] function queue() { const func = list.shift() if (!func) return Promise.all(executing) const promise = func() result.push(pr原创 2022-04-20 10:24:09 · 350 阅读 · 0 评论 -
TypeScript 杂记一
TypeScript 杂记一string 和 String 的区别string 是一个 TypeScript 的基础数据类型String 是一个构造函数,通过 new 可以创建一个实例对象。直接使用返回的是一个类型是 string 的变量const a: String = new String("a");typeof a === "object";typeof a.toString() === "string";const b: string = String("b");typeof原创 2022-02-11 10:32:46 · 572 阅读 · 0 评论 -
使用 koa + typescript + 装饰器搭建 mock 服务
使用 koa + typescript + 装饰器搭建 mock 服务基本的包信息和运行的脚本{ "name": "mock", "version": "1.0.0", "license": "MIT", "main": "index.js", "scripts": { "start": "node index.js" }, "dependencies": { "chalk": "^4.1.0", "jsonwebtoken": "^8.5.1",原创 2021-07-06 17:33:36 · 893 阅读 · 0 评论 -
babel 插件(为组件自动添加高阶函数,例如 hot)
babel 插件(为组件自动添加高阶函数,例如 hot)目前只支持添加一个,感兴趣的可以自己去修改说明传递参数identifier: 导出组件的名字source: 组件的路径local: 接收的模式,默认 truetrue: import A from 'xxx'false: import { A } from 'xxxx'filter: 过滤函数识别规则符合下述规则的组件才会去进行修改文件中引入了 React组件通过 export default 导出export原创 2021-02-03 15:59:58 · 461 阅读 · 0 评论 -
微前端工程之间的通讯
微前端工程之间的通讯原理使用发布订阅者模式:一方订阅,一方发布。使用单例模式:一个工程内使用同一个实例。微前端加载,首先加载父工程,随后根据配置加载对应的一个或者多个子工程。父工程先一步生成实例,并传递给子工程。子工程则使用这个实例初始化自己的实例。 共享同一个实例。代码import { getState } from "./utils";let instance: BusI...原创 2020-04-12 14:18:22 · 1319 阅读 · 0 评论 -
微前端
微前端简介借鉴微服务的概念来应用在前端上,将一个巨大的前端工程拆分成一个的小工程,这些小工程具备独立的开发和运行能力,而整个系统就由这些小工程协同合作。优点:应用自治 : 只需要遵循统一的接口规范或者框架,以便于系统集成到一起,相互之间是不存在依赖关系的。单一职责 : 每个前端应用可以只关注于自己所需要完成的功能。技术栈无关 : 你可以使用 Angular 的同时,又可以使用 Rea...原创 2020-04-12 14:15:33 · 1132 阅读 · 0 评论 -
前端模块化的发展史
前端模块化的发展史1、早期Javascript 不是一种模块化编程语言,在 ES6 以前,它是不支持类 class,所以也就没有模块 module。因此社区一直在寻找如何实现模块化效果的最佳可行性方案。原始写法:模块就是实现特定功能的一组方法。只要将多个函数放到一个文件中,引入这个文件就可以直接使用。缺点:污染全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系。...原创 2020-01-03 16:21:52 · 272 阅读 · 0 评论 -
ES6 Module 多种用法
ES6 Module 多种用法export用户需要知道所要加载的变量名或函数名,否则无法加载规定模块的对外接口,推荐使用第三种export const a = 1export const b = 1// 等价于const a = 1const b = 1export { a }export { b }// 等价于const a = 1const b = 1export ...原创 2020-01-03 16:19:01 · 277 阅读 · 0 评论 -
重新封装Antd Input组件,解决中文输入问题
import React, { useState, useEffect } from 'react'import { Input } from 'antd'function BaseHOC(key) { return function(props) { const { defaultValue, value, onChange } = props const hasVal...原创 2020-01-02 18:36:11 · 4582 阅读 · 4 评论 -
Promise.all 并发限制
Promise.all 并发限制参考链接简介Promise.all 可以保证,promises 数组中所有 promise 对象都达到 resolve 状态,才执行 then 回调。这时候考虑一个场景:如果你的 promises 数组中每个对象都是 http 请求,或者说每个对象包含了复杂的调用处理。而这样的对象有几十万个。那么会出现的情况是,你在瞬间发出几十万 http 请求(tcp ...原创 2019-12-24 17:31:58 · 3205 阅读 · 0 评论 -
React 16.x+版本的生命周期变化
React 16.x+版本的生命周期变化官方文档参考简介componentWillMount : 实例挂载之前componentWillReceiveProps : props 发生变化时执行,初始化 render 时不执行componentWillUpdate : 每次页面更新之前调用这些生命周期经常被误解和滥用。此外,我们预计他们的潜在滥用可能在异步渲染方面有更大的问题。因此...原创 2019-11-22 17:22:03 · 696 阅读 · 0 评论 -
Vue2.6新特性
1. Vue2.6新特性2018-02-05(正月初一) 这天尤大大发布了 2.6 版本,v2.6.0 Macross (直译:超时空要塞)。截至到今天 2018-2-21 这16天已经发布到了 v2.6.6。(春节都不休息,此处应该是捂脸和生无可恋表情)主要包括下面几方面的优化:新特性重要的内部变动Bug修复性能优化我们需要关注的是 新特性 与 重要的内部变动官网地址1.1...原创 2019-02-28 15:06:51 · 3247 阅读 · 0 评论 -
Angular(7) 学习资料 (8)HttpClient
HttpClient简介现代浏览器支持使用两种不同的 API 发起 HTTP 请求:XMLHttpRequest 接口和 fetch() API。@angular/common/http 中的 HttpClient 类为 Angular 应用程序提供了一个简化的 API 来实现 HTTP 客户端功能。它基于浏览器提供的 XMLHttpRequest 接口。HttpClient 带来的其它优...原创 2019-03-01 09:24:47 · 2736 阅读 · 0 评论 -
Angular(7) 学习资料 (7)RxJS
RxJS 6+ 入门学习简介与基本概念RxJS 是 ReactiveX 编程理念的 JavaScript 版本。ReactiveX 来自微软,它是一种针对异步数据流的编程。简单来说,它将一切数据,包括HTTP请求,DOM事件或者普通数据等包装成流的形式,然后用强大丰富的操作符对流进行处理,使你能以同步编程的方式处理异步数据,并组合不同的操作符来轻松优雅的实现你所需要的功能。RxJS 是...原创 2019-03-01 09:23:59 · 1324 阅读 · 0 评论 -
Angular(7) 学习资料 (6)路由与导航
路由与导航基础Angular 的路由器是一个可选的服务,它用来呈现指定的 URL 所对应的视图。 它并不是 Angular 核心库的一部分,而是在它自己的 @angular/router 包中。 像其它 Angular 包一样,你可以从它导入所需的一切。<base url="/"> : 大多数带路由的应用都要在index.html的 <head&原创 2019-02-28 15:21:06 · 663 阅读 · 0 评论 -
Angular(7) 学习资料 (5)服务
服务简介服务是一个广义的概念,它包括应用所需的任何值、函数或特性。狭义的服务是一个明确定义了用途的类。它应该做一些具体的事,并做好。Angular 把组件和服务区分开,以提高模块性和复用性。 通过把组件中和视图有关的功能与其他类型的处理分离开,你可以让组件类更加精简、高效。理想情况下,组件的工作只管用户体验,而不用顾及其它。 它应该提供用于数据绑定的属性和方法,以便作为视图(由模板渲染)和...原创 2019-02-28 15:19:52 · 210 阅读 · 0 评论 -
Angular(7) 学习资料 (4)管道
管道管道把数据作为输入,然后转换它,给出期望的输出。(早期的过滤器)内置管道DatePipe、UpperCasePipe、LowerCasePipe、CurrencyPipe 和 PercentPipe自定管道import { Pipe, PipeTransform } from '@angular/core'@Pipe({ name: 'pipeTest'})export ...原创 2019-02-28 15:18:43 · 199 阅读 · 0 评论 -
Angular(7) 学习资料 (3)指令
指令在 Angular 中有三种类型的指令:组件 — 拥有模板的指令结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令属性型指令 — 改变元素、组件或其它指令的外观和行为的指令结构型指令import { Directive, ElementRef, Input, HostListener, OnInit, Renderer2 } from '@angular/co...原创 2019-02-28 15:16:57 · 474 阅读 · 0 评论 -
Angular(7) 学习资料 (2)组件
组件组件控制屏幕上被称为视图的一小片区域。当用户在应用中穿行时,Angular 就会创建、更新、销毁一些组件。 你的应用可以通过一些可选的生命周期钩子(比如ngOnInit())来在每个特定的时机采取行动。@Component 装饰器会指出紧随其后的那个类是个组件类,并为其指定元数据。组件的元数据告诉 Angular 到哪里获取它需要的主要构造块,以创建和展示这个组件及其视图。@Compon...原创 2019-02-28 15:13:39 · 331 阅读 · 0 评论 -
Angular(7) 学习资料 (1)
架构Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。 Angular 本身就是用 TypeScript 写成的。它将核心功能和可选功能作为一组 TypeScript 库进行实现,你可以把它们导入你的应用中。Angular 的基本构造块是 NgModule,它为组件提供了编译的上下文环境。 NgModule 会把相关的代码收集到一些功能集中。Angula...原创 2019-02-28 15:12:37 · 209 阅读 · 0 评论 -
什么叫可摇树优化
什么叫可摇树优化摇树摇树是一种消除死代码的方法。这个词最初是由 Rollup 发起的,并逐渐流行开来,但消除死代码的概念却早已存在。webpack 中也涉及了这个概念。应用程序的依赖项是树状结构。树中的每个节点都代表了一个依赖项,这些依赖项为应用程序提供了不同的功能。我们通过消除不需要的依赖项来减少树的节点。这个过程叫摇树。早期我们开发的应用程序依赖项比较少(树苗),随着后续的开发树节点...原创 2019-02-28 15:10:48 · 4047 阅读 · 0 评论 -
Angular(7) 学习资料 (9)i18n
i18n应用程序的国际化涉及到开发的很多方面,主要是如何让应用可以被全世界的用户使用而且用起来比较友好。本章内容主要讲的下面几个方面:Angular 内置国际化ngx-translate : 用来给我们自己的组件添加国际化支持,主要模块是 @ngx-translate/core,@ngx-translate/http-loaderng-zorro-antd : 使用的第三方组件库,其内部...原创 2019-03-01 10:00:27 · 1375 阅读 · 0 评论 -
Vue 路由懒加载根据根路由合并chunk块
路由懒加载的小技巧一般来说当我们的项目越来越大的时候,我们打包的文件也越来越大。这时候我们的首屏加载就会很慢。因此我们会使用到路由的懒加载机制来对我们的模块进行划分。export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/A', ...原创 2019-03-01 11:53:26 · 2961 阅读 · 0 评论 -
AngulerJS学习(三) 路由
简介AngularJS 路由允许我们通过不同的 URL 访问不同的内容。通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA)。通常我们的URL形式为 http://runoob.com/first/page,但在单页Web应用中 AngularJS 通过 # + 标记 实现,例如: http://runoob.com/#/原创 2017-02-10 09:04:51 · 339 阅读 · 0 评论 -
BEM 和 CSS Modules
BEM 和 CSS Modules简介CSS 入门简单,深入就比较难,样式简单维护难。因为 CSS 是全局性的,所以很容易就出现样式冲突的问题。为解决这个问题。最通常的做法是 CLASS 命名写长一点或者加一层父级选择器从而降低冲突的几率。但是这样 CSS 的命名就变得很混乱。因此就出现了这样一种解决方案:命名约定。例如:BEM、OOCSS、AMCSS、SMACSS。其中使用最为广泛的是 ...原创 2019-09-02 16:35:39 · 769 阅读 · 0 评论 -
文件下载、上传和断点续传数据处理的公共基本方法
import axios from './axios'export const requestBaseUpload = (url, params, type = 'post', headers = { 'Content-Type': 'multipart/form-data' }, options = {}, loading = true) => { const data = new...原创 2019-06-18 16:58:26 · 546 阅读 · 0 评论 -
浅谈前端测试
浅谈前端测试浅谈 TDD 和 BDDTDD Test Driven Development (测试驱动开发)一种使用自动化单元测试来推动软件设计并强制依赖关系解耦的技术。使用这种做法的结果是一套全面的单元测试,可随时运行,以提供软件可以正常工作的反馈。大概的流程是先针对每个功能点抽象出接口代码,然后编写单元测试代码,接下来实现接口,运行单元测试代码,循环此过程,直到整个单元测试都通过。这...原创 2019-03-25 12:04:11 · 4306 阅读 · 0 评论 -
你可能不知道的 Promise
你可能不知道的 Promise简介Promise 有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态一旦状态改变,就不会再变状态只能 pending->fulfilled/rejected如果状态改变已经发生了,你再对 Promise 对象添加回调函数,也会...原创 2019-03-21 11:57:44 · 235 阅读 · 0 评论 -
浏览器垃圾回收机制
浏览器垃圾回收机制简介由于字符串、对象和数组没有固定大小,所有当他们的大小已知时,才能对他们进行动态的存储分配。JavaScript 程序每次创建字符串、数组或对象时,解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存,最终都要释放这些内存以便他们能够被再用,否则,JavaScript 的解释器将会消耗完系统中所有可用的内存,造成系统崩溃。JavaScript 使用垃圾回收机制来...原创 2019-03-20 17:20:14 · 4599 阅读 · 1 评论 -
Async、Await 实现原理
Async、Await 实现原理简介async 用于声明一个函数是异步的await 用于等待异步完成await 只能在 async 函数中使用async 返回一个 promiseawait 后边永远跟的是一个 promise,如果是一个非 promise,则会自动转换为 promiseAsync、Await 是通过 Generator + Promise 实现babel 转码...原创 2019-03-20 15:54:01 · 2794 阅读 · 2 评论 -
TypeScript XXX.d.ts 文件描述
TypeScript XXX.d.ts 文件描述简介TypeScript 的核心在于静态类型,我们在编写 TS 的时候会定义很多的类型,但是主流的库都是 JavaScript 编写的,并不支持类型系统。TypeScript 身为 JavaScript 的超集,自然需要考虑到如何让 JS 库也能定义静态类型。TypeScript 经过了一系列的摸索,先后提出了 tsd(已废弃)、typings...原创 2019-03-07 15:41:15 · 2214 阅读 · 0 评论 -
Vue computed 实现原理
Vue computed 实现原理Vue 2.5.171、Vue 在初始化的时候会 initState ,这个方法会初始化 props methods data computed watch// 4069vm._self = vm;initLifecycle(vm);initEvents(vm);initRender(vm);callHook(vm, 'beforeCreate...原创 2019-03-03 16:35:47 · 4821 阅读 · 0 评论 -
JavaScript 异步
JavaScript 异步为什么 JavaScript 是单线程JavaScript 的主要用途是与用户互动,以及操作DOM。假定 JavaScript 同时有两个线程,一个线程在某个 DOM 节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?所以,为了避免复杂性,从一诞生,JavaScript 就是单线程,这已经成了这门语言的核心特征,将来也不会改变。为了利用多核 ...原创 2019-03-03 16:33:55 · 191 阅读 · 0 评论 -
Vue 2.x为什么不能直接通过下标给数组赋值
Vue为什么不能直接通过下标给数组赋值vue 通过 Object.defineProperty 为对象的每个值循环添加 set 和 get 方法。通过这种数据劫持的方式,配合观察者模式来达到数据的响应。Vue 在组件 beforeCreate 和 created 两个周期之间进行这些处理操作这就解释了下述情况无法生效的原因:因为一开始的时候没有 obj.b 这个参数,所以并没有给他添加相应...原创 2019-02-28 15:05:13 · 4002 阅读 · 0 评论 -
Vue 预渲染
Vue 预渲染预渲染 VS SSR预渲染更好的 SEO相比 SSR 非常简单,对代码的改造非常小应用的路由比较少或者只需要优化个别路由内容到达时间(time-to-content) 要求不是很高SSR 服务端渲染相对于预渲染,SSR有更快的内容到达时间(time-to-content)开发条件所限:浏览器特定的代码,只能在某些生命周期钩子函数中使用;一些外部扩展库可能需要特...原创 2019-02-28 14:55:46 · 1224 阅读 · 0 评论 -
webpack 入门和常用插件的使用
webpack 入门和常用插件的使用常用配置参数module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js' }, output: { path: path.resolve(__dirname, '../dist'), fil...原创 2018-08-21 16:43:08 · 2160 阅读 · 0 评论 -
学习JavaScript设计模式(一)
前言:最近在读 JavaScript 设计模式这本书。好记性不如烂笔头,在这里做个笔记加深自己的理解。 我们首先要了解一下几个概念: 模式:一种可复用的解决方案,可用于解决软件设计中所遇到的常见问题。 模式的优点:模式是已经验证的解决方案;模式很容易被服用;模式富有表达力;模式的分类:创建型设计模式:构造器(Constructor)、工厂(Factory)、抽象(Abstract)、原创 2017-03-12 20:08:38 · 348 阅读 · 0 评论 -
学习JavaScript设计模式(七)
Adapter(适配器)模式适配器模式可用来在现有接口和不兼容的类之间进行适配。使用这种模式的对象又叫包装器(wrapper),因为它们在用一个新的接口包装另一个对象。使用场合:使用一个已经存在的对象,但其方法或属性接口不符合你的要求;你想创建一个可复用的对象,该对象可以与其它不相关的对象或不可见对象(即接口方法或属性不兼容的对象)协同工作;想使用已经存在的对象,但是不能对每一个都进行原型继承原创 2017-03-22 09:30:19 · 279 阅读 · 0 评论 -
学习JavaScript设计模式(六)
Flyweight(享元)模式Flyweight 模式是一种经典的结构型解决方案,主要时用于优化重复、缓慢及数据共享效率低下的代码。 Flweight 旨在通过与相关对象共享尽可能多的数据来减少应用程序中内存的使用。应用方式:用于数据层,处理内存中保存的大量相似对象的共享数据。用于DOM层,Flyweight 作为中央事件处理器,来避免将事件处理程序附加到父容器中的每个元素,而是将事件处理程序原创 2017-03-21 10:45:59 · 271 阅读 · 0 评论 -
学习JavaScript设计模式(五)
Mixin(混入)模式代码复用:最常见的方式时继承,但是继承会让子类获得父类的所有属性和方法。即使子类只使用到很少的一部分属性或方法。 Mixin 模式就是解决这一问题:实现部分继承(从父类继承所需要的一部分属性或方法)和多重继承。 Mixin 模式实际上就是一种属性的复制。例如我们常用的 JQuery 中的 extend 方法就是实现这一模式。 简单代码实现:/** * Created b原创 2017-03-20 21:39:46 · 355 阅读 · 0 评论