前端 on 杨刚的个人网站

1、TypeScript

Tue, 27 May 2025 00:00:00 +0000

什么是TypeScript
#

TypeScript（简称：TS）是 JavaScript 的超集（JS 有的 TS 都有）。

1、入门

Mon, 28 Apr 2025 00:00:00 +0000

Electron
#

Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。

1、EventEmitter

Sun, 27 Apr 2025 00:00:00 +0000

EventEmitter
#

在 Node.js 中，事件驱动编程主要通过 EventEmitter 类来实现。

1、NodeJS

Sun, 27 Apr 2025 00:00:00 +0000

什么是NodeJS
#

简单的说 Node.js 就是运行在服务端的 JavaScript。

1、异常处理

Sun, 27 Apr 2025 00:00:00 +0000

try-catch-finally
#

try 语句允许我们定义在执行时进行错误测试的代码块。

1、JavaScript

Fri, 25 Apr 2025 00:00:00 +0000

介绍
#

JavaScript是世界上最流行的脚本语言，因为你在电脑、手机、平板上浏览的所有的网页，以及无数基于HTML5的手机App，交互逻辑都是由JavaScript驱动的

1、uni-app

Mon, 17 Mar 2025 00:00:00 +0000

uni-app
#

uni-app 是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

1、Vue

Fri, 19 Jan 2024 00:00:00 +0000

Vue
#

Vue读成view ，而不是V U E
Vue是个前端框架，是尤雨溪（中国人）的个人项目
这个框架主要关注点： View和 Model如何快速绑定

Vue的特点
#

非常简单，Easy，好学
遵循一种新的WEB架构模式： MVVM
它可以开发单页面的应用程序（每个单独的页面，就是一个独立的应用程序）
渐进式（从核心技术开发，一层一层的添加内容）与兼容性（允许兼容其他框架或其他技术）
视图组件化
虚拟 DOM（Virtual DOM）

MVVM架构
#

之前，我们学过MVC（Model - View - Controller），但是这套东西是后端框架提出来的，不适合前端
他们提出了自己的前端框架模式：MVVM（Model - View - ViewModel）
Model依旧是数据，View依旧是视图
ViewModel视图模型绑定对象（监听数据的变化，并实时做到与View进行同步）

1、Bootstrap

Sat, 11 Nov 2023 00:00:00 +0000

优点
#

具有丰富的css样式和js插件，可以使我们做的页面更加丰富，效果绚丽多彩

2、Buffer

Tue, 27 May 2025 00:00:00 +0000

Buffer简介
#

JavaScript 语言自身只有字符串数据类型，没有二进制数据类型。

2、NPM

Tue, 06 May 2025 00:00:00 +0000

什么是NPM
#

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

2、集成Vue

Mon, 28 Apr 2025 00:00:00 +0000

使用步骤
#

搭建项目
#

1、安装VueCli，搭建Vue项目
#

找个喜欢的目录，执行以下命令，创建vue项目：

2、strict

Fri, 25 Apr 2025 00:00:00 +0000

use strict
#

"use strict"指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。

2、变量和运算符

Fri, 25 Apr 2025 00:00:00 +0000

变量
#

声明格式：var name = value;

2、页面

Mon, 17 Mar 2025 00:00:00 +0000

uni-app项目中，一个页面就是一个符合Vue SFC规范的 vue 文件。

2、JQuery

Thu, 02 Jan 2025 00:00:00 +0000

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

JQuery的版本说明
#

1.x：兼容ie678，使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)

2、数据类型

Tue, 03 Sep 2024 00:00:00 +0000

TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统。

2、API

Fri, 19 Jan 2024 00:00:00 +0000

全局配置
#

Vue.config 是一个对象，包含 Vue 的全局配置。

3、Stream

Sun, 27 Apr 2025 00:00:00 +0000

简介
#

Node.js 的 Stream 是一种处理流式数据的抽象接口，广泛应用于文件操作、网络通信等场景。

3、模块化

