### 创建一个react项目
create-react-app 是 React 创建新的单页应用的最佳方式。它会配置你的开发环境，以便使你能够使用最新的 JavaScript 特性，提供良好的开发体验，并为生产环境优化你的应用程序。你需要在你的机器上安装 Node >= 8.10 和 npm >= 5.6。
###  创建react项目的命令
```
create-react-app react-hook-redux
```
此命令执行完成后就创建了一个react的基础项目。然后cd 到react-hook-redux目录下指向yarn start 或者 npm start 即可打开一个react 初始页面。
###  在该项目引入redux
安装redux命令
```
yarn add redux react-redux
```
在src目录下新建store文件夹。在store 文件加下新建index.js 和 reducer.js \
store/index.js // 创建一个状态仓库
```
import { createStore, applyMiddleware, compose } from "redux";
import thunk from 'redux-thunk'
import cRducer from "./reducer";
// redux-devtools
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(cRducer, composeEnhancers(
  applyMiddleware(thunk)
))

export default store
```
如上从redux中引入 createStore 方法，利用该方法创建一个状态仓库。createStore 有一个必传参数reducer。\
store/reducer.js
```
import {combineReducers} from 'redux';

const moduleReduce = {};
// 利用webpack require.context api 获取每个文件下的reducer文件 
const files = require.context('/src/pages', true, /reducer.js/);
const reg = /(.\/)*([^.]+).*/ig;
files.keys().forEach((f) => {
    const reducerName = f.replace(reg,"$2").replace('/', '');
    // 以当前reducer文件地址为key存入moduleReduce对象中
    moduleReduce[reducerName] = files(f).reducer;
});
// 将多个reucer 合并为一个reducer
const combineReducer = combineReducers(moduleReduce);
export default combineReducer;

```
Reducer是一个函数，他接受当前的state和action，返回新的state。
这里做了一些优化，因为所有的业务都在一个文件去写，当项目比较大时，过于臃肿，难以管理，且不适合多人开发。因为大型项目都是多分支，多人开发的。所有这里我们采用模块化的方式，将reducer 拆分到各个功能页面中，并且动态的将各个页面的reducer.js 引入到store/reducer.js 利用 combineReducers 方法进行合并。逻辑并不复杂，关键点我都在上面做了注释。
###  在根目录index.js 引入store
```
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import store from './store';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);
reportWebVitals();

```
这里介绍一下 Provider。用Provider 标签将根组件包裹，并 添加store属性，传入新建好的store,这样就把store仓库引入到项目了 。凡Provider的子组件都可以访问到store的数据。
我们再来看看APP根组件
###  APP根组件修改
```
import React from 'react';
import {BrowserRouter, Route, Routes} from 'react-router-dom';
import PageA from './pages/page-a/index.jsx';
import PageB from './pages/page-b/index.jsx';

function App() {
  return (
    <BrowserRouter>
        <Routes>
            <Route index  path="/" element={ <PageA />  } />
            <Route  path="/page-a" element={ <PageA /> } />
            <Route  path="/page-b" element={ <PageB /> } />
      </Routes>
  </BrowserRouter>
  );
}

export default App;

```
这里我们用react-router-dom这个库来管里页面和路由的跳转，用法都比较基础，实际上就是将页面的一个统一管理，路由分发或者传递参数等功能。 这里不做过多解释。\
接下来看看如何在项目中使用redux中的store;
在pages目录先创建page-a文件夹，在page-a文件夹下创建index.jsx,action-type.js,actions.js
reducer.js \
###  pages/page-a/index.jsx
```
import { useSelector, useDispatch } from 'react-redux';
import { reduceNumber, addNumber } from './actions' 
import { pageState } from '../../common/pageState'


function PageA() {
  const state = useSelector((state) => pageState(state))
  const dispatch = useDispatch()

  return (
    <div className="App">
      <div>pageA</div>
      <div>value:{state.count || 0}</div>
      <button onClick={() => dispatch(addNumber)}> addNumber</button>
      <button onClick={() => reduceNumber(dispatch) }>reduceNumber</button>
    </div>
  );
}

export default PageA;
```
useSelector 是react hooks 中的一个api,组件可以通过useSelector访问store中的state数据.\
useDispatch hook 能得到 redux store 的 dispatch 方法引用，通常用于手动 派发一个 action。\
文件中我们用 useSelector 获取到store 中的state 数据，保存在自定义变量state中，从state中就可以获取到对应的状态值。\
如果要派发一个action, 就调用useDispatch函数 并传入 对应的action。
###  action-type.js
```
export const addNumberType = 'addNumber';
export const reduceNumberType = 'reduceNumber';
```
action-type.js 文件主要就是定义当前页面所有的actiong的类型，便于管理和也有助于调试。
###  actions.js
```
import { addNumberType, reduceNumberType } from "./action-type"
export const addNumber = {
    type: addNumberType,
    value: 100
}

export const reduceNumber = (dispatch) =>   dispatch({type: reduceNumberType, value: 100 })
```
actions.js 文件中的每个action 都对应一个业务逻辑，比如上面的加减功能。每次加减100。
### reducer.js 
```
const reducerMap = new Map();
const defaultState = {
    count: 0
}

const addNumber =  function (state = defaultState, action) {
    const newState = {...state};
    newState.count += action.value;
    return newState;
}

const reduceNumber =  function (state = defaultState, action) {
    const newState = {...state};
    newState.count -= action.value;
    return newState;
}

reducerMap.set('addNumber', addNumber);
reducerMap.set('reduceNumber', reduceNumber);
export const reducer = (state = defaultState , action)=>{
    const newState = reducerMap.get(action.type || '')
    if (newState) {
      
       return  newState(state, action)
    } else {
        return state
    }
}
```
重点说说reducer.js 这个文件。reducer 主要功能就是接一个一个状态，返回一个新的状态。然而如果action 类型比较多的化，就会有多个if语句，页面很不雅观，而且扩展性很弱，每加一个功能都要修改原函数。这里我们做了一些小的优化。\
将每个类型的reducer 都以action 的type为key,reducer 位值存入reducerMap中，这样就可以根据传递过来的action的类型去reducerMap找到对应的reducer并执行。而且如果要新添加一些reducer,只需编写新的reducer 方法 并保存在reducerMap中即可。
###  github项目地址
```
https://github.com/yzyprojects/react-hook-redux
```

项目用redux 模块化的方式管理状态

redux作为react状态管理 

