Typescript学习01 - 快速入门
安装与配置
安装 Node.js
全局安装
1npm i typescript -g
局部安装
1yarn add -D typescript
VS Code 中的配置
首次使用vsc编写ts时，vsc会自动进行相关配置
如果要关闭对于js文件的校验：在vsc的设置中搜索 validate ，禁用 JavaScript 验证即可
编译 TypeScript
使用 tsc 命令进行编译
1tsc test.ts
添加 -w 参数启动监听
1tsc test.ts -w
配置文件
执行 tsc --init 创建配置文件
执行 终端 -> 运行任务 -> typescript -> 监视 或 tsc -w 启动
类型
类型校验
123function sum(a: number, b: number) { return a + b}
类型推断
数组的类型推断：
对象的类型推断：
any类型
1234567let mo: any = 'morales.com.cn'mo = []mo = {}mo ...
React-Redux
Redux
Redux理解
redux是一个专门用于做状态管理的JS库(不是react插件库)。
可以用在React, Angular, Vue等项目中, 但基本与React配合使用。
作用: 集中式管理React应用中多个组件共享的状态。
Redux只负责管理状态
文档
英文文档 中文文档 Github
需要使用Redux的情况
某个组件的状态，需要让其他组件可以随时拿到（共享）。
一个组件需要改变另一个组件的状态（通信）。
总体原则：能不用就不用, 如果不用比较吃力才考虑使用。
redux工作流程
求和案例
纯React版
Count组件：
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051import React, { Component } from 'react'export default class Count extends Component { stat ...
React路由（React Router 6）
React Router 6 概述
React Router 以三个不同的包发布到 npm 上，它们分别为：
react-router: 路由的核心库，提供了很多的：组件、钩子。
react-router-dom: 包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如 <BrowserRouter>等。
react-router-native: 包括react-router所有内容，并添加一些专门用于ReactNative的API，例如:<NativeRouter>等。
与React Router 5.x 版本相比，改变了什么？
内置组件的变化：移除<Switch/> ，新增 <Routes/>等。
语法的变化：component={About} 变为 element={<About/>}等。
新增多个hook：useParams、useNavigate、useMatch等。
官方明确推荐函数式组件了！！！
准备工作
创建新项目：
1npx ...
React扩展
setState
setState更新状态的2种写法:
setState(stateChange, [callback])------对象式的setState
stateChange为状态改变对象(该对象可以体现出状态的更改)
callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
setState(updater, [callback])------函数式的setState
updater为返回stateChange对象的函数
updater可以接收到state和props
callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用
1234567891011121314151617181920212223242526272829303132import React, { Component } from 'react'export default class Demo extends Component { state = {co ...
Ant Design of React
antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
特性
🌈 提炼自企业级中后台产品的交互语言和视觉风格。
📦 开箱即用的高质量 React 组件。
🛡 使用 TypeScript 开发，提供完整的类型定义文件。
⚙️ 全链路开发和设计工具体系。
🌍 数十个国际化语言支持。
🎨 深入每个细节的主题定制能力。
官网 GitHub
安装与使用
12npm install antdyarn add antd
Demo
123456789101112131415161718192021222324import React, { Component } from 'react'import { Button, DatePicker } from 'antd'import { QqOutlined } from '@ant-design/icons'import 'antd/dist/ant ...
React路由（React Router 5）
相关理解
SPA
单页Web应用（single page web application，SPA）。
整个应用只有一个完整的页面。
点击页面中的链接不会刷新页面，只会做页面的局部更新。
数据都需要通过ajax请求获取, 并在前端异步展现。
路由
什么是路由?
一个路由就是一个映射关系(key:value)
key为路径, value可能是function或component
路由分类
后端路由：
理解： value是function, 用来处理客户端提交的请求
注册路由： router.get(path, function(req, res))
工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
前端路由：
浏览器端路由，value是component，用于展示页面内容
注册路由: <Route path="/test" component={Test}>
工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件
...
Javascript自定义工具函数
函数相关
call()
call()函数的作用与函数原型对象上的call方法是一样的：改变函数运行时的this值，并得到函数运行的执行结果
1234567891011121314function call(Fn, obj, ...args) { // 判断obj if(obj === undefined || obj === null) { obj = globalThis // globalThis: ES11新特性，用来指向全局对象 } // 为obj添加临时的方法 obj.temp = Fn // 调用temp方法 let result = obj.temp(...args) // 删除temp方法 delete obj.temp // 返回执行结果 return result}
测试：
123456789101112131415161718192021222324252627<!DOCTYPE html><html><head& ...
Numpy 初步
安装numpy：pip install numpy --user
引入numpy：import numpy as np
1 Numpy基本操作
1.1 列表转为矩阵
123456array = np.array([ [1, 4, 7], [2, 5, 8]])print(array)
1.2 查看维度
1print('Number of dim: ', array.ndim)
1.3 查看行数和列数
1print('rows and columns: ', array.shape)
1.4 查看元素个数
1print('Number of elements: ', array.size)
2 Numpy创建Array
2.1 维度
一维
12345# 一维arraya = np.array([2, 43, 29], dtype=np.int32) # np.int报warningprint(a)print(a.dtype)
多维
12345678# 多维arraya = np.array([[1 ...
仿购物网站商品图片放大镜
我们在浏览购物网站的商品详情页时，通常都会有一个展示商品图片的放大镜，如下所示：
下面我们就来仿一下这个功能。
首先是结构的搭建：
123456789<div id="container"> <div id="left"> <img src="img.jpg" alt="" style="width: 100%;"> <span></span> </div> <div id="right"> <img style="position: absolute;" src="bigimg.jpg" alt=""> </div></div>
然后做亿点样式：
12345678910111213141516171819202122232 ...
Promise学习
Promise介绍与基本使用
理解
抽象表达
Promise 是一门新的技术(ES6 规范)
Promise 是 JS 中进行异步编程的新解决方案（旧方案是单纯使用回调函数）
异步编程：
fs文件操作：require('fs').readFile('./index.html', (err,data)=>{})
数据库操作
Ajax网络请求：$.get('/server', (data)=>{})
定时器：setTimeout(()=>{}, 2000)
具体表达
从语法上来说: Promise 是一个构造函数
从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功或失败的结果值
使用Promise的原因
指定回调函数的方式更加灵活
旧的: 必须在启动异步任务前指定
promise: 启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定/多个)
支持链式调用, 可以解决回调地狱问题
回调地狱：回调函数嵌套调 ...