Sun, 27 Apr 2025 00:00:00 +0000

什么是模块
#

将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信
在node中，一个js文件就是一个模块，每个模块单独运行在一个函数中，所以一个js文件中的变量和函数的作用域不是全局的，如果需要在其他js中使用，那么需要使用引入
node中模块分为两大类：核心模块（node提供或npm下载的，例如fs）；文件模块（自己写的模块）

解决的问题
#

请求过多
- 首先我们要依赖多个模块，那样就会发送多个请求，导致请求过多
依赖模糊
- 我们不知道他们的具体依赖关系是什么，也就是说很容易因为不了解他们之间的依赖关系导致加载先后顺序出错。
难以维护
- 以上两种原因就导致了很难维护，很可能出现牵一发而动全身的情况导致项目出现严重的问题。模块化固然有多个好处，然而一个页面需要引入多个js文件，就会出现以上这些问题。

CommonJS和ES6Modules
#

CommonJS和 ES6 模块系统是 JavaScript 中两种主要的模块处理方式。它们在语法、加载方式和使用场景上都有显著的区别。

3、Promise

Fri, 25 Apr 2025 00:00:00 +0000

Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。

由于 Promise 是 ES6 新增加的，所以一些旧的浏览器并不支持，苹果的 Safari 10 和 Windows 的 Edge 14 版本以上浏览器才开始支持 ES6 特性。

3、流程控制

Fri, 25 Apr 2025 00:00:00 +0000

条件分支语句
#

if-else
#

if (condition1){
	//当条件 1 为 true 时执行的代码
}
else if (condition2){
	//当条件 2 为 true 时执行的代码
}
else{
	//当条件 1 和 条件 2 都不为 true 时执行的代码
}

在 JavaScript 中，可以使用 if 来判断undefined、null、 0、NaN或空字符串""，比如if data{}，如果 data 为undefined、null、 0、NaN或空字符串""，那么这个表达式就是不成立的。

3、编译器

Mon, 17 Mar 2025 00:00:00 +0000

uni-app能实现一套代码、多端运行，核心是通过编译器 + 运行时实现的：

3、AJAX

Fri, 03 Jan 2025 00:00:00 +0000

什么是AJAX技术
#

Asynchronous Javascript And XML，（异步JavaScript和XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术，是一个前端技术

3、类型声明文件

Tue, 03 Sep 2024 00:00:00 +0000

类型声明文件：用来为已存在的 JS 库提供类型信息。

这样在 TS 项目中使用这些库时，就像用 TS 一样，都会有代码提示、类型保护等机制了。

3、HTML

Tue, 27 Aug 2024 00:00:00 +0000

web系统架构体系
#

B/S（Browser/Server）：浏览器实现
- 优点：
  - 规范、使用方便、本身实现成本低
  - 容易升级、便于维护
- 缺点：
  - 没有网络，无法使用
  - 保存数据量有限，和服务器交互频率高、耗费流量
  - 安全性差一点
C/S（Client/Server）：客户端实现
- 优点：
  - 可以在无网络环境下使用
  - 和服务器交互相对频率低、省流量
  - 安全性高一点
- 缺点：
  - 需要安装客户端
  - 升级麻烦，维护成本高
  - 开发成本高

什么是HTML
#

html是超文本标记语言（Hyper Text Markup Language），是一种使用标记标签来描述网页的语言。

3、组件

Fri, 19 Jan 2024 00:00:00 +0000

组件
#

组件就是实现应用局部功能的代码和资源的集合

4、webpack

Sun, 27 Apr 2025 00:00:00 +0000

Webpack
#

从本质上，Webpack是现代JavaScript应用的静态模块打包工具

4、对象和类

Sun, 27 Apr 2025 00:00:00 +0000

函数构造对象
#

使用函数构造对象通常是通过构造函数的方式。构造函数是一种特殊的函数，用于创建具有特定属性和方法的对象。

4、全局对象

Sun, 27 Apr 2025 00:00:00 +0000

global
#

