原生JS
关注
分享
扫一扫
如果有了可惜
这个作者很懒，什么都没留下…
展开
-
浅谈前端闭包
代码】浅谈前端闭包。原创 2022-07-20 10:11:36 · 155 阅读 · 0 评论 -
前端拖拽时手型为禁用
dragover事件中需要e.preventDefault()才可以正确显示手型。原创 2022-07-19 10:06:29 · 550 阅读 · 0 评论 -
PostMessage的使用
前端做 iframe 通讯的时候会用到这个 API，即 A 页面嵌套B页面，两个页面之间做信息交换页面接收消息window.addEventListener( 'message', callBack)const callback = ({data, origin}) => console.log(origin, data);window.addEventListener('message', callback);发送消息otherWindow.postMessage(message, '原创 2021-01-22 11:02:47 · 1229 阅读 · 1 评论 -
前端检测浏览器缩放
function detectZoom (){ var ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefined) { ratio = window.devicePixelRatio; } else if (~ua.indexOf('msie')) { if (scree原创 2020-09-13 16:32:29 · 691 阅读 · 0 评论 -
前端检测窗口是否被后台
当用户长时间后台页面时，再切回来有些场景是需要刷新页面的，比如判断 token 失效，比如后台视频播放暂停或静音，前台视频自动播放或打开音量document.addEventListener("visibilitychange", () => { if(document.visibilityState=="visible"){ alert("欢迎回来"); // 播放视频 } else { console.log("不要走！") // 暂停视频播放 }原创 2020-08-17 20:08:05 · 608 阅读 · 0 评论 -
for of
// 常规Object.keys().forEach(key => { })// for ofconst person = { name: 'John Smith', job: 'agent'};for (const [key, value] of Object.entries(person)) { console.log(key, value);}原创 2020-08-11 15:50:43 · 106 阅读 · 0 评论 -
常见的前端上传下载
在前端下载中，一般使用 a 标签下载，但有时候要通过后端接口，比如文件资源是放在一个有网络限制的非公网环境，也就是说直接 url 不能正常请求到资源。一般这时候后端会帮你读这个文件然后传二进制流给前端二进制流返回值例：ÿØÿàJFIFÿÛC &/"$ &81;:7165=EXK=ATB56MiNT[^cdc<Jltl`sXac_ÿÛC--_?6?________________________________________原创 2020-08-06 10:38:03 · 456 阅读 · 0 评论 -
前端性能优化(Vue)
cdngziphttps://www.cnblogs.com/zs-note/p/9556390.html原创 2020-07-31 10:43:35 · 220 阅读 · 0 评论 -
前端四大手写
转载的手写 bindbind 用法不难，一句话解释就是把新的 this 绑定到某个函数 func 上，并返回 func 的一个拷贝。使用方法如下：let boundFunc = func.bind(thisArg[, arg1[, arg2[, …argN]]])那怎么实现呢？我认为手写 bind 可以分为三个等级：初级：只用 ES6 新语法优点：因为可以使用 const 、… 操作符，代码简洁缺点：不兼容 IE中级：使用 ES5 语法优点：兼容 IE缺点：参数要用Array.proto原创 2020-07-31 10:04:31 · 516 阅读 · 0 评论 -
Object.assign
https://blog.youkuaiyun.com/qs8lk88/article/details/79018481?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase原创 2020-07-03 09:20:03 · 100 阅读 · 0 评论 -
JS字符串包含监测
String对象的方法方法一: indexOf() (推荐)var str = “123”;console.log(str.indexOf(“3”) != -1 ); // trueindexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。方法二: search()var str = “123”;console.log(str.search(“3”) != -1 ); // truesearch() 方法用于检索字符串原创 2020-06-03 11:15:09 · 306 阅读 · 0 评论 -
Promise
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promisesasync function foo() { try { const result = await doSomething(); const newResult = await doSomethingElse(result); const finalResult = await doThirdThing(newResult);原创 2020-05-24 11:09:22 · 102 阅读 · 0 评论 -
canvas
简介canvas 是什么Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。Canvas API主要聚焦于2D图形。而同样使用<canvas>元素的 WebGL API 则用于绘制硬件加速的2D和3D图形canvas 可以做什么绘制 2d 位图处理图片，视频制作动画和小游戏https://www.cnblogs.com/dy0723/p/5819526.htm原创 2020-05-21 11:00:21 · 144 阅读 · 0 评论 -
闭包
「我听说闭包是需要函数套函数，然后 return 一个函数」function foo(){ var local = 1 function bar(){ local++ return local } return bar}var func = foo()func()这里面确实有闭包，local 变量和 bar 函数就组成了一个闭包（Closure）有些人看到「闭包」这个名字，就一定觉得要用什么包起来才行。其实这是翻译问题，闭包的原文是 Closure，跟「包」没原创 2020-05-17 00:54:35 · 133 阅读 · 0 评论 -
Axios 封装
http.jsimport axios from 'axios';import { Observable } from 'rxjs';import { BaseURL } from './constant';const instance = axios.create({ baseURL: BaseURL, withCredentials: true,});instance.interceptors.response.use( (response) => response,原创 2020-05-14 09:06:02 · 203 阅读 · 0 评论 -
data-*
data-*data-* 全局属性 是一类被称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本(一般指JavaScript) 与 HTML 之间进行专有数据的交换全局属性相关https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes与 js 之间数据交换h...原创 2020-04-26 11:24:01 · 248 阅读 · 0 评论 -
Js获取盒模型样式
在 JS 中，如果操作样式我们可能采取以下方式获取 / 修改元素行内样式[element].style | [element].style.xx = xx添加 / 修改类名[element].className = 'xx' | [element].classList[add|remove|toggle]()但是我们发现通过 css 设置盒子的宽高并不能直接通过 js 的这几个 API...原创 2020-04-22 22:10:56 · 317 阅读 · 0 评论 -
JS ++
++操作符(a++ )!== (a += 1) !== (a = a + 1)a += 1 === a = a + 1let a = '10';a++;此时 a = 11let b = '10';b += 1;此时 b = '101';原创 2020-04-07 16:48:48 · 454 阅读 · 0 评论 -
js 三元运算符多语句写法
只适合于简单的 if else 语句if( a > 1 ) { console.log(1)}else { console.log(2)}a > 1 ? console.log(1) : console.log(2)null/undefinde 站位单分支if( a > 1 ){ a++}a>1 ? a++ : null/undefined...原创 2020-03-18 22:44:29 · 1496 阅读 · 0 评论 -
JS连等赋值
一道阿里的题let a = { n: 1}let b = aa.x = a = { n: 2}求 a/b 的值原创 2020-03-18 22:37:42 · 163 阅读 · 0 评论 -
红宝书
script 标签服务器在传送 JavaScript 文件时使用的 MIME 类型通常是 application/x–javascript传统的做法，所有 script 元素都应该放在页面的 head 元素中<head> <script type="text/javascript" src="example1.js"></script> <s...原创 2020-01-04 03:04:07 · 152 阅读 · 0 评论 -
JS获取剪切板
获取剪切板内容：https://segmentfault.com/a/1190000004288686?utm_source=tag-newest图片文件转base 64 ：https://www.zhangxinxu.com/wordpress/2018/09/ajax-upload-image-from-clipboard/原创 2019-10-14 10:57:48 · 1616 阅读 · 0 评论 -
JS深拷贝与浅拷贝
对象浅拷贝Object.assign()将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象（存在兼容问题）var newObj = Object.assign({}, obj)for invar newObj = {} for (var i in obj) { newObj[i] = obj[i]}...运算符var newObj= { .....原创 2019-06-16 21:56:57 · 161 阅读 · 0 评论