- 博客(93)
- 收藏
- 关注
RSS订阅原创 JS对象到原始值的转换
取决于被转换对象的类如果是Date对象，则使用偏字符串算法其他类型使用偏数值算法JS内置类型除了Date类都实现了偏数值算法;Date类实现了偏字符串算法。
2023-02-10 15:59:15
813
1
原创 从0到1 Webpack搭建Vue3开发、生产环境
添加到每个文件导入的顶部 用于该文件中使用的、目标环境不支持的特性。如果执行第三个命名报如下错误 需要全局安装下touch-cli。替换core-js的导入 只导入目标环境模块所需的内容。可指定一个模板 打包后的js文件会自动引入。useBuiltIn属性默认false。webpack5内置 不需要再安装。需要安装corejs依赖。
2022-12-01 17:17:24
682
原创 简易版websocket封装及本地启动socket服务
使用node启动本地socket服务创建项目目录mkdir server初始化 npmnpm init -y安装依赖库npm i nodejs-websocket -S创建服务文件const ws = require('nodejs-websocket');const server = ws.createServer(connect => { connect.on("text", data => { console.log("received: "+
2022-05-06 20:00:06
2853
1
原创 HTML5离线存储原理
前言使用HTML5，通过创建cache manifest文件，可轻松创建web应用的离线版本；HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有网络时进行访问。应用程序缓存为应用带来三个优势离线浏览—用户可在离线时使用速度—已经缓存的资源加载的更快减少服务器负载—浏览器将只从服务器下载更改过的资源原理和环境如上面提到的HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络
2022-04-20 19:31:11
581
原创 JS实现全屏模式
代码实现<template> <button @click="handleClick">切换全屏模式</button></template>const handleClick = () => { if(document.fullscreenElement) { document.exixFullscreen() } else { document.documentElement.requestFullscreen() }}
2022-03-28 19:32:09
1842
原创 使用事件总线(eventbus)或自定义事件的问题
事件总线、自定义事件关键点先监听事件再触发事件考虑组件生命周期顺序组件通信<!-- 组件A --><template> <div> <button @click="jump">跳转B</button> {{msg}} </div></template><!-- 组件B --><template> <div> <button @
2022-03-22 20:12:56
538
1
原创 react hook开发遇到的一些问题
问题一使用 useState改变值后 拿到的值不是最新值const [isFocus, setIsFocus] = useState<boolean>(false)const changeFocus = () => { setIsFocus(!isFocus)}useEffect(() => { console.log(isFocus) // do something}, [isFocus])因为setState是异步的 所以调用setState
2022-03-18 20:00:16
563
1
原创 electron中使用webview
使用webview标签<webview src="https://www.baidu.com" preload="./preload.js"></webview>向webview注入JS// preload.jsconst { contextBridge } = require('electron')contextBridge.exposeInMainWorld('apiKey', { fn: () => {}})// 在webview页面使用wind
2022-02-15 17:08:16
3484
2
原创 JS浅拷贝
浅拷贝浅拷贝创建一个新对象，这个对象仅对原对象的属性进行拷贝，属性值是基本类型时，拷贝的是原数据，属性值是引用类型时，拷贝的是指针实现浅拷贝的几种方法Object.assignlet person = { name: 'swt', age: 20 }let people = Object.assign({}, person)people.name = 'pty'console.log(person) // { name: 'swt', age: 20 }console.l
2021-10-09 15:01:03
106
1
原创 uniapp开发微信小程序连接mqtt
下载mqttnpm i [email protected]存储mqtt客户端到vuex// mqtt moduleimport mqtt from 'mqtt'const CONNECT_MQTT = 'CONNECT_MQTT'const SERVER_IP = ''const SERVER_PORT = ''const SERVER_PATH = 'mqtt'// 连接地址const SERVICE = `${SERVER_IP}:${SERVER_PORT}/${SERVER_PAT
2021-10-09 14:48:05
3888
原创 Vue自动化全局注册基础组件
前言项目中有许多通用的组件，为了避免在每个组件都引入一个长列表，可在入口函数注册基础组件准备安装 lodash 库npm i lodash --save入口文件import Vue from 'vue'import { camelCase, upperFirst } from 'lodash/string'const requireComponent = require.context( // 组件目录的相对路径 './components', // 是否查询其子目录
2021-08-09 14:20:34
188
原创 发布自己的npm包
注册npm账户注册地址用户名，密码，邮箱后面发布会用到注册完需要验证邮箱 会发送邮件至你注册的邮箱 按指示完成验证即可新建项目创建目录mkdir package切换目录cd package初始化npmnpm init -y后续可在 package.json 文件中增加更改配置安装ESlint安装npm i eslint初始化配置eslint --init配置 Commitlint安装 Commitlint 脚手架和 Git Hook 工具n
2021-08-04 18:12:16
103
原创 没了解过的Web API
getBatterygetBattery方法提供了系统的电量信息，返回一个promise对象navigator.getBattery().then(res => { console.log(res) /** 四个属性 charging 是否在充电 chargingTime 充满电所需时间 dischargingTime 当前电量可使用时间 level 剩余电量 */ /** 添加事件 onchargingchange 监听充电状态改变
2021-07-15 16:55:33
108
原创 CSS属性font-smoothing
在浏览大屏demo时发现样式中这两行代码-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;对字体进行抗锯齿渲染使字体看起来更清晰-webkit-font-smoothing: none | subpixel-antialiased:默认值 | antialiased:抗锯齿-moz-osx-font-smoothing: inherit | grayscale:抗锯齿...
2021-06-24 13:05:50
290
原创 JavaScript深入之手写call、apply、bind
模拟实现call将函数设为对象的属性执行该函数删除该函数Function.prototype.myCall = function(context = window, ...args) { if(this === Function.prototype) { return undefined } context = context || window const fn = Symbol() context[fn] = this const result = cont
2021-04-12 10:48:07
123
3
原创 广度优先搜索和深度优先搜索的实现
前言广度优先搜索和深度优先搜索都是对图进行搜索的算法广度优先搜索广度优先搜索广泛搜索子节点，将其子节点放进候选节点中；操做候选节点时是按顺序取出候选节点，因此使用队列存储候选节点。关于队列的实现可参考队列的实现声明广度优先搜索函数，参数为要搜索的树形图和要查找的节点实例化队列，声明目标节点的深度，初始化0遍历队列获取队列第一个元素，判断是否和目标节点相等，相等返回深度判断当前节点是否有子节点，并将子节点添加到队列中删除当前队列第一个元素function breadthFirst
2021-04-08 14:12:54
521
1
原创 实现图
前言图结构的特点一组顶点用V(vertex)表示顶点的集合一组边用E(edge)表示边的集合边是顶点和顶点之间的连线边可以有向，可以无向图的概念顶点表示图中的一个节点边表示顶点和顶点之间的连线相邻顶点，一条边连接在一起的顶点称为相邻顶点度，相邻顶点的数量路径，顶点v1,v2,…,vn的一个连续序列简单路径，不包含重复的顶点回路，第一个顶点和第二个顶点相同相同的路径无向图，所有的边都没有方向有向图，边有方向无权图，边不携带权重带权图，边有一定的权重图的表示
2021-04-08 09:25:47
111
1
原创 红黑树
前言红黑树顾名思义数中的节点只能是黑色或红色，是自平衡二叉树实现思路红黑树的规则节点只能是红色或黑色根节点是黑色叶子节点都是黑色的NIL空节点每个红色节点的两个子节点都是黑色（每个叶子节点到根节点的路径不能有两个连续的红色节点）任意节点到叶子节点的路径包含黑色节点的数量相同插入节点的情况声明N代表插入节点默认红色,P代表父节点，U代表父节点的兄弟节点，G代表祖节点根节点为空父节点是黑色父节点是红色，叔节点是红色，祖节点是黑色父节点是红色，叔节点是黑色，祖节点是黑色，插入节
2021-04-07 14:47:31
109
原创 实现二叉搜索树
前言二叉搜索树是二叉树的一种每个节点的左子节点一定比自身小每个节点的右子节点一定比自身大实现思路和代码实现二叉搜索树类定义内部节点类 包含以下属性key节点值left指向左子节点right指向右子节点定义root属性表示根节点function BinarySearchTree() { this.root = null function Node(key) { this.key = key this.left = null this.right
2021-04-06 23:24:01
153
2
原创 实现HashMap
前言哈希表存储元素时将key进行hash计算，hash值转成索引后再存储元素使用链地址法解决哈希冲突问题，如图所示哈希表每一项中再存储一个数组或链表用于存储hash值相同的元素随着元素的插入和删除，需要对哈希表进行扩容或缩容操作实现思路和代码哈希表function HashTable() { //容器 this.storage = [] //大小 this.count = 0 //容量 this.limit = 7}哈希函数计算hash值hashFun
2021-04-06 09:23:15
99
原创 集合的实现
前言集合是没有重复值且有顺序的数据结构实现思路和代码集合类function Set() { this.items = {}}基础集合具备以下方法判断元素是否在集合中has(value) { //使用对象原型方法判断元素是否在集合中 return this.items.hasOwnProperty(value)}集合中添加元素add(value) { //判断集合中是否存在要添加的元素 if(this.has(value)) { return f
2021-04-05 20:11:11
294
原创 链表和双向链表的实现
前言链表中的数据通过指针连接，添加、插入或删除节点只需要修改指针指向即可
2021-04-04 00:51:34
120
原创 实现优先级队列
实现思路优先级队列和普通队列的区别在于添加元素到队列时会根据传入的数字数字越小优先级越高实现代码/** * 优先级队列 */function PriorityQueue() { //能创建一个具有优先级的数据的类 function QueueElement(elem, priority) { this.elem = elem this.priority = priority } //模拟队列 this.items = [] //插入方法 P
2021-04-02 23:49:07
131
原创 基于数组实现队列 根据队列特性实现击鼓传花
实现思路队列的核心思想是先进先出（FIFO），队列支持从前端（front）移除数据，从后端（rear）插入数据实现一个队列需要具备以下方法将元素加入到队列删除队列前端元素查看队列前端元素查看队列是否为空查看队列大小查看队列内所有元素清空队列实现代码/** * 基于数组实现队列 */function Queue() { this.items = [] //将元素加入到队列 Queue.prototype.enqueue = function(elem) {
2021-04-02 16:03:09
113
原创 数组实现栈结构 利用栈结构封装十进制转二进制
实现思路栈的核心思想为后进先出（LIFO）实现一个栈需要具备以下功能压栈：添加一个元素到栈顶出栈：移除栈顶的元素并返回获取栈顶元素并返回判断栈是否为空输出栈内的数据清空栈获取栈的大小实现代码/** * 数组实现栈结构 */function Stack() { //数组模拟栈 this.items = [] //压栈 Stack.prototype.push = function(elem) { this.items.push(elem) } /
2021-04-02 14:26:23
883
2
原创 React中组件通信方式
组件间的关系父子组件兄弟组件（非嵌套组件）祖孙组件（跨级组件）通信方式props：children props、render props消息订阅-发布：pub-sub集中式管理：reduxconText：生产者-消费者模式搭配方式父子组件：props兄弟组件：消息订阅-发布，集中式管理祖孙组件：消息订阅-发布，集中式管理，conText（封装插件使用的多）...
2021-04-02 13:17:19
108
1
原创 React路由传递params、search、state参数的相关处理
传递search参数<Link to={`/路径/?key=${变量}`} />在路径后使用?key=value的形式传递参数，传递多个参数使用&符号连接声明接收参数<Route path="/路径" />使用search传参时不需要声明接收参数获取参数console.log(this.props.location.search) //?key=value&key=value获取参数时search参数没有像params一样是一个对象，可使用第
2021-03-29 14:14:36
4110
1
原创 React脚手架配置代理解决跨域问题
前言我在本地运行一个react项目地址为http://localhost:3000我去请求接口地址为http://localhost:5000时由于同源策略的限制，就产生了跨域问题解决方案一在项目根目录下找到package.json文件，添加如下配置"proxy": "http://localhost:5000"key为proxy,value为接口地址在进行网络请求时请求了3000端口下不存在的资源时，就会将请求转发给5000端口这种解决方案不适用于配置多个接口地址解决方案二1.
2021-03-25 15:54:46
550
3
原创 Win10家庭版使用远程桌面连接失败
前言在公司部署项目时需要使用远程桌面连接，在连接时报错，报错信息大概是“出现身份验证错误，要求的函数不受支持”解决方案1.Win+R输入regedit运行2.打开路径：计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\System3.在System目录下创建文件夹CredSSP,在CredSSP下创建Parameters文件夹4.右击Parameters文件夹新建DWORD(32位)值5
2021-03-23 08:50:56
1420
10
原创 高德地图使用插件报错AMap.Xxx is not constructor
报错的原因是在代码中使用了地图插件例如ToolBar、OverView、Scale，但是并没有加载插件解决方案同步加载插件：在引入地图的script标签进行如下拼接，多个插件用逗号分隔<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.ToolBar,AMap.Driving"></script> 异步加载插件：通
2021-03-23 08:31:59
12347
原创 ES6展开语法Spread syntax（...）
展开数组let arr = [1,3,5,7,9]console.log(...arr) // 1 3 5 7 9合并数组let arr1 = [1,3,5,7,9]let arr2 = [2,4,6,8,10]let arr3 = [...arr1, ...arr2]console.log(arr3) // [1,3,5,7,9,2,4,6,8,10]函数中接受不固定的参数function sum(...numbers) { return numbers.reduce((pre,
2021-03-18 17:07:48
150
1
原创 React初识 Hello React
在html中使用react首先引入react核心库react-dom和babel文件文件顺序必须是核心库文件在react-dom文件之前引入，babel.js是用来将jsx解析成js<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd
2021-03-17 11:06:50
180
6
原创 Vue使用Axios携带token请求后端接口
携带token请求接口的其中一种方法就是在请求拦截器中将token添加到请求头中在项目中安装axiosnpm i axios对网络请求进行封装import axios from 'axios'const instance = axios.create({ //这里写基础配置})//请求预处理instance.interceptors.request.use( (config) => { const token = getToken() //getToken是在另一
2021-03-12 15:00:40
4329
21
原创 ES6内置对象Proxy代理数据demo
首先在页面上定义几个按钮并绑定点击事件<button onclick="asc()">升序</button><button onclick="desc()">降序</button><button onclick="reset()">重置</button>需要网络请求数据这里引入jquery<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquer
2021-03-12 09:31:09
154
2
原创 Vue双向绑定实现原理
实现双向绑定需要Object.defineProperty，需要了解劫持对象的属性后获取对象的属性会触发get函数，更改对象属性值会触发set函数<div id="demo"></div><input type="text" id="inp">let obj = {}let demo = document.getElementById("demo")let inp = document.getElementById("inp")Object.defineP
2021-03-11 16:34:08
86
3
原创 ES6新内置对象Reflect和Proxy的基本使用
Reflect为操作对象提供的新API列举常用的APIconst obj = { name: 'swt', age: 20 } /* * 属性写入*/Reflect.set(obj, 'sex', '男')console.log(obj) // {name: "swt", age: 20, sex: "男"}/* * 属性读取*/const a = Reflect.get(obj, 'name')console.log(a) // swt/* * 属
2021-03-11 08:43:08
144
1
原创 解决WebGl使用OrbitControls控件监听鼠标操作时报错
前言在使用OrbitControls监听鼠标操作时控制台报如下错误解决方案在使用构造函数创建控件对象时除了传入相机对象之外还要传入第二个参数renderer.domElementlet controls = new THREE.OrbitControls(camera, renderer.domElement)或者引入相同版本的核心文件和控件文件<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/t
2021-02-06 08:34:52
855
1
原创 解决input file类型上传图片和上一张图片一样上传不成功情况
前言做表单调查时需要用户上传图片文件，发现上传图片后删掉当前上传的图片再上传和刚才上传一样的图片时上传不成功在处理用户上传文件的方法最后清除input的value即可event.target.value = null...
2021-02-04 10:35:09
552
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人