Moon Star

使用img加载GIF图片，内容只会播放一次，之后就会自动暂停；通过定时器在一段时间后重新加载图片的方式，会导致浏览器内存不断增大，并且可能会有闪烁、卡顿的问题；

众所周知，以下代码可以用来监听页面中localstorage和sessionstorage中属性值的变化。

不知道你有没有遇到这样的需求：锚点定位？进入页面某个元素需要出现在可视区？......这一类的需求归根结底就是处理元素与可视区域的关系。我接触了很多前端小伙伴，实现的方式有各种各样的，比如使用 scrollTop、监听滚动等等，这也是很多小伙伴第一个想到的。。1.基本介绍scrollIntoView 是 HTMLElement 集合下的一个 API，每一个 HTML 元素都拥有这个 API。滚动到可视区。为了更加官方一点，我们还是先来看看官方的解释。

A 页面点击某按钮打开了新的标签页 B，当新的标签页 B 未关闭且符合同源策略时，再次点击按钮，可以自动跳转到标签页 B。

浏览器将空格转成了+，导致服务报错，返回 400。

）是一个逻辑运算符，当左侧的操作数为或者时，返回其右侧操作数，否则返回左侧操作数。与不同，逻辑或运算符会在左侧操作数为时返回右侧操作数。也就是说，如果使用||来为某些变量设置默认值，可能会遇到意料之外的行为。比如为假值（例如，''或0）时。见下面的例子。将??直接与 AND（&&）和 OR（||）运算符组合使用是不可取的。（译者注：应当是因为空值合并运算符和其他逻辑运算符之间的运算优先级/运算顺序是未定义的）这种情况下会抛出。空值合并运算符针对undefined与null这两个值，也是如此。

常见的 macro task 有 setTimeout、MessageChannel、postMessage、setImmediate。而常见的 micro task 有 MutationObsever 和 Promise.then。MessageChannelChannel Messaging API的MessageChannel接口允许我们创建一个新的消息通道，并通过它的两个MessagePort属性发送数据。Note:此特性在Web Worker中可用iframe通信...

位运算按位与&对每对比特位执行与（AND）操作。只有 a 和 b 都为1时，a & b 就是 1。如下表9 & 3 = 19 = 1 0 0 1 3 = 0 0 1 1 1 = 0 0 0 1 由上表我们可以清晰的看出按位与的计算规则，由此可以引出一系列应用场景判断奇偶我们知道奇数的二进制最后一位必然为1，所以任意一个奇数 & 1 一定等于1。/

用户卸载网页的时候，有时需要向服务器发一些数据。很自然的做法是在unload事件或beforeunload事件的监听函数里面，使用XMLHttpRequest对象发送数据。但是，这样做不是很可靠，因为XMLHttpRequest对象是异步发送，很可能在它即将发送的时候，页面已经卸载了，从而导致发送取消或者发送失败。解决方法就是 AJAX 通信改成同步发送，即只有发送完成，页面才能卸载。但是，很多浏览器已经不支持同步的 XMLHttpRequest 对象了（即open()方法的第三个参数为false）。

什么是自定义事件在日常开发中，我们习惯监听页面许多事件，诸如：点击事件（click）、鼠标移动事件（mousemove）、元素失去焦点事件（blur）等等。事件本质是一种通信方式，是一种消息，只有在多对象多模块时，才有可能需要使用事件进行通信。在多模块化开发时，可以使用自定义事件进行模块间通信。当某些基础事件无法满足我们业务，就可以尝试自定义事件来解决。Event API - MDN内置事件常见的内置事件：click、mouse、input、storage等等...

前言sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。**在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话，**这点和 session cookies 的运行方式不同。...