JavaScript 中有一个特殊的对象，称为全局对象（Global Object），它及其所有属性都可以在程序的任何地方访问，即全局变量。

4、组件间通讯

Tue, 10 Dec 2024 00:00:00 +0000

父子组件
#

4、CSS

Mon, 02 Dec 2024 00:00:00 +0000

css概述
#

层叠样式表（cascading style sheet）

4、Map和Set

Sat, 11 Nov 2023 00:00:00 +0000

JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构，即一组键值对。

5、nvm

Fri, 23 May 2025 00:00:00 +0000

nvm（Node Version Manager）是Node.js的版本管理器，可以让我们轻松地在不同的Node.js版本之间进行切换。

5、util

Sun, 27 Apr 2025 00:00:00 +0000

util 模块是 Node.js 的一个内置模块，包含了实用工具函数，用于支持 JavaScript 编程中的调试、错误处理、格式化等功能。

5、axios

Tue, 03 Dec 2024 00:00:00 +0000

Axios
#

Ajax要么就原生的JS写，要么就用Jquery的封装来写。要用封装，就必须要导入jquery.js。

5、XML

Tue, 27 Aug 2024 00:00:00 +0000

XML
#

可扩展标记语言（Extensive Markup Language），标签中的元素名是可以自己随意写，可拓展是相对于html来说

5、WebAPI

Fri, 19 Jan 2024 00:00:00 +0000

DOM
#

文档对象模型（Document Object Model）

5、函数

Fri, 19 Jan 2024 00:00:00 +0000

定义函数
#

function sayHello(){
    return 'Hello';
}

var sayHello = function(){
    return 'Hello';
};

函数体内部的语句在执行时，一旦执行到return时，函数就执行完毕，并将结果返回。因此，函数内部通过条件判断和循环可以实现非常复杂的逻辑。

6、文件系统

Sun, 27 Apr 2025 00:00:00 +0000

FS 简介
#

Node.js 的文件系统模块（fs 模块）提供了丰富的 API，用于读取、写入、删除文件以及执行其他文件系统操作。

6、路由

Mon, 03 Mar 2025 00:00:00 +0000

什么是路由
#

路由的本质就是一些key、value组成的映射关系，每一个key都会指向一个value，多个路由（route）需要通过一个路由器（router）进行管理。

7、http

Sun, 27 Apr 2025 00:00:00 +0000

Node.js 的 http 模块提供了创建HTTP 服务器和客户端的功能。

HTTP 服务器
#

创建方法
#

使用createServer 创建
#

const http = require('http');

// 创建服务对象
const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\n');
});
// 开启监听 3000 端口
server.listen(3000, '127.0.0.1', () => {
  console.log('服务器运行在 http://127.0.0.1:3000/');
});

使用 Server 类创建
#

const http = require('http');

const server = new http.Server((req, res) => {
  // 设置统一响应头
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  // 设置统一响应体
  res.end('Hello World\n');
});

server.listen(3001);

处理不同请求方法
#

const http = require('http');


// 2. 使用 Server 类
const server = new http.Server((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\n');
});

server.listen(3001);

// 处理不同请求方法
const server = http.createServer((req, res) => {
  switch (req.method) {
    case 'GET':
      handleGet(req, res);
      break;
    case 'POST':
      handlePost(req, res);
      break;
    default:
      res.writeHead(405);
      res.end('Method Not Allowed');
  }
});

// get 方法处理函数
function handleGet(req, res) {
  res.writeHead(200, { 'Content-Type': 'application/json' });
  res.end(JSON.stringify({ message: 'GET request handled' }));
}

// post 方法处理函数
function handlePost(req, res) {
  let body = '';
  
  req.on('data', chunk => {
    body += chunk.toString();
  });
  
  req.on('end', () => {
    try {
      const data = JSON.parse(body);
      res.writeHead(200, { 'Content-Type': 'application/json' });
      res.end(JSON.stringify({ received: data }));
    } catch (e) {
      res.writeHead(400);
      res.end('Invalid JSON');
    }
  });
}

