- 博客(99)
- 收藏
- 关注
RSS订阅原创 python爬虫快速入门
2、通过class获取table下的tbody标签的tr列表，获取到的是一个数组(注：前面加.)5、获取text，获取到的东西都是数组，所以我们要获取第0个元素(注：前面加.)12、记住.//和//是不一样的，为了防止错误，我们全部都要使用.//// 从当前节点选取子孙节点，而不考虑它们的位置，跨节点获取标签。4、获取tr标签的第二个td标签(注：前面加.)6、获取a标签里面的href的值(注：前面加.)7、获取数组的最后一个元素 -1(注：前面加.)3、从数组的第二个开始获取(注：前面加.)
2023-03-15 11:09:30
537
原创 redux原理
context.js下面展示一些 内联代码片。import React, { Component, useLayoutEffect, useReducer, useContext } from 'react' export const ReactReduxContext = React.createContext();App.jsimport Home from './component/home' import React, { Component } from 'react'; impo
2023-02-22 10:32:44
78
原创 react封装组件Button-第二章
先定义一些typescript类型import React, { FC, ButtonHTMLAttributes, AnchorHTMLAttributes } from 'react'export type ButtonSize = 'lg' | 'sm'export type ButtonType = 'primary' | 'default' | 'danger' | 'link'interface BaseButtonProps { className?: string; /**
2022-04-07 22:21:42
1316
原创 react封装组件入门-第一章
开始创建一个最简单的组件, 我们定义一个接口import React from 'react'interface IHelloProps { message: string}const Hello = (props: IHelloProps) => { return <h2>{props.message}</h2>}export default Hello;再一次去优化我们的组件，现在我们的组件的porps过于单一，我们传进来是什么就是什么，我们
2022-04-07 21:45:41
689
1
原创 typescript学习总结-一般就这样子用了
2-1 什么是 Typescript文档https://zhuanlan.zhihu.com/p/403119812-2 为什么要使用 Typescript优点：1、程序比较容易理解。2、减少低级错误，例如传入错误类型的参数，这些都能在编译期间发现。缺点：1、增加学习成本。2、短期内增加学习成本，如果只是一些简单的几个页面，业务逻辑也很简单，那么就没必要使用typescript。2-3 安装和初试 Typescript先安装npm install -g typescript写一段
2022-03-30 21:20:50
106
原创 react组件权限控制+路由权限+路由懒加载
利用react的contextapi来实现权限控制permission.jsimport React, { useEffect, useState, useContext } from "react"const PermissionContext = React.createContext({ permission: []});const getPermission = (permissionList) => { console.log('请求数据') retur
2022-02-21 23:10:24
4180
原创 webpack实现懒加载的几种方案
代码分割使用场景有以下第一种方法，假如我们a和b文件都依赖了第三方js，我们只需要使用如下依赖方式，就可以只需要动态依赖一次，导出使用react脚手架已经限制使用。第二种方式第三种方式，通过注释的方式的动态加载...
2021-12-11 16:44:57
1054
原创 React17版本实现路由懒加载
react17版本的react-router-dom的api发生改变，坑了我一笔index.jsimport React, { Component, Suspense } from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import {BrowserRouter, Route, Routes, Link, Outlet} from 'react-router-d
2021-11-21 12:24:02
656
原创 ssl协议，https协议基本原理
https涉及两次非对称加密，一次对称加密后端服务器有一组非对称加密公钥私钥，后端开发人员将公钥和网站信息提交给机构，机构将服务器公钥和网站域名以及网站的其它信息捆绑在一起成为一个证书，机构再把证书用机构的私钥进行加密得到一个加密证书。系统的公钥:在window系统安装完成后，就已经内置了各大厂商机构的公钥。后端开发人员把加密证书下载下来放到自己服务器，当浏览器向服务器发起请求的时候，服务器先把加密证书丢给浏览器，浏览器拿到加密证书，然后用自己Windows系统的公钥解密这个加密证书，我们就能拿到网站
2021-11-03 11:50:12
247
原创 使用 WebpackDevServer 提升开发效率
安装npm install webpack-dev-server -Dwebpack-dev-server基于dist文件启动一个静态服务器，有一个好处就是当我们修改文件之后，webpack会自动帮我们进行一次打包，自动刷新浏览器var HtmlWebpackPlugin = require('html-wenpack-plugin')var CleanWebpackPlugin = require('clean-webpack-plugin')var path = require('path'
2021-10-26 17:10:31
113
原创 html-wenpack-plugin
使用 plugins 让打包更便捷HtmlWebpackPlugin会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中npm install --save-dev html-wenpack-pluginvar HtmlWebpackPlugin = require('html-wenpack-plugin')var path = require('path')module.exports = { entry: 'index.js', outp
2021-10-26 14:30:53
62
原创 webpack如何使用淘宝图标字体文件
我们先选中自己需要的图标下载一个压缩包进来，然后里面有很多文件，只有红线的文件对我们有用1、在我们项目中创建一个font文件，把下面圈的四个文件丢进去。2、再把上面那个红圈iconfont.css引入的index.scss文件中去，然后修改引入的内容，修改引入图标的路径还要在webpack进行配置，因为webpack不识别svg文件这样我们就可以使用了业务引用代码，引入到类名上面去...
2021-10-26 14:24:44
63
原创 webpack样式模块化
下面是没有模块化的情况// index.js文件import avatar from './avatar.jpg'import 'index.scss'import createAvatar from './createAvatar'createAvatar()var img = new Image()img.src = avatarimg.classList.add('avatar')var root = document.getElementById('root')root.appe
2021-10-26 10:44:02
114
原创 帮助小白了解微前端底层的逻辑的代码
关键点：子应用要设置成umd打包格式，子应用devServer要设置跨域https://github.com/1250498077/micro-qianduan
2021-10-18 17:08:35
81
原创 获取浏览器前进后退事件
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>onhashchange测试</title></head> <body> <a href="#p2">p2</a&
2020-08-23 16:16:33
558
原创 react路由懒加载 react-loadable 实现
import React,{Component} from 'react';import { BrowserRouter as Router, Route, Switch,Link } from 'react-router-dom';import ReactDom from 'react-dom';import Loadable from 'react-loadable';const Loading = () => <div>Loading...</div>;co
2020-08-16 17:50:54
520
原创 react获取事件对象汇总
import React from 'react'class EventDemo extends React.Component { constructor(props) { super(props) this.state = { name: 'zhangsan', list: [ { id: 'id-1',
2020-07-27 00:10:06
904
原创 iframe父子传递信息
1.子向父通信parent.htmlwindow.addEventListener('message',function(e){ console.log(e.data); if(e.data.msg==='xxx'){ //一些自己的业务逻辑 }});child.htmlwindow.parent.postMessage({ msg:"xxx"},'*');2.父向子通信parent
2020-07-24 15:49:40
219
原创 个人工作中开发的页面ui展示
工时图：记录没人每天的开发任务以及任务的耗时。跟踪图：对每一个需求进行任务跟踪，包括跟踪测试用例，测试执行，以及该需求产生的缺陷数量。
2020-07-11 09:11:58
281
原创 react利用context设置主题
创建上下文import React from 'react';import ReactDOM from 'react-dom';const ThemeContext = React.createContext({ background: 'red', color: 'white'});通过静态方法React.createContext()创建一个Context对象，这个Context对象包含两个组件，和。class App extends React.Component { ren
2020-07-11 07:23:13
284
原创 react旧版和新版生命生命周期
getDerivedStateFromPropsstatic getDerivedStateFromProps(nextProps, prevState)组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法g
2020-07-10 21:13:32
124
原创 批量生成ajax请求方法，使用Promise.all包裹
在业务中需要上传大文件，所以需要切片并发上传async uploadChunks() { const requestList = this.data.map(async ({ formData }) => request({ url: "http://localhost:3000", data: formData }) ); await Promise.all(reques
2020-07-07 20:49:25
455
原创 ES Module 和 Commonjs 的区别
只有静态引入，tree-shaking才能够知道哪些引入哪些不引入。动态引入：要引入对的代码都没有执行，所以不会引入，所以tree-shaking不知道哪些引入哪些不引入。
2020-07-01 23:17:09
1732
原创 如何使用DllPlugin
假如有两个万年不变的库 "react": "^16.12.0", "react-dom": "^16.12.0"dll配置文件const path = require('path')const DllPlugin = require('webpack/lib/DllPlugin')const { srcPath, distPath } = require('./paths')module.exports = { mode: 'development', // JS 执行
2020-07-01 23:05:44
939
原创 webpack多进程打包优化的两个插件
// happyPack 开启多进程打包 new HappyPack({ // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件 id: 'babel', // 如何处理 .js 文件，用法和 Loader 配置中一样 loaders: ['babel-loader?cacheDirectory'] }), // ...
2020-07-01 22:47:01
169
原创 webpack4样式抽离
const path = require('path')const webpack = require('webpack')const { smart } = require('webpack-merge')const { CleanWebpackPlugin } = require('clean-webpack-plugin')const MiniCssExtractPlugin = require('mini-css-extract-plugin')const TerserJSPlugin =
2020-07-01 22:21:58
195
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人