- 博客(98)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 react-router学习笔记
前端路由路由这个概念最早出现在后端，通过⽤户请求的url导航到具体的html⻚⾯。现在的前端路由不同 于传统路由，它不需要服务器解析，⽽是可以通过hash函数或者history API来实现。在前端开发中，可以使⽤路由设置访问路径，并根据路径与组件的映射关系切换组件的显示这整个过程都是在同 ⼀个⻚⾯中实现的，不涉及⻚⾯间的跳转，这也就是常说的单⻚应⽤（spa）。1、查看源码姿势1.1 代码仓库https://github.com/ReactTraining/react-router2.
2021-01-25 23:54:25
214
原创 JavaScript对象
1、概述一个对象就是一系列属性的集合一个属性包含一个名和一个值一个属性的值可以是函数，该属性也被称为方法2、对象和属性一个 javascript 对象有很多属性。一个对象的属性可以被解释成一个附加到对象上的变量。对象的属性和普通的 javascript 变量基本没什么区别，仅仅是属性属于某个对象。属性定义了对象的特征可以通过点符号或者方括号访问或者设置一个对象的属性对象的名字(可以是普通的变量)和属性的名字都是大小写敏感对象中未赋值的属性的值为undefined，而不是null
2021-01-20 18:19:12
622
原创 JavaScript函数
1、函数描述1.1 函数是头等(first-class)对象因为它们可以像任何其他对象一样具有属性和方法。它们与其他对象的区别在于函数可以被调用。每个函数其实都是一个Function对象1.2 返回值默认返回undefined使用 return 语句来指定一个要返回的值（使用new关键字调用一个构造函数除外）1.3 函数参数调用函数时，传递给函数的值被称为函数的实参（值传递），对应位置的函数参数名叫作形参。如果实参是一个包含原始值(数字，字符串，布尔值)的变量，则就算函数在内
2021-01-15 18:13:49
216
原创 冒泡排序
1、算法描述比较相邻的元素。如果第一个比第二个大，就交换他们两个。对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。 [1]针对所有的元素重复以上的步骤，除了最后一个。持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。2、实现从小到大排序，即大的先冒泡2.1 待排序数组const dataArr = [6, 5, 3, 4, 2, 1];2.2 实现算法描述的前两步 function bubbleSort1(a
2021-01-07 16:24:01
116
原创 css实现三角形
1、原理原理是利用设置 border 的颜色，通过设置各个方向的boder宽度来控制三角形，然后隐藏其他边的颜色。2、准备 div { /*背景色方便对比显示*/ background: #999999; /*必要条件*/ box-sizing: border-box; /*宽高根据实际需要设置*/ width: 100px; height: 100px; /*方便布局*/ margin-bottom: 32px;}3
2021-01-07 14:41:20
95
原创 数组去重
第一类 for 循环 /* 双重for循环去重*/ function func0(array) { const newArray = []; for (let i = 0; i < array.length; i++) { //1、第一层循环取出目标数组中的每一个元素itemOld const itemOld = array[i]; let contain = false;
2021-01-07 13:36:10
94
原创 反转数组
1、直接反转 function reverse(arr) { //拷贝一下数据，防止改变原数组 const copyArr = [...arr]; /* * 反转过程 * 1、copyArr[0] 和 copyArr[7] 交换 (copyArr.length - 1 - 0) * 2、copyArr[1] 和 copyArr[6] 交换 (copyArr.length - 1 - 1)
2021-01-07 10:55:27
97
原创 把字符串转换成驼峰命名
题目把指定字符串转成驼峰命名，如 get-element-by-id 转成 getElementById实现过程 /* * 整体思路去掉短横线并把每个单词首字母大些(第一个除外) * */ function toString(string) { //1、将字符串分割成单词数组，去掉短横线 const wordArr = string.split("-"); console.log(wordArr); //
2021-01-06 17:54:09
2483
原创 变量作用域
第二题 引用类型作用域题目 function Person(name, age) { this.name = name; this.age = age; } function func1(person) { person.name = "liSi"; person = new Person("wangWu"
2021-01-06 17:29:11
107
原创 实现水平垂直居中的4种方法
1、第一类 absolute 和 margin1.1 position: absolute 和 margin: auto .parent1 { width: 300px; height: 300px; background: brown; margin-bottom: 32px; position: relative; line-height: 300px; } .child1 {
2021-01-06 15:09:53
123
原创 JavaScript常见函数形式
建议使用 let 和 const 定义变量一、普通函数1.1 定义function 方法名称 (形参1,形参2,形参3...){ 封装代码; 封装代码; 封装代码;...}function 方法名称 (形参1,形参2,形参3...){ 封装代码; 封装代码; 封装代码;... return value;}1.2调用方法名称 (形参1,形参2,形参3...)；1.3示例代码<!DOCTYPE html><.
2020-12-23 19:31:27
156
原创 节流函数-throttle
1. 功能 throttle和防抖一样都是减少高频率执行代码的执行频率。2.使用场景oninputonresizeonscrollonmousemoveonmousehover等等3.节流 vs 防抖防抖：高频执行函数，降低到执行1次节流：高频执行函数，降低到执行n次，1 < n < 高频次数3.节流原理3.1 利用 setTimeout 延迟执行逻辑代码。在防抖的基础上添加变量，降低 clearTimeout 频率，增加执行次数。 let timer =
2020-12-22 17:49:38
512
原创 防抖函数-debounce
1. 功能减少高频率执行代码的执行频率。2.使用场景oninputonresizeonscrollonmousemoveonmousehover等等3.防抖原理3.1 利用 setTimeout 延迟执行逻辑代码。 let timer = null; element2.onkeyup = (event) => { if (timer) { window.clearTimeout(timer); } timer = setTimeout
2020-12-22 17:19:36
124
原创 JavaScript其他获取元素宽高方式
一、Window.getComputedStyle获取的宽高不包括 border 和 padding既可以获取行内样式设置的宽高又可以获取CSS文件设置的宽高只读不支持 IE8 及更早版本1.1 示例代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>getComputedStyle</title>
2020-12-22 16:17:13
220
原创 JavaScript三大家族
一、Offset 家族1.1 offsetParent返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素（relative、absolute）或者最近的 table,td,th,body元素。只读属性在 Webkit 中，如果元素为隐藏的（该元素或其祖先元素的 style.display 为 “none”），或者该元素的 style.position 被设为 “fixed”，则该属性返回 null。在 IE 9 中，如果该元素的 style.position 被设置为 “fixed”
2020-12-21 20:22:37
199
原创 JavaScript获取浏览器宽高
1、精简版 function ScreenSize() { let width = 0; let height = 0; if (window.innerWidth) { width = window.innerWidth; height = window.innerHeight; } else { width = document.documentElement.clie
2020-12-21 16:19:54
137
原创 H5 实现自定义拍照页面方案
方案不一定是最好的，但是能够节省时间一、结论PC 上可以实现移动端不能实现二、方案2.1 input 标签input 可以解决选择文件的问题。在PC和移动表现有区别PC 上直接选择文件移动端可以选择拍照和相册，选项随手机系统及版本变化，不可自定义（如只保留部分选项）在手机端拍照是直接调用系统相机拍照，也是不能自定页面的。2.2 自定义拍照页面方案核心原理：自定义拍照效果（如拍摄身份证、银行卡、人像）是通过 CSS 布局叠加 HTML 标签实现。获取视频流：通过 navi.
2020-09-23 11:35:53
2976
原创 自定义 webpack 配置4：优化配置
参考 webpack教程、create-react-app（eject后）配置，自定义一个适合的、可维护的webpack配置1. 保持版本最新较新的版本能够建立更高效的模块树以及提高解析速度。1.1 Node.js1.1.1 最新版本v14.7.01.1.2 查看本地版本node -v//或者node --version1.1.3 下载安装最新版本1.2 npm1.2.1 最新版本v6.14.71.2.2 查看本地版本npm -v//或者npm --version.
2020-09-04 11:43:26
426
原创 自定义 webpack 配置3：增强配置
参考 webpack教程、create-react-app（eject后）配置，自定义一个适合的、可维护的webpack配置1. 自动清理 /dist 文件夹设置缓存配置后，内容变更后的每次构建都会生成新的文件。但是 webpack 无法追踪到哪些文件是实际在项目中用到的。然后，需要在每次构建前清理 /dist 文件夹。使用插件可以自动完成。1.1 安装依赖yarn add clean-webpack-plugin -D1.2 修改 webpack.prod.js 文件const { me.
2020-09-04 11:42:51
491
原创 自定义 webpack 配置2：缓存配置
参考 webpack教程、create-react-app（eject后）配置，自定义一个适合的、可维护的webpack配置使用 webpack 来打包我们的模块化后的应用程序，会生成一个可部署的 /dist 目录，打包后的内容放置在此目录中。只要 /dist 目录中的内容部署到服务器上，客户端（通常是浏览器）就能够访问网站此服务器的网站及其资源。浏览器使用一种名为缓存的技术。可以通过命中缓存，以降低网络流量，使网站加载速度更快。在部署新版本时不更改资源的文件名，浏览器可能会认为它没有被更新.
2020-09-04 11:42:15
482
原创 自定义 webpack 配置1：基础配置
参考 webpack教程、create-react-app（eject后）配置，自定义一个适合的、可维护的webpack配置1.初始化yarn init初始化成功yarn init v1.17.3question name (my-webpack-config): question version (1.0.0): question description: question entry point (index.js): question repository url (https.
2020-09-04 11:41:16
406
1
原创 Git 学习笔记- 准备工作
操作系统 macOS一、说明基于命令行学习，原因如下GUI 不能涵盖所有的 Git 命令GUI 种类繁多，但是命令行可以做到统一macOS 使用终端（Terminal）； Windows 用户使用命令窗口（Command Prompt）或 PowerShell 。二、安装在执行安装操作之前，可以先查看版本信息，是否已经安装过了git --version如果能看到版本信息证明已经安装过了git version 2.23.0安装教程可以参考git官网的中文安装教程：1.5 起步.
2020-06-29 11:58:25
344
原创 微信公众号下载、播放、分享视频技术调研
微信公众号下载、播放、分享视频技术调研一、视频播放统一视频格式为mp4即可二、视频分享通过微信jssdk完成。支持分享到朋友/朋友圈、QQ/QQ空间。2.1、分享功能说明链接2.2、JSSDK使用条件2.2.1 注册微信公众号wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开...
2019-07-30 17:31:48
403
原创 20-webpack 加载字体优化
在 08-webpack加载字体 中，使用 file-loader 可以加载字体资源。通过 url-loader 将小文件转换成 base64 URIs 内联到 bundle.js 中，可以减少 HTTP 请求次数。一、添加字体添加 华文彩云.ttf 字体库,大小为 5.7 MB。二、编辑 index.jsimport "./style.css"function component...
2019-07-26 15:33:31
651
原创 19-webpack 加载图片优化
在 07-webpack加载图片 中，有2中方式可以加载图片资源通过 JavaScript ，使用 file-loader通过 CSS ，使用 style-loader其中，使用 file-loader 通过 JavaScript 加载图片的方式还可以继续优化。通过 url-loader 将小文件转换成 base64 URIs 内联到 bundle.js 中，可以减少 HTTP 请求次...
2019-07-26 14:55:26
379
原创 18-webpack 实现 Html、JavaScript、CSS 内联
在 10- webpack 自动生成 index.html 之后，index.html 的自动生成任务 由 html-webpack-plugin 接管。有时候会面临需要将一段 html标签内容、初始化页面的JavaScript、初始化样式CSS 需要内联的需要，可以直接写到 index.html 中去，但是为了方便维护最好还是把文件独立出来，然后由 webpack 自动完成内联任务。webp...
2019-07-25 17:43:34
1315
原创 17-webpack 压缩图片
在 07-加载图片 之后，便可以正常加载和显示图片了；但是这些图片都是未经压缩的原尺寸，webpack 通过 image-webpack-loader 压缩图片。一、添加图片在 src 目录下添加 icon.jpg 图片,编辑index.jsimport "./style.css"import Icon from './icon.jpg';//生成一个内容为Hello webpack !...
2019-07-24 10:32:12
634
1
原创 16-webpack 压缩 CSS 代码
从 06-webpack 加载 CSS 之后，能够正常加载 CSS ，并且能够正常显示。要看到压缩 CSS 代码效果，需要先把 CSS 从 bundle.js 中抽离出来，并导入独立的文件中去，然后再添加压缩操作。一、导出 CSS 到独立文件需要通过 mini-css-extract-plugin 插件来完成。1.1 安装npm install --save-dev mini-css-e...
2019-07-23 17:23:22
647
原创 15-webpack 压缩 JavaScript 代码
由于 TerserPlugin 是 webpack4+ 的内置功能，生产模式下默认开启，此处只做验证性演示设置 mode 为 production 配置后，webpack v4+ 会默认压缩你的代码。生产环境下默认使用 TerserPlugin ，并且也是代码压缩方面比较好的选择。一、未压缩 bundle.jsconst path = require('path');const Ht...
2019-07-23 17:22:19
539
原创 14- webpack 压缩 html 代码
在 10-webpack自动生成 index.html 之后，开始使用 html-webpack-plugin 自动生成的 html 文件，压缩功能也要通过他来完成。一、编辑 webpack.config.jsconst path = require('path');const HtmlWebpackPlugin = require("html-webpack-plugin");modu...
2019-07-23 17:21:07
1151
原创 13- webpack tree shaking
由于 tree shaking 是 webpack 的内置功能，生产模式下默认开启，此处只做验证性演示一、简介1.1 功能tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性，例如 import 和 export。1.2 寓意将应用程序想象成一棵树。绿叶表示实际用到...
2019-07-23 11:58:18
143
原创 12- webpack 自动编译代码
每次要编译代码时，手动运行 npm run build 就会变得很麻烦。使用 webpack-dev-server 可以帮助你在代码发生变化后自动编译代码。提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。一、安装npm install --save-dev webpack-dev-server//或者yarn add webpack-dev-ser...
2019-07-21 16:25:46
766
原创 11- webpack 自动清理 dist 目录
由于每次执行构建命令，webpack 都会在 dist 目录生成文件，导该目录 文件夹相当杂乱。通常，在每次构建前清理 dist 目录，是比较推荐的做法，因此只会生成用到的文件。通过clean-webpack-plugin 插件完成自动清理任务。一、安装插件npm install --save-dev clean-webpack-plugin//yarn add clean-webp...
2019-07-21 16:24:42
1423
2
原创 10- webpack 自动生成 index.html
index.html 文件是手动创建编辑的，js 文件是 webpack 自动生成的。当js文件名称改变时还需要手动修改 index.html 文件，随着应用程序增长， index.html 文件进行管理，一切就会变得困难起来。然而，可以通过插件 HtmlWebpackPlugin ，自动完成这个任务。一、安装插件npm install --save-dev html-webpack-plug...
2019-07-21 16:23:29
2201
原创 09- webpack 加载数据文件 json、xml、csv
一、加载 json 文件内置支持 JSON 解析，也就是说 import Data from './data.json' 默认将正常运行。1.1 添加 json 文件 demo09 |- package.json |- webpack.config.js |- /dist |- bundle.js |- index.html |- /src |- 华...
2019-07-18 17:42:33
2514
原创 08- webpack 加载字体
使用 file-loader 来处理字体文件。一、安装loader加载图片时已经安装过 file-loader ，无需重复安装。npm install --save-dev file-loader//或者yarn add file-loader --dev二、编辑 webpack.config.js 文件 const path = require('path'); modu...
2019-07-18 17:41:03
250
原创 07- webpack 加载图片
一、安装npm install --save-dev file-loader//或者yarn add file-loader --dev二、编辑 webpack.config.jsconst path = require('path'); module.exports = { entry: './src/index.js', output: { fil...
2019-07-18 17:37:23
240
原创 06- webpack 加载 CSS
为了在 JavaScript 模块中 import 一个 CSS 文件，需要使用 style-loader 和 css-loader，对CSS文件进行处理；然后，在此模块执行过程中，将含有 CSS 字符串的 一、安装 loadernpm install --save-dev style-loader css-loader//或者yarn add style-loader css-loader...
2019-07-18 17:36:30
121
原创 05-使用 npm scripts 运行webpack
使用以下命令运行本地webpack不是特别方便,npx webpack//或者npx webpack --config webpack.config.js可以设置使用快捷方式：npm scripts一、 添加 npm scripts编辑 package.json 文件，添加在 npm scripts 中添加一个 npm 命令：{ "name": "demo02", "ver...
2019-07-18 17:34:34
195
原创 04- webpack 起步
一、使用配置文件1.1 新建配置文件在package.json文件所在目录下新建webpack.config.js文件。完成之后目录格式如下 demo04 |- package.json |- webpack.config.js1.2 编辑文件内容指定入口文件和输出路径const path = require('path');module.exports = { ...
2019-07-17 11:56:22
173
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人