跳至主要內容
使用VuePress搭建个人博客

安装

依赖环境

  • Node.js V18.16.0+
  • 包管理器:pnpm、yarn、npm
  • VuePress Theme Hope 主题

创建项目

pnpm create vuepress-theme-hope test
选择项目类型

CoderAn大约 2 分钟前端开发VuePress
JSDoc规范

@description 函数描述

@param {类型} 参数名 说明:指定参数名和说明来描述一个函数参数

@returns {类型} 参数名 说明:描述函数的返回值

@author 指示代码的作者

@deprecated 指示一个函数已经废弃,而且在将来的代码版本中将彻底删除。要避免使用这段代码

@see 创建一个HTML链接,指向指定类的描述

@version 指定发布版本

@requires 创建一个HTML链接,指向这个类所需的指定类

@throws @exception 描述函数可能抛出的异常的类型


CoderAn大约 1 分钟前端开发JSDoc
Swig语法

一、起航

1、API

swig.init({
    allowErrors: false,
    autoescape: true,
    cache: true,
    encoding: 'utf8',
    filters: {},
    root: '/',
    tag: {},
    extensions: {},
    tzOffset: 0
})

CoderAn大约 8 分钟前端开发Swig
TypeScript语法

基础类型

let isDone: boolean = false;
let num: number = 6
let name: string = 'zhangsan'
let notSure: any = 4 	// notSure = false  notSure='lisi'

// 数组
let arr: number[] = [1,2,3]
let arr: Array<number> = [1,2,3]

// 只读数组
let arr: ReadonlyArray<number> = [1,2,3,4]
arr[0] = 2  // error
arr.push(6) // error
arr.length  // error
let a = arr // error,赋值给新数组也不行

// 元组
let x: [string, number]
x = ['zhangsan', 28]
// x = [28, 'zhangsan'] Error

// 枚举
enum Color {Red = '#ff0000', Green = '#00ff00', Blue = '#0000ff'}
let c: Color = Color.Green

// void
function warnUser():void{
  console.log('this is a void function, no return')
}

// 对象
declare function create(o: object|null):void;
create({prop: 0})
create(null)

// 类型断言
let someValue: any = "this is a any type"
let len: number = (<string>someValue).length
let len: number = (someValue as string).length

CoderAn大约 2 分钟前端开发TypeScript
WebSocket协议的使用方法

引用自阮一峰的博客

http协议通信只能由客户端发起

websocket没有产生之前,客户端要实时获取服务器状态,只能采用轮询的方式。应用场景:聊天室

websocket诞生于2008年,2011年成为国际标准

特点:服务器可以向客户端推送消息,客户端也可以向服务器推送,实现双向通信。属于服务器推送技术的一种。

http和websocket的对比

特点:

1.建立在 TCP 协议之上,服务器端的实现比较容易。
2.与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。
3.数据格式比较轻量,性能开销小,通信高效。
4.可以发送文本,也可以发送二进制数据。
5.没有同源限制,客户端可以与任意服务器通信。
6.协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。


CoderAn大约 4 分钟前端开发WebSocket
Node压缩图片
// 全局安装依赖包
// cnpm i imagemin imagemin-jpegtran imagemin-pngquant -g
// 查看是否已经安装
// npm list -g --depth 0

import imagemin from 'imagemin'
import imageminJpegtran from 'imagemin-jpegtran'
import imageminPngquant from 'imagemin-pngquant'


(async() => {
  await imagemin(['images/*.{jpg,png}'], {
    destination: 'zipImages',
    plugins: [
      imageminJpegtran(),
      imageminPngquant({
        speed: 10,
        strip: true,
        quality: [0.3, 0.3]
      })
    ]
  })
  console.log('Images optimized')
})()



CoderAn小于 1 分钟前端开发Node
浏览器渲染机制

加载和渲染过程:

  1. 浏览器通过HTTP协议请求服务器,获取HMTL文档并开始从上到下解析,构建DOM;
  2. 在构建DOM过程中,如果遇到外联的样式声明和脚本声明,则暂停文档解析,创建新的网络连接,并开始下载样式文件和脚本文件;
  3. 样式文件下载完成后,构建CSSDOM;脚本文件下载完成后,解释并执行,然后继续解析文档构建DOM
  4. 完成文档解析后,将DOM和CSSDOM进行关联和映射,最后将视图渲染到浏览器窗口

引用知乎文章(https://juejin.cn/post/6844903545016156174)


CoderAn小于 1 分钟前端开发浏览器