1.依次执行下面的命令
```
git init // 初始话本地项目
git add . // 添加本文件
git commit -m '本地项目推送到远程仓库介绍' // 将代码提交到本地仓库
git remote add origin // 远程仓库分支地址  // 关联远程仓库
git push origin master  // 将本地项目推送到远程仓库

```
有时候在执行推送到远程仓库命令是会报这个错  ! [rejected]        master -> master (fetch first)
error: failed to push some refs to '远程地址'。这是因为远程的md文件不在本地的目录中,这时需要把远程仓库拉取到本地
```
git pull --rebase origin master

```
但是又会报一个这样的错误 refusing to merge unrelated histories 这是以为新建的远程仓库和本地仓库是两个独立的仓库还没有建立关联可以使用 git remote -v 查看
我们需要把两个项目合并
```
git pull origin master --allow unrelated-histories // 合并到本地项目仓库
git push origin master:master || git push origin HEAD:<name-of-remote-branch> // 将本地仓库推送到远程仓库

```

另一种方式
```
echo "# demonstrate" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin 'github仓库地址'
git push -u origin main
```

如果想要强制合并，在后面可以加上  --allow-unrelated-historiesn 如：
```
git merge origin/master --allow-unrelated-histories
```




如何将本地项目推送到远程仓库

目前主流的开发方式都是采用前后段分离的方式，这就需要前后端进行接口联调，前端需通过接口拿到后端提供的数据进行展示，交互等。那么就会存在一个问题，当前端页面已经开发出来，但是后端接口去没有来得及提供，那么前端就只能干等着。这种方式显然会造成一段时间的空白期，影响项目效率。如果有一种方法可以在前端生成临的数据，前端就可以先自己制造数据，模拟后端提供的数据进行开发，就可以很好的解决这个问题。下面我们介绍的json-serve 就是这样的一种技术。

1.安装json-server
```
yarn add json-server

```
2.在根目录下面新建mock-json文件夹，在mock-json文件夹下再新建一个db.json文件。
json-server会自动根据db.json文件中第一级的key名生成对应的restful风格的api。比如这样

```
{
    "mockData"：[]
}

```
```
json-server --watch ./mockData/db.json --port 4000

```
json-server就会根据db.json文件生成一个名为 http://localhost：4000/mockData 的接口
```
GET     /posts
GET     /posts/1
POST    /posts
PUT     /posts/1
PATCH   /posts/1
DELETE  /posts/1

```

react项目搭建mock环境,前端可以先自己在本地制造数据并生成对应的接口，模拟后端提供的数据进行开发

react项目搭建mock环境

1.创建react 项目命令
```
npx create-react-app "project-name" --template typescript // project-name 是你的项目名

```
2.解包 （eject）。  
yarn eject 会复制所有依赖文件和相应的依赖（webpack、babel等）到你的项目。是个单项操作，一旦 eject ，就回不去了
```
yarn eject

```
执行该命令后会在项目中多一个config文件夹，该文件加下有两个webpack.config.js 和  
webpackDevServer.config.js 这样就可以在webpack.config.js 中修改webpack的配置。  
3.安装Eslint  
一般中大型项目都是多人开发，每个人的代码风格都不一样，所有团队内部一般都会制定一套代码规 
范，来保证项目风格统一，提高项目的质量，这时候Eslint就派上用场了
EESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。可以采用eslint的默认风格，也可以自定义规则，这里不做过多介绍。有兴趣可以去Eslint官网查阅https://eslint.bootcss.com/
安装Eslint,最好全局安装
```
yarn global add eslint
yarn eslint --init // 初始eslint,这时候会有很多提示让你选择，一般选择默认就行，也可根据自己个人喜好选择。

```
安装完成之后还要在vscode中下载Eslint插件，不然不起效。








react+ts项目搭建

```
1.yum update
// 安装需要的依赖软件包
2.sudo yum install -y yum-utils device-mapper-persistent-data lvm2
// 设置yum 源
3.sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
// 安装docker 
4.sudo yum -y install docker-ce  
// 启动docker
5.systemctl  start docker 
// 查看docker 状态
6.systemctl status docker 
// 停止docker
7.systemctl stop docker 
// 重启docker
8.systemctl restart docker 
// 设置开机启动docker服务
9.systemctl enable docker 
// 查看镜像
10.docker images 
// s搜索镜像 如： docker search node 就会列出node的版本列表和详情信息
11.docker search 镜像名称 
// 下载镜像 如：docker pull node:v16.15.0
12.docker pull 镜像名称：版本号 
// 删除镜像
13.docker rmi 容器名称 
// 删除全部镜像
14.docker rmi 'docker images -q' 
// i：一直处于链接状态，t:开启一个虚拟终端
15.docker run --name=容器名 centos:7 /bin/bash 
// 查看历史容器
16.docker ps -a 查看docker 
// 进入容器
17.docker exec -it 容器名 /bin/bash 
18.exet 退出容器
// 退出容器
19.docker stop 容器名 
// 启动容器
20.docker start 容器名 
// 删除容器
21.docker rm 容器id/容器名称 
//查看所有容器
22.docker ps -aq 
// 查看容器信息
23.docker inspect 
// 创建数据卷
24.docker run -it --name=容器名 -v ~/data:/root/data_container centos:7 
// 创建数据卷容器
25.docker run -it --name=容器名 -v /volume centos:7 
// 挂载数据卷
26.docker run -it --name=容器名 -v --volumes-from c3 centos:7  
 // 创建镜像容器, -p 这个参数是将宿主机的端口号映射到容器的端口号，这样在外部请求宿主机端口号的时候就就相当于请求到了容器的端口号
27.docker run -id  --name=容器  -p 7001:7001镜像名
```

本文整理了docker的常用命令，对于刚接触docker和不太熟悉docker命令的小伙伴们，可以作为笔记，快速查阅docker相关操作命令。

docker 常用命令

本文以阿里云为例

```
1.你需要注册一个阿里云账号
2.登录成功后进入阿里云控制台
3.点击左上角的三横杠图标，搜索“容器镜像服务” 选择容器镜像服务ACR
4.在左侧菜单镜像工具下面有镜像加速器，然后选择对应的系统
5.将给出的配置加速器的代码，复制到你的系统并执行
sudo mkdir -p /etc/docker
sudo tee /etc/docker/daemon.json <<-'EOF'
{
  "registry-mirrors": ["你的镜像加速器的地址"]
}
EOF
sudo systemctl daemon-reload
sudo systemctl restart docker

```
其他平台基本也是这样的操作流程

docker 仓库是部署在国外的，国内下载依赖会特变慢，甚至有时会下载不了，通过配置镜像加速器的方式可以有效解决这个问题。

docker 配置镜像加速器

