更好的 CSS 毛玻璃效果做法

一般的 CSS 毛玻璃做法 之前看到一些网站很喜欢使用毛玻璃效果的、固定定位的顶栏。一般的做法是使用 backdrop-filter: blur() 属性来实现元素背景模糊: .top { position: fixed; top: 0px; backdrop-filter: blur(12px); } 但是我在滚动网页的时候,觉得这种显示效果并不好。会出现模糊后的色团在滚动时互相干扰,产生一种闪烁、抖动的现象。 达到更好的毛玻璃效果 今天在逛 Twitter 的时......

TypeScript 学习 面相对象的相关特性

TypeScript 中的面相对象 Object-Oriented 面向对象的语言,其必然有三大特点:封装、继承、多态。而 JavaScript 是 Object-Based 基于对象的语言,并不完全算是面向对象的,特别是 ES6 之前,其缺乏完善的继承和多态特性。 而 TypeScript 就是标准的面相对象的语言了。 class 类 class Person { // 定义实例属性和方法 name: string = 'Leon' sayHi() { console.log('Hi~') } // 定义类属性和类方法(静态属性和静态方法) static......

回顾 手写一个 AJAX

乌龙 看面经的时候,遇到一道题是要求手写一个 AJAX 实现。本来是非常简单基础的内容,但我当时把 AJAX 和 XMLHttpRequest() 两个概念搞混了,理解成要手写实现一个 XMLHttpRequest(),着实有些摸不着头脑了。不过既然遇到了,还是回顾一下最基础的 AJAX 实现吧。 重新认识 AJAX AJAX 是 Asynchronous JavaScript And XML 的简称。允许我们在不刷新整个......

TypeScript 学习 编译选项

使用 tsconfig.json 配置编译选项 使用 tsc 进行 TS 代码的编译时,可以在项目根目录下使用 tsconfig.json 来配置编译选项。 常用配置项: { "include": [ "./src/**/*" ], "exclude": [ "./src/temp/**/*" ], "compilerOptions": { // 目标 JS 版本 "target": "es2015", // 要使用的模块化规范 "module": "es2015", // 编译产物所在目录 "outDir": "./dist", // 是否编译 JS 文件 "allowJs": true, // 是否检查 JS 文件的语法 "checkJs": true, // 是否移除注释 "removeComments": true, // 当有错误则不生成编译产物 "noEmmitOnError": true, // 编译......

TypeScript 学习 类型声明

类型声明 通过类型声明可以指定 TS 中变量的类型,包括函数参数的类型。指定类型后,当为变量赋值时,TS 编译器会自动检查值是否符合类型声明,不符合则会报错: let a: number let b: boolean = false a = 12 a = 'hello' // 报错 b = 'hello' // 报错 如果变量的声明和赋值操作是同时完成的,则 TS 可以自动进行变量类型检测,不需要手动进行类型......

服务端身份认证 Session 和 JWT

身份认证 Authentication,即鉴权。由于 HTTP 协议是无状态的,即每次 HTTP 请求都是独立的,服务器不会主动保留每次 HTTP 请求的状态,所以每次请求时都需要身份认证。 对于服务端渲染,一般使用 session 认证机制;对于前后端分离,一般使用 JWT 认证机制。 在 Express 中使用 Session 认证 npm 安装 express-session 包 -> 导入 -> app.use() 注册中间件并配......

MySQL 数据库的基本使用

数据库的一些基本概念 分类上有: 关系型(SQL)数据库:MySQL、Oracle、SQL Server 等 非关系型(NoSQL)数据库:MongoDB 等 关系型(SQL)数据库的数据组织结构有:数据库 database、数据表 table、数据行 row、字段 field。 同时,SQL 也是一门数据库编程语......

Node.js 学习 Express 框架

初步使用 Express const express = require('express') // 创建 Web 服务实例 const app = express() // 处理 GET 请求 app.get('/', (req, res) => { const query = req.query res.send(query) // 将 URL 中携带的 query 参数返回 }) // 处理 POST 请求 app.post('/postData', (req, res) => { res.send({ name: 'Leon', age: 18 }) // 响应一个 JOSN 对象 }) // 启动服务,监听 8081 端口 app.listen(8081, () => { console.log('server on http://127.0.0.1:8081') }) 托管静态资源 const express = require('express') const app = express() // 将 file 目录中的文件挂载出去,路径中不含目录名 app.use(express.static('./file')) // 将 static 目录中的文......

Node.js 学习 内置模块

简介 Node.js是JavaScript的后端运行环境(runtime),类比浏览器是JavaScript的前端运行环境。Node.js使用的是Chrome的V8解析引擎,除了解析引擎外,还包含了一些内置的API:fs模块、path模块、http模块、etc…… // Node.js 是用 C++ 写的,V......