前端
文章平均质量分 75
材女的进击
这个作者很懒,什么都没留下…
展开
-
Js加法运算规则
强制类型转换规则。原创 2024-07-17 10:57:21 · 160 阅读 · 0 评论 -
【Angular中的HTTP请求】- HttpClient 详解
不同版本的Angular,以上代码位置行数不同,但是文件位置都是一样的,大家可以通过以上关键字搜索就能找到相关代码。注入时,处理程序实例将请求分派到链中的第一个拦截器,然后分派到第二个拦截器,第三个拦截器,依次分派,最终到达。操作符基于请求信息新建的一个单播的 Cold Observable (数据流,原始的数据就是请求信息)。方法对请求进行了一个链式的处理流程:主要包括不定数量的拦截器的处理加上最后的。被订阅的时候,请求先经过拦截器的处理,最后通过浏览器 HTTP API 发出。转载 2023-06-20 10:33:39 · 703 阅读 · 0 评论 -
Javascript 设计模式
设计模式原创 2023-03-08 14:39:52 · 250 阅读 · 0 评论 -
ECMAScript 详解
ECMAScript 与 JavaScript 的关系原创 2023-02-28 14:26:39 · 1888 阅读 · 0 评论 -
web前端工程化
前端工程化可以分四个方面来说,分为模块化、组件化、规范化和自动化转载 2023-02-27 16:39:38 · 88 阅读 · 0 评论 -
Angular终极教程
Angular的教程,清楚明了,卷起来吧原创 2023-02-20 16:17:39 · 6762 阅读 · 1 评论 -
TypeScript 简介
https://www.tslang.cn/docs/handbook/basic-types.htmlTypeScript是什么TypeScript是由微软开发的,是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程安装 TypeScript$npm install -g typescript编译 TypeScript 文件$tsc app.ts# app.ts => app.js数据类型Boolean类型...原创 2021-05-27 17:05:46 · 295 阅读 · 0 评论 -
聊聊V8引擎的垃圾回收
前言我们知道,JavaScript之所以能在浏览器环境和NodeJS环境运行,都是因为有V8引擎在幕后保驾护航。从编译、内存分配、运行以及垃圾回收等整个过程,都离不开它。在写这篇文章之前,我也在网上看了很多博客,包括一些英文原版的内容,于是想通过这篇文章来做一个归纳整理,文中加入了我自己的思考,以及纯手工制作流程图~~希望这篇文章能帮到你,同时本文也会收录到我自己的个人网站。为什么要有垃圾回收在C语言和C++语言中,我们如果想要开辟一块堆内存的话,需要先计算需要内存的大小,然后自己通过m转载 2021-04-01 15:43:17 · 273 阅读 · 0 评论 -
面试官,不要再问我三次握手和四次挥手
三次握手和四次挥手是各个公司常见的考点,也具有一定的水平区分度,也被一些面试官作为热身题。很多小伙伴说这个问题刚开始回答的挺好,但是后面越回答越冒冷汗,最后就歇菜了。见过比较典型的面试场景是这样的:面试官:请介绍下三次握手求职者:第一次握手就是客户端给服务器端发送一个报文,第二次就是服务器收到报文之后,会应答一个报文给客户端,第三次握手就是客户端收到报文后再给服务器发送一个报文,三次握手就成功了。面试官:然后呢?求职者:这就是三次握手的过程,很简单的。面试官:。。。。。。(番外篇:一首凉凉转载 2021-04-01 15:19:40 · 106 阅读 · 0 评论 -
别再问我“输入URL到页面呈现”啦
第1篇: 能不能说一说浏览器缓存?缓存是性能优化中非常重要的一环,浏览器的缓存机制对开发也是非常重要的知识点。接下来以三个部分来把浏览器的缓存机制说清楚:强缓存协商缓存缓存位置强缓存浏览器中的缓存作用分为两种情况,一种是需要发送HTTP请求,一种是不需要发送。首先是检查强缓存,这个阶段不需要发送HTTP请求。如何来检查呢?通过相应的字段来进行,但是说起这个字段就有点门道了。在HTTP/1.0和HTTP/1.1当中,这个字段是不一样的。在早期,也就是HTTP/1.0时期,使用的是E...转载 2021-04-01 14:45:40 · 263 阅读 · 0 评论 -
JS实现继承的几种方式
说到继承,最容易想到的是ES6的extends,当然如果只回答这个肯定不合格,我们要从函数和原型链的角度上实现继承,下面我们一步步地、递进地实现一个合格的继承一. 原型链继承原型链继承的原理很简单,直接让子类的原型对象指向父类实例,当子类实例找不到对应的属性和方法时,就会往它的原型对象,也就是父类实例上找,从而实现对父类的属性和方法的继承// 父类function Parent() { this.name = '写代码像蔡徐抻'}// 父类的原型方法Parent.prototy转载 2021-03-31 15:11:49 · 127 阅读 · 0 评论 -
我终于弄懂了Promise
写在前面以前总是似懂非懂,这次总算把它弄了个清楚什么是PromiseES6 异步编程的一种解决方案,比传统的方案(回调函数和事件)更加的合理和强大好处 异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数promise可以解决异步的问题,本身不能说promise是异步的Promise特点对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中)、resolved(已成功)和rejected(已失败)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promis转载 2021-03-23 17:34:59 · 1276 阅读 · 1 评论 -
常用的前端JavaScript方法封装
1、输入一个值,返回其数据类型**function type(para) { return Object.prototype.toString.call(para)}2、数组去重function unique1(arr) { return [...new Set(arr)]}function unique2(arr) {&nbs转载 2021-03-23 16:43:44 · 145 阅读 · 0 评论 -
数据结构和算法
数据结构(一)之邂逅数据结构&算法数据结构(二)之数组结构数据结构(三)之栈结构数据结构(四)之队列结构数据结构(五)之链表结构数据结构(六)之双向链表数据结构(七)之集合结构数据结构(八)之字典结构数据结构(九)之哈希表理论数据结构(十)之哈希表实现数据结构(十一)之树结构数据结构(十二)之二叉搜索树数据结构(十三)之红黑树数据结构(十四)之图结构数据结构(十五)之图算法数据结构(十六)之简单排序数据结构(十七)之高级排序...转载 2021-02-07 15:01:24 · 113 阅读 · 0 评论 -
一张图搞懂vue的响应式原理
详解见 :https://www.bilibili.com/video/BV15741177Eh?p=232&spm_id_from=pageDriver原创 2021-02-04 15:45:51 · 120 阅读 · 0 评论 -
一篇搞定前端高频手撕算法题(36道)
一、冒泡排序冒泡排序的思路:遍历数组,然后将最大数沉到最底部;时间复杂度:O(N^2);空间复杂度:O(1)function BubbleSort(arr) { if(arr == null || arr.length <= 0){ return []; } var len = arr.length; for(var end = len - 1; end > 0; end--){ for(var i = 0; i <.转载 2020-12-03 17:14:42 · 474 阅读 · 0 评论 -
实现Tab页之间通信的方式
5 种方式:localstoragewebworkerweb-socketcookiepostMessagelocalstorage先看效果:test3.gif代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi转载 2020-08-26 11:42:31 · 868 阅读 · 0 评论 -
使用 RxJS 处理多个 Http 请求
阅读 Angular 6/RxJS 最新教程,请访问前端修仙之路有时候进入某个页面时,我们需要从多个 API 地址获取数据然后进行显示。管理多个异步数据请求会比较困难,但我们可以借助 Angular Http 服务和 RxJS 库提供的功能来实现上述的功能。处理多个请求有多种方式,使用串行或并行的方式。基础知识mergeMapmergeMap 操作符用于从内部的 Observable 对象中获取值,然后返回给父级流对象。合并 Observable 对象 ( jsBin)const sourc.转载 2020-08-23 21:03:36 · 2244 阅读 · 0 评论 -
详解HTTP和HTTPS协议
一、前言:先来观察这两张图,第一张访问域名http://www.12306.cn,谷歌浏览器提示不安全链接,第二张是https://kyfw.12306.cn/otn/regist/init,浏览器显示安全,为什么会这样子呢?2017年1月发布的Chrome 56浏览器开始把收集密码或信用卡数据的HTTP页面标记为“不安全”,若用户使用2017年10月推出的Chrome 62,带有输入数据的HTTP页面和所有以无痕模式浏览的HTTP页面都会被标记为“不安全”,此外,苹果公司强制所有iOS App在2.转载 2020-08-13 15:01:00 · 217 阅读 · 0 评论 -
前端面试题 -- webpack
前言随着前端的不断发展,现代前端开发的复杂度和规模越来越庞大。工程化的思想催生了很多流行框架的进程,作为现在最流行的前端构建工具--webpack,很多面试、工作场景中都会出现了它的身影。所以对于现在的前端来说,了解并能够使用webpack,无论对个人技能或者职场求职来说,都是一种有力的提升如果文章中有出现纰漏、错误之处,还请看到的小伙伴留言指正,先行谢过以下 ↓1. 对webpack的了解官方文档本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module.转载 2020-08-05 16:10:54 · 1407 阅读 · 0 评论 -
Angular的多种数据绑定方式
Angular 提供了多种数据绑定方式。绑定类型可以分为三类,按数据流的方向分为: 从数据源到视图 从视图到数据源 双向:视图到数据源到视图 绑定类型 语法 分类 插值 属性 Attribute CSS 类 样式 {{expression}}[target]="expression"bind-target="expression"原创 2020-08-05 15:04:28 · 1524 阅读 · 0 评论 -
浅谈事件冒泡与事件捕获
事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题。<div id="outer"> <p id="inner">Click me!</p></div>上面的代码当中一个div元素当中有一个p子元素,如果两个元素都有一个click的处理函数,那么我们怎么才能知道哪一个函数会首先被触发呢?为了解决这个问题微软和网景提出了两种几乎完全相反的概念。事件冒泡微软提出了名为事件冒.转载 2020-08-03 15:47:02 · 200 阅读 · 0 评论 -
JS-面向对象
了解过面向对象的同学应该都知道,面向对象三个基本特征是:封装、继承、多态,但是对于这三个词具体可能不太了解。对于前端来讲接触最多的可能就是封装与继承,对于多态来说可能就不是那么了解了。封装在说封装之先了解一下封装到底是什么?什么是封装封装:将对象运行所需的资源封装在程序对象中——基本上,是方法和数据。对象是“公布其接口”。其他附加到这些接口上的对象不需要关心对象实现的方法即可使用这个对象。这个概念就是“不要告诉我你是怎么做的,只要做就可以了。”对象可以看作是一个自我包含的原子。对象接口包括了公共的.转载 2020-08-03 14:14:43 · 1427 阅读 · 0 评论 -
Angular 常用拦截器
Http拦截器就是拦截发出的请求,对其进行统一添加额外处理,然后放行;对响应进行拦截并作出业务上的判断,决定是否给与返回。常见拦截器AuthInterceptor 自定义请求头,如 token 之类// AuthInterceptor.tsimport { Injectable } from "@angular/core";import { HttpEvent, HttpRequest, HttpHandler, HttpInterceptor } from "@angular/...转载 2020-07-29 17:49:25 · 1042 阅读 · 0 评论 -
前端面试题加更
1. 检测数组的几种方式2. ajax 请求的多种case ,使用observable 或promise ,从而衍生出二者的区别 以及observable的几种操作符,以及对应的一些使用场景3.angular双向数据绑定的底层实现原理,用原生js实现4.手写new5.冒泡 插入 快速排序6.apply和call的区别7.箭头函数和普通函数的区别8. js实现继承的几种方法9. js 创建对象的几种方式...原创 2020-07-14 16:23:54 · 184 阅读 · 0 评论 -
angular2双向绑定与变化检测
angular2双向绑定与变化检测很久很久以前,微软的公司出了一套桌面应用框架WPF,其中,有一个全新的模式:MVVM.而MVVM的核心机制,就是双向绑定.什么是双向绑定?这幅图诠释的很清晰, 框架维护了页面(View),数据(Data)之间的一致性,解放了可怜的程序猿.如今,MVVM已经是前端流行框架必不可少的一部分,web.android,ios也都有它.双向绑定,也是angular2的核心概念之一,angular2的双向绑定是这样的:data=>view : 数据绑定.模板语法 []view=转载 2020-07-14 16:21:32 · 835 阅读 · 0 评论 -
彻底弄懂 JavaScript 执行机制
这一次,彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我。不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的几行代码,我们需要知道其输出内容和顺序。因为javascript是一门单线程语言,所以我们可以得出结论:javascript是按照语句出现的顺序执行的看到这里读者要打人了:我难道不知道js是一行一行执行的?还用你说?稍安勿躁,正因为js是一行一行执行的,转载 2020-07-14 14:37:06 · 169 阅读 · 0 评论 -
大厂常见前端面试题
https://www.bilibili.com/video/BV1ek4y1r7GT文章目录day01 css31.标签语义化2.盒子水平垂直居中3.盒模型标准4.几大经典布局--左右固定、中间自适应--移动端响应式布局day 02 js1....转载 2020-07-14 13:53:49 · 989 阅读 · 0 评论 -
前端大牛博客推荐(会不断更新的)
1.JavaScript 秘密花园一个一直更新的JavaScript 的语法文档,主要会写如何去避免一些常见的错误,以及找到很难发现的 bug ,比较深入 JavaScript 的语言特性。2.冴羽的JavaScript博客JavaScript深入系列 15 篇已完结。JavaScript专题系列 20 篇已完结。ES6 系列 20 篇已完结。GitHub地址3. 廖雪峰的官方网站4.汤姆大叔的博客深入理解JavaScript系列5. 阮...原创 2020-06-02 16:46:48 · 1133 阅读 · 0 评论 -
前端常见跨域解决方案
什么是跨域?跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: 1.) 资源跳转: A链接、重定向、表单提交2.) 资源嵌入: <link>、<script>、<img>、<frame>等dom标签,还有样式中background:url()、@font-face()等文件外链3.) 脚本请求: js发起的ajax请求、do.转载 2020-06-01 15:54:49 · 351 阅读 · 0 评论 -
浅谈web前端节流和防抖
详谈js防抖和节流1. 防抖(debounce)1.1 什么是防抖1.2 应用场景1.3 实现2.节流(throttle)2.1 什么是节流2.2 应用场景2.3 实现3. 小结本文会分别介绍什么是防抖和节流,它们的应用场景,和实现方式。防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题,比如触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。但二者应对的业务需求不一样,所以实现的原理也不一样,下面具体来看看吧。1. 防抖(debou.原创 2020-05-21 18:45:02 · 903 阅读 · 0 评论 -
Web前端实现瀑布流的几种方法
前端实现瀑布流的方法很多,其中最简单的就是用CSS实现,其次是通过jQuery实现,最麻烦的就是js,那么就从最麻烦的开始吧不管用哪种方法去实现瀑布流效果,html文件里的写法都是相同的,特别是body里的写法,简直是一毛一样的。先把html里的内容粘贴如下:html文件1.js实现瀑布流效果不管是什么语言,实现瀑布流效果的基本思路都是一样的,具体的我就不说了,只聊干货,上代码。下面看下CSS里面的处理,还是直接粘贴代码如下:css文件基本的处理搞完了,下面就是最最重要的js处理了。转载 2020-05-21 15:19:56 · 1100 阅读 · 0 评论 -
TypeScript日期工具: date-fns日期工具的使用方法
安装1. isToday():判断所传入日期是否为今天2.isYesterday(): 判断是否为昨天3.isTomorrow()判断是否为明天. 用法与isToday(), isYesterday()用法相同,就不加以累述了.4.format(): 格式化日期函数5. addDays():获得第n天之后的日期;6.addHours(): 获得当前小时之后的小时(比如现在5点, 得到七点的...转载 2020-03-03 16:50:27 · 3481 阅读 · 0 评论 -
RxJS 常见操作符
Rx操作符参考网址:https://rxmarbles.com/常见创建类操作符from : 可以把数组、promise、以及Iterable 转化为observablefromEvent:可以把事件转化为observableof:接受一系列的数据,并把它们emit出去常见转换操作符map mapTopluck...原创 2020-02-19 15:25:50 · 190 阅读 · 0 评论 -
用css实现已知或者未知宽度的垂直水平居中?
1..wraper {position: relative;.box {position: absolute;top: 50%;left: 50%;width: 100px;height: 100px;margin: -50px 0 0 -50px;}}2..wraper {position: relative;.box {position: abso...原创 2020-01-16 15:55:21 · 188 阅读 · 0 评论 -
Angular: Module build failed (from ./node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js):
场景:当 ng serve 启动项目 时,会报错:ERROR in ./src/sass/styles.scss (./node_modules/_@angular-devkit_build-angular@0.11.4@@angular-devkit/build-angular/src/angularss-loader.js!./node_modules/_postcss-loader...原创 2019-12-18 11:07:12 · 4326 阅读 · 1 评论 -
@ngrx/store 7 & @ngrx/effects 7 + angular的使用
官方网址:https://v7.ngrx.io/guide/store@ngrx/store@ngrx/store是基于RxJS的状态管理库,其灵感来源于Redux。关键概念ActionsActions是NgRx中的主要模块之一。Actions表示从组件和服务中分派的唯一事件。从用户与页面的交互、通过网络请求的外部交互、与API的交互等等都可用action来描述。(可理解为...原创 2019-11-26 17:53:30 · 1296 阅读 · 0 评论 -
json-server 详解
JSON-Server 是一个 Node 模块,运行 Express 服务器,你可以指定一个 json 文件作为 api 的数据源。安装json-servernpm install -g json-server启动 json-serverjson-server可以直接把一个json文件托管成一个具备全RESTful...转载 2019-11-26 14:44:52 · 219 阅读 · 0 评论 -
JavaScript 题库
1. 输出是什么?const shape = { radius: 10, diameter() { return this.radius * 2 }, perimeter: () => 2 * Math.PI * this.radius}shape.diameter()shape.perimeter()答案: 20andNaN注意diame...原创 2019-10-31 17:54:46 · 1299 阅读 · 1 评论 -
Angular2+ 面试题集锦
1. 生命周期钩子生命周期的顺序,见下图:ngOnChanges:当组件数据绑定的输入属性发生变化是触发,该方法接收一个SimpleChanges对象,包括当前值和上一个属性值。首次调用一定发生在ngOnInit前,值得注意的是该方法仅限于对象的引用发生变化时才会触发。 ngOninit:初始化指令或组件,在angular第一次显示展示组件的绑定属性后调用,该方法只会调用一次 ng...原创 2019-10-28 18:01:25 · 8469 阅读 · 0 评论