![](https://img-blog.csdnimg.cn/20200728091731971.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
javascript
文章平均质量分 51
JavaScript
sun_wei_tao
打杂工程师
展开
-
JS对象到原始值的转换
取决于被转换对象的类如果是Date对象,则使用偏字符串算法其他类型使用偏数值算法JS内置类型除了Date类都实现了偏数值算法;Date类实现了偏字符串算法。原创 2023-02-10 15:59:15 · 845 阅读 · 1 评论 -
图片懒加载之判断图片进入可视区域
【代码】图片懒加载之判断图片进入可视区域。原创 2022-12-23 10:42:21 · 568 阅读 · 0 评论 -
使用URLSearchParams类获取地址栏参数
【代码】使用URLSearchParams类获取地址栏参数。原创 2022-12-22 16:01:04 · 294 阅读 · 0 评论 -
从0到1 Webpack搭建Vue3开发、生产环境
添加到每个文件导入的顶部 用于该文件中使用的、目标环境不支持的特性。如果执行第三个命名报如下错误 需要全局安装下touch-cli。替换core-js的导入 只导入目标环境模块所需的内容。可指定一个模板 打包后的js文件会自动引入。useBuiltIn属性默认false。webpack5内置 不需要再安装。需要安装corejs依赖。原创 2022-12-01 17:17:24 · 703 阅读 · 0 评论 -
简易版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 · 2954 阅读 · 1 评论 -
HTML5离线存储原理
前言使用HTML5,通过创建cache manifest文件,可轻松创建web应用的离线版本;HTML5引入了应用程序缓存,这意味着web应用可进行缓存,并可在没有网络时进行访问。应用程序缓存为应用带来三个优势离线浏览—用户可在离线时使用速度—已经缓存的资源加载的更快减少服务器负载—浏览器将只从服务器下载更改过的资源原理和环境如上面提到的HTML5的离线存储是基于一个新建的.appcache文件的,通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络原创 2022-04-20 19:31:11 · 595 阅读 · 0 评论 -
JS实现全屏模式
代码实现<template> <button @click="handleClick">切换全屏模式</button></template>const handleClick = () => { if(document.fullscreenElement) { document.exixFullscreen() } else { document.documentElement.requestFullscreen() }}原创 2022-03-28 19:32:09 · 1918 阅读 · 0 评论 -
使用事件总线(eventbus)或自定义事件的问题
事件总线、自定义事件关键点先监听事件再触发事件考虑组件生命周期顺序组件通信<!-- 组件A --><template> <div> <button @click="jump">跳转B</button> {{msg}} </div></template><!-- 组件B --><template> <div> <button @原创 2022-03-22 20:12:56 · 555 阅读 · 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 · 3541 阅读 · 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 · 107 阅读 · 1 评论 -
没了解过的Web API
getBatterygetBattery方法提供了系统的电量信息,返回一个promise对象navigator.getBattery().then(res => { console.log(res) /** 四个属性 charging 是否在充电 chargingTime 充满电所需时间 dischargingTime 当前电量可使用时间 level 剩余电量 */ /** 添加事件 onchargingchange 监听充电状态改变原创 2021-07-15 16:55:33 · 113 阅读 · 0 评论 -
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 · 126 阅读 · 3 评论 -
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 · 157 阅读 · 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 · 87 阅读 · 3 评论 -
解决input file类型上传图片和上一张图片一样上传不成功情况
前言做表单调查时需要用户上传图片文件,发现上传图片后删掉当前上传的图片再上传和刚才上传一样的图片时上传不成功在处理用户上传文件的方法最后清除input的value即可event.target.value = null...原创 2021-02-04 10:35:09 · 578 阅读 · 1 评论 -
IE中 时间对象方法getTime返回NaN
在IE中使用Date对象的getTime方法解析以下格式的日期时(2020-12-14 16:00:00)会返回NaN,原因是在IE中使用该方法时参数的格式必须为YYYY/MM//DDlet date = new Date("2020-12-14 16:00:00").getTime()console.log(date) //NaN使用replace更改日期格式let date = new Date("2020-12-14 16:00:00".replace(/-/g, '/')).getTime原创 2020-12-14 16:22:37 · 348 阅读 · 3 评论 -
Vue中websocket的使用方法
初始化WebSocket以及其他可能用到的方法//初始化WebSocketinitWs() { if(typeOf(WebSocket) === "undefined") { //浏览器不支持WebSocket return false } else { this.socket = new WebSocket() //括号中填写后端提供的路径 this.socket.onopen = this.open this.socket.onerror = thi原创 2020-11-30 14:33:05 · 684 阅读 · 0 评论 -
Vue中使用XML和JSON格式互转插件
1.安装依赖npm install x2js2.在入口函数中引入并挂载到原型import x2js from 'x2js'Vue.prototype.$x2js = new x2js()3.使用方法//xml转jsonthis.$x2js.xml2js()//json转xmlthis.$x2js.js2xml()原创 2020-11-30 13:59:44 · 1932 阅读 · 1 评论 -
Vue非父子组件传值之事件总线(eventbus)的使用方式
在入口函数main.js中 挂载一个对象到Vue原型上Vue.prototype.bus = new Vue()//在组件A中监听事件this.$bus.$on('updata', (data) => { console.log(data)})//在组件B中发射事件this.$bus.$emit('updata', data)原创 2020-11-30 13:47:28 · 190 阅读 · 0 评论 -
JS将日期转换为时间戳
1.getTime() 精确到毫秒let date = new Date()let timeStamp = date.getTime()console.log(timeStamp) // 16067048491152.valueOf() 精确到毫秒let date = new Date()let timeStamp = date.valueOf()console.log(timeStamp) // 16067049062373.parse() 精确到秒,毫秒会用000替代let dat原创 2020-11-30 10:57:56 · 3702 阅读 · 0 评论 -
JS数组、数组对象去重方法
let arr1 = [3, 5, 3, 6, 7, 'test', 'test'] function deduplication(arr) { let newArr = [] let tArr = [] if(arr.length === 0) { return arr } else { for(let i = 0; i < arr.length; i++) { if(!tArr[arr[i]]) { ..原创 2020-11-30 10:48:13 · 115 阅读 · 0 评论 -
封装获取URL中params的值
utilsconst str = "http:www.baidu.com?name=swt&age=80&heigth=200"function get(key) { //获取?位置的索引 let index = str.indexOf('?'); //截取?后面的内容 let data = str.substr(index + 1); //let data = str.slice(index + 1); //将字符串分割成数组 let dataArray原创 2020-09-27 11:16:51 · 824 阅读 · 1 评论 -
封装格式化日期工具函数
前端需要展示时间时,后端服务器数据都会返回一个时间戳,所以我们可以封装一个工具函数用来格式化日期utils.jsfunction formateDate() { //获取年份 if(/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } let o = { 'M+': date.getMonth() + 1,原创 2020-09-23 14:32:01 · 183 阅读 · 0 评论 -
ES6数组的扩展扩展运算符(spread)三个点(...)
含义扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列console.log(...[1,2,3]) //1 2 3该运算符主要用于函数调用function push(array, array2) { array.push(...array2)}var arr = [1,2,3];var arr2 = [1,2,3];push(arr, arr2);console.log(arr); //[1,2,3,1,2,3]对象中的原创 2020-08-26 16:55:15 · 414 阅读 · 0 评论 -
微信小程序 内容评论-回复评论-回复回复的实现
效果图先展示代码js逻辑有详细注释代码格式有点乱复制粘贴格式化即可wxml<!-- 评论-回复-回复评论显示区域 --> <view class="container"> <!-- 总共评论数 --> <view class="total">共{{comment_list.length + comment_list2.length}}条评论</view> <!-- END -->原创 2020-08-19 14:32:08 · 12756 阅读 · 0 评论 -
微信小程序返回上一页传值方法
返回上一页可通过APIwx.navigateBack()返回上一页 官方文档链接实现方法//获取所有页面var pages = getCurrentPages();//初始化当前页面var currentPage = '';//初始化上一个页面var prevPage = '';//判断所有页面是否有两页再赋值if(pages.length >= 2) { //给当前页面赋值 currentPage = pages[pages.length - 1]; //给上一个页面原创 2020-08-13 18:30:07 · 1101 阅读 · 0 评论 -
微信小程序修改data数据的方法
方法一在函数中修改person中age的值,先拿到person,然后设置person.age的值,最后在setData方法中重新设置personPage({ data: { person: { "name": "人", "age": 20 } }, onLoad: function() { var person = this.data.person; person.age = 18; this.setData({ p原创 2020-08-05 19:58:26 · 7209 阅读 · 5 评论 -
微信小程序Video组件实现视频、自定义播放按钮、封面图、封面图文字demo
效果图实现思路在video标签中添加view或cover-view标签,封面图可直接设置video组件的poster属性,自定义按钮和封面图文字包在view中设置定位即可,给自定义按钮绑定点击事件,触发事件后隐藏最外层view,给video绑定bindended事件 设置最外层view显示wxml```css.video_item { margin-top: 33rpx;}.video { width: 686rpx; height: 330rpx;}.cover { w原创 2020-08-05 19:49:49 · 9287 阅读 · 1 评论 -
原生微信小程序实现tab切换效果demo
效果图Wxml<!-- tab框 --><view class="nav_title"> <view class="nav_tab"> <!-- 如果选中的下表等于当前的索引,就使用active class名,否则class名为common --> <view wx:for="{{list}}" wx:key="list" class="{{selected==index?'active':'comm原创 2020-08-05 18:18:28 · 940 阅读 · 1 评论 -
微信小程序 函数防抖和函数节流
函数防抖:延迟函数执行,多用于input框输入时,显示匹配的输入内容的情况函数节流:单位时间n秒内,第一次触发函数执行 之后不管触发多少次都不执行。到下一个单位时间n秒时 第一次触发函数执行,多用于页面scroll滚动、窗口resize、防止按钮重复点击函数节流是减少函数的触发频率;函数防抖是延迟函数执行,且不管触发多少次都只执行最后一次小程序中使用函数防抖、节流一般都将这两种方法封装在公用的js中//common.js/*函数节流*/function throttle(fn, interva原创 2020-08-02 15:29:13 · 1324 阅读 · 1 评论 -
微信小程序上拉触底事件函数onReachBottom不触发的解决方案
造成不触发的原因可能有以下几种情况配置属性问题高度问题滚动条不在顶部 需要回到顶部重新计算高度onReachBottom函数被覆盖1.配置属性问题在app.json或者本页的json文件中配置onReachBottomDistance属性,区别在于全局还是只在本页生效2.高度问题//设置容器高度为100%page{ height: 100%}3. 切换页面时 滚动条滚回到顶部//切换页面时调用APIwx.pageScrollTo({ scrollTop: 0})4.原创 2020-08-01 16:14:04 · 11686 阅读 · 5 评论 -
小程序修改元素样式方法
前言:小程序是无法操作DOM元素的 需要通过setData()方法实现修改元素样式Wxml<!-- 将样式属性值替换为变量--><view style="display: {{block}}">显示</view><view style="display: {{none}}">隐藏</view>js//将变量挂载到data上data: { block: 'block', none: 'none' }//通过this.原创 2020-07-31 19:57:36 · 2150 阅读 · 0 评论 -
微信小程序轮播图demo
1.wxml<!-- 轮播图 --><view class="box"> <swiper class='swiper' indicator-dots="true" indicator-color="#f4f4f4" indicator-active-color="#4eb8b8" autoplay="true" interval='2000' circular='true'> <block wx:for="{{imgList}}" wx:key="原创 2020-07-30 20:06:35 · 337 阅读 · 0 评论 -
ES6 箭头函数一些基本使用方法
1.箭头函数基本使用//箭头函数const a = (参数列表) => {}//放入两个或两个以上参数const sum = (num1, num2) => { return num1 + num2}//放入一个参数const power = num => { return num * num}//函数代码块中只有一行代码const mul = (num1, num2) => num1 * num22.箭头函数this指向const obj原创 2020-07-24 09:27:50 · 142 阅读 · 1 评论 -
ES6模块化的实现
1.准备工作<!-- 首先需要在HTML文件中引入两个js文件 类型需要设置为module --><script src="index.js" type="module"></script><script src="main.js" type="module"></script>2.export使用//main.js//定义一些变量和函数var name = '张三'var age = 20var flag = truefu原创 2020-07-23 08:30:53 · 358 阅读 · 2 评论 -
CommonJS(基本使用)
模块化有俩个核心:导入和导出//CommonJS的导出module.exports = { flag: true, test(a, b) { return a + b }, demo(a, b) { return a * b }}//CommonJS的导出let { test, demo, flag} = require('moduleA');//等同于let mA = require('moduleA');let test = mA.test;le原创 2020-07-22 19:27:54 · 494 阅读 · 2 评论 -
Vue-slot插槽的所有使用方法
1.插槽的基本使用<div id="app"> <cpn><button>按钮</button></cpn></div>//定义一个组件<template id="cpn"> <div> <slot></slot> </div></template>const vm = new Vue({ el: '#app', //注册原创 2020-07-22 18:26:14 · 732 阅读 · 4 评论 -
JS中offsetWidth offsetHeight clientWidth clientHeight scrollWidth scrollHeight的区别
offsetWidth//返回元素的宽度(包括元素宽度,内边距和边框 不包括外边距)offsetHeight//返回元素的高度(包括元素高度,内边距和边框 不包括外边距)clientWidth//返回元素的宽度(包括元素宽度,内边距 不包括边框和外边距)clientHeight//返回元素的高度(包括高度,内边距 不包括边框和外边距)scrollWidth//返回元素的宽度(包括元素宽度,...原创 2020-04-18 22:32:27 · 219 阅读 · 0 评论 -
JS 滚轮事件实现固定在窗口某个位置的元素显现或隐藏
效果图html代码<div id="box"></box>css代码html,body{ height: 1000px;}#box{ width: 100%; height: 200px; background-color: red; position: fixed; bottom: 0; display: none;}JavaScript代码//获取元素var box = document.getElementById('box');原创 2020-07-11 11:19:21 · 554 阅读 · 4 评论