init blog

2025-06-13 16:30:38 +08:00
commit c685fa20eb
25 changed files with 33738 additions and 0 deletions
@@ -0,0 +1,49 @@
+# 1. CSS
+
+## 1.1 基础选择器
+### 1.1.1 元素选择器
+```css
+p {
+  color: blue;
+}
+```
+### 1.1.2 类选择器
+```css
+.container {
+  width: 100%;
+}
+```
+### 1.1.3 ID 选择器
+```css
+#header {
+  background-color: gray;
+}
+```
+
+## 1.2 盒模型
+```css
+.box {
+  width: 200px;
+  height: 200px;
+  padding: 20px;
+  border: 1px solid black;
+  margin: 10px;
+}
+```
+
+## 1.3 布局
+### 1.3.1 Flex 布局
+```css
+.flex-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+```
+### 1.3.2 Grid 布局
+```css
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+}
@@ -0,0 +1,197 @@
+## 1. Git基础
+
+### 1.1 版本管理
+
+#### 1.1.1 什么是版本管理
+
+版本管理是一种记录文件变化的方式，以便将来查阅特定版本的文件内容。
+
+#### 1.1.2 人为维护文档版本的问题
+
+1. 文档数量多且命名不清晰导致文档版本混乱
+
+2. 每次编辑文档需要复制，不方便
+
+3. 多人同时编辑同一个文档，容易产生覆盖
+
+### 1.2 Git 是什么
+
+Git是一个版本管理控制系统（缩写VCS），它可以在任何时间点，将文档的状态作为更新记录保存起来，也可以在任何时间点，将更新记录恢复回来。
+
+### 1.3 Git 安装
+
+[下载地址](https://git-scm.com/downloads) 
+
+在安装的过程中，所有选项使用默认值即可。
+
+### 1.4 Git 基本工作流程
+
+| git仓库          | 暂存区             | 工作目录            |
+| ---------------- | ------------------ | ------------------- |
+| 用于存放提交记录 | 临时存放被修改文件 | 被Git管理的项目目录 |
+
+### 1.5 Git 的使用
+
+#### 1.5.1 Git 使用前配置
+
+在使用 git 前，需要告诉 git 你是谁，在向 git 仓库中提交时需要用到。
+
+1. 配置提交人姓名：`git config --global user.name 提交人姓名`
+2. 配置提交人姓名：`git config --global user.email 提交人邮箱` 
+3. 查看git配置信息：`git config --list`   
+
+**注意**
+
+1. 如果要对配置信息进行修改，重复上述命令即可。
+
+2. 配置只需要执行一次。
+
+#### 1.5.2 提交步骤
+
+1. `git init` 初始化git仓库
+2. `git status` 查看文件状态
+3. `git add 文件列表` 追踪文件
+4. `git commit -m 提交信息`  向仓库中提交代码
+5. `git log` 查看提交记录
+
+#### 1.5.3 撤销
+
+- 用暂存区中的文件覆盖工作目录中的文件： `git checkout 文件`
+
+- 将文件从暂存区中删除： `git rm --cached 文件`
+- 将 git 仓库中指定的更新记录恢复出来，并且覆盖暂存区和工作目录：`git rest --hard commitID` 
+
+## 2. Git进阶
+
+### 2.1 分支
+
+为了便于理解，大家暂时可以认为分支就是当前工作目录中代码的一份副本。
+
+使用分支，可以让我们从开发主线上分离出来，以免影响开发主线。
+
+#### 2.1.1 分支细分
+
+1. 主分支（master）：第一次向 git 仓库中提交更新记录时自动产生的一个分支。
+
+2. 、开发分支（develop）：作为开发的分支，基于 master 分支创建。
+
+3. 功能分支（feature）：作为开发具体功能的分支，基于开发分支创建
+
+**功能分支 -> 开发分支 -> 主分支**
+
+#### 2.1.2 分支命令
+
+- `git branch` 查看分支
+
+- `git branch 分支名称` 创建分支
+
+- `git checkout 分支名称` 切换分支
+- `git checkout -b master origin/分支名称` 创建并切换分支并拉取代码
+
+- `git merge 来源分支` 合并分支
+
+- `git branch -d 分支名称` 删除分支（分支被合并后才允许删除）（-D 强制删除）
+
+### 2.2 暂时保存更改
+
+在git中，可以暂时提取分支上所有的改动并存储，让开发人员得到一个干净的工作副本，临时转向其他工作。
+
+使用场景：分支临时切换
+
+- 存储临时改动：`git stash`
+- 恢复改动：`git stash pop`
+
+## 3. Github
+
+在版本控制系统中，大约90%的操作都是在本地仓库中进行的：暂存，提交，查看状态或者历史记录等等。除此之外，如果仅仅只有你一个人在这个项目里工作，你永远没有机会需要设置一个远程仓库。
+
+只有当你需要和你的开发团队共享数据时，设置一个远程仓库才有意义。你可以把它想象成一个 “文件管理服务器”，利用这个服务器可以与开发团队的其他成员进行数据交换。
+
+### 3.1 注册
+
+1. 访问[github](https://github.com/)首页，点击 Sign up 连接。（注册）
+
+2. 填写用户名、邮箱地址、GitHub登陆密码
+
+3. 选择计划
+
+4. 填写 GitHub 问题
+
+5. 验证邮箱
+
+6. GitHub 个人中心
+
+### 3.2 多人协作开发流程
+
+- A在自己的计算机中创建本地仓库
+- A在github中创建远程仓库
+- A将本地仓库推送到远程仓库
+- B克隆远程仓库到本地进行开发
+- B将本地仓库中开发的内容推送到远程仓库
+- A将远程仓库中的最新内容拉去到本地
+
+### 3.3 创建仓库
+
+1. 填写仓库基本信息
+
+2. 将本地仓库推送到远程仓库
+
+   1. git push 远程仓库地址 分支名称
+
+   2. git push 远程仓库地址别名 分支名称
+
+   3. git push -u 远程仓库地址别名 分支名称
+
+       -u 记住推送地址及分支，下次推送只需要输入git push即可
+
+   4. git remote add 远程仓库地址别名 远程仓库地址
+
+### 3.4 拉取操作
+
+#### 3.4.1 克隆仓库
+
+克隆远端数据仓库到本地：`git clone 仓库地址`
+
+#### 3.4.2 拉取远程仓库中最新的版本
+
+拉取远程仓库中最新的版本：`git pull 远程仓库地址 分支名称`
+
+### 3.5 解决冲突
+
+在多人同时开发一个项目时，如果两个人修改了同一个文件的同一个地方，就会发生冲突。冲突需要人为解决。
+
+### 3.6 跨团队协作
+
+1. 程序员 C fork仓库
+2. 程序员 C 将仓库克隆在本地进行修改
+3. 程序员 C 将仓库推送到远程
+4. 程序员 C 发起pull reqest
+5. 原仓库作者审核
+6. 原仓库作者合并代码
+
+### 3.7 ssh免登陆
+
+https协议仓库地址：https://github.com/itcast-frontEnd/git-demo.git
+
+生成秘钥：`ssh-keygen`
+
+秘钥存储目录：C:\Users\用户\.ssh
+
+公钥名称：id_rsa.pub
+
+私钥名称：id_rsa
+
+### 3.8 GIT忽略清单
+
+将不需要被git管理的文件名字添加到此文件中，在执行git命令的时候，git就会忽略这些文件。
+
+git忽略清单文件名称：**.gitignore**
+
+将工作目录中的文件全部添加到暂存区：`git add .`
+
+
+
+
+
+
+
@@ -0,0 +1,49 @@
+# 1. HTML
+
+## 1.1 基本结构
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>示例页面</title>
+</head>
+<body>
+    <h1>欢迎来到我的页面</h1>
+    <p>这是一个简单的 HTML 示例。</p>
+</body>
+</html>
+```
+
+## 1.2 常用标签
+### 1.2.1 标题标签
+```html
+<h1>一级标题</h1>
+<h2>二级标题</h2>
+<h3>三级标题</h3>
+```
+### 1.2.2 段落标签
+```html
+<p>这是一个段落。</p>
+```
+### 1.2.3 链接标签
+```html
+<a href="https://www.example.com">访问示例网站</a>
+```
+### 1.2.4 图片标签
+```html
+<img src="image.jpg" alt="示例图片">
+```
+
+## 1.3 表单元素
+```html
+<form action="submit.php" method="post">
+    <label for="username">用户名:</label>
+    <input type="text" id="username" name="username">
+    <br>
+    <label for="password">密码:</label>
+    <input type="password" id="password" name="password">
+    <br>
+    <input type="submit" value="提交">
+</form>
@@ -0,0 +1,359 @@
+# 1. React
+
+## 1.1 脚手架文件结构
+
+```
+├── node_modules 
+├── public
+│   ├── favicon.ico: 页签图标
+│   └── index.html: 主页面
+├── src
+│   ├── assets: 存放静态资源
+│   │   └── logo.svg
+│   ├── components: 存放组件
+│   │   └── HelloWorld.jsx
+│   ├── App.jsx: 汇总所有组件
+│   └── index.js: 入口文件
+├── .gitignore: git版本管制忽略的配置
+├── package.json: 应用包配置文件 
+├── README.md: 应用描述文件
+└── package-lock.json：包版本控制文件
+```
+
+## 1.2 React 核心概念
+
+### 1.2.1 JSX
+#### 1. 定义
+JSX 是 JavaScript XML 的缩写，它允许在 JavaScript 代码中编写类似 HTML 的结构，最终会被 Babel 等工具编译为 React 元素。
+
+#### 2. 基本语法
+JSX 看起来像 HTML，但实际上是 JavaScript 语法扩展，必须包含在一个根元素中。示例：
+```jsx
+const element = (
+  <div>
+    <h1>Hello, world!</h1>
+    <p>Welcome to React.</p>
+  </div>
+);
+```
+
+#### 3. 表达式嵌入
+在 JSX 中可以使用花括号 `{}` 嵌入 JavaScript 表达式。示例：
+```jsx
+const name = 'Alice';
+const element = <h1>Hello, {name}</h1>;
+```
+
+#### 4. 样式处理
+在 JSX 中使用 `style` 属性设置内联样式，属性值为一个 JavaScript 对象，键采用驼峰命名法。示例：
+```jsx
+const element = <div style={{ color: 'blue', fontSize: '20px' }}>Styled text</div>;
+```
+
+#### 5. 类名设置
+由于 `class` 是 JavaScript 保留字，在 JSX 中使用 `className` 来设置 HTML 元素的类名。示例：
+```jsx
+const element = <div className="container">Container element</div>;
+```
+
+### 1.2.2 组件
+#### 1. 函数组件
+函数组件是一个返回 JSX 的 JavaScript 函数，接收 `props` 作为参数。示例：
+```jsx
+function Welcome(props) {
+  return <h1>Hello, {props.name}</h1>;
+}
+```
+
+#### 2. 类组件
+类组件继承自 `React.Component`，必须实现 `render` 方法返回 JSX。示例：
+```jsx
+class Welcome extends React.Component {
+  render() {
+    return <h1>Hello, {this.props.name}</h1>;
+  }
+}
+```
+
+### 1.2.6 事件处理
+在 React 中，事件处理与 HTML 类似，但采用驼峰命名法，并且通过传递函数来处理事件。示例：
+```jsx
+function Button() {
+  const handleClick = () => {
+    alert('Button clicked!');
+  };
+
+  return (
+    <button onClick={handleClick}>Click me</button>
+  );
+}
+```
+
+### 1.2.7 条件渲染
+在 React 中可以使用 JavaScript 逻辑进行条件渲染。示例：
+```jsx
+function Greeting(props) {
+  const isLoggedIn = props.isLoggedIn;
+  if (isLoggedIn) {
+    return <h1>Welcome back!</h1>;
+  }
+  return <h1>Please sign up.</h1>;
+}
+```
+
+还可以使用三元运算符和逻辑与运算符进行条件渲染：
+```jsx
+// 三元运算符
+const element = isLoggedIn ? <LogoutButton /> : <LoginButton />;
+
+// 逻辑与运算符
+const unreadMessages = ['React', 'Re: React', 'Re:Re: React'];
+const element = (
+  <div>
+    <h1>Hello!</h1>
+    {unreadMessages.length > 0 && (
+      <h2>You have {unreadMessages.length} unread messages.</h2>
+    )}
+  </div>
+);
+```
+
+### 1.2.3 状态（State）
+1. 功能：用于管理组件内部的数据。
+2. 示例：
+```jsx
+class Counter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { count: 0 };
+  }
+
+  increment = () => {
+    this.setState({ count: this.state.count + 1 });
+  };
+
+  render() {
+    return (
+      <div>
+        <p>Count: {this.state.count}</p>
+        <button onClick={this.increment}>Increment</button>
+      </div>
+    );
+  }
+}
+```
+
+### 1.2.4 生命周期方法
+1. `componentDidMount()`：组件挂载后执行，常用于数据请求。
+2. `componentDidUpdate()`：组件更新后执行。
+3. `componentWillUnmount()`：组件卸载前执行，常用于清理工作。
+
+### 1.2.5 状态提升
+当多个组件需要共享状态时，通常会将状态提升到最近的共同父组件中。通过父组件传递 `props` 和回调函数，实现子组件与父组件之间的状态同步。
+```jsx
+class Counter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { count: 0 };
+  }
+
+  increment = () => {
+    this.setState({ count: this.state.count + 1 });
+  };
+
+  render() {
+    return (
+      <div>
+        <p>Count: {this.state.count}</p>
+        <button onClick={this.increment}>Increment</button>
+      </div>
+    );
+  }
+}
+```
+
+## 1.3 React Hooks
+### 1.3.1 useState
+`useState` 是一个基础的 Hook，用于在函数组件中添加状态。示例如下：
+```jsx
+import React, { useState } from 'react';
+
+function Counter() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  );
+}
+```
+### 1.3.2 useEffect
+`useEffect` 可以让你在函数组件中执行副作用操作，比如数据获取、订阅或手动修改 DOM。示例如下：
+```jsx
+import React, { useState, useEffect } from 'react';
+
+function Example() {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    document.title = `You clicked ${count} times`;
+  }, [count]);
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  );
+}
+```
+
+## 1.4 React 路由
+### 1.4.1 基本使用
+1. 安装：`npm install react-router-dom`
+2. 示例：
+```jsx
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
+
+function App() {
+  return (
+    <Router>
+      <nav>
+        <ul>
+          <li>
+            <Link to="/">Home</Link>
+          </li>
+          <li>
+            <Link to="/about">About</Link>
+          </li>
+        </ul>
+      </nav>
+
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/about" element={<About />} />
+      </Routes>
+    </Router>
+  );
+}
+
+function Home() {
+  return <h1>Home Page</h1>;
+}
+
+function About() {
+  return <h1>About Page</h1>;
+}
+
+```
+
+## 1.5 React 上下文（Context）
+### 1.5.1 功能
+用于在组件树中共享数据，避免逐层传递 props。
+
+### 1.5.2 示例
+```jsx
+import React, { createContext, useContext } from 'react';
+
+const ThemeContext = createContext();
+
+function App() {
+  return (
+    <ThemeContext.Provider value="dark">
+      <Toolbar />
+    </ThemeContext.Provider>
+  );
+}
+
+function Toolbar() {
+  return (
+    <div>
+      <ThemedButton />
+    </div>
+  );
+}
+
+function ThemedButton() {
+  const theme = useContext(ThemeContext);
+  return <button style={{ background: theme }}>I am styled by theme context!</button>;
+}
+```
+
+## 1.6 React 优化
+### 1.6.1 `React.memo`
+用于优化函数组件，避免不必要的渲染。
+```jsx
+const MyComponent = React.memo(function MyComponent(props) {
+  /* 使用 props 渲染 */
+});
+```
+
+### 1.6.2 `useCallback` 和 `useMemo`
+1. `useCallback`：缓存函数，避免每次渲染都重新创建。
+   - **原理**：`useCallback` 接收一个回调函数和依赖项数组作为参数，返回一个 memoized 版本的回调函数，该回调函数仅在某个依赖项改变时才会更新。这有助于在传递回调函数给子组件时，避免不必要的重新渲染。
+   - **使用场景**：当你将回调函数作为 props 传递给子组件，并且子组件使用 `React.memo` 进行优化时，使用 `useCallback` 可以确保子组件不会因为回调函数的变化而不必要地重新渲染。
+   - **示例代码**：
+```jsx
+import React, { useState, useCallback } from 'react';
+
+function Parent() {
+  const [count, setCount] = useState(0);
+  const [value, setValue] = useState('');
+
+  // 使用 useCallback 缓存函数
+  const handleClick = useCallback(() => {
+    console.log(`Count is: ${count}`);
+  }, [count]);
+
+  return (
+    <div>
+      <button onClick={() => setCount(count + 1)}>Increment Count</button>
+      <input value={value} onChange={(e) => setValue(e.target.value)} />
+      <Child handleClick={handleClick} />
+    </div>
+  );
+}
+
+const Child = React.memo(function Child({ handleClick }) {
+  return (
+    <button onClick={handleClick}>Click me</button>
+  );
+});
+```
+2. `useMemo`：缓存计算结果，避免重复计算。
+   - **原理**：`useMemo` 接收一个计算函数和依赖项数组作为参数，返回一个 memoized 的计算结果。仅当某个依赖项改变时，才会重新执行计算函数。
+   - **使用场景**：当你有一个计算开销较大的函数，并且该函数的输入依赖于某些状态或 props 时，使用 `useMemo` 可以避免在每次渲染时都重新计算结果。
+   - **示例代码**：
+```jsx
+import React, { useState, useMemo } from 'react';
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [value, setValue] = useState('');
+
+  // 使用 useMemo 缓存计算结果
+  const expensiveValue = useMemo(() => {
+    console.log('Calculating expensive value...');
+    let sum = 0;
+    for (let i = 0; i < count; i++) {
+      sum += i;
+    }
+    return sum;
+  }, [count]);
+
+  return (
+    <div>
+      <button onClick={() => setCount(count + 1)}>Increment Count</button>
+      <input value={value} onChange={(e) => setValue(e.target.value)} />
+      <p>Expensive Value: {expensiveValue}</p>
+    </div>
+  );
+}
+```
@@ -0,0 +1,119 @@
+# 1. Webpack
+
+## 1.1 基础概念
+### 1.1.1 入口（Entry）
+入口起点指示 Webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。示例配置如下：
+```javascript
+// webpack.config.js
+module.exports = {
+  entry: './src/index.js'
+};
+```
+
+### 1.1.2 输出（Output）
+输出配置告诉 Webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。示例配置如下：
+```javascript
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'bundle.js'
+  }
+};
+```
+
+## 1.2 加载器（Loaders）
+### 1.2.1 Babel Loader
+用于将 ES6+ 代码转换为浏览器可兼容的 JavaScript 代码。安装和配置示例如下：
+```bash
+npm install --save-dev babel-loader @babel/core @babel/preset-env
+```
+```javascript
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.js$/, 
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env']
+          }
+        }
+      }
+    ]
+  }
+};
+```
+
+### 1.2.2 CSS Loader 和 Style Loader
+用于处理 CSS 文件。安装和配置示例如下：
+```bash
+npm install --save-dev css-loader style-loader
+```
+```javascript
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/, 
+        use: ['style-loader', 'css-loader']
+      }
+    ]
+  }
+};
+```
+
+## 1.3 插件（Plugins）
+### 1.3.1 HtmlWebpackPlugin
+用于生成 HTML 文件，并自动注入打包后的 JavaScript 文件。安装和配置示例如下：
+```bash
+npm install --save-dev html-webpack-plugin
+```
+```javascript
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    })
+  ]
+};
+```
+
+### 1.3.2 CleanWebpackPlugin
+用于在每次构建前清理 `dist` 目录。安装和配置示例如下：
+```bash
+npm install --save-dev clean-webpack-plugin
+```
+```javascript
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+module.exports = {
+  plugins: [
+    new CleanWebpackPlugin()
+  ]
+};
+```
+
+## 1.4 开发服务器（Dev Server）
+Webpack Dev Server 提供了一个简单的 Web 服务器，并且能够实时重新加载（Live Reloading）。安装和配置示例如下：
+```bash
+npm install --save-dev webpack-dev-server
+```
+```javascript
+module.exports = {
+  devServer: {
+    contentBase: './dist',
+    open: true
+  }
+};
+```
+运行开发服务器的命令：
+```bash
+npx webpack-dev-server --open
+```