前端开发随记-腾讯云开发者社区

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

前端开发随记

专栏成员

84

文章

129135

阅读量

10

订阅数

JS对象到原始值的转换

编程算法 java 数据结构

JS对象到原始值转换的复杂性主要由于某些对象类型存在不止一种原始值的表示对象到原始值转换的三种基本算法在解释三种算法前需要了解toString valueOf这两个方法 toString 返回对象的字符串表示 Array类的toString方法会将每个元素转换为字符串，再使用逗号作为分隔符拼接起来 Function类的toString方法将定义的函数转换为JS源代码的字符串 Date类型的toString方法返回一个人类友好(且JS可解析)的日期和时间字符串 RegExp类定义的toStrin

2023-02-13

4.3K0

图片懒加载之判断图片进入可视区域

dom element scrolltop

Dom结构 <div style="background-color: blue;width:100vw;height:5000px"></div> <div id="img" style="background-color: blueviolet;width:100vw;height:500px"></div> 使用 clientHeight scrollTop offsetTop 判断 document.addEventListener('scroll', () => { // 屏幕可视区域的高度

2022-12-24

8310

使用URLSearchParams类获取地址栏参数

解析地址栏的参数并返回一个参数对象 function getUrlParams() { const searchParams = new URLSearchParams(window.location.search); const params = {}; for(const [key, value] of searchParams) { params[key] = value; } return params; } Usage const params = getUrlParams() 参

2022-12-23

1K0

从0到1 Webpack搭建Vue3开发、生产环境

webpack javascript css vue.js html

起步创建项目目录 mkdir webpack-vue3-demo 初始化 package.json npm init -y 参考文档安装 webpack webpack-cli webpack-dev-server webpack-merge npm install webpack webpack-cli webpack-dev-server webpack-merge --save-dev 创建配置文件 mkdir build cd build touch webpack.b

2022-12-15

1.1K0

简易版websocket封装及本地启动socket服务

使用node启动本地socket服务创建项目目录 mkdir server 初始化 npm npm init -y 安装依赖库 npm i nodejs-websocket -S 创建服务文件 const ws = require('nodejs-websocket'); const server = ws.createServer(connect => { connect.on("text", data => { console.log("received: "+data); connect

2022-12-15

1.3K0

HTML5离线存储原理

缓存存储 html5 html 网络安全

使用HTML5，通过创建cache manifest文件，可轻松创建web应用的离线版本；HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有网络时进行访问。

2022-12-15

2.9K0

JS实现全屏模式

代码实现 <template> <button @click="handleClick">切换全屏模式</button> </template> const handleClick = () => { if(document.fullscreenElement) { document.exixFullscreen() } else { document.documentElement.requestFullscreen() } } 事件监听 // 方式1 document.onfulls

2022-12-15

4K0

使用事件总线(eventbus)或自定义事件的问题

事件总线、自定义事件关键点先监听事件再触发事件考虑组件生命周期顺序组件通信  <template> <div> <button @click="jump">跳转B</button> {{msg}} </div> </template>  <template> <div> <button @click="back">返回</button> </div> </template> // A jump () { t

2022-12-15

6170

react hook开发遇到的一些问题

antd render setstate settimeout

问题一使用 useState改变值后拿到的值不是最新值 const [isFocus, setIsFocus] = useState<boolean>(false) const changeFocus = () => { setIsFocus(!isFocus) } useEffect(() => { console.log(isFocus) // do something }, [isFocus]) 因为setState是异步的所以调用setState之后无法立刻拿到最新的值使

2022-12-15

3870

electron中使用webview

使用webview标签 <webview src="https://www.baidu.com" preload="./preload.js"></webview> 向webview注入JS // preload.js const { contextBridge } = require('electron') contextBridge.exposeInMainWorld('apiKey', { fn: () => {} }) // 在webview页面使用 window.apikey.fn()

2022-12-15

1.2K0

浅拷贝浅拷贝创建一个新对象，这个对象仅对原对象的属性进行拷贝，属性值是基本类型时，拷贝的是原数据，属性值是引用类型时，拷贝的是指针实现浅拷贝的几种方法 Object.assign let person = { name: 'swt', age: 20 } let people = Object.assign({}, person) people.name = 'pty' console.log(person) // { name: 'swt', age: 20 } console.

2022-12-15

8580

uniapp开发微信小程序连接mqtt

存储 mqtt vuex 客户端

下载mqtt npm i mqtt@2.18.8 存储mqtt客户端到vuex // mqtt module import 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

2022-12-15

1.8K0

Vue自动化全局注册基础组件

前言项目中有许多通用的组件，为了避免在每个组件都引入一个长列表，可在入口函数注册基础组件准备安装 lodash 库 npm i lodash --save 入口文件 import Vue from 'vue' import { camelCase, upperFirst } from 'lodash/string' const requireComponent = require.context( // 组件目录的相对路径 './components', // 是否查询其子目录

2022-12-15

4640

发布自己的npm包

npm webpack git javascript 打包

注册npm账户 ---- 注册地址用户名，密码，邮箱后面发布会用到注册完需要验证邮箱会发送邮件至你注册的邮箱按指示完成验证即可新建项目 ---- 创建目录 mkdir package 切换目录 cd package 初始化npm npm init -y 后续可在 package.json 文件中增加更改配置安装ESlint ---- 安装 npm i eslint 初始化配置 eslint --init 配置 Commitlint ---- 安装 Commitlint 脚手架和

2022-12-15

5170

没了解过的Web API

promise 生命周期事件系统硬件

getBattery getBattery方法提供了系统的电量信息，返回一个promise对象 navigator.getBattery().then(res => { console.log(res) /** 四个属性 charging 是否在充电 chargingTime 充满电所需时间 dischargingTime 当前电量可使用时间 level 剩余电量 */ /** 添加事件 onchargingchange 监听充电状态改变

2022-12-15

5130

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:抗锯齿

2022-12-15

3820

JavaScript深入之手写call、apply、bind

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 = conte

2022-12-15

2460

广度优先搜索和深度优先搜索的实现

编程算法存储

前言 ---- 广度优先搜索和深度优先搜索都是对图进行搜索的算法广度优先搜索广度优先搜索广泛搜索子节点，将其子节点放进候选节点中；操做候选节点时是按顺序取出候选节点，因此使用队列存储候选节点。关于队列的实现可参考队列的实现声明广度优先搜索函数，参数为要搜索的树形图和要查找的节点实例化队列，声明目标节点的深度，初始化0 遍历队列获取队列第一个元素，判断是否和目标节点相等，相等返回深度判断当前节点是否有子节点，并将子节点添加到队列中删除当前队列第一个元素 function breadthF

2022-12-15

4300

存储编程算法

邻接表的问题：计算有向图的入度非常麻烦（入度：指向自己的数量，出度：指向别人的数量）

2022-12-15

3170

前言 ---- 红黑树顾名思义数中的节点只能是黑色或红色，是自平衡二叉树实现思路红黑树的规则节点只能是红色或黑色根节点是黑色叶子节点都是黑色的NIL空节点每个红色节点的两个子节点都是黑色（每个叶子节点到根节点的路径不能有两个连续的红色节点）任意节点到叶子节点的路径包含黑色节点的数量相同插入节点的情况声明N代表插入节点默认红色,P代表父节点，U代表父节点的兄弟节点，G代表祖节点根节点为空父节点是黑色父节点是红色，叔节点是红色，祖节点是黑色父节点是红色，叔节点是黑色，祖节点是黑色，插入

2022-12-15

4250

点击加载更多

社区活动

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·干货材料·成员作品最新动态