原生JS
关注
分享
扫一扫
如果有了可惜
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
浅谈前端闭包
代码】浅谈前端闭包。原创 2022-07-20 10:11:36 · 171 阅读 · 0 评论 -
前端拖拽时手型为禁用
dragover事件中需要e.preventDefault()才可以正确显示手型。原创 2022-07-19 10:06:29 · 580 阅读 · 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 · 1266 阅读 · 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 · 716 阅读 · 0 评论 -
前端检测窗口是否被后台
当用户长时间后台页面时，再切回来有些场景是需要刷新页面的，比如判断 token 失效， 比如后台视频播放暂停或静音，前台视频自动播放或打开音量 document.addEventListener("visibilitychange", () => { if(document.visibilityState=="visible"){ alert("欢迎回来"); // 播放视频 } else { console.log("不要走！") // 暂停视频播放 }原创 2020-08-17 20:08:05 · 638 阅读 · 0 评论 -
for of
// 常规 Object.keys().forEach(key => { }) // for of const person = { name: 'John Smith', job: 'agent' }; for (const [key, value] of Object.entries(person)) { console.log(key, value); }原创 2020-08-11 15:50:43 · 117 阅读 · 0 评论 -
常见的前端上传下载
在前端下载中，一般使用 a 标签下载， 但有时候要通过后端接口，比如文件资源是放在一个有网络限制的非公网环境，也就是说直接 url 不能正常请求到资源。 一般这时候后端会帮你读这个文件然后传二进制流给前端 二进制流返回值例： ÿØÿàJFIFÿÛC &/"$ &81;:7165=EXK=ATB56MiNT[^cdc<Jltl`sXac_ÿÛC--_?6?________________________________________原创 2020-08-06 10:38:03 · 476 阅读 · 0 评论 -
前端性能优化(Vue)
cdn gzip https://www.cnblogs.com/zs-note/p/9556390.html原创 2020-07-31 10:43:35 · 241 阅读 · 0 评论 -
前端四大手写
转载的 手写 bind bind 用法不难，一句话解释就是把新的 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 · 531 阅读 · 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 · 110 阅读 · 0 评论 -
JS字符串包含监测
String对象的方法 方法一: indexOf() (推荐) var str = “123”; console.log(str.indexOf(“3”) != -1 ); // true indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。 方法二: search() var str = “123”; console.log(str.search(“3”) != -1 ); // true search() 方法用于检索字符串原创 2020-06-03 11:15:09 · 329 阅读 · 0 评论 -
Promise
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises async function foo() { try { const result = await doSomething(); const newResult = await doSomethingElse(result); const finalResult = await doThirdThing(newResult);原创 2020-05-24 11:09:22 · 112 阅读 · 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 · 161 阅读 · 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 · 147 阅读 · 0 评论 -
Axios 封装
http.js import 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 · 212 阅读 · 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 · 268 阅读 · 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 · 330 阅读 · 0 评论 -
JS ++
++操作符 (a++ )!== (a += 1) !== (a = a + 1) a += 1 === a = a + 1 let a = '10'; a++; 此时 a = 11 let b = '10'; b += 1; 此时 b = '101';原创 2020-04-07 16:48:48 · 474 阅读 · 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 · 1512 阅读 · 0 评论 -
JS连等赋值
一道阿里的题 let a = { n: 1 } let b = a a.x = a = { n: 2 } 求 a/b 的值原创 2020-03-18 22:37:42 · 175 阅读 · 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 · 164 阅读 · 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 · 1635 阅读 · 0 评论 -
JS深拷贝与浅拷贝
对象浅拷贝 Object.assign()将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象（存在兼容问题） var newObj = Object.assign({}, obj) for in var newObj = {} for (var i in obj) { newObj[i] = obj[i] } ...运算符 var newObj= { .....原创 2019-06-16 21:56:57 · 216 阅读 · 0 评论