Windows安装
```
npm install -g yarn
yarn -v // 检查安装是否成功，若安装成功，则显示安装的版本号。

```
新版win10 安装的时候会出现下面的错误。
```
yarn : 无法加载文件 C:\Users\admin\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_ 
Policies。
所在位置 行:1 字符: 1
```
这是因为PowerShell 执行策略，默认为Restricted,不加载配置文件，禁止运行脚本，将执行策略改为RemoteSigned就可以了。
以管理员方式运行powershell 设置执行策略。
```
set-ExecutionPolicy RemoteSigned
执行策略更改
执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险，如 https:/go.microsoft.com/fwlink/?LinkID=135170
中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略?
[Y] 是(Y)  [A] 全是(A)  [N] 否(N)  [L] 全否(L)  [S] 暂停(S)  [?] 帮助 (默认值为“N”): Y

get-ExecutionPolicy 输出RemoteSigned 就表示更改成功了。
再执行Yarn命令就可以了

```
mac安装
要先获取权限限
```
sudo -s
```
在执行安装命令
```
npm install -g yarn
yarn -v // 检查安装是否成功，若安装成功，则显示安装的版本号。 
```

Yarn 是一个由 Facebook 贡献的 Javascript 包管理器。

如何使用npm安装yarn

在使用 create-react-app 创建react项目的时候，报如下错误：
```
npm notice
npm ERR! code ERR_SOCKET_TIMEOUT
npm ERR! errno ERR_SOCKET_TIMEOUT
npm ERR! network Invalid response body while trying to fetch https://registry.np
mjs.org/readable-stream: Socket timeout
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settin
gs.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\admin\AppData\Local\npm-cache\_logs\2023-07-15T06_53_38_34
4Z-debug-0.log

```
出现以上错误是因为npm的镜像源不是国内的，把npm 镜像源改成国内的就可以了。
```
npm config set registry https://registry.npm.taobao.org
```

在用npx create-react-app 创建项目的时候， https://registry.np
mjs.org/readable-stream，: Socket timeout。

npx create-react-app 创建项目报错解决方案

1.打开资源管理器
```
ctrl + shift + esc
```
2.在任务管理器的左上角"文件-运行新任务"  
3.在弹出的任务窗口输入命令 explorer，资源管理器就重新打开了

win10 资源管理器被误关联，如何打开

win10 资源管理器被误关闭，如何打开

### 在webpack.config.js配置  
#### 1.安装less和less-loader
```
yarn add less less-loader -S
或者
npm i less less-loader -S
```
####  2.修改webpack.config.js配置文件  
```
找到style files regexes，在下面添加  
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
```
###  在module 的 rules 中配置less-loader规则  
```
             {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                'less-loader'
              ),     
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader'
              ),
            },

```
重新构建项目就可以在项目中使用less了

在react项目中使用less

在react 中使用react-router-dom V6 版本。  
1.安装react-router-dom  
```
yarn add react-router-dom 
或者  
npm install react-router-dom --save
```
2.创建routerApp 组件，统一管理页面路由routerApp.jsx
```
import { BrowserRouter as Router,Routes, Route } from "react-router-dom";
import Home from './pages/home';  // 你的默认页面
import Strategy from './pages/strategy'; // 测试页面，你可以自己定义，就是你项目中的页面
import Error from './pages/404' // 当浏览器地址在项目中没有找到此页面时，自动跳转到404 页面

// 统一把页面组件放在一个对象里面，就不用每次添加路由的时候去修改jsx代码，页面结构更清晰，想添加新页面的时候只需要在加一个新对象就可以了。  
// 不过你想直接在jsx 中引入也可以，这里只是做了一个简单的优化。
const routerList = [
    {
        path:'/home',
        comment:Home
    },
    {
        path:'/strategy',
        comment:Strategy
    }
]

const RouterApp = () => {
    return <>
        <Router>
            <Routes>
                <Route index  element={<Home />} />
                    {
                        routerList?.map((r) => <Route key = {r.path} path={r.path} element={<r.comment/>}></Route>)
                    }
                <Route path="*"  element={<Error />} />
            </Routes>
        </Router>
    </>

}
export default RouterApp
```
以下几点需要注意下：  
```
2.1  react router 从第6版开始已经没有 Switch 组件了，改用 Routes 组件  
2.2 route 标签的index属性是配置页面默认路径的属性
2.3 path="*" 是一个路由规则，它表示当所有其他路由都不匹配时，这个路由规则会被匹配 
```
home.jsx 页面  
```
function Home() {
    console.log('home')
  return (
    <div >
     hoem
    </div>
  );
}

export default Home;

```
strategy.jsx页面
```
function Strategy() {
    return (
      <div >
       strategy
      </div>
    );
  }
  
  export default Strategy;
  
```
404.jsx页面
```
function Error() {
    console.log('home')
  return (
    <div >
        the page was not found
    </div>
  );
}

export default Error;
```
3.到此页面都创建好了，路由组件也创建好了，只需在项目入口文件index.js中引入路由组件就可以了
```
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import RouterApp from './routers';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <RouterApp /> // 将之前的 <App /> 组件换成我们自己封装的RouterApp 组件就可以了
  </React.StrictMode>
);
reportWebVitals();
```
注：routers.jsx 文件一定要创建在src目录下，不然项目是不让引入的，这点需要注意下。



react项目react-router-dom V6 版本使用示例

git 设置用户名邮箱和密码
```
git config user.name "userName"       //你的用户名
git config user.email "email address" //你的邮箱地址
git config user.password '你的用户名密码'  
```
如果你想全局设置只需在 config 后面加上--global  
```
git config --global  user.name "userName"
```
设置完成后可以执行一下命令查看
```
git config --list   //查看git设置情况
```
git记住用户名以及密码  
给单个git库设置记住密码，需要在.git/config文件找到cimima在此下方添加 helper=store 即可。  
全局设置记住用户名和密码
```
git config --global credential.helper store
```

git 设置用户名邮箱和密码

在去githubclone项目或者第一次将本地项目发布到远程仓库的时候出现这个报错信息：  
fatal: unable to access 'https://github.com/ym-warehouse/course-examples.git/': The requested URL returned error: 403  
大概意思就是没有权限访问。  
解决办法：  
1.取消代理  
```
git config --global --unset http.proxy
git config --global --unset https.proxy
```
2.创建ssh秘钥 
```
ssh-keygen -t rsa -C '你的邮箱'
```
上面的命令会生成一个ssh秘钥的文件，文件地址会在生成的时候在命令窗口显示出来，找到这个文件地址，打开之后复制里面的内容。  
3.去你的github仓库添加秘钥  
3.1点击右上角的图像，会出现以菜单列表，找到settings ，在找到ssh and GPG keys 点进去  
3.2点击 new ssh key 按钮，,  
3.3填写title (随便起一个有语义名字就行)在key那一栏的输入框把你刚才生成的秘钥添复制进去，再点 Add ssh key 按钮  
再去clone你的代码  
如果有报这个错误信息：fatal: repository 'https://github.com/ym-warehouse/examples.git/' not found  
进行如下操作就可以了
```
git config --unset-all credential.helper
git config --global --unset-all credential.helper
git config --system --unset-all credential.helper
```
这样再去clone你的代码或者提交代码就可以了

