- 博客(38)
- 资源 (1)
- 收藏
- 关注
RSS订阅转载 navigator.userAgent获取浏览器信息(类型及系统)判断当前的设备
javascript的navigator对象navigator为Window对象的一个属性，指向了一个包含浏览器相关信息的对象。navigatot中包含了一些常用到的属性，如navigator.appVersion 浏览器的版本号navigator.appName 浏览器的名称navigator.language 浏览器使用的语言navigator.platform 浏览器使用的平台navigator.userAgent 浏览器的user-agent信息其中userAgent 属性是一个只读的
2021-09-10 14:15:09
4069
原创 react-redux数据共享 (多组reducer时 采用对象的方式共同存储在store中)(combineReducers方法合并reducer)
combineReducers (合并组件的reducer 实现组件数据共享)汇总所有的reducer 称为一个总的reducer 存储在一个对象中常见报错小案例的效果总结
2021-08-16 23:30:03
417
原创 vue笔记
1、Vue基础入门1.1、脚手架环境安装Vue安装脚手架依赖# 安装 @vue/clicnpm i -g @vue/cli1.2、创建Vue项目在本地创建项目文件夹，例如 d:\project，在此目录中运行 cmd，然后执行下面命令：# 创建项目vue create myapp# 根据提示选择安装配置# 项目创建成功后cd myappnpm run serve项目启动成功后，在浏览器中访问 http://localhost:80801.3、精简项目代码项目目录结构-
2021-08-13 11:58:47
74
原创 react路由完整版详解
react中的路由有三种实现方式 前端主要是通过react-router-dom实现在index文件中引入一个 BrowserRouter或者HashRouter 将APP根组件包裹起来 这是两种模式 相当于vue中的hash和history模式 一个带#号一个不带在主页面中引入<Route>//路由标签 用于在展示区进行路径的匹配 component={路由组件名} 例如 <Route path='/Home' component={Home}></Route&g
2021-08-12 23:07:16
953
原创 通过axios实现的一个搜索查询展示案例
代码如下:App.jsimport React, { Component } from 'react'import {Search,List} from './components';export default class App extends Component { //初始化状态 state={ users:[],//users初始值为数组 isFirst:true,//是否为第一次打开页面 isLoading:false,//标识是否处于加载中...
2021-08-11 21:28:31
1551
原创 一个简单的代理方式
可以在package.json文件中加入** “proxy”:“http://www.kuwo.cn(这个是请求地址)”**加完必须重启一下项目可以创建一个setupProxy.js文件 必须是此命名代码结构如下const proxy = require('http-proxy-middleware')module.exports = function (app){ app.use( proxy('/api1',{ target:'http:/.
2021-08-11 11:56:17
121
原创 TodoList
****index.jsimport React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root'));App.jsimport React, .
2021-08-10 23:31:41
96
原创 react中样式组件 styled-components
使用styled-component例如: 创建全局样式组件style.js先在styled-component中解构一个createGlobalStyle出来然后直接使用模板字符串在createGlobalStyle后面书写css样式并传值给一个常量 然后抛出然后在入口文件index.js中引入style.js文件并解构出抛出的GlobalStyle然后在下方render内直接引入这个GlobalStyle标签引入局部创建一个home.js作为局部样式组件,同样的,先在
2021-08-09 17:42:43
689
原创 react中DOM的diffing算法
diffing算法渲染dom时会进行判断比较 如果当前标签内容未改变,就不会进行替换,如果改变就只替换改变的标签diffing算法替换的最小单位是标签下列情况 如在h2标签内有个span标签, diffing进行比较时,h2标签中的时间值是一直改变的 所以进行替换但是h2中的input标签并未改变, 所以在替换h2标签内容时 会再检索下一层子标签span检测到只是h2标签内的时间值改变 而子标签内容并未改变,它会只替换时间值,并不替换子标签中的未改变的内容<!DOCTYPE html>.
2021-08-09 12:07:59
146
原创 react生命周期(旧)+(新)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>生..
2021-08-07 20:05:28
80
原创 高阶函数和函数柯里化
高阶函数:如果一个函数符合下面两个条件的任何一个,那该函数就是高阶函数 1.若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数 2.若B函数,调用的返回值仍然是一个函数,那么B就可以称之为高阶函数 常见的高阶函数有:promise. settimeout map等函数的柯里化:可以通过函数调用继续返回函数的方式,实现多次接收参数,最后统一处理的函数编码方式function sum(a){ return(b)=>{
2021-08-07 15:04:02
148
原创 promise中的all和race方法
promise中的all方法和race方法这两个方法，都是并行执行多个异步操作。而不同的是，all方式遵循“谁跑得慢，以谁为准执行回调”，而race遵循的是“谁跑的快，以谁为准执行回调”以下为两个异步函数function yibu1() { var p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('第一个异步执行成功'
2021-08-06 15:43:51
747
原创 一个react-redux的小框架(新手防忘记必备)
初始化入口文件APP.js创建store中的index.js文件创建state创建reducer创建map创建UI组件
2021-08-04 22:41:57
71
原创 TypeScript学习笔记 (超详细)
1、TypeScript 简介1.1、什么是 TypeScriptTypeScript 不是一门全新的语言，TypeScript 是 JavaScript 的超集，它对 JavaScript 进行了一些规范和补充。所以，学习 TypeScript 需要有 JavaScript 的基础。TypeScript 的特性：TypeScript 是 JavaScript 的超集，它可以编译成纯 JavaScript。TypeScript 基于 ECMAScript 标准进行拓展，支持 ECMAScrip
2021-08-03 19:27:41
1032
原创 js实现调用摄像头拍照功能
js实现调用摄像头拍照功能<!DOCTYPE html><html lang="en"><head> <!-- 样式部分可以忽略 --> <style> * { padding: 0; margin: 0; } div { width: 100vw; height: 100vh;
2021-08-03 11:25:26
2928
原创 事件处理 ref使用场景 受控组件与非受控组件
createRef的使用 <!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom 用于支持react操作dom --><script type="text/javascript" src="../js/reac...
2021-07-31 17:04:21
184
原创 redux中间件详解
1、redux中间件简介1.1、什么是redux中间件redux 提供了类似后端 Express 的中间件概念，本质的目的是提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。通俗来说，redux中间件就是对dispatch的功能做了扩展。先来看一下传统的redux执行流程：图
2021-07-30 11:37:23
2162
原创 react中 hook中的 usestate和useEffect
useStateuseState 的使用非常简单，我们从 React 中拿到 useState 后，只需要在使用的地方直接调用 useState 函数就可以， useState 会返回一个数组，第一个值是我们的 state， 第二个值是一个函数，用来修改该 state 的，那么这里为什么叫 count 和 setCount？一定要叫这个吗，这里使用了 es6 的解构赋值，所以你可以给它起任何名字，updateCount, doCount、any thing，当然，为了编码规范，所以建议统一使用一种命名规.
2021-07-30 11:01:59
366
原创 使用redux创建react经典求和案例(精简版)
使用redux创建react小demo(精简版)效果如下使用redux之前要安装一下redux当前项目的黑窗口执行一下该命令先简单介绍一下redux的工作流程对redux的简介redux是一个专门用于状态管理的js库(并不是react插件库)虽然在vue,angular和react项目中都可以使用,但是基本都是用在react项目中作用就是集中管理react应用中多个组件共享的状态应用场景某个组件的状态需其他组件可以随时拿到(共享)一个组件需要改变另一个组件的状态(通信)
2021-07-29 23:50:32
229
2
原创 Webpack搭建React 和 Es6 开发环境
Webpack搭建React开发环境1、React环境搭建实现React开发的三种方式：（1）使用CDN的方式<script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><!-- 生产环境中
2021-07-26 20:59:48
275
原创 React基础笔记
ECMAScript61、ES6简介1.1、什么是ES6ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。1.2、ECMAScript和JavaScript的关系一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript
2021-07-26 20:56:50
507
原创 对闭包的看法，为什么要用闭包, 闭包的原理以及应用场景以及闭包的 this 指向问题
闭包的作用：在外部访问函数内部的变量让函数内的局部变量可以一直保存下去模块化私有属性和公共属性闭包的原理：全局变量生存周期是永久，局部变量生存周期随着函数的调用介绍而销毁。闭包就是 在函数中定义且成为该函数内部返回的函数的自由变量 的变量，该变量不会随着外部函数调用结束而销毁。（注：不光是变量，函数内声明的函数也可以形成闭包）当函数可以记住并访问所在的词法作用域，即使函数是在当前词法作用域之外执行，这时就产生了闭包。闭包的应用场景：// 1. 返回值 最常见的一种形式var fun
2021-07-22 10:43:15
280
原创 Node+Express+Ajax实现单文件和多文件上传
1、安装依赖在Node服务端执行命令：cnpm i multer --save2、单文件上传2.1、使用表单方式提交前台页面代码：<h3>单文件上传-使用form</h3><form action="/upload/form" method="POST" enctype="multipart/form-data" > <input type="file" name="myfile"> <button type="submi
2021-07-21 17:15:24
141
原创 谷歌小恐龙更新啦!!!!!!(加入奥运会项目赛马,游泳,体操等)快来体验a哈哈哈哈哈哈哈哈
谷歌小恐龙更新啦!!!(加入奥运会项目赛马,游泳,体操等)快来体验a哈哈哈哈哈哈哈哈还是原来的进入方式 断网 或者直接输入网址 chrome://dino/进入页面摁下空格即可开始游戏吃下火炬就可以变身! 随机参与一个奥运项目本人已变身小水龙本龙啊哈哈哈(粉色滑板引人注目)第一块石头就翻车 小恐龙直接傻眼110米栏!! 我就是恐龙界的刘翔!游泳!! 蓝色头套简直不要太帅此外 还有跳马 , 体操 等 其他的或许还有 大家可以去试一下!!...
2021-07-20 14:23:19
1549
1
原创 js的this指向中 call ,apply 和bind的区别与用法详解加实例
简单说一下bind、call、apply的区别三者都是用于改变函数体内this的指向，但是bind与apply和call的最大的区别是：bind不会立即调用，而是返回一个新函数，称为绑定函数，其内的this指向为创建它时传入bind的第一个参数，而传入bind的第二个及以后的参数作为原函数的参数来调用原函数。var obj = {};function test() { console.log(this === obj);}test(); //falsevar testObj = t
2021-07-20 10:13:38
186
原创 js中比较重要的几个对象 -- Date对象属性获取当前的日期+方法详解实例
JavaScript Date（日期） 对象日期对象用于处理日期和时间。如何使用 Date() 方法获得当日的日期。getFullYear()使用 getFullYear() 获取年份。getTime()getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。setFullYear()如何使用 setFullYear() 设置具体的日期。toUTCString()如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。getDay()如何使用 g
2021-07-20 09:26:03
814
原创 vue项目中普通环境的搭建 (详细 新手必备) 服务端接口开发
2、服务端接口开发2.1、服务端项目结构设计2.1.1、设计路由在 routes 目录下创建当前模块的路由文件，例如 routes/goods.js 商品模块的路由，示例代码如下：var express = require('express')var router = express.Router()//处理get请求router.get('/find', (req,res)=>{ //接收参数 let {id} = req.query //响应数据
2021-07-19 19:31:21
244
原创 vue项目中普通环境的搭建 (详细 新手必备) 开发环境搭建
1、开发环境搭建1.1、服务端环境搭建服务端技术栈：Node、Express、CORS、mongoose、multer第1步：安装脚手架命令如下：# 全局安装，一台计算机只需要执行一次即可cnpm i -g express express-generator第2步：创建项目例如：D:\project\ 启动 cmd ，执行以下命令：express -e eshop-server命令执行成功后，会创建 D:\project\eshop-server 文件夹，eshop-server
2021-07-19 14:15:57
159
原创 vue生命周期详解
Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们成为Vue 实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会。目前 关于vue的生命周期 大致分为两种看法1、加载期 更新期 销毁期 加载期:beforeCreate , created , beforeMount , mounted 更新期:beforeUpdate , updated 销毁期:beforeDestroy , destroyed2、初创期
2021-07-08 10:35:38
170
4
原创 v-if和v-show的区别和使用场景
区别1.手段：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；3.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为
2021-07-08 10:19:23
101
1
原创 js中比较重要的几个对象 -- Array对象属性+方法详解实例
什么是Array(数组)对象数组对象的作用是：使用单独的变量名来存储一系列的值。举个栗子????♂️这段代码就是创建一个叫mycars的新数组并且挨个赋值,var mycars = new Array();mycars[0] = "Saab";mycars[1] = "Volvo";mycars[2] = "BMW";什么是数组?数组对象是使用单独的变量名来存储一系列的值。如果你有一组数据（例如：车名字），存在单独变量如下所示：var car1="Saab";var car2=
2021-07-01 22:24:03
290
原创 Node.js--文件系统
nodejstwoday引入模块var fs = require('fs')(在node中所有的异步都使用回调函数来实现的)同步 读取文件var data = fs.readFileSync('./demo.txt')txt内容是abc 输出出来是ascll码值 输出时要转为字符串形式var data = fs.readFileSync(’./demo.txt’)异步 读取文件...
2021-06-29 21:06:31
366
1
原创 js中this指向问题
this与其他语言相比，函数的 this 关键字在 JavaScript 中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别。在绝大多数情况下，函数的调用方式决定了 this 的值（运行时绑定）。this 不能在执行期间被赋值，并且在每次函数被调用时 this 的值也可能会不同。ES5 引入了 bind 方法来设置函数的 this 值，而不用考虑函数如何被调用的。ES2015 引入了箭头函数，箭头函数不提供自身的 this 绑定（this 的值将保持为闭合词法上下文的值）。语法值当前
2021-06-29 08:50:31
112
防淘宝电商项目(自带服务器)taobao.zip
2021-07-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人