- 博客(209)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 7、贝塞尔曲线动画并绘制动画轨迹效果
一个小球在不停的运动，然后根据小球运动轨迹在画布上绘制轨迹。html + css 部分。js 部分（绘制动画轨迹）
2025-08-09 09:45:00
327
原创 3、环绕照片墙效果
使用 scss 语法进行书写，vscode 中使用。给 n 张图片，做环绕的效果。鼠标左右移动开始变化可视照片。// 监听鼠标事件进行左移右移。// 循环旋转图片。
2025-07-29 12:45:00
225
原创 webpack5基础（上篇）
开发模式顾名思义就是我们开发代码时使用的模式。这个模式下我们主要做两件事情：1、编译代码，使浏览器能够识别运行开发时我们有样式资源、字体图标、图片压缩、html资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源2、代码质量检查，树立代码规范提前检查代码的一些隐患，让代码运行时能更加健壮提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 webpack 解析样式资源。
2024-12-30 21:45:00
1195
原创 10_React router6
点击此处可以跳转 5.x版本1、react-router：路由的核心库，提供了很多的：组件、钩子2、react-router-dom：包含 react-router 所有内容，并添加一些专门用于 DOM 的组件，例如等3、react-router-native： 包括 react-router 所有内容，并添加一些专门用于 ReactNative 的 API，例如等。
2024-09-25 20:45:00
1141
原创 08_React redux
3、redux 的 reducer 函数必须是一个纯函数（不能写 unshift 等方法添加数据，如果 preState 被改写 reducer 就不纯了，页面也不会更新）！3、重点：Person 的 reducer 和 Count 的 reducer 要使用 combineReducers 进行合并，合并后的总状态时一个对象！5、备注：容器给 UI 传递：状态（这里的状态是 redux 中的状态）、操作状态的方法，均通过 props 传递。
2024-09-14 22:15:00
1365
原创 07_React 路由
1、一个路由就是一个映射关系（key：value）2、key 为路径，value 可能是 function 或 component1、默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序一致）2、开启严格匹配3、严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由。
2024-09-06 21:00:00
1287
1
原创 06_React ajax
1、React 本身只关注于界面，并不包含发送 ajax 请求的代码2、前端应用需要通过 ajax 请求于后台进行交互（json 数据）3、React 应用中需要集成第三方 ajax 库（或自己封装）1、jQuery：比较重，如果需要另外引入不建议使用2、axios：轻量级，建议使用1）封装 XmlHttpRequest 对象的 ajax2）promise 风格3）可以用在浏览器端和 node 服务器端FeHelper（前端助手）：JSON 自动格式化，手动格式，支持排序、解码、下载等等“pro
2024-09-03 19:00:00
1340
原创 05_React应用（基于React脚手架）
setupTests.js ----- 应用的整体测试，单元测试，组件测试（jest-dom 支持）App.test.js ------- 用于给 APP 做测试,基本不用，直接运行看效果即可。App.css ----------- App 组件的样式。App.js ------------ App 组件。logo192.png ------ logo 图。robots.txt ------- 爬虫协议文件。index.js ---------- 入口文件。工程化: 代码编写完成以后一系列都可以自动运行。
2024-08-29 17:58:30
932
原创 04_DOM的diffing算法
{id: 1, name:'小刘', age: 24}{id: 2, name:'小陈', age: 25}{id: 3, name:'小王', age: 21}{id: 1, name:'小刘', age: 24}{id: 2, name:'小陈', age: 25}{id: 1, name:'小刘', age: 24}{id: 2, name:'小陈', age: 25}{id: 1, name:'小刘', age: 24}{id: 2, name:'小陈', age: 25}
2024-08-25 14:56:06
727
原创 03_React 收集表单数据和 组件生命周期
2、理解：包含表单的组件分类2.1 受控组件页面中所有的输入类的节点，随着输入将数据维护到状态中，使用的时候直接从状态中取，就是受控组件受控组件的优势在于 可以减少 ref 的使用2.2 非受控组件页面中所有的输入类的节点，现用现取就是 非受控组件二、高阶函数_函数柯里化1、复习–对象相关的知识2、高阶函数如果一个函数符合下面 2 个规范中任何一个，那么该函数就是高阶函数1）若 A 函数，接收的参数是一个函数，那么 A 就可以称为高阶函数2）若 A 函数，调用的返回值依然是一个函数，
2024-08-24 16:31:18
823
原创 02_React面向组件编程--基本使用与理解、组件实例的三大核心属性与事件处理
/**_ 执行了 ReactDOM.render(, … 之后，发生了什么？_ 1.React 解析组件标签，找到了 MyComponent 组件_ 2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟 DOM 转为真实 DOM，随后呈现在页面中_/2、类的复习总结：1、类中的构造器不是必须要写的，要对实例进行一些初始化的操作，如添加指定属性时才写2、如果 A 类继承了 B 类且 A 类中写了构造器，那么 A 类构造器中 super 时必须要调用的3、类中所定义的方法，都是放在了类的
2024-08-20 21:30:00
1953
原创 01_React简介、基础入门
用于构建用户界面的 JavaScript 库界面–》 视图只关注视图层例子：使用原有的知识去展示数据的步骤1）发送请求获取数据2）处理数据（过滤、整理格式等）3）操作 DOM 呈现页面 （React 只关注这一步骤）React 是一个将数据渲染为 HTML 视图的开源 Javascript 库。
2024-08-19 20:00:00
1583
原创 06_Electron项目：实现一个类似 EditPlus 的简易记事本代码编辑器
使用 Electron Html Css Js Nodejs 实现一个类似于 EditPlus 的记事本编辑器的小小编辑器，此项目的主要目的是让大家巩固前面学的知识点以及灵活运用 Electron 中的模板。nodemon 是一个命令行工具，用来辅助项目开发。在 Nodejs 中，可以在每次修改文件后重新执行该文件。
2024-08-10 10:00:00
1548
原创 05_ Electron 自定义菜单、主进程与渲染进程通信
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
2024-08-09 21:30:00
1011
原创 04_Electron 模块介绍
官方文档： https://www.electronjs.org/zh/docs/latest/api/appremote 模块提供了一种在渲染进程（网页）和主进程之间进行进程间通讯（IPC）的简便途径。Electron 中，与 GUI 相关的模块（如 dialog， menu 等）只存在于主进程，而不在渲染进程中。为了能从渲染进程中使用它们，需要用 ipc 模块来给 主进程发送进程间消息。使用 remote 模块，可以调用主进程对象的方法，而无需显式地发送进程间消息，这类似于 java 的 RMI。
2024-08-09 19:30:00
944
原创 03_Electron 主进程和渲染进程、点击（拖放）打开文件功能
在页面运行其他脚本之前预先加载指定的脚本， 无论页面是否集成 Node，此脚本都可以访问 所有 Node API 脚本路径为文件的绝对路径。： 进程（process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配的调度的基本单位，是操作系统结构的基础。2、如果不使用 preload 加载的 js ，Electron5.x 之后没法在渲染进程中直接使用 nodejs，在主进程 中实例化 BrowserWindow 创建的 Web 页面被称为渲染进程，一个 Electron 应用。
2024-08-08 22:45:00
1648
原创 02_快速启动 Demo 创建 Electron 项目、electron-forge 搭建一个 electron 项目、手动创建electron项目
electron-forge 相当于 electron 的一个脚手架，可以让我们更方便的创建、运行、打包 electron 项目。2、在 electrondemo 目录下面新建三个文件： index.html 、main.js、package.json。Eslint 最初是由 Nicholas C.Zakas 于 2013年6月创建的开源项目。3、index.html 里面用 css 进行布局（以前怎么写现在还怎么写）1、新建一个项目目录，例如：electrondemo。创建成功后的文件夹链接，
2024-08-08 22:00:00
916
原创 01_Electron 跨平台桌面应用开发介绍
Electron 是由 Github 开发的一个跨平台的桌面应用开发框架，可以让我们用 html、css、js 的技术开发桌面上可以安装的软件。使用传统语言开发桌面应用，开发成本高。github 的 atom 编辑器，vscode都是使用 Electron 开发的。1、公司有开发桌面应用的需求。（Electron 开发速度快、开发周期短、跨平台、维护成本低）2、前端开发者想提升自己的技能，有必要学习一下 Electron， 大家都会 Electron， 所以我们也得学。
2024-08-07 19:00:00
571
原创 13_TypeScript 装饰器
装饰器：装饰器是一种特殊类型的声明，它能够附加到类声明、方法、属性或参数上，可以修改类的行为。通俗的讲装饰器就是一个方法，可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。常见的装饰器有：类装饰器、属性装饰器、方法装饰器、参数装饰器。装饰器的方法：普通装饰器（无法传参）、装饰器工厂（可传参）。装饰器是过去纪念中 js 最大的成就之一，也是 ES7 的标准特性之一。
2024-07-26 21:15:00
442
原创 12_TypeScript 模块 以及 模块化封装DB 库
相反，如果想使用其它模块导出的变量、函数、类、接口 等的时候，你必须要导入它们，可以使用 import 形式之一。同 java 的包，.net 的命名空间一样，TypeScript 的命名空间可以将代码包裹起来，只对外暴露需要在外部访问的对象，命名空间内的对象通过 export 关键字进行暴露，外部使用 import 引入使用。模块里面的变量、函数、类等默认是私有的，如果我们要在外部访问模块里面的数据（变量、函数、类），暴露后我们通过 import 引入模块就可以使用模块里面暴露的数据（变量、函数、类…
2024-07-25 20:45:00
1069
原创 11_TypeScript 类型、接口、类、泛型综合使用
要求1：Mysql 、Mongodb 、Mssql 功能一样，都有 add update delete get 方法。功能：定义一个操作数据库的库 支持 Mysql 、Mongodb 、Mssql。1、接口：在面向对象的编程中，接口是以一种规范的定义，它定义了行为和动作的规范。解决方案：需要约束规范所以要定义接口，需要代码重用所以用到泛型。2、泛型 通俗理解：泛型就是解决 类 接口 方法 的复用。注意：约束统一的规范、以及代码重用。
2024-07-24 21:00:00
496
原创 10_TypeScript中的泛型
*泛型：**软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性，组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。在像 C# 和 Java 这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以已自己的数据类型来使用组件。泛型就是解决 类 接口 方法的复用性、以及对不特定数据类型的支持})// 把类作为参数来约束Db.add(u)动态的校验 MysqlDb 类。
2024-07-24 20:00:00
423
原创 09_TypeScript 中的接口
接口的作用：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，他只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。TypeScript 中的接口类似于 java ，同事还增加了更灵活的接口类型，包括属性、函数、可索引和类等。定义标准。
2024-07-17 21:49:29
469
原创 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
489
原创 07_TypeScript 中的类（定义、继承、修饰符）
/ 定义属性，前面省略了 public 关键词// 构造函数，实例化类的时候触发的方法p.run()// 定义属性，前面省略了 public 关键词// 构造函数，实例化类的时候触发的方法。
2024-07-13 09:00:00
382
原创 06_TypeScript 中的函数
/ 函数声明// 匿名函数// 函数声明// 匿名函数return 100console.log(run2())// 调用方法返回值和参数都有类型//传参return `${//传参 function getInfo(name : string , age : number) : string {
2024-07-12 19:45:00
368
原创 05_TypeScript 中的数据类型
TypeScript 中为了使编写的代码更加规范，更有利于维护，增加了类型校验，在 TypeScript 中主要给我们提供了以下数据类型：布尔类型（boolean）数字类型（number）字符串类型（string）数组类型（array）元组类型（tuple）枚举类型（enum）任意类型（any）null 和undefinedvoid 类型never 类型。
2024-07-11 21:15:00
1345
原创 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
591
原创 02 _ 类型基础（1）：强类型与弱类型
在强类型语言中，当一个对象从调用函数传递到被调用函数时，其类型必须要与被调用函数中声明的类型兼容通俗定义：强类型语言不允许改变变量的数据类型，除非进行强制类型转换。
2024-07-01 19:45:00
395
原创 01 _ 重塑“类型思维”
那么，什么是 TypeScript，根据官方的定义，它是拥有类型系统的 JavaScript 的超集，可以编译成纯 JavaScript。这里，你要注意三个要点：第一，类型检查：TypeScript 会在编译代码时进行严格的静态类型检查，这意味着你可以在编码阶段发现可能存在的隐患，而不必把它们带到线上。第二，语言扩展：TypeScript 会包括来自 ECMAScript 6 和未来提案中的特性，比如异步操作和装饰器；也会从其他语言借鉴某些特性，比如接口和抽象类。
2024-06-25 22:45:00
477
原创 42_加餐六｜HTTPS：浏览器如何验证数字证书？
好了，今天的内容就介绍到这里，下面我们总结下本文的主要内容：我们先回顾了数字证书的申请流程，接着我们重点介绍了浏览器是如何验证数字证书的。首先浏览器需要CA的数字证书才能验证极客时间的数字证书，接下来我们需要验证CA证书的合法性，最简单的方法是将CA证书内置在操作系统中。不过CA机构非常多，内置每家的证书到操作系统中是不现实的，于是我们采用了一个折中的策略，将颁发证书的机构划分为两种类型，根CA(Root CAs)和中间CA(Intermediates CAs)
2024-06-23 11:45:00
1383
原创 41_加餐五 _ 性能分析工具：如何分析Performance中的Main指标？
本文主要的目的是让我们学会如何分析Main指标。导航阶段；解析HTML文件阶段；生成位图阶段。在导航流程中，主要是处理响应头的数据，并执行一些老页面退出之前的清理操作。在解析HTML数据阶段，主要是解析HTML数据、解析CSS数据、执行JavaScript来生成DOM和CSSOM。最后在生成最终显示位图的阶段，主要是将生成的DOM和CSSOM合并，这包括了布局(Layout)、分层、绘制、合成等一系列操作。
2024-06-22 10:45:00
790
原创 40_加餐四｜页面性能工具：如何使用Performance？
好了，本节内容就介绍到这里，下面我来总结下本文的主要内容：本节我们首先介绍了如何去配置Performance并生成报告页，然后我们将焦点放在了如何解读报告页上。之后我们介绍了报告页面主要分为三个部分，概览面板、性能面板和详情面板。我们可以通过概览面板来定位问题的时间节点，然后再使用性能面板分析该时间节点内的性能数据。不过在分析数据时，我们需要弄明白性能面板内各项数据指标的含义，要了解这些，需要了解浏览器渲染流水线、浏览器的进程架构等知识点，因此结合这些知识点，我们接下来分析了性能面板的各项指标的含义。
2024-06-21 19:45:00
944
手动创建 electron 项目资源包
2024-08-08
flutter使用webrtc技术实现共享桌面，视频
2021-02-22
flutter_practies.zip
2021-01-04
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人