fatal: unable to access 'xxx': The requested URL returned error: 403

fatal: unable to access 'https://github.com/ym-warehouse/course-examples.git/': The requested URL returned error: 403

首先在工程目录src下面新建pages目录，里面存放各个模块的页面。  
在pages下面有一个home文件夹,，home 下面新建about 和 content 页面

/pages/home/index.jsx
```
function Home() {
    console.log('home')
    return (
      <div >
       hoem
     </div>
  );
}

export default Home;

```
/pages/about/index.jsx
```
function About() {
    console.log('About')
    return (
      <div >
       About
      </div>
  );
}

export default About;

```
/pages/content/index.jsx
```
function Content() {
    console.log('Content')
    return (
      <div >
       Content
      </div>
  );
}

export default Content;

```
这样页面结构就建好了。接下来开始编写路由组件
在根目录下新建routers.jsx
```
import React from 'react';  
import { Route, Switch, BrowserRouter as Router } from 'react-router-dom';  
import Home from './pages/home';
import About from './pages/home/about';
import Content from './pages/home/content';


const routes = [  
    {  
        path: '/home',  
        component: Home,  
        chrid: [  
            {  
                path: '/home',  
                component: Home,  
            },  
            {  
                path: '/home/about',  
                component: About,  
            },  
            {  
                path: 'content',  
                component: Content,  
            }  
        ]  
    },   
];

const RouteWithSubRoutes = (route) => (  
    <Route  
      path={route.path}  
      component = {route.component}
      
    >  
        {
            route.chrid.map((r) => {
                return <Route exact path={r.path} component = {r.component} />
            })
        }
    </Route>
  );  

const RouterApp = () => {  
    return (  
        <Router>  
            <Switch>  
                {routes.map((route, i) => (  
                    <RouteWithSubRoutes key={i} {...route} />  
                ))}  
            </Switch>  
        </Router>  
    );  
};  

  
export default RouterApp;
```
上面的代码我们把路由配置放在一个数组对象里面，然后通过js 循环创建路由，这样可以便于我们在写项目的时候频繁的床架路由标签 
只需要增加配置对象就可以了。
然后在你的项目入口引入routers.jsx 路由组件就可以了  
这样你访问/pages/home 就是渲染的就是home页面，/pages/home/about 访问到就是home下的about这个页面，/pages/home/content   
访问的就是home下的content 这个页面。





在做项目中，会遇到这样的需求，就是一个项目有多个功能模块，每个模块下面有多个子模块，那么路由也需要满足这样的结构。其实就是子路由的概念，下面我们就来实现这样的一个功能。

React Router 子路由配置

敏捷开发中如何用用户故事来做项目计划  
1.确定用户素材
在一个项目中至少有一个用户素材，若素材比较大，可以拆分成多个小的用户素材。  
2.确定素材点，  
将每个素材再拆分成多个素材点，素材点一般采用斐波那契数列（0，0.5，1，2，3，5， 8，13，20...）为了方便把21改成20。确定用户素材的绝对大小，简称速度因子，（就是多长时间可以完成一个素材点），这样每个素材点既可以得到对应的开发时间。  
3.发布计划  
确定了素材点，将素材点之乘以速度因子就能知道每个素材的周期和成本，用户就可以根据每个素材的成本和每个素材的价值，去确定优先级，选择有限完成那些素材。  
4.迭代计划  
开发人员和用户一起确定迭代规模，客户选择他们想在首次迭代中要实现的素材，但不能选择与当前开发速度不符的素材  ，一旦迭代开始，客户就不能随意改变迭代期内要实现的素材。  
若最终没有完成所以的用户素材，迭代也要在指定的日期结束。然后根据已经完成的素材的估算值，计算出本期迭代的开发速度，这个速度可以用于计划下一次的迭代。  
5.任务计划  
每个开发人员，一个任务要在4到16小时完成，若大于16小时就应该拆分更小的任务，并尽可能的列出所有的任务  
每个开发人员在最近一次迭代中所完成的任务点，可以作为下一次迭代中的跟人预算。  
项目进行一半的时候，要召开一次会议。如果开发人员没有按期完成对应的任务，要重新分派，并告知用户。用户决定在本次迭代中去掉与之相差不大的任务或素材。  
需要注意的是，我们的目标时完成素材，如果一个项目结束时，大部分任务都完成了，但是没有一个素材被完成，那这个项目就很糟糕了，比如我们在项目进行一半的时候，至少要完成一个的素材，而不是任务。









敏捷开发中如何用用户故事来做项目计划

项目计划排期

要自己实现一个Promise 首先要弄清楚Promise的一些规则。Promise 有一个Promises/A+ 规范，  
也就是说我们可以自己去实现Promise但是要满足Promises/A+ 规范才行。  
Promises/A+ 官网地址：https://promisesaplus.com/  
 规范
 解决（fulfill）：指一个 Promise 成功时进行的一系列操作，如状态的改变、回调的执行。虽  然规范中用 fulfill 来表示解决，但在后面的 Promise 实现多以 resolve 来替代。  
 拒绝（reject）：指一个 Promise 失败时进行的一系列操作。  
 终值（eventual value）：所谓终值，指的是 Promise 被解决时传递给解决回调的值，由于     Promise 有一次性的特征，因此当这个值被传递时，标志着 Promise 等待态的结束，故称之终值，有时 
也直接简称为值（value）。  
 拒因（reason）：也就是拒绝原因，指在 Promise 被拒绝时传递给拒绝回调的值。    

 术语  
 Promise：Promise 是一个拥有 .then 方法的对象或函数，其行为符合本规范；  
 thenable：是一个定义了 .then 方法的对象或函数，文中译作"拥有 .then 方法"；  
 值（value）：指任何 JavaScript 的合法值（包括 undefined、thenable 和 Promise）；  
