- 博客(83)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 ElementUI实现Dialog弹窗拖拽
在 ElementUI 2.0 样式框架库中 el-dialog 弹窗并不能实现拖拽，虽然这个问题在 Element-Plus 中已经实现。但是对于框架库中使用ElementUI的用户，拖拽的效果则需要自行实现。自定义组件二次封装el-dialog，在自定义封装的组件中设置props（如draggable），当属性值为 true 时，将。中监听拖拽的逻辑进行实现。
2023-10-11 17:11:58
1041
原创 React17中对react-router-dom v6的使用
App.jsimport React, { Component } from 'react';import { Provider } from 'react-redux';import { BrowserRouter, Routes, Route } from 'react-router-dom';import store from './store';import Home from './pages/home';import Detail from './pages/detail';
2022-03-01 14:24:57
654
原创 React系列知识——redux及redux中间件的使用
Redux概念Redux用于存储各个组件的数据，将数据存到一个公共的store进行管理， Redux = Reducer + Flux。Redux 的工作流程 dispatch(actions) (previousState, action)Action Creators ----------------> Store ------------------------> Reducers ↑ ...
2022-03-01 14:17:24
734
原创 React系列知识——ref、生命周期函数、transition动画的使用
React中ref的使用import React, { Component, Fragment } from "react";import TodoItem from './TodoItem';import './TodoList.css'; class TodoList extends Component { constructor(props) { super(props) this.state = { inputValue: '', list...
2022-03-01 14:04:08
424
原创 React系列知识——几个概念点
props，state与render函数的关系当组件的 state 或者 props 发生改变的时候，render函数就会重新执行。当父组件的 render 函数被运行时，它的子组件的render函数都将被重新运行。React中的虚拟DOM方式一：1.state 数据2.JSX 模板3.数据 + 模板 结合，生成真实的DOM，来显示4.state 发生改变5.数据 + 模板 结合，生成真实的DOM，替换掉原先的DOM缺陷：第一次生成了一个完整的DOM片段第
2022-03-01 13:57:15
452
原创 React系列知识——PropTypes与DefaultProps的应用
PropTypes 提供一系列验证器，可用于组件接收到的数据类型是有效的。当传入的 prop值类型不正确时，JavaScript 控制台将会显示警告，propTypes仅在开发模式下进行检查。PropTypes使用不同验证器的例子：import PropTypes from 'prop-types';MyComponent.propTypes = { // 你可以将属性声明为 JS 原生类型，默认情况下 // 这些属性都是可选的。 optionalArray: PropType
2022-03-01 13:55:32
621
原创 React系列知识——React基础
React.js 使用起来相对更加灵活，用户可配置性更高；Vue.js 使用起来相对简洁，因为Vue 开放了许多API，但是因为诸多API在灵活性上被限制。React开发环境准备使用 React 的方式1.通过<script>标签引入 .js 文件来使用2.通过 create-react-app 脚手架工具安装npxnpx create-react-app my-appnpx 是 npm 5.2+ 及更高版本附带的包运行工具npmnpm init re
2022-01-18 14:54:25
833
原创 Webpack系列——一个Bundler的编写
Bundler 源码编写模块分析在项目 src 文件夹下建立下面三个文件：word.jsexport const word = 'hello';message.jsimport { word } from './word.js';const message = `say ${word}`;export default message;index.jsimport message from './message.js';console.log(messa
2022-01-18 14:44:33
197
原创 Webpack系列——如何编写一个 Plugin
webpack.config.jsconst path = require('path')const CopyrightWebpackPlugin = require('./plugins/copyright-webpack-plugin')module.exports = { mode: 'development', entry: { main: './src/index.js' }, plugins: [ new Copyri...
2022-01-18 14:44:20
290
原创 Webpack系列——如何编写一个 Loader
index.jsconsole.log('hello webpack')replaceLoader.js// 不能写成箭头函数，只能写显示的 function 声明函数，不然会有 this 指向问题module.exports = function(source) { return source.replace('loader', 'compiler loader')}replaceLoaderAsync.js// 在 webpack.config.js 配置的 opt..
2022-01-18 14:44:09
374
原创 Webpack系列——多页面打包的配置
webpack.config.jsconst path = require('path');const fs = require('fs');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');const AddAssetHtmlWebpackPlugin = require('add-asset-html-web.
2022-01-18 14:43:56
402
原创 Webpack系列——打包的性能优化
1.跟上技术的迭代（Node, Npm, Yarn）对Webpack、Node、Npm、Yarn等技术进行版本的升级，相关技术的版本更新，官网都会做出优化，升级技术可以一定程度的提高打包的性能2.在模块上尽可能少的应用 Loader合理的使用 exclude / include 可以降低使用 loader 的频率从而提高打包速度，如 exclude: /node_modules/ 因为 node_modules 中的代码是已经被转换过的代码，可以不必使用 loader 做二次转换。也即尽可能的让
2022-01-18 14:43:40
1182
原创 Webpack系列——EsLint 在 Webpack 中的配置
项目中安装 EsLint ：npm install eslint -S快速生成 EsLint 的配置文件：npx eslint --init运行命令后根据相关选项进行设定，成功操作后会在 src 下看到名为 .eslintrc.js的配置文件，在配置文件中可进行相关语法规范规则的编写。.eslintrc.jsmodule.exports = { "extends": "airbnb", "parser": "babel-eslint"}babel-esli...
2022-01-14 10:40:25
1041
原创 Webpack系列——WebpackDevServer 解决单页面应用路由问题
使用 HTML5 History API 时，可能必须提供 index.html 页面来代替任何 404 响应。通过设置devServer.historyApiFallback 为 true 来启用 ：webpack.config.jsmodule.exports = { // ... devServer: { historyApiFallback: true }}可以通过提供一个对象，对 rewrites这样的配置项进一步控制：module.e
2022-01-14 10:40:15
432
原创 Webpack系列——使用WebpackDevServer实现请求转发
webpack.config.jsmodule.exports = { // ... devServer: { proxy: { '/api': 'http://localhost:3000' } }}对路径 /api/users的请求将会被代理到 http://localhost:3000/api/users。如果不希望传递 /api ，可以进行重写路径：webpack.config.jsmodule...
2022-01-14 10:40:00
628
原创 Webpack系列——TypeScript 的打包配置
一、TypeScriptTypeScript 是 JavaScript 类型的超集，它能够被转换为普通的 JavaScript。为了在 webpack cli 中使用 ts ，需要安装特定的 loader 来转换 ts 语法。1.1 依赖安装npm install typescript ts-loader -D1.2 webpack.config.jsconst path = require('path')module.exports = { mode: 'develo..
2022-01-14 10:39:37
390
原创 Webpack系列——PWA的打包配置
安装 http-server:npm install http-server -D使用 http-server可以模拟实现服务器效果package.json中配置命令，在 dist 目录下开启一个 http-server{ ... "scripts": { "start": "http-server dist" ... }}PWA(Progressive Web Application)，当客户端第一次成功访问成功网页后，服务...
2022-01-14 10:39:26
453
原创 Webpack系列——库的打包
webpack 除了能够打包项目应用以外，还可以用来打包 JS 库。当其他人安装我们的库时，他们可能会在不同的环境中去引入，例如：import lib from 'lib' // ESM 的引入方式const lib = require('lib') // CommonJS 的引入方式require(['lib'], function () {}) // AMD 的引入方式二、步骤2.1 库代码假设设计了一个这样一个简单的库：// math.jsconst add.
2022-01-14 10:39:10
408
原创 Webpack系列——环境变量的使用
webpack 命令行 环境配置 的 --env 参数，可以允许你传入任意数量的环境变量。而在 webpack.config.js 中可以访问到这些环境变量。例如，--env.production 或 --env.NODE_ENV=local（NODE_ENV 通常约定用于定义环境类型）。webpack --env.NODE_ENV=local --env.production --progresspackage.json{ ... "scripts": { "bundle"...
2022-01-14 10:38:54
1514
原创 Webpack系列——浏览器缓存和Shimming的使用
webpack与浏览器缓存(caching)我们使用 webpack 来打包我们的模块化后的应用程序，webpack 会生成一个可部署的 /dist 目录，然后把打包后的内容放置在此目录中。只要 /dist 目录中的内容部署到 server 上，client（通常是浏览器）就能够访问此 server 的网站及其资源。而最后一步获取资源是比较耗费时间的，这就是为什么浏览器使用一种名为 缓存 的技术。可以通过命中缓存，以降低网络流量，使网站加载速度更快，然而，如果我们在部署新版本时不更改资源的文件名，浏览器
2022-01-14 10:38:40
248
原创 Webpack系列——CSS代码的分离
CSS 也可以从主文件中分离出来，默认情况下CSS打包后会被添加在 html 的 style 标签中。如果 CSS 代码有很多行，那么直接嵌入在 html 文件中是不合适的，我们希望它是以 <link>标签的形式去插入到 head 标签中，也就是外部引入 CSS 文件的形式。首先安装插件：npm install --save-dev mini-css-extract-plugin注意： 它要配合 css-loader 使用, 之前使用的 style-loader 去掉，此项配置
2022-01-14 10:37:46
586
原创 Webpack系列——预获取 / 预加载模块
预获取 prefetch: 在浏览器加载完必要的资源后，空闲时就会去获取可能需要的资源。预加载 preload: 预先加载当前页面可能需要的资源， 它会与必要资源并行请求。import(/* webpackPrefetch: true */ './asets/js/click')上述代码会在所有必要资源加载完成后，网络空闲就预先获取添加了魔法注释的异步模块。import(/* webpackPreload: true */ 'ChartingLibrary');module
2022-01-14 10:37:35
815
原创 Webpack系列——打包分析
可以通过运行 webpack --profile --json > stats.json 来生成此工具所需的 JSON 文件{ ... "scripts": { "bundle": "webpack", "watch": "webpack --watch", "dev": "webpack-dev-server --config ./build/webpack.dev.config.js", "build": "webpack --config ....
2022-01-13 08:33:40
552
原创 Webpack系列——代码分离(Code Splitting)
代码分离(Code Splitting)// index.jsimport _ from 'lodash';const ele = document.createElement('div');ele.innerHTML = _.join(['Code', 'Splitting'], '---');document.body.appendChild(ele);以上代码中，在开头同步引入了 lodash ，这没什么问题，但是一旦这个 index.js 文件很大，只要 index.js 中代码一
2022-01-12 15:54:07
463
原创 Webpack系列——不同模式的打包
Development 和 Production 模式的区分打包在不同模式下的配置上，存在着大量相同的代码，对于这些重复代码可以将它们分离出来共用，提高代码效率。1.webpack-merge插件安装：npm install webpack-merge -D这个插件可以将不同配置合并在一起，也就是可以将共用的配置和不同模式下的配置进行合并，这样就可以节约大量代码的书写。(1)共用配置新建一个文件 webpack.common.config.js （文件名可以自己起），用于编写共
2022-01-12 15:50:16
308
原创 Webpack系列——Tree Shaking
Tree Shaking在文件或者在组件文件中引入其他模块中的代码，但实际上我们只用到其中的一部分，剩下的代码则不需要引入，然而在默认情况下，webpack仍然是全部引入并打包的。这时，为了把多余部分剔除出去，就要用到 “ Tree Shaking ” 了，也就是摇树。经过 Tree Shaking，不该留在代码中的多余代码，则会被摇掉，这样能减轻代码量，提高性能。Tree Shaking 只支持 ESM 的引入方式，不支持 Common JS 的引入方式。 ESM: export +
2022-01-12 15:45:24
490
原创 Webpack系列——使用 Babel 处理 ES6 语法
有一些版本的浏览器对于JS新的语法(例如 ES6+)的支持不好，这时就需要将新的语法转换成 ES5 标准的语法，让浏览器正常识别它们，保证程序的稳定运行。1.依赖安装npm install -D babel-loader @babel/core @babel/preset-env2.Loader设置webpack.config.jsmodule: { rules: [ { test: /\.m?js$/, exclude: /node_module...
2022-01-12 15:41:06
402
原创 Webpack系列——热模块更新HRM
热模块更新HRM(Hot Module Replacement)运行 npm run start，此时，我们尝试对文件进行修改，然后回到页面，你会发现终端内 webpack 帮我们重新编译了代码，然后它会自动刷新，刷新后的页面被重置，之前在页面上的操作不见了，又要重新开始。我们想要的效果是，当文件修改重新编译后，页面不要全部刷新，只是响应发生变化的那一部分。这时候就要用到 HMR，热模块替换。注意：HMR 相当于 dev Server 的辅助，同样只用在开发环境，不要用在生产环境中！！！
2022-01-12 15:37:47
423
原创 Webpack系列——使用WebpackDevServer
使用 WebpackDevServer在通过 Loaders 处理完静态资源以及 Plugins 快捷打包后，我们基本就能愉快地打包文件了。这时，又遇到了新的问题，什么问题呢？那就是，我们只有在打包完之后，运行代码才能看到打包的结果。在开发过程中，我们希望的是自动打包，让我们边写代码边看到修改代码后的效果，而不是每次都手动打包。1. watch （监听模式）监听文件变动，变动则重新打包，输出目录中可以看到新的打包文件。在 package.json 中设置脚本。package.
2022-01-12 15:36:04
767
原创 Webpack系列——基础配置
Entry与Output的基础配置module.exports = { ... entry: { main: './src/index.js', sub: './src/index.js' }, ... output: { filename: '[name].js', // 输出文件的名称 path: path.resolve(__dirname, 'dist') }}index.ht...
2022-01-12 15:32:02
158
原创 Webpack系列——Plugin的使用
plugin的使用plugin 可以在 webpack 运行到某个时刻的时候，帮助实现一些事情。htmlWebpackPlugin 会在打包结束后自动生成一个html文件，并把打包生成的js自动引入到这个html文件中。插件安装：npm install --save-dev html-webpack-pluginwebpack.config.js配置在plugins选项数组中添加插件const HtmlWebpackPlugin = require("html-webpack
2022-01-12 15:27:11
208
原创 Webpack系列——Loader
关于Loaderloader 用于对模块的源代码进行转换。loader 可以在 import 或 "load(加载)" 模块时预处理文件。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许直接在 JavaScript 模块中 import CSS 文件！loader其实就是一个打包的方案，它指导某一个特定的文件webpack如何进行打包。file-loader 当发现代码中引入静态资源文件模块
2022-01-12 15:23:49
204
原创 Webpack系列——基础知识
定义webpack是一个模块打包工具。有一些语法，如 ES Module 模块引入方式， import ... from '...'的语法，浏览器并不能识别，webpack 能将这些语法进行转换翻译使得浏览器能识别、正确的运行代码。1.ES module 模块引入方式a.jsfunction fun() { ... }export default = fun;b.jsimport fun from './a.js'new fun();2.CommonJS 模块.
2022-01-12 15:16:18
341
原创 JavaScript冒泡排序与快速排序
冒泡排序// 冒泡排序function bubbleSort(arr) { for (var i = 0; i < arr.length; i++) { for (var j = 0; j < arr.length - 1 - i; j++) { if (arr[j] > arr[j+1]) { // 相邻元素两两对比 var temp = arr[j+1]; // 元素交换 arr[j+1] = arr[j]; arr[j] = temp;
2021-09-22 09:03:17
144
1
原创 JavaScript判断是否为对象
1、 第一选择是toString()方法let obj = {}Object.prototype.toString.call(obj) === '[object Object]'2、constructorlet obj = {}obj.constructor === Object3、instanceof需要注意的是：使用instanceof对数组进行判断也是对象let obj = {}obj instanceof Object && ！ob...
2021-09-22 08:59:29
531
原创 JavaScript实现保留两位小数
1、四舍五入var num = 2.446242342;num = num.toFixed(2); // 输出结果为 2.452、不四舍五入(1)Math.floor(15.7784514000 * 100) / 100 // 输出结果为 15.77(2)num.toString().slice()方法切割
2021-09-22 08:55:35
95
聊天室程序Java课程设计.docx
2019-11-14
数据库课程设计——库房管理系统.docx
2019-11-14
ATM机Java课程设计.doc
2019-05-14
图书管理系统课程设计报告(基于JAVA和SQLServer)
2018-11-25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人