服务端事件
#

// 1. 连接事件
server.on('connection', (socket) => {
  console.log('新连接建立');
  
  socket.on('data', (chunk) => {
    console.log('收到数据:', chunk.toString());
  });
  
  socket.on('end', () => {
    console.log('连接结束');
  });
  
  socket.on('error', (err) => {
    console.error('Socket 错误:', err);
  });
});

// 2. 请求事件
server.on('request', (req, res) => {
  console.log('收到请求:', req.method, req.url);
});

// 3. 错误事件
server.on('error', (err) => {
  console.error('服务器错误:', err);
});

// 4. 关闭事件
server.on('close', () => {
  console.log('服务器关闭');
});

// 5. 监听事件
server.on('listening', () => {
  console.log('服务器开始监听');
});

服务端常用方法
#

// 1. 启动服务器
server.listen(3000, '127.0.0.1', () => {
  console.log('服务器运行在 http://127.0.0.1:3000/');
});

// 2. 关闭服务器
server.close(() => {
  console.log('服务器已关闭');
});

// 3. 获取服务器地址信息
const address = server.address();
console.log('服务器地址:', address); // { address: '127.0.0.1', family: 'IPv4', port: 3000 }

// 4. 设置超时
server.setTimeout(60000); // 60 秒
server.on('timeout', (socket) => {
  console.log('连接超时');
});

// 5. 获取最大头信息大小
const maxHeaderSize = server.maxHeaderSize;
console.log('最大头信息大小:', maxHeaderSize);

// 6. 设置最大头信息大小
server.maxHeaderSize = 16384; // 16KB

回调函数
#

请求对象 (http.IncomingMessage)
#

即我们在创建 server 时回调函数的第一个参数

7、插槽

Sat, 11 Nov 2023 00:00:00 +0000

插槽（slot）
#

插槽的作用
#

组件的插槽，为了让我们封装的组件更具有扩展性，例如导航栏封装为一个nav-bar组件，但是不同的使用，组件的样式都不一样
可以让使用者决定组件内部的一些内容展示什么（对组件进行扩展）

使用
#

8、多进程和多线程

Sun, 27 Apr 2025 00:00:00 +0000

多进程和多线程的选择
#

node.js 目前有两种方案，一种是使用children_process或者cluster开启多进程进行计算，一种是使用worker_thread 开启多线程进行计算

8、VueCLI

Tue, 03 Dec 2024 00:00:00 +0000

什么是Vue CLI
#

如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI.
如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI
- 使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
- 如果每个项目都要手动完成这些工作，那无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。
CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架
使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.

VueCLI使用前提
#

NodeJs
#

可以直接在官方网站中下载安装.
网址: http://nodejs.cn/download/
默认情况下自动安装Node和NPM
Node环境要求8.9以上或者更高版本

cnpm镜像
#

由于国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
- npm install -g cnpm --registry=https://registry.npmmirror.com
这样就可以使用 cnpm 命令来安装模块了：
- cnpm install [name]

Webpack
#

全局安装：npm install webpack@3.6.0 -g

9、vuex

Mon, 03 Mar 2025 00:00:00 +0000

vuex是什么
#

概念：专门在vue中实现集中式状态管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读、写）也是一种组件间通信的方式，且适合于任意组件间通信。

10、常用插件

Sat, 11 Nov 2023 00:00:00 +0000

VsCode开发插件
#

Chinese (Simplified) Language Pack for Visual Studio Code：中文界面
auto rename tag
code runner：可以运行nodejs、python等代码
open in brower：在默认浏览器打开
live server：web服务器
vetur：写vue必备插件
Vue 2 Snippets：写vue必备插件
axios：axios补全插件
VueHelper vscode：vue，vue-router和vuex的代码提示
Path Intellisense：路径自动补全
Auto Close Tag：自动闭合标签
Beautify：格式化文件,保证正确的缩进
HTML CSS Support： CSS提示插件
JavaScript (ES6) code snippets：es6代码提示插件
VSCode Great Icons：给文件夹增加图标的插件