// 异常（exception）：是使用 throw 语句抛出的一个值。  
// 拒因（reason） ：表示一个 Promise 的拒绝原因。  
接下来我们来一步一步实现Promis 
1.Promise 是一个可以用new 关键字来创建的Promise 构造函数，接收一个立即执行的方法，该方法有两个参数，一个是成功时执行的fulfill函数，另一个时失败是执行的reject函数  
```
const PENDING = 'penging';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

class IPromise {
    constructor(executer){
        this.state = PENDING;
        this.value = undefined; // 成功的结果
        this.reason = undefined; // 失败的结果
       
        let fulfill = (value) => {
            if (this.state === PENDING) {
                this.state = FULFILLED;
                this.value = value;
            }
        }

        let rejected = (value) => {
            if (this.state === PENDING) {
                this.state = REJECTED;
                this.reason = value
               
            }
        }
        try { 
            executer(fulfill, rejected);
        } catch (error) {
            rejected(error)
        }
        
    }

    then (onFulfilled,onRejected) { 
          if (this.state === FULFILLED) {
                onFulfilled(this.value)  // 执行成功的回调函数
           }
           if (this.state === REJECTED) {
               onRejected(this.reason) // 执行失败的回调函数
           }        
    }
}
```

```
let p1 = new IPromise((fulfill,reject) => {
    fulfill('自己的promise')
})
p1.then((res) => {
  console.log('res', res)
})
```

// 执行node IPromise.js // 输出 手写promise
// 这样是在同步的情况下执行，若resolve 是在异步中就不能正常执行了。像下面这样
```
let p1 = new IPromise((resolve,reject) => {
    setTimeout(() => {
        resolve('自己的promise')
    }, 1000);
    
})

p1.then((res) => {
    console.log('res:', res)
}, (err) => {
    console.log('err:', err)

})
```
// 执行node IPromise.js // 什么都没输出  
 因为在浏览器事件循环中，异步任务是会被放到延时队列，等待浏览器主线程所有任务执行完成之后，再来任务队列按顺序逐个执行。
 这样的话在代码执行到setTimeout 的时候只是把 resolve函数放到延时队列中去了，继续往下执行到then方法的时候，由于没有执行resolve方法，此时的Ipromise 的状态还是Pending状态，
 所以在then方法中就没有可以满足执行的条件。等时间到了再执行resolve的时候，只是改变了IPromise的value值，和状态，并没有再次调用onFulfilled 或者onRejected，所以控制台就什么都没打印。
 如果我们在setTimeout事件到达后再去执行以下onFulfilled，或者onRejected 就可以了，所以我们需要把onFulfilled和onRejected保存起来，等到
 等到调用resolve的时候再去逐个执行保存起来的函数队列，这不就是把发布订阅设计模式吗。

```
class IPromise {
    constructor(executer){
        this.state = PENDING;
        this.value = undefined; // 成功的结果
        this.reason = undefined; // 失败的结果
        this.onFulfilledFns = [];  // 存放执行成功过的任务
        this.onRejectedFns = [] // 存放执行失败的任务

        let fulfill = (value) => {
            if (this.state === PENDING) {
                this.state = FULFILLED;
                this.value = value;
                this.onFulfilledFns.forEach(element => {
                    element()
                });

            }

        }

        let rejected = (value) => {
            if (this.state === PENDING) {
                this.state = REJECTED;
                this.reason = value;
                this.onRejectedFns.forEach(element => {
                    element()
                });
            }
        }
        try { 
            executer(fulfill, rejected);
        } catch (error) {
            rejected(error)
        }
        
    }

    then (onFulfilled,onRejected) { 
        if (this.state === FULFILLED) {
            onFulfilled(this.value)
        }
        if (this.state === REJECTED) {
           onRejected(this.reason)
        }
        if (this.state === PENDING) {
            this.onFulfilledFns.push(() => onFulfilled(this.value));
            this.onRejectedFns.push(() => onRejected(this.value));
         }
    }
}

let p1 = new IPromise((resolve,reject) => {
    setTimeout(() => {
        resolve('手写promise')
    }, 1000);
    
})

p1.then((res) => {
    console.log('res:', res)
}, (err) => {
    console.log('err:', err)

})
```
// 执行node IPromise.js // 输出 手写promise
上面代码可以看到我们首先定义了两个变量onFulfilledFns数组，用来存放成功时执行函数 和 onRejectedFns数组，失败时执行的函数，在then方法中，如果状态还是pending，那么就把onFulfilled，和onRejected分别存放到onFulfilledFns队列和onRejectedFns队列，然后在执行fulfill 和 reject的时候遍历onFulfilledFns 或 onRejectedFns 的任务逐个执行。  
Promise 是可以链式调用的，像下面这样
```
let p1 = new IPromise((fulfill,reject) => {
    fulfill(100)
    
  })
  let p2 = p1.then((res) => {
    return new IPromise((resolve) => {
      fulfill(new IPromise(() => {
        resolve('11')
      }))

    })
   
    
  },(err) => {
    console.log('err：',err)

  })

  p2.then((res) => {
    console.log('18res:', res)
  })
```
// 执行node IPromise.js // typeError: Cannot read properties of undefined (reading 'then')
    at Object.<anonymous> (D:\course\examples\src\pages\common\IPromise.js:121:6)
