- 博客(189)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 13_TypeScript 装饰器
装饰器：装饰器是一种特殊类型的声明，它能够附加到类声明、方法、属性或参数上，可以修改类的行为。通俗的讲装饰器就是一个方法，可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。常见的装饰器有：类装饰器、属性装饰器、方法装饰器、参数装饰器。装饰器的方法：普通装饰器（无法传参）、装饰器工厂（可传参）。装饰器是过去纪念中 js 最大的成就之一，也是 ES7 的标准特性之一。
2024-07-26 21:15:00
225
原创 12_TypeScript 模块 以及 模块化封装DB 库
相反，如果想使用其它模块导出的变量、函数、类、接口 等的时候，你必须要导入它们，可以使用 import 形式之一。同 java 的包，.net 的命名空间一样，TypeScript 的命名空间可以将代码包裹起来，只对外暴露需要在外部访问的对象，命名空间内的对象通过 export 关键字进行暴露，外部使用 import 引入使用。模块里面的变量、函数、类等默认是私有的，如果我们要在外部访问模块里面的数据（变量、函数、类），暴露后我们通过 import 引入模块就可以使用模块里面暴露的数据（变量、函数、类…
2024-07-25 20:45:00
559
原创 11_TypeScript 类型、接口、类、泛型综合使用
要求1：Mysql 、Mongodb 、Mssql 功能一样，都有 add update delete get 方法。功能：定义一个操作数据库的库 支持 Mysql 、Mongodb 、Mssql。1、接口：在面向对象的编程中，接口是以一种规范的定义，它定义了行为和动作的规范。解决方案：需要约束规范所以要定义接口，需要代码重用所以用到泛型。2、泛型 通俗理解：泛型就是解决 类 接口 方法 的复用。注意：约束统一的规范、以及代码重用。
2024-07-24 21:00:00
388
原创 10_TypeScript中的泛型
*泛型：**软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性，组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。在像 C# 和 Java 这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以已自己的数据类型来使用组件。泛型就是解决 类 接口 方法的复用性、以及对不特定数据类型的支持})// 把类作为参数来约束Db.add(u)动态的校验 MysqlDb 类。
2024-07-24 20:00:00
289
原创 09_TypeScript 中的接口
接口的作用：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，他只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。TypeScript 中的接口类似于 java ，同事还增加了更灵活的接口类型，包括属性、函数、可索引和类等。定义标准。
2024-07-17 21:49:29
351
原创 08_TypeScript 中的类（静态属性、静态方法、抽象类、继承多态）
run(){// 实例方法work(){//静态方法，里面没法直接调用类中的属性，只能调用static 修饰的静态属性Person.print()//调用静态方法，不需要实例化p.run()//调用实例方法，需要实例化eat(){//父类定义一个通用方法，具体吃什么不知道？让继承的子类去实现，每一个子类的表现不一样console.log("eat 的方法")eat() {console.log(this.name + '吃肉')eat() {
2024-07-16 19:15:00
296
原创 07_TypeScript 中的类（定义、继承、修饰符）
/ 定义属性，前面省略了 public 关键词// 构造函数，实例化类的时候触发的方法p.run()// 定义属性，前面省略了 public 关键词// 构造函数，实例化类的时候触发的方法。
2024-07-13 09:00:00
241
原创 06_TypeScript 中的函数
/ 函数声明// 匿名函数// 函数声明// 匿名函数return 100console.log(run2())// 调用方法返回值和参数都有类型//传参return `${//传参 function getInfo(name : string , age : number) : string {
2024-07-12 19:45:00
306
原创 05_TypeScript 中的数据类型
TypeScript 中为了使编写的代码更加规范，更有利于维护，增加了类型校验，在 TypeScript 中主要给我们提供了以下数据类型：布尔类型（boolean）数字类型（number）字符串类型（string）数组类型（array）元组类型（tuple）枚举类型（enum）任意类型（any）null 和undefinedvoid 类型never 类型。
2024-07-11 21:15:00
1242
原创 04_TypeScript 介绍、安装、开发工具
TypeScript 是由微软开发的一款开源的编程语言TypeScript 是JavaScript 的超集，遵循最新的 ES6、ES5 的规范。TypeScript 扩展了JavaScript 的语法TypeScript 更像后端 java 、C# 这样的面向对象语言，可以让 js 开发大型企业项目。谷歌也在大力支持 TypeScript 的推广，谷歌的 angular2.x+ 就是基于 TypeScript 语法。最新的 Vue 、React 也可以集成 TypeScript。
2024-07-11 20:00:00
431
原创 前端知识点
1、闭包 =》 每一个组件都有自己的私有作用域，确保各组件的数据不会互相干扰2、纯对象 =》 干扰 let obj = {}；1）能够在 vuex 中集中管理共享的数据，易于开发和后期维护2）能够高效地实现组件之间的数据共享，提高开发效率3）存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步。
2024-07-02 22:45:00
663
原创 02 _ 类型基础（1）：强类型与弱类型
在强类型语言中，当一个对象从调用函数传递到被调用函数时，其类型必须要与被调用函数中声明的类型兼容通俗定义：强类型语言不允许改变变量的数据类型，除非进行强制类型转换。
2024-07-01 19:45:00
340
原创 01 _ 重塑“类型思维”
那么，什么是 TypeScript，根据官方的定义，它是拥有类型系统的 JavaScript 的超集，可以编译成纯 JavaScript。这里，你要注意三个要点：第一，类型检查：TypeScript 会在编译代码时进行严格的静态类型检查，这意味着你可以在编码阶段发现可能存在的隐患，而不必把它们带到线上。第二，语言扩展：TypeScript 会包括来自 ECMAScript 6 和未来提案中的特性，比如异步操作和装饰器；也会从其他语言借鉴某些特性，比如接口和抽象类。
2024-06-25 22:45:00
419
原创 42_加餐六｜HTTPS：浏览器如何验证数字证书？
好了，今天的内容就介绍到这里，下面我们总结下本文的主要内容：我们先回顾了数字证书的申请流程，接着我们重点介绍了浏览器是如何验证数字证书的。首先浏览器需要CA的数字证书才能验证极客时间的数字证书，接下来我们需要验证CA证书的合法性，最简单的方法是将CA证书内置在操作系统中。不过CA机构非常多，内置每家的证书到操作系统中是不现实的，于是我们采用了一个折中的策略，将颁发证书的机构划分为两种类型，根CA(Root CAs)和中间CA(Intermediates CAs)
2024-06-23 11:45:00
642
原创 41_加餐五 _ 性能分析工具：如何分析Performance中的Main指标？
本文主要的目的是让我们学会如何分析Main指标。导航阶段；解析HTML文件阶段；生成位图阶段。在导航流程中，主要是处理响应头的数据，并执行一些老页面退出之前的清理操作。在解析HTML数据阶段，主要是解析HTML数据、解析CSS数据、执行JavaScript来生成DOM和CSSOM。最后在生成最终显示位图的阶段，主要是将生成的DOM和CSSOM合并，这包括了布局(Layout)、分层、绘制、合成等一系列操作。
2024-06-22 10:45:00
674
原创 40_加餐四｜页面性能工具：如何使用Performance？
好了，本节内容就介绍到这里，下面我来总结下本文的主要内容：本节我们首先介绍了如何去配置Performance并生成报告页，然后我们将焦点放在了如何解读报告页上。之后我们介绍了报告页面主要分为三个部分，概览面板、性能面板和详情面板。我们可以通过概览面板来定位问题的时间节点，然后再使用性能面板分析该时间节点内的性能数据。不过在分析数据时，我们需要弄明白性能面板内各项数据指标的含义，要了解这些，需要了解浏览器渲染流水线、浏览器的进程架构等知识点，因此结合这些知识点，我们接下来分析了性能面板的各项指标的含义。
2024-06-21 19:45:00
735
原创 39_加餐三｜加载阶段性能：使用Audits来优化Web性能
我们看下wiki对Web 性能的定义Web 性能描述了Web应用在浏览器上的加载和显示的速度。页面加载阶段；页面交互阶段。在本文中，我们会将焦点放到第一个阶段：页面加载阶段的性能，在下篇文章中，我们会来重点分析页面交互阶段的性能。好了，今天的内容就介绍到这里，下面我来总结下本文的主要内容：本文我们主要讨论如何优化加载阶段的Web应用的性能。要想优化Web性能，首先得需要有Web应用的性能数据。
2024-06-20 21:00:00
653
原创 38_加餐二｜任务调度：有了setTimeOut，为什么还要使用rAF？
好了，本节的内容就介绍到这里，下面我来总结下本文的主要内容：首先我们分析了基于单消息队列会引起队头阻塞的问题，为了解决队头阻塞问题，我们引入了多个不同优级的消息队列，并将紧急的任务添加到高优先级队列，不过大多数任务需要保持其相对执行顺序，如果将用户输入的消息或者合成消息添加进多个不同优先级的队列中，那么这种任务的相对执行顺序就会被打乱，所以我们又迭代了第二个版本。
2024-06-19 20:15:00
1475
原创 37_加餐一｜浏览上下文组：如何计算Chrome中渲染进程的个数？
好了，本节的内容就介绍到这里，下面我来总结下本文的主要内容：首先我们使用了两种不同的方式打开两个标签页，第一种是从A标签页中通过链接打开了B标签页，第二种是分别打开A和B标签页，这两种情况下的A和B都属于同一站点。通过Chrome的任务管理器我们发现，虽然A标签页和B标签页都属于同一站点，不过通过第一种方式打开的A标签页和B标签页会共用同一个渲染进程，而通过第二种方式打开的两个标签页却分别使用了两个不同的渲染进程。
2024-06-18 21:30:00
879
原创 36 _ HTTPS：让数据传输更安全
好了，今天就介绍到这里，下面我来总结下本文的主要内容。由于HTTP的明文传输特性，在传输过程中的每一个环节，数据都有可能被窃取或者篡改，这倒逼着我们需要引入加密机制。于是我们在HTTP协议栈的TCP和HTTP层之间插入了一个安全层，负责数据的加密和解密操作。我们使用对称加密实现了安全层，但是由于对称加密的密钥需要明文传输，所以我们又将对称加密改造成了非对称加密。
2024-06-17 23:00:00
1752
原创 35 _ 安全沙箱：页面和系统之间的隔离墙
好了，今天的内容就介绍到这里，下面我来总结下本文的主要内容。首先我们分析了单进程浏览器在系统安全方面的不足，如果浏览器存在漏洞，那么黑客就有机会通过页面对系统发起攻击。因此在设计现代浏览器的体系架构时，就考虑到这个问题了。于是，在多进程的基础之上引入了安全沙箱，有了安全沙箱，就可以将操作系统和渲染进程进行隔离，这样即便渲染进程由于漏洞被攻击，也不会影响到操作系统的。
2024-06-13 21:15:00
743
原创 34 _ CSRF攻击：陌生链接不要随便点
CSRF英文全称是Cross-site request forgery，所以又称为“跨站请求伪造”，是指黑客引诱用户打开黑客的网站，在黑客的网站中，利用用户的登录状态发起的跨站请求。简单来讲，CSRF攻击就是黑客利用了用户的登录状态，并通过第三方的站点来做一些坏事。通常当用户打开了黑客的页面后，黑客有三种方式去实施CSRF攻击。下面我们以极客时间官网为例子，来分析这三种攻击方式都是怎么实施的。#同时支持POST和Get#接口#参数##目标用户user##目标金额number。
2024-06-12 22:30:00
962
原创 33 _ 跨站脚本攻击（XSS）：为什么Cookie中有HttpOnly属性？
XSS全称是Cross Site Scripting，为了与“CSS”区分开来，故简称XSS，翻译过来就是“跨站脚本”。XSS攻击是指黑客往HTML文件中或者DOM中注入恶意脚本，从而在用户浏览页面时利用注入的恶意脚本对用户实施攻击的一种手段。最开始的时候，这种攻击是通过跨域来实现的，所以叫“跨域脚本”。但是发展到现在，往HTML文件中注入恶意代码的方式越来越多了，所以是否跨域注入脚本已经不是唯一的注入手段了，但是XSS这个名字却一直保留至今。
2024-06-11 19:45:00
1026
原创 32 _ 同源策略：为什么XMLHttpRequest不能跨域请求资源？
要了解什么是同源策略，我们得先来看看什么是同源。如果两个URL的协议、域名和端口都相同，我们就称这两个URL同源。比如下面这两个URL，它们具有相同的协议HTTPS、相同的域名time.geekbang.org，以及相同的端口443，所以我们就说这两个URL是同源的。category=1category=0浏览器默认两个相同的源之间是可以相互访问资源和操作DOM的。两个不同的源之间若想要相互访问资源或者操作DOM，那么会有一套基础的安全策略的制约，我们把这称为同源策略。
2024-06-07 19:45:00
756
原创 31｜HTTP3：甩掉TCP、TLS 的包袱，构建高效网络
好了，今天就介绍到这里，下面我来总结下本文的主要内容。我们首先分析了HTTP/2中所存在的一些问题，主要包括了TCP的队头阻塞、建立TCP连接的延时、TCP协议僵化等问题。这些问题都是TCP的内部问题，因此要解决这些问题就要优化TCP或者“另起炉灶”创造新的协议。由于优化TCP协议存在着诸多挑战，所以官方选择了创建新的QUIC协议。HTTP/3正是基于QUIC协议的，你可以把QUIC看成是集成了“TCP+HTTP/2的多路复用+TLS等功能”的一套协议。
2024-06-06 20:00:00
1238
1
原创 30｜HTTP2：如何提升网络速度？
好了，今天就介绍这里，下面我来总结下本文的主要内容。我们首先分析了影响HTTP/1.1效率的三个主要因素：TCP的慢启动、多条TCP连接竞争带宽和队头阻塞。接下来我们分析了HTTP/2是如何采用多路复用机制来解决这些问题的。多路复用是通过在协议栈中添加二进制分帧层来实现的，有了二进制分帧层还能够实现请求的优先级、服务器推送、头部压缩等特性，从而大大提升了文件传输效率。HTTP/2协议规范于2015年5月正式发布，在那之后，该协议已在互联网和万维网上得到了广泛的实现和部署。
2024-06-05 21:15:00
908
原创 29 _ HTTP1：HTTP性能优化
好了，今天就介绍到这里，下面我来总结下本文的主要内容。本文我们重点强调了HTTP是浏览器和服务器的通信语言，然后我们从需求演变的角度追溯了HTTP的发展史，在诞生之初的HTTP/0.9因为需求简单，所以和服务器之间的通信过程也相对简单。由于万维网的快速崛起，带来了大量新的需求，其中最核心的一个就是需要支持多种类型的文件下载， 为此HTTP/1.0中引入了请求头和响应头。在支持多种类型文件下载的基础之上，HTTP/1.0还提供了Cache机制、用户代理、状态码等一些基础信息。
2024-06-04 20:30:00
1679
原创 28 _ WebComponent：像搭积木一样构建Web应用
好了，今天就讲到这里，下面我来总结下本文的主要内容。首先，我们介绍了组件化开发是程序员的刚需，所谓组件化就是功能模块要实现高内聚、低耦合的特性。不过由于DOM和CSSOM都是全局的，所以它们是影响了前端组件化的主要元素。基于这个原因，就出现WebComponent，它包含自定义元素、影子DOM和HTML模板三种技术，使得开发者可以隔离CSS和DOM。在此基础上，我们还重点介绍了影子DOM到底是怎么实现的。
2024-06-03 19:45:00
1035
原创 27 _ 渐进式网页应用（PWA）：它究竟解决了Web应用的哪些问题？
我们先来看看 Service Worker是怎么解决离线存储和消息推送的问题。其实在Service Worker之前，WHATWG小组就推出过用App Cache标准来缓存页面，不过在使用过程中App Cache所暴露的问题比较多，遭到多方吐槽，所以这个标准最终也只能被废弃了，可见一个成功的标准是需要经历实践考量的。所以在2014年的时候，标准委员会就提出了Service Worker的概念，它的主要思想是在页面和网络之间增加一个拦截器，用来缓存和拦截请求。
2024-06-02 18:30:00
874
原创 26 _ 虚拟DOM：虚拟DOM和实际的DOM有何不同？
在谈论什么是虚拟DOM之前，我们先来看看虚拟DOM到底要解决哪些事情。将页面改变的内容应用到虚拟DOM上，而不是直接应用到DOM上。变化被应用到虚拟DOM上时，虚拟DOM并不急着去渲染页面，而仅仅是调整虚拟DOM的内部状态，这样操作虚拟DOM的代价就变得非常轻了。在虚拟DOM收集到足够的改变时，再把这些变化一次性应用到真实的DOM上。基于以上三点，我们再来看看什么是虚拟DOM。为了直观理解，你可以参考下图：虚拟DOM执行流程。
2024-06-02 11:15:00
1250
原创 25 _ 页面性能：如何系统地优化页面？
好了，今天就介绍到这里，下面我来总结下本文的主要内容。我们主要讲解了如何系统优化加载阶段和交互阶段的页面。在加载阶段，核心的优化原则是：优化关键资源的加载速度，减少关键资源的个数，降低关键资源的RTT次数。在交互阶段，核心的优化原则是：尽量减少一帧的生成时间。可以通过减少单次JavaScript的执行时间、避免强制同步布局、避免布局抖动、尽量采用CSS的合成动画、避免频繁的垃圾回收等方式来减少一帧生成的时长。
2024-06-01 09:15:00
737
原创 24 _ 分层和合成机制：为什么CSS动画比JavaScript高效？
好了，今天就介绍到这里，下面我来总结下今天的内容。首先我们介绍了显示器显示图像的原理，以及帧和帧率的概念，然后基于帧和帧率我们又介绍渲染引擎是如何实现一帧图像的。通常渲染引擎生成一帧图像有三种方式：重排、重绘和合成。其中重排和重绘操作都是在渲染进程的主线程上执行的，比较耗时；而合成操作是在渲染进程的合成线程上执行的，执行速度快，且不占用主线程。然后我们重点介绍了浏览器是怎么实现合成的，其技术细节主要可以使用三个词来概括：分层、分块和合成。
2024-05-31 21:30:00
889
原创 23 _ 渲染流水线：CSS如何影响首次加载时的白屏时间？
好了，今天就介绍到这里，下面我来总结下今天的内容。我们首先介绍了CSS在渲染流水线中的位置，以及CSS是如何影响到渲染流程的；接下来我们通过渲染流水线分析了从发出请求到页面首次绘制的三个阶段；最后重点介绍了第二个白屏阶段以及优化该阶段的一些策略。通过今天的内容我们可以知道虽然JavaScript和CSS给我们带来了极大的便利，不过也对页面的渲染带来了很多的限制，所以我们要关注资源加载速度，需要小心翼翼地处理各种资源之间的关联关系。
2024-05-31 08:15:00
560
原创 22 _ DOM树：JavaScript是如何影响DOM树构建的？
从网络传给渲染引擎的HTML文件字节流是无法直接被渲染引擎理解的，所以要将其转化为渲染引擎能够理解的内部结构，这个结构就是DOM。DOM提供了对HTML文档结构化的表述。在渲染引擎中，DOM有三个层面的作用。从页面的视角来看，DOM是生成页面的基础数据结构。从JavaScript脚本视角来看，DOM提供给JavaScript脚本操作的接口，通过这套接口，JavaScript可以对DOM结构进行访问，从而改变文档的结构、样式和内容。
2024-05-30 20:00:00
687
原创 21 _ Chrome开发者工具：利用网络面板做性能分析
好了，今天就介绍到这里了，下面我来总结下今天的内容。首先我们简单介绍了Chrome开发者工具10个基础的面板信息；然后重点剖析了网络面板，再结合之前介绍的网络请求流程来重点分析了网络面板中时间线的各个指标的含义；最后我们还简要分析了时间线中各项指标出现异常的可能原因，并给出了一些优化方案。其实通过今天的分析，我们可以得出这样一个结论：如果你要去做一些实践性的项目优化，理解其背后的理论至关重要。因为理论就是一条“线”，它会把各种实践的内容“串”在一起，然后你可以围绕着这条“线”来排查问题。
2024-05-28 22:45:00
687
原创 20 _ async await：使用同步的方式去写异步代码
好了，今天就介绍到这里，下面我来总结下今天的主要内容。Promise的编程模型依然充斥着大量的then方法，虽然解决了回调地狱的问题，但是在语义方面依然存在缺陷，代码中充斥着大量的then函数，这就是async/await出现的原因。使用async/await可以实现用同步代码的风格来编写异步代码，这是因为async/await的基础技术使用了生成器和Promise，生成器是协程的实现，利用生成器能实现生成器函数的暂停和恢复。
2024-05-28 19:00:00
1304
原创 19 _ Promise：使用Promise，告别回调函数
好了，今天我们就聊到这里，下面我来总结下今天所讲的内容。首先，我们回顾了 Web 页面是单线程架构模型，这种模型决定了我们编写代码的形式——异步编程。基于异步编程模型写出来的代码会把一些关键的逻辑点打乱，所以这种风格的代码不符合人的线性思维方式。接下来我们试着把一些不必要的回调接口封装起来，简单封装取得了一定的效果，不过，在稍微复制点的场景下依然存在着回调地狱的问题。多层嵌套的问题；每种任务的处理结果存在两种可能性（成功或失败），那么需要在每种任务执行结束后分别处理这两种可能性。
2024-05-27 20:45:00
542
原创 18 _ 宏任务和微任务：不是所有任务都是一个待遇
好了，今天就介绍到这里，下面我来总结下今天的内容。首先我们回顾了宏任务，然后在宏任务的基础之上，我们分析了异步回调函数的两种形式，其中最后一种回调的方式就是通过微任务来实现的。接下来我们详细分析了浏览器是如何实现微任务的，包括微任务队列、检查点等概念。最后我们介绍了监听DOM变化技术方案的演化史，从轮询到Mutation Event再到最新使用的MutationObserver。MutationObserver方案的核心就是采用了微任务机制，有效地权衡了实时性和执行效率的问题。
2024-05-26 11:15:00
820
原创 17 _ WebAPI：XMLHttpRequest是怎么实现的？
好了，今天我们就讲到这里，下面我来总结下今天的内容。首先我们介绍了回调函数和系统调用栈；接下来我们站在循环系统的视角，分析了XMLHttpRequest是怎么工作的；最后又说明了由于一些安全因素的限制，在使用XMLHttpRequest的过程中会遇到跨域问题和混合内容的问题。本篇文章跨度比较大，不是单纯地讲一个问题，而是将回调类型、循环系统、网络请求和安全问题“串联”起来了。对比上一篇文章。
2024-05-25 15:15:00
562
flutter使用webrtc技术实现共享桌面，视频
2021-02-22
flutter_practies.zip
2021-01-04
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人