1. 数据类型[ { amountList: [ {year: "2018", reportedAmount: "269.62", approvedAmount: "270.0"}, {year: "2019", reportedAmount: "255.16", approvedAmount: "256.0"}, {year: "2020", reportedAmount: "307.65", appro

format(seconds) { let hour = Math.floor(seconds / 3600) >= 10 ? Math.floor(seconds / 3600) : '0' + Math.floor(seconds / 3600); seconds -= 3600 * hour; let min = Math.floor(seconds / 60) >= 10 ? Math.floor(seconds / 60) : '0' + Math.floor(se.

1. 概览在JavaScript中，使用//即可创建一个正则表达式对象，当然也可以使用new RegExp()常用的跟正则相关的方法有match、test和replace。其中match，replace都是字符串上的方法，test是正则对象上的方法。下面看具体的图示：2. 匹配单字符 /reg/可以直接匹配具体的字符串reg。 /[...

图书GET https://api.douban.com/v2/book/search参数 意义 备注 q 查询关键字 q和tag必传其一 tag 查询的tag q和tag必传其一 start 取结果的offset 默认为0 count 取结果的条数 默认为20，最大为100 { "star...

后端（express）：Access-Control-Expose-Headers：暴露响应头供前端使用（Content-Disposition）router.post("/downExcel", (req, res) => { let assetsPath = path.resolve(__dirname, "../assets/1.xlsx"); res.set("Access-Control-Expose-Headers", "Content-Disposition");

可选链操作符可选链操作符(?.)允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。通过连接的对象的引用或函数可能是undefined或null时，可选链操作符提供了一种方法来简化被连接对象的值访问。当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。Example：let nestedProp = obj.first && obj.first.second;为了避免报错，在访问obj.first.second...

组件是前端的发展方向，现在流行的 React 和 Vue 都是组件框架。谷歌公司由于掌握了 Chrome 浏览器，一直在推动浏览器的原生组件，即Web Components API。相比第三方框架，原生组件简单直接，符合直觉，不用加载任何外部模块，代码量小。自定义元素自定义元素是简单的用户自定义HTML元素。它们通过使用CustomElementRegistry来定义。要注册一个新的元素，通过window.customElements中一个叫define的方法来获取注册的实例。win..

1. Shadow DOM 是什么Shadow DOM是什么？我们先来打开 Chrome 的 DevTool，并在'Settings -> Preferences -> Elements'中把' Show user agent shadow DOM'打上勾。然后，打开一个支持 HTML5 播放的视频网站。比如 Youtube：可以看到video内部有一个#s...

1. parseInt概念：以第二个参数为基数来解析第一个参数字符串，通常用来做十进制的取整（省略小数）如：parseInt(2.7) //结果为2特点：接收两个参数parseInt(string,radix)['1','2','3'].map(parseInt)结果result：[1, NaN, NaN]['1','2','3'].map(parseInt) 就是将字符串...

1.拖拽和释放定义：　　拖拽：Drag;　　释放：Drop;2.源对象和目标对象：　　3.相关API:　　ondragstart:源对象开始被拖动　　ondrag:源对象被拖动的过程中　　ondragend:源对象被拖动结束　　ondragenter:目标对象被源对象拖动进入　　ondragover:目标对象被源对象悬浮在上面　　ondragleave:...

背景：eslint的配置文件是eslintrc，babel的配置文件是babelrc。。。那么rc是什么意思呢？解释：配置文件比较正规的叫法是：运行控制文件 run controlLinux： 配置文件配置文件比较文绉绉的称呼是“运行控制文件”，存放与具体程序相关的声明信息，有些时候甚至是可执行的命令，在程序启动时解析。对于系统级配置文件，就像在第三章中描述的那样，...

esModule模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。export命令export var firstName = 'Michael';export var year = 1958;export function multiply(x, y) { return x * y;...

AMD和CMD都是为了解决浏览器端模块化问题而产生的1、AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块2、CMD推崇就近依赖，只有在用到某个模块的时候再去requireAMD和CMD最大的区别是对依赖模块的执行时机处理不同CommonJS：nodejs正是一个commonJs规范的实现，在node里正是采用require的方式进行包的引入。至于定义以及原理，这里不...

JavaScript Console 对象Console 对象用于 JavaScript 调试。JavaScript 原生中默认是没有 Console 对象,这是宿主对象（也就是浏览器）提供的内置对象。 用于访问调试控制台, 在不同的浏览器里效果可能不同。在低版本IE中是没有Console对象的assert() ssert方法接受两个参数，第一个参数是表达式，第二个参数是字符串。...

What is？使用npm-scripts已成为维护开发Node.js模块所需的各种构建任务的常用方法。因为它很简单！只需在package.json中添加一个小脚本，然后使用npm run name：of：script运行当 npm script 过多或者变得复杂时，会导致 package.json 混乱，可读性差等问题。我们可以借助 scripty 将 npm script ...

懒加载定义：延迟加载图片或符合某些条件时才加载某些图片，通常用于图片比较多的网页。可以减少请求数或者延迟请求数，优化性能。呈现形式：​​​​​​​延时加载，使用setTimeout或setInterval进行加载延迟，如果用户在加载前就离开，自然就不会进行加载。 条件加载，符合某些条件或者触发了某些条件才开始异步加载。 可视区域加载，仅仅加载用户可以看到的区域，这个主要监控滚动条来...

如何设置 Prettier？在你的文件夹中，在命令行中敲入，创建一个 package.json 文件：npm init -y安装我们的第一个依赖项：npm add --dev prettiernpm i -D eslint-plugin-prettiereslint-plugin-prettier插件会调用prettier对你的代码风格进行检查，其原理是先使用pretti...

1. json字符串转化为json对象可以通过JavaScript的eval()函数来进行解析，代码如下：<script type="text/javascript"> var json = '{"key":"value","jian":"zhi"}'; var obj = eval("(" + json + ")"

1.箭头函数与function定义函数的写法：//functionfunction fn(a, b){ return a + b;}//arrow functionvar foo = (a, b)=>{ return a + b };2.this的指向：使用function定义的函数，this的指向随着调用环境的变化而变化的，而箭头函数中的this指向是固定不变...

学习js这么久，碰到了各种循环遍历的方法，在这里总结一下：1.for2.while太简单就不叙述了！！！ 3.for ... inlet obj = {name:'js',name:'es'};for(let i in obj){ console.log(i,obj[i])}// name js// name esfor in 循环主要用于遍历普通对象，i 代...

~我们知道的取反是 ! ，返回类型是boolean类型的，例如：!1==false；!0==true；等等而~是按位取反，和Boolean没多大关系来看看~1的计算步骤：将1(这里叫：原码)转二进制 ＝00000001 按位取反 ＝11111110 发现符号位(即最高位)为1(表示负数)，将除符号位之外的其他数字取反 ＝10000001 末位加1取其补码 ＝100...

javascript相对于其它语言来说是一种弱类型的语言，在其它如java语言中，程序的执行需要有编译的阶段而在javascript中也有类似的“预编译阶段”（javascript的预编译是以代码块为范围<script></script>，即每遇到一个代码块都会进行 预编译>执行），了解javascript引擎的执行机理，将有助于在写js代码过程中的思路总结...

Screen://获取网页与屏幕顶端（左端）的距离console.log('window.screenTop:'+window.screenTop);//screenLeftconsole.log('window.screenX:'+window.screenX);//screenY//获取屏幕工作区的高度console.log('window.screen.availHeight:'...