这是因为我们现在then方法什么也没有返回，所以P2就没有then方法，所以就会保错。
接下啦我们来实现IPromise的链式调用  
```
class IPromise {
    constructor(executer){
        this.state = PENDING;
        this.value = undefined; // 成功的结果
        this.reason = undefined; // 失败的结果
        this.onFulfilledFns = [];  // 存放执行成功过的任务
        this.onRejectedFns = [] // 存放执行失败的任务

        let fulfill = (value) => {
            if (this.state === PENDING) {
                this.state = FULFILLED;
                this.value = value;
                this.onFulfilledFns.forEach(element => {
                    element()
                });

            }

        }

        let rejected = (value) => {
            if (this.state === PENDING) {
                this.state = REJECTED;
                this.reason = value;
                this.onRejectedFns.forEach(element => {
                    element()
                });
            }
        }
        try { 
            executer(fulfill, rejected);
        } catch (error) {
            rejected(error)
        }
        
    }

    then (onFulfilled,onRejected) { 
        let p2 = new IPromise((fulfill, rejected) => {
            let x;
            if (this.state === FULFILLED) {
                x = onFulfilled(this.value)
                setTimeout(() => {
                    fulfillPromise(p2, x, fulfill, rejected)
                }, 0);
    
            }
            if (this.state === REJECTED) {
               x = onRejected(this.reason)
               setTimeout(() => {
                    fulfillPromise(p2, x, fulfill, rejected)
                }, 0);
            }
            if (this.state === PENDING) {
               this.onFulfilledFns.push(() => onFulfilled(this.value));
               this.onRejectedFns.push(() => onRejected(this.value));
            }

        })

        function fulfillPromise (p2, x, fulfill, rejected) {
            if (p2 === x) {
                return new Error('P2 不能等于 x')
            }
            if ((typeof x === 'object' && x !== null ) || typeof x === 'function' )         
            {
                x.then((r) => {
                    fulfillPromise(p2, r, fulfill, rejected)
                }, (e) => {
                    fulfillPromise(p2, e, fulfill, rejected)
                })
            } else {
                fulfill(x)
            }
        }
        return p2
    }
}
```  
promise 的then方法返回的是一个Promise 实例，所以我们将新的Ipromise 保存在P2 中，然后返回这个P2  
我们在链式调用的时候会把上一个promise的返回值作为下一个then方法的参数值传到下一个then方法中，所以下一个then方法是可以拿到上一个promise的返回值。onFulfilled 和 onRejected 就是上一个Ipromise 返回的值，将它保存到X中，然后调用fulfillPromise 第一个参数就是P2 （上一个IPromise实例），x 是上一个返回的值（可以是任何类型），fulfill（处理成功的函数）， rejected（处理失败的函数）。  
若x是一个对象，或者方法我们就在x的then方法中递归调用fulfillPromise，若是一个值类型（基本类型），就就直接调用 fulfill(x)
```
let p1 = new IPromise((fulfill,reject) => {
    fulfill('200')
    
  })
  let p2 = p1.then((res) => {
    console.log('res:', res)
    return new IPromise((fulfill) => {
        fulfill(new IPromise(() => {
            fulfill('链式调用成功')
      }))

    })
   
    
  },(err) => {
    console.log('err：',err)

  })

  p2.then((res) => {
    console.log('res:', res)
  })
```
// 执行node IPromise.js  // 先输出200在输出 链式调用成功    
Promise的核心代码就是这样，还有其他的方法，如Promise.all 方法，后面有时间我也会继续补上。










带你一步一步理解手写Promise源码，再也不怕面试官问你Promise的问题了

手写Promise源码

## 什么是重构  
```
在不改变代码外在行为的前提下对代码做出修改，一改变代码的内部结构的过程。
```
## 重构的职责
```
1.它运行起来所完成的功能。
2.应对变化（可扩展）。开发者有责任保证所有模块在生命周期中的变化，应该尽可能的简单。
3.要和阅读它的人进行沟通。即便一个不熟悉的开发人员，也应该能比较容易的阅读并理解它。
```

前端项目的重构是一个必要的过程，它可以提高代码质量，优化用户体验，增加可维护性和可扩展性。在本文中，我将介绍一些前端项目重构的技术和方法，帮助你提高你的前端项目的质量和效率。

### 清理冗余代码
在大多数情况下，前端项目中存在大量的冗余代码，这些代码可能是过时的、不必要的或者重复的。清理冗余代码可以减少代码量，提高代码质量，优化性能。

### 优化资源加载
前端项目通常包含大量的资源，例如图片、样式表和JavaScript文件。优化资源加载可以减少页面加载时间，提高用户体验。例如，可以使用CSS Sprites将多个图像合并到一个图像中，或者使用CDN加速资源加载。

### 使用模块化开发
模块化开发是一种将代码拆分成小的、独立的模块的开发方法。模块化开发可以提高代码的可维护性、可重用性和可测试性。例如，可以使用CommonJS或ES6模块化系统来组织代码。

### 采用响应式设计
响应式设计是一种将网站设计为能够自适应不同设备和屏幕大小的设计方法。采用响应式设计可以提高用户体验，减少代码量，提高可维护性和可扩展性。(根据实际需求，判断是否需要做响应式布局，不是所有项目都适合响应式布局)

### 使用自动化工具
自动化工具可以帮助你自动执行一些重复性、繁琐的任务，例如代码压缩、代码检查和测试。使用自动化工具可以提高开发效率，减少错误。

### 优化SEO
优化SEO可以提高网站在搜索引擎中的排名，从而增加访问量和转化率。例如，可以使用合适的标题、描述和关键词，使用语义化的HTML标签，优化页面加载时间等。

### 重构代码结构
重构代码结构可以提高代码的可读性、可维护性和可扩展性。例如，可以使用MVC或MVVM等设计模式来组织代码，使用面向对象的编程方法，减少嵌套和重复代码等。

前端项目的重构是一个必要的过程，它可以提高代码质量，优化用户体验，增加可维护性和可扩展性。在重构前端项目时，可以采用清理冗余代码、优化资源加载、使用模块化开发、采用响应式设计、使用自动化工具、优化SEO和重构代码结构等技术和方法。

在项目开发中，当业务变得越来越复杂，而且业务需求的变化，版本迭代的变化，让项目变得越来越难以维护，在这个时候就要考虑对项目进行重构了，那么应该如何去重构你的项目，重构的职责是什么？

如何重构你的项目

## 为什么要提出工程化  
1.成本超标，包括硬件成本，人员成本，时间成本等。  
2.性能不理想且功能不稳定。
3.开发过程混乱无序难以管理。  
4.前端逻辑越来越复杂，项目体积越来越大，代码不规范，维护成本高  
## 什么是前端工程化？
前端工程化 = 前端技术架构 + 前端工程服务体系  
## 前端架构师的职责
1.根据业务特征设计合理的前端架构  
2.根据架构特征搭建高效的前端工程服务体系  
## 前端的技术架构
 ### 编程语言