NProgerss
#

进度条插件，地址：https://github.com/rstacruz/nprogress

11、Vue3

Mon, 21 Jul 2025 00:00:00 +0000

Vue3
#

相比vue2的提升
#

性能提升
- 打包大小减少41%
- 初次渲染快55%，更新渲染快133%
- 内存减少43%
源码升级
- 使用Proxy代替defineProperty实现响应式
- 重写虚拟DOM的实现和Tree-Shaking
支持TypeScript
- 可以更好的支持TypeScript
新特性
- Composition API
- 新的内置组件

Vite创建Vue3工程
#

Vue3 不推荐使用 vue-cli 来创建（使用vue/cli，要确保版本大于4.5.0），而是使用 Vite。

12、pinia

Tue, 03 Jun 2025 00:00:00 +0000

pinia
#

pinia和Vuex的作用是一样的，它也充当的是一个存储数据的作用，存储在pinia的数据允许我们在各个组件中使用。

前端 on 杨刚的个人网站

1、TypeScript

什么是TypeScript #

1、入门

Electron #

1、EventEmitter

EventEmitter #

1、NodeJS

什么是NodeJS #

1、异常处理

try-catch-finally #

1、JavaScript

介绍 #

1、uni-app

uni-app #

1、Vue

Vue #

Vue的特点 #

MVVM架构 #

1、Bootstrap

优点 #

2、Buffer

Buffer简介 #

2、NPM

什么是NPM #

2、集成Vue

使用步骤 #

搭建项目 #

1、安装VueCli，搭建Vue项目 #

2、strict

use strict #

2、变量和运算符

变量 #

2、页面

2、JQuery

JQuery的版本说明 #

2、数据类型

2、API

全局配置 #

3、Stream

简介 #

3、模块化

什么是模块 #

解决的问题 #

CommonJS和ES6Modules #

3、Promise

3、流程控制

条件分支语句 #

if-else #

3、编译器

3、AJAX

什么是AJAX技术 #

3、类型声明文件

3、HTML

web系统架构体系 #

什么是HTML #

3、组件

组件 #

4、webpack

Webpack #

4、对象和类

函数构造对象 #

4、全局对象

global #

4、组件间通讯

父子组件 #

4、CSS

css概述 #

4、Map和Set

5、nvm

5、util

5、axios

Axios #

5、XML

XML #

5、WebAPI

DOM #

5、函数

定义函数 #

6、文件系统

什么是TypeScript
#

Electron
#

EventEmitter
#

什么是NodeJS
#

try-catch-finally
#

介绍
#

uni-app
#

Vue
#

Vue的特点
#

MVVM架构
#

优点
#

Buffer简介
#

什么是NPM
#

使用步骤
#

搭建项目
#

1、安装VueCli，搭建Vue项目
#

use strict
#

变量
#

JQuery的版本说明
#

全局配置
#

简介
#

什么是模块
#

解决的问题
#

CommonJS和ES6Modules
#

条件分支语句
#

if-else
#

什么是AJAX技术
#

web系统架构体系
#

什么是HTML
#

组件
#

Webpack
#

函数构造对象
#

global
#

父子组件
#

css概述
#

Axios
#

XML
#

DOM
#

定义函数
#

FS 简介
#

什么是路由
#

HTTP 服务器
#

创建方法
#

使用createServer 创建
#

使用 Server 类创建
#

处理不同请求方法
#

服务端事件
#

服务端常用方法
#

回调函数
#

请求对象 (http.IncomingMessage)
#

插槽（slot）
#

插槽的作用
#

使用
#

多进程和多线程的选择
#

什么是Vue CLI
#

VueCLI使用前提
#

NodeJs
#

cnpm镜像
#

Webpack
#

vuex是什么
#

VsCode开发插件
#

NProgerss
#

Vue3
#

相比vue2的提升
#

Vite创建Vue3工程
#

pinia
#