- 博客(79)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 JavaScript 常用小方法
复制文本内容思路：使用textarea或input来创建虚拟元素区别：使用textarea复制文本时可以设置并保留\n换行符，粘贴后的文本具有换行的效果。使用input复制文本时不可以设置并保留\n换行符function copyText(val) { let text = val // let text = val + '\n' + val // 复制后的文本内容具有换行效果 const virticalInput = document.createElement("textarea")
2022-02-09 19:56:33
256
原创 NodeJs nvm的安装及配置
介绍：nvm是一款管理node.js版本的工具，可以使用nvm的命令快捷地切换node版本，方便开发nvm安装nvm下载地址可选择下载nvm-setup直接安装；也可以选择下载nvm-noinstall，其为绿色免安装版，但需要进行环境配置。安装nvm之前要做的工作：删除以下文件夹中全部关于node和nvm的资源C:\Program Files (x86)\nodejsC:\Program Files\nodejsC:\Users{User}\AppData\Roaming\npm.
2021-11-09 20:59:26
2011
原创 Vue Axios请求拦截器、响应拦截器设置
Axios的请求拦截器和响应拦截器文章目录Axios的请求拦截器和响应拦截器1 请求拦截器2 响应拦截器1 请求拦截器作用在发送请求之前进行一些操作。如在请求体中使用Authorization字段提供token令牌。import axios from 'axios'import Vue from 'vue'axios.defaults.baseURL = 'http://127.0.0.1:9000/api/private/v1/'// 请求拦截器axios.intercept
2021-07-23 15:19:46
372
1
原创 CSS 清除浮动样式，Ctrl+C，Ctrl+V拿来就用
清除浮动.clearfix:before,.clearfix:after{ content:""; display:table; /*触发BFC，防止外边距合并*/}.clearfix:after{ clear:both;}.clearfix{ /*IE浏览器适配*/ *zoom；1；}
2021-07-17 11:27:57
139
原创 JavaScript 五大主流浏览器内核及Js引擎介绍
主流浏览器区别1 五大主流浏览器IEFirefoxGoogleChromeSafariOpera厂商浏览器内核备注Js引擎兼容前缀GoogleChromewebkit > Blink2008年 chromium，Blink是2013年的分支V8-webkit-mozilla基金会FireFoxGecko开源、跨平台SpiderMonkey > TraceMonkey > JaegerMonkey-moz-微软I
2021-07-17 11:26:11
1611
原创 JavaScript 正则表达式
文章目录正则表达式1 定义2 使用2.1 创建正则表达式2.2 正则表达式测试3 正则表达式中的特殊字符3.1 正则表达式的组成3.2 边界符3.3 字符类3.4 量词符3.5 括号总结3.6 预定义类4 正则表达式中的替换4.1 replace替换4.2 正则表达式参数正则表达式1 定义正则表达式是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。特点：灵活性、逻辑性和功能性强。快速简单地达到对字符串的复杂控制2 使用2.1 创建正则表达式通过调用Re
2021-07-17 09:03:04
87
1
原创 React 简单了解一下React中虚拟DOM和Diff算法
React中的虚拟DOM和Diff算法执行过程初次渲染时，React会根据初始state(Model)，创建一个虚拟DOM对象(树)。根据虚拟DOM生成真实的DOM树，并渲染到页面。当数据发生变化时，重新根据新的数据创建新的虚拟DOM对象(树)。使用DIff算法对比新旧两个虚拟DOM对象，得到需要更新的内容。React只将变化的内容更新(patch)到DOM中，重新渲染界面。render方法render方法调用并不意味着浏览器进行重新渲染。render方法调用仅仅说明要执行D
2021-07-17 08:59:03
138
原创 React React中的路由，介绍和使用。
React路由1 使用步骤安装npm install react-router-domyarn add react-router-dom导入路由核心组件三个核心的组件：BrowserRouter、Route、Linkimport { BrowserRouter as Router, Route, Link } from 'react-router-dom'使用Router组件包裹整个应用（一个React应用只需要使用一次）。两种常用的Router：HashRouter
2021-07-17 08:58:33
214
2
原创 React React组件的生命周期函数
React的生命周期文章目录React的生命周期1 生命周期图示2 生命周期的三个阶段3 生命周期执行顺序3.1 创建阶段3.2 更新阶段3.3 卸载阶段3.4 新生命周期函数执行顺序1 生命周期图示旧版生命周期新版生命周期2 生命周期的三个阶段创建阶段（挂载时）更新阶段卸载阶段3 生命周期执行顺序3.1 创建阶段constructor触发时机：创建组件，初始化render触发时机：组件渲染完毕（禁止在render中调用this.setState，会发生
2021-07-16 19:34:44
199
3
原创 React React组件之间的通信方式
组件通信文章目录组件通信1 组件的props1.1 作用1.2 组件标签属性来传递数据1.3 函数组件和类组件来接收数据1.4 props特点1.5 children属性1.6 props校验2 父传子3 子传父4 兄弟组件之间传递5 Context1 组件的propsProps 是组件的配置。props 由父组件传递给子组件，并且就子组件而言，props 是不可变的。1.1 作用接收传递给组件的数据1.2 组件标签属性来传递数据通过给组件标签添加属性的方式传递数据。React
2021-07-16 19:32:55
306
2
原创 React React的事件处理
React事件处理文章目录React事件处理1 事件绑定2 事件绑定this指向1 事件绑定语法：on +事件名 = { 事件方法 }事件采用驼峰命名法例：onClick={()=>{changeWord}}2 事件绑定this指向箭头函数利用箭头函数自身不绑定this的特点。addNum (){ this.setState({ })}//...省略render(){ return( <button onClick
2021-07-16 19:30:31
79
原创 React React组件的创建和基本使用
React组件文章目录React组件1 使用函数创建组件2 使用类创建组件3 抽离组件到单独的js文件4 有状态组件与无状态组件5 组件中的state与setState5.1 state的基本使用5.2 setState()修改状态6 高阶组件6.1 概念6.2 使用React组件有两种创建方式，分别是使用函数创建和使用类创建。此二者一般称为函数组件和类组件。当组件较多时可以把单独的每个组件抽离到单独的js文件中，方便调用和维护。1 使用函数创建组件函数名必须大写字母开头，作为渲染组件时
2021-07-16 19:29:08
190
2
原创 Vue Vue常用的几种项目优化方法
Vue项目优化文章目录Vue项目优化1 代码层面的优化1 长列表性能优化2 事件的销毁3 图片懒加载4 路由懒加载5 按需加载插件2 Webpack层面的优化2.1 压缩图片2.2 提取公共代码2.3 模板预编译2.4 提取组件的 CSS2.5 优化 SourceMap2.6 构建结构输出分析2.7 Vue项目的编译优化3 基础的Web技术优化3.1 开启gzip压缩3.2 浏览器缓存3.3 CDN的使用3.4 Chrome Performance 查找性能瓶颈Vue项目的优化一般分为代码层面、Web
2021-07-16 19:15:57
5344
9
原创 微信小程序 小程序性能优化常用的几种方法
小程序性能优化文章目录小程序性能优化1 提升加载性能1.1 控制包的大小1.2 优化异步请求2 提升渲染性能2.1 减少setData的数据量2.2 及时销毁本页面用不到的资源占用提升小程序的性能可以从两个关键点入手：加载性能、渲染性能。1 提升加载性能1.1 控制包的大小压缩代码，清理无用的冗余代码图片放在CDN采用分包策略分包预加载独立分包1.2 优化异步请求尽量选择在onLoad周期函数中发起请求。把请求结果放入缓存中，留待后用。请求中先展示骨架图。先反馈出
2021-07-16 19:12:27
772
原创 JavaScript cookies、sessionStorage、localStorage三种存储方式的区别与使用，包含基本使用方法。
cookie、sessionStorage与localStorage的区别与使用文章目录cookie、sessionStorage与localStorage的区别与使用1 三者区别1.1 cookie1.2 sessionStorage1.3 localStorage2 使用方法2.1 cookie的使用2.2 sessionStorage的使用2.3.1 存储数据2.3.2 读取数据2.3.3 修改数据2.3.4 删除数据2.3 localStorage的使用2.3.1 存储数据2.3.2 读取数据2.
2021-07-16 19:09:55
268
2
原创 JavaScript 伪数组转化为真数组，实测有效的几种方法。
伪数组转真数组文章目录伪数组转真数组1 Array.protype.slice.call(objArr)2 Array.from()3 扩展运算符4 用原型继承伪数组就是像数组的对象，其中包含有length属性。按照索引方式存储数据能调用数组的push，pop等方法//例如：obj={ "0":"SillyBoy", "1":20, length:2}伪数组：<div> <p>111</p>
2021-07-16 19:07:27
388
1
原创 JavaScript 数组去重的几种常见方法
数组去重方法文章目录数组去重方法方法一 双循环方法二 利用splice直接在原数组进行操作方法三 利用对象的属性不能相同的特点进行去重方法四 数组递归去重方法五 利用indexOf以及forEach遍历数组法方法六 利用ES6的set方法七 数组下标判断法方法一 双循环双层循环，外层循环元素，内层循环时比较值如果有相同的值则跳过，不相同则push进数组方法二 利用splice直接在原数组进行操作双层循环，外层循环元素，内层循环时比较值值相同时，则删去这个值注意点:删除元素之后，需要将数组的长
2021-07-16 19:04:54
192
原创 React 了解React的基本使用
React基本使用1 特点声明式设计------采用声明范式，可以轻松描述应用。高效------React通过对DOM的模拟，最大限度地减少与DOM的交互。灵活------可以与已知的库或框架很好地配合。JSX------JSX 是 JavaScript 语法的扩展。组件单向响应的数据流------实现了单向响应的数据流，从而减少了重复代码。2 安装需要三个库： react.development.min.js 、react-dom.development.min.js 和 babel
2021-07-13 14:12:13
87
原创 Git Git基础详解
文章目录1 Git的基本操作2 远程控制3 打标签4 分支4.1 手动解决合并分支的冲突5 生成公私钥基本操作说明1 Git的基本操作序号命令说明1master主分支2git init初始化一个仓库3git add [文件名…]将指定的文件放入暂存区stage4gti add .将所有的文件都放入暂存区stage5git commit -m ‘说明文字’将暂存区里面的内容提交到本地仓库6git log查看提交日志7git
2021-07-09 18:04:02
149
原创 小程序 微信小程序中有哪几个生命周期函数，有什么作用，如何使用？夺命连环Call !
1 生命周期函数浏览器的顶层对象是Window，node的顶层对象是Global，小程序的顶层对效果是WX。Page实例有5个生命周期函数1 onLoad() {}监听页面加载执行一次2 onShow() {}监听页面显示执行多次3 onReady() {}监听页面初次渲染完成执行一次4 onHide() {}监听页面隐藏执行多次5 onUnload() {}监听页面卸载执行一次生命周期函数执行顺序文件保存刷新后：onLoad > onSho
2021-07-07 19:47:58
1902
原创 JSONP JSONP是什么？如何使用它解决跨域问题？
JSONP什么是JSONPJSONP（JSON with Padding）是JSON的一种”使用模式“，可用于解决主流浏览器的跨域数据访问的问题。JSONP的实现原理由于浏览器同源策略限制，网页无法通过Ajax请求非同源的接口数据。script标签不受浏览器同源策略的影响，可以通过src属性，请求非同源的js脚本数据。通过函数调用的形式，接收跨域接口响应回来的数据。实现JSONP定义一个success回调函数。<script> function suc
2021-07-07 19:44:13
545
原创 Ajax axios库是什么？如何使用axios发送请求？
文章目录axios基础1 介绍2 特性3 语法3.1 GET请求方式3.2 POST请求方式3.3 使用axios发送GET请求3.4 使用axios发送POST请求4 示例4.1 GET请求方式4.2 POST请求方式4.3 直接使用axios发送GET请求4.4 直接使用axios发送POST请求4.5 请求拦截器4.6 响应拦截 统一处理http状态信息5 创建实例6 实例方法axios基础1 介绍Axios是一个基于Promise的HTTP库，可以用在浏览器和node.js中。是专注于网络数
2021-07-07 19:42:47
153
原创 Ajax $.get、$.post、$.ajax三种不同的请求方式，jQuery中的Ajax解析
文章目录jQuey中的Ajax1 $.get()函数2 $.post()函数3 $.ajax()函数jQuey中的AjaxjQuery对XMLHttpRequest进行了封装，提供一系列ajax相关的函数，极大降低了Ajax使用难度。jQuery中发起Ajax请求最常用的方法：$.get()：从服务器获取数据。$.post()：向服务器提交数据。$.ajax()：既能获取又能提交。1 $.get()函数功能：发起get请求，获取服务器上的资源到客户端。语法：$.get(u
2021-07-07 19:40:38
274
原创 CSS CSS的选择器及其权重到底是怎么计算的？
选择器常见的选择器有以下几种ID选择器、类选择器、标签选择器、伪类、伪元素、类型选择器…选择器权重选择器的优先权用权重来计算，权重越高，优先级越高。样式选择器权重!important正无穷内联样式1000ID选择器100类选择器10伪类10属性选择器10元素选择器1伪元素1...
2021-07-07 19:36:54
76
原创 ES6 lterator迭代器是个什么东西？有什么用？
文章目录Iterator1 介绍2 迭代过程3 可迭代的数据结构普通对象不可迭代for...of循环可迭代的数据结构可迭代的数据结构Iterator1 介绍Iterator 是 ES6 引入的一种新的遍历机制，迭代器有两个核心概念：迭代器是一个统一的接口，它的作用是使各种数据结构可被便捷的访问，它是通过一个键为Symbol.iterator 的方法来实现。迭代器是用于遍历数据结构元素的指针（如数据库中的游标）。2 迭代过程迭代的过程如下：创建：通过 Symbol.iterator 创建
2021-07-07 19:28:43
290
原创 ES6 模块化规范是什么？CommonJs模块化与ES6模块化规范有什么区别？
文章目录模块化1 模块化优势2 基础模块封装说明3 CommonJS模块化规范3.1 导出module.exports3.2 导入require4 ES6模块化规范4.1 导出export4.2 导入import模块化1 模块化优势防止命名冲突代码复用高维护性2 基础模块封装说明自定义：在匿名函数内部定义一个对象，为对象添加需要暴露到外面的属性或方法，最后返回此对象，用一个变量接收。使用：直接使用接受的对象的属性和方法即可。//ma.jsvar _ma = (function()
2021-07-07 19:27:18
444
原创 Git Git概念
文章目录Git1起步---关于版本控制1.1 文件的版本1.2 版本控制软件1.3 版本控制系统的分类2 Git基础概念2.1 什么是Git2.2 Git的特性2.3 Git中的三个区域2.4 Git中的三种状态2.5 基本的Git工作流程Git1起步—关于版本控制1.1 文件的版本操作麻烦命名不规范容易丢失协作困难1.2 版本控制软件概念：用来记录文件变化，以便日后查阅某版本修改情况的系统（版本控制系统）。好处：操作简便易于对比易于回溯不易丢失协作方便1.3
2021-07-07 14:12:42
98
原创 Webpack Webpack打包文件配置基本使用
文章目录webpack1 概念1.0 webpack发展历史1.1 官方解释1.2 功能1.3 核心概念1.4 入口（entry）1.5 输出（output）1.6 loader1.7 插件（plugin）1.8 模式（mode）1.9 浏览器兼容性（browser compatibility）1.10 环境（environment）2 入口（entry）2.1 基本使用2.2 配置打包的入口和出口2.3 配置webpack的自动打包功能2.4 配置html-webpack-plugin生成预览界面2.5
2021-07-06 22:06:22
446
原创 Webpack 浅析webpack基础
文章目录webpack基础1 打包CSS1.1 打包逻辑1.2 打包LESS1.3 打包成独立的CSS文件1.4 添加样式前缀1.5 格式校验1.6 压缩CSS2 打包HTML3 打包JS3.1 打包3.2 JS格式校验4 打包图片5 打包字体6 资源模块（Assent Modules）7 开发服务器（Dev Server）5 打包字体6 资源模块（Assent Modules）7 开发服务器（Dev Server）webpack基础1 打包CSS1.1 打包逻辑非JS的文件打包，需要对应的lo
2021-07-06 22:05:08
161
原创 Webpack Webpack实践配置
文章目录1 实践1.1 初始化项目1.2 安装webpack1.3 创建入口文件1.4 执行打包（指定mode)2 webpack配置文件2.1 配置文件是用来简化命令行选项的2.2 配置文件名称是webpack.config.js2.3 配置详情1 实践1.1 初始化项目mkdir myproject && cd myproject && npm init -y1.2 安装webpack安装命令默认安装版本5npm install -D webpack
2021-07-06 22:04:20
71
原创 Webpack 浅析Webpack的几个核心概念
文章目录webpack核心概念1 入口2 出口3 加载器4 插件5 模式6 模块7 依赖图webpack核心概念入口（Entry）出口（Output）加载器（Loader）插件（Plugin）模式（Mode）模块（Module）依赖图（Dependency Graph）1 入口打包时，第一个被访问的源码文件。默认为src/index.js（可以配置）。webpack通过入口，加载整个项目的依赖。2 出口打包之后，输出的文件名称。默认为dist/main.js（可以配置
2021-07-06 22:03:45
93
原创 Webpack Webpack简介
webpack简介从本质上讲，webpack是一个现代的JavaScript应用的静态模块打包工具。模块（模块化开发，可以提高开发效率，避免重复造轮子）打包（将各个模块，按照一定的规则组装起来）官网：https://webpack.js.org/特点：功能强大（打包、构建、发布web服务）学习成本高功能有好的模块化支持。合并打包多个文件，减少http请求次数，提高效率。编译代码，确保浏览器兼容性。压缩代码，减少文件体积，提高加载速度。监测代码格式
2021-07-06 22:01:50
217
原创 Vue 浅析Vuex五个核心部分的作用
1 Vuex核心五个核心部分statemutationactiongetter1.1 statestate提供唯一的公共数据源。所有的全局共享的数据都放在Store的state里面定义。//创建store数据源，提供唯一公共数据const store = new Vue.Store({ state:{ count:0 }})组件访问数据方式一：<p>{{this.$store.state.count}}</p
2021-07-06 21:58:19
577
原创 Vue Vue项目里面使用的$refs与$ref是什么意思，有什么用？
$refs与ref是什么说明：vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素）使用：在 HTML元素 中，添加ref属性，然后在JS中通过vm.$refs.属性来获取注意：如果获取的是一个子组件，那么通过ref就能获取到子组件中的data和methods<div id="app"> <input type="text" ref="input1"/> <button @click="add">添加<
2021-07-06 21:56:41
1003
原创 Vue Vue-CLI脚手架的介绍和简单使用
文章目录Vue CLIVue CLI2初始化项目过程项目目录解析Vue CLI3初始化项目过程Vue CLI概念：CLI即Command-Line Interface，命令行界面，俗称脚手架。Vue CLI是官方发布vue.js项目脚手架。使用脚手架可以快速搭建Vue开发环境以及对应的webpack配置。脚手架依赖webpacknode.jsnpm安装脚手架npm install -g @vue-cli拉取2.x模板（旧版本）npm install -g @vue
2021-07-06 21:55:02
93
原创 NodeJs npm install -D、-g、-S命令的后缀名之间有什么区别？
npm install -D -S -g的区别npm安装包的时候有时候后缀为-S，有时候为-D，还有-g。那么这几个后缀在安装相关依赖包的时候有什么区别呢？其实很简单，情况如下常用的npm安装后缀：npm安装后缀写入到用于环境常用包-D、–save-devdevDependencies对象开发环境babel，sass-loader，gulp ，webpack-S、–savedependencies对象生产环境-g全局安装解释说明：np
2021-07-06 21:48:20
1486
原创 JavaScript Js作用域精解。什么是Js作用域，有什么用？
文章目录详解作用域与作用域链1 JS代码执行步骤2 JS预编译2.1 AO对象2.2 GO对象2.3 [[scope]]作用域2.4 scope chain作用域链3 函数执行时作用域及数据变化3.1 第一步：定义外层函数a3.2 第二步：执行函数a3.3 第三步：定义内层函数b3.4 第四步：执行函数b3.5 解析：函数执行前后的AO、GO变化闭包1 闭包定义2 闭包的主要作用3 闭包应用4 缺点4 缺点详解作用域与作用域链友情链接渡一教育首先，再要搞明白什么是作用域什么是作用域链之前，先要明白几
2021-07-03 18:01:09
180
2
原创 JavaScript 浅析try-catch-finally异常处理是什么意思
文章目录try-catch-finally语句1 作用2 执行流程3 常见的错误类型try-catch-finally语句1 作用用于语句发生错误时，捕获错误异常，并做出相应处理。try{ //无错正常执行；有错抛出错误，块作用域内后续代码不再执行}catch(e){ //捕获错误并作出相应处理 console.log(e.name + ':' + e.message);}finally{ //[可选] //无论出错与否，都会执行}2 执行流程
2021-07-03 17:57:19
152
原创 JavaScript 浅析HTTP三次握手是什么意思
HTTP三次握手在TCP/IP协议中，TCP协议提供可靠的连接服务，采用三次握手建立一个连接。需要客户端和服务器总共发送3个包。进行三次握手的主要作用就是为了确认双方的接收能力和发送能力是否正常、指定自己的初始化序列号为后面的可靠性传送做准备。实质上其实就是连接服务器指定端口，建立TCP连接，并同步连接双方的序列号和确认号，交换TCP窗口大小信息。1 三次握手刚开始客户端处于 Closed 的状态，服务端处于 Listen 状态。第一次握手：客户端给服务端发一个 SYN 报文，并指明客户端
2021-07-03 17:55:44
463
原创 JavaScript 函数详解、this指向、严格模式、闭包、递归与拷贝知识浅析
文章目录1 函数的定义1.1 函数的定义方式1.2 函数的调用方式2 this的指向2.1 call()方法2.2 apply()方法2.3 bind()方法2.4 call()、apply()、bind()总结3 严格模式3.1 严格模式定义3.2 开启严格模式3.3 严格模式中的变化4 高阶函数4.1 高阶函数定义5 闭包5.1 闭包定义5.2 闭包的主要作用5.3 闭包应用5.4 缺点6 递归6.1 递归定义6.2 递归的应用7 拷贝7.1 浅拷贝7.2 深拷贝7 拷贝7.1 浅拷贝7.2 深拷贝1
2021-07-03 17:51:52
140
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人