只要是前端项目，都必须用到HTML、CSS、js这三种技术。
### 技术规范
一般比较成熟的团队，都有规定的代码规范，甚至设立代码审查制度，这样一方面可以发现代码的缺陷以及算法对性能的不良影响，也纠正了开发者不规范的编码习惯方式，提高团队的统一性。
项目源码的组织结构、依赖管理以及第三方技术选型也是规范的一部分，统一的技术规范能够显著的提高团队协作和项目迭代的效率。  
## 组件化
组件是代码服用的一种模式。组件化具有封装性、扩展性、可组合性、可复用性等优点。按照与产品逻辑耦合程度的强弱，前端组件又分为基础组件和业务组件。  
## 性能
性能是评估应用程序高可用性的重要指标。性能又可分为加载性能和执行性能。加载性能主要目的是让内容更加的展现给用户，执行性能主要目的是快手响应用户的操作。要注意的是快并不是性能优化的唯一指标，需要性能和功能之间进行权衡。前端架构师需要在深刻理解浏览器渲染原理，编程语言特性，HTTP等知识的前提下指定适用前端并且与web整体架构相结合的性能优化策略。
## 工程服务体系
工程服务体系是开发、构建、测试、部署、持续化、监控与统计的一系列流程组成。目的是为了降低开发时间成本，和沟通成本。
### 工程服务体系的目标
* 降低开发的人力成本  
* 降低跨团队协作的沟通成本  ### 三级标题
### 开发
开发可分为独立开发，团队协作开发，跨团队协作开发。
前端工程服务体系在开发阶段可以提高效率的方式是
* 减少重复性体力劳动  
* 建立规范的代码版本管理规范  
* 辅助跨团队并行开发，节省开发时间成本
### 构建
前端构建如 less、SASS 等编译语言，对css 压缩、预编译，Es6 Modules、AMD、CommonJs 等模块体系的支持，ESMAScript规范转译，自动生成CSS Sprite, 以及react、vue 等框架编译。在构建环节
* 编程语言：将源代码转换为客户端可执行的代码。
* 性能优化：可以对代码压缩混淆，自动生成CSS Sprite,动态模块按需加载等。
* 部署策略：如给静态资源URL加入hash指纹和CDN 等
* 开发效率： 如文档生成，动态构建
* 审查评估： 如规范审查，性能评估等
### 测试
测试是工程服务体系必不可少且非常重要的一环，目标是能够让发布到生产化境的代码，能正常稳定运行。
### 部署
前端部署主要是将js、css、图片等静态文件发布到指定的服务器上。但是也可以用一些工具如docker部署来提高部署效率，以及解决不同环境的差异造成一些问题。
### 持续化
开发、构建、测试和部署构成了一个完整的迭代流程，工程化的第一步就是通过合理的使用工具提高各个环节的工作效率，第二部是搭建自动化流程来提高团队协作开发效率，降低迭代成本。第三是持续化  
  ### 持续集成(CI)
持续集成指的是，频繁地（一天多次）将代码集成到主干。将软件个人研发的部分向软件整体部分交付，频繁进行集成以便更快地发现其中的错误。
### 持续交付
持续交付指的是，频繁地将软件的新版本，交付给质量团队或者用户，以供评审。如果评审通过，代码就进入生产阶段。
### 持续部署
持续部署（continuous deployment）是持续交付的下一步，指的是代码通过评审以后，自动部署到生产环境。
## 监控与统计
监控主要是通过监控手段获取实时数据，观察性能表现和稳定性，快速分析问题定位问题，甚至提前预测问题提前干预，避免系统发生严重瘫痪。





  




前端经过多年的发展，目前前端的业务越来越复杂，越来越大，为了适应前端复杂的业务和效率，前端架构，前端工程化也势在必行。

前端工程化

## 前端编程语言
HTML、CSS、Javascript是啊前端语言的三件套。确切的说只有javascript 属于编程语言 html只是一种标记类语言，css 是一种样式语言。
## 前端渲染
前端最主要的功能就是渲染，让用户可以浏览浏览器的内容，并可以与浏览器产生交互。前端的发展非常迅速，从静态网页到动态网站，以及webApp 跨平台应用，使得前端工程越来越庞大和复杂，在渲染上也有一定的挑战性。  
前端渲染分为客户端渲染（CSR），和服务的渲染(SSR)。客户端渲染就是浏览器发起请求到服务器拿到数据后在浏览器端进行解析用javasc和html 以及css  渲染为可视化的ui界面。服务端渲染是借助与服务端编程语言或框架搭配HTML模板引擎将数据编译为HTML文档返回给浏览器，浏览器就可以直接展示返回的静态htm文档，可以实现内容快速展示的效果。
### 虚拟DOM技术
前端渲染是非常消耗性能的，尤其是大量的交互需要浏览器频繁的进行解析和渲染，造成页面卡顿，甚至卡死假象，为了解决这一问题，虚拟DOM 应运而生，虚拟DOM 就是将HTML元素以及属性，映射为一个拥有丰富属性的javascript对象，在接收到动态数据或用户操作指令后，会首先在内存中对虚拟DOM 进行更新，对比检测出受影响的对象，然后对这些所对应的真实DOM 进行修改，这样就可以在多次修改中，浏览器只需要进行一次更新，从而来提升渲染效率。
### 预渲染
从用户输入网址回车之后，浏览器的渲染流程大致如下  
打卡网页 - 骨架页面 - 异步请求 - 响应处理 - 真实也页面  
其中用户首次看大浏览器的页面内容，这段时间称为页面白屏时间，白屏时间是除去DNS查找，TCP握手，等开发者无法干预的浏览器工作外，从浏览器接收到第一个HTTP响应字节到HTML文档开始解析。SSR的白屏时间比较短，是因为HTML文档的HTTP请求响应的是真实内容，在服务端已经构建好了，所有在浏览器接受到内容后渲染即可见。而CSR白屏时间还需要计入js脚本加载，解析时间，以及一部HHTTP请求和响应的时间。  
预渲染是为了解决用户等待的耐心，预先渲染一个页面大致的骨架来提升用户的体验。但有两个问题一个是每个布局不同的页面都要搭配一个单独的骨架也i按，二是页面布局调整，骨架页面布局也要做出相应的调整。
### SEO
SPA页面对SEO很不友好，目前解决SPA的SEO方案有两大类   
1.构建阶段预渲染SPA的静态内容至index.html  
2.服务器判断请求来源，将爬虫重定向到预渲染服务器，预渲染服务器通过仿真浏览器环境解析index.html,并将解析后的HTML文档返回至爬虫请求资源  
比较好的做法是在构建阶段将SPA各个页面提前解析并存放于预渲染服务器中，在接收到用户请求之后即可返回数据，SPA的路由管理必须使用HTML5的History模式，并且需要服务器支持。对一些低版本的浏览器来说不建议采用。  
总体来说，像咨询类网站，内容详情等需要SEO的页面可以采用SSR模式，像管理后台等页面可采用CSR。



提到架构，少不了编程语言，开发不同的应用就要使用合适的编程语言来开发，要适用于业务架构和制定技术规范，来提高团队开发效率和维护效率。

前端技术架构-编程语言

1：问题出现的原因
出现这个问题是node.js 的版本问题，因为 node.js V17开始版本中发布的是OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制，可能会对生态系统造成一些影响。故此以前的项目在使用 nodejs V17以上版本后会报错。而github项目很多都是之前版本的npm，所以运行时候会出现这个问题。

解决办法一（推荐）

在项目中打开package.json文件夹，在serve或者dev处前面加上

set NODE_OPTIONS=--openssl-legacy-provider
一定要在前面，也就是要写成:

set NODE_OPTIONS=--openssl-legacy-provider  && vue-cli-service serve
而不是在后面加。再次运行即可解决。



解决办法二（不太推荐）
第二个方法则是改node的版本，从根处解决，不过可能你现在写的代码在之前的node版本不兼容了。大多数运行其他的代码就是为了实现对应的效果，能跑通运行即可，然后把那个代码实现的功能加到自己的项目上即可，所以不太推荐降低node的版本，但这里还是记录一下，既然是node.js V17开始版本中发布的是OpenSSL3.0，那么使用v16版本的就ok了。
在下面网站下载对应的node。
https://nodejs.org/download/release/v16.19.0/     
原文链接：https://blog.csdn.net/qq_42543264/article/details/134775699

项目运行报错this[kHandle] = new _Hash(algorithm, xofLen)；

自适应和响应式是两种常见的网站设计和开发方法，它们都致力于提供优秀的用户体验，但是它们之间存在一些不同点。

### 自适应设计

首先，我们来看自适应设计。自适应设计是指网站能够根据不同的设备大小和分辨率，自动调整布局和设计元素的大小和位置。它的主要特点是使用固定的布局，但是通过使用媒体查询来适应不同的屏幕大小。这种方法使得网站在不同设备上都能够保持良好的可用性和可访问性。

自适应设计的优点在于它可以为不同的设备提供不同的设计和布局，从而提供更好的用户体验。例如，当用户在手机上访问网站时，网站可以自动调整以适应小屏幕，从而提高了网站在移动设备上的可用性。

### 响应式设计

接下来，我们来看响应式设计。响应式设计是指网站能够根据不同的设备大小和分辨率，自动调整布局和设计元素的大小和位置，以适应不同的设备。它的主要特点是使用流式布局，即根据屏幕大小和分辨率，自动调整元素的大小和位置，从而提供更好的用户体验。

响应式设计的优点在于它可以为不同的设备提供相同的设计和布局，从而提供更好的用户体验。例如，当用户在电脑、手机或平板电脑上访问网站时，网站可以自动调整以适应不同的屏幕大小和分辨率，从而提高了网站的可用性和可访问性。

自适应和响应式的关系

在某些情况下，自适应设计和响应式设计可以结合使用，以实现更好的用户体验。例如，当网站需要在不同的设备上提供不同的内容时，可以使用自适应设计；而当网站需要在不同的设备上提供相同的内容时，可以使用响应式设计。这种方法可以为用户提供最佳的用户体验，从而提高网站的可用性和可访问性。


自适应和响应式是两种常见的网站设计和开发方法。它们都致力于提供优秀的用户体验，但是它们之间存在一些不同点。自适应设计主要关注于固定布局和媒体查询，而响应式设计主要关注于流式布局和自适应元素大小和位置。在实践中，这两种设计方法可以结合使用，以提供最佳的用户体验  
### 响应式实现方式
下面是一个简单的实现方式，采用rem的方式实现响应式。

```
const setPxToRem = throttle(() => {
      var width = window.innerWidth;
      var fontSize = width / 1920 * 100; // 1920是UI设计图的尺寸大小
      document.documentElement.style.fontSize = fontSize + ‘px’;
    }, 1000
)
在页面尺寸发生变化的时候调用setPxToRem 函数就可以了
```
rem是CSS3中的一个单位，它代表“根元素的字体大小”。rem的值会根据根元素的字体大小来计算，因此，如果根元素的字体大小改变，rem的值也会相应地改变。这种特性使得rem在响应式设计中非常有用，因为它可以让网站在不同的屏幕大小和分辨率下，自动调整元素的大小和位置。  
使用rem可以带来以下优点：

可以实现响应式设计。因为rem的值会随着根元素字体大小的改变而改变，所以可以根据不同的屏幕大小和分辨率，设置不同的根元素字体大小，从而实现响应式设计。

可以提高可访问性。使用rem可以让网站内容根据用户的设置进行缩放，从而提高可访问性。

可以简化代码。使用rem可以减少代码中的媒体查询和像素单位，从而简化代码。

使用rem的注意事项：

设置根元素的字体大小。在使用rem时，需要设置根元素的字体大小，通常是在html元素上设置。例如：html { font-size: 16px; }。

避免过度使用rem。虽然rem非常有用，但过度使用它可能会导致代码变得复杂，而且在一些旧的浏览器上可能不支持rem。

注意兼容性。虽然rem是CSS3中的一个单位，但是在一些旧的浏览器上可能不支持rem，因此需要注意兼容性的问题。

总之，rem是一个非常有用的CSS单位，它可以实现响应式设计，提高可访问性，并简化代码。在使用rem时，需要注意设置根元素字体大小，避免过度使用rem，并注意兼容性的问题。

自适应和响应式区别

今天换了个github账号向github 仓库推送时，报如下错误：
```
remote: Permission to yun-xiang-pro/examples.git denied topeojrct.
fatal: unable to access 'https://github.com/yun-xiang-pro/examples.git/': The requested URL returned error: 403

```
造成这个问题的原因是因为windows vscode 在登录github时，登录第一个账号的时候就在凭据管理器记录了登录github的凭据，第二次用其他账号登录的时候，就与第一次登录的用  
户名对应不上，所以就被权限控制了。
### 解决办法
第一步：在Windows10搜索栏中输入"credential manager"，启动凭据管理器。
第二步：在凭据管理器，删掉github.com凭据。
第三步：重新推送本地仓到GitHub代码仓，此时会弹出GitHub登录界面，填入GitHub用户名和密码，就可以成功完成推送工作了。
原文地址：https://www.jianshu.com/p/f8207a0caeca


remote: Permission to yun-xiang-pro/examples.git denied topeojrct.


remote: Permission to yun-xiang-pro/examples.git denied to peojrct

代码如下
```
<template>
    <div>{{nameRef}}</div>
   <div class="imgbox">
    <img class="imgel" :src="testJpg"/>
   </div>
</template>
<script setup>
import { ref} from 'vue';
import testJpg from '/assets/test.jpg';
const nameRef = ref('vue 项目搭建')
</script>
<style>
.imgbox{
    width: 50%;
    background-color: antiquewhite;
    overflow: hidden;
    aspect-ratio: 16/9;
}
.imgel{
    width: 100%;
    height: 100%;
}

</style>
上面的代码中将图片的容器宽度用百分比设置，然后加上  aspect-ratio属性，16/9 是设置的宽高比，那么在试图缩放的时候这个图片容器元素就会自动的保持16/9的缩放，然后设置图片宽高都设置100%就可以了。
```

在项目中经常会遇到图片自适应的问题，需要根据分辨率的大小，自适应的等比缩放，今天就给大家讲一个非常简单的实现方法