0

手写 Promise

前言都 2020 年了,Promise 大家肯定都在用了,但是估计很多人对其原理还是一知半解,今天就让我们一起实现一个符合 PromiseA+ 规范的 Promise。附 PromiseA+ 规范地址: https://promisesaplus.com/简单版我们都知道 Promise 的调用方式,new Promise(executor), executor 两个参数,resolve,reject。所以现在我们的代码长这样class Promise { constructor(executor) { const resolve = () => {} ...

阅读全文>>

0

Unable to preventDefault inside passive event listener due to target being treated as passive.

在Chrome下调试时,忽然发现有一个错误日志,日志信息如下: Unable to preventDefault inside passive event listener due to target being treated as passive. 所有的操作好像都是正常的,但为什么还出现这样的错误提示呢。虽然不影响使用,但还是不想放过任何一个问题。 翻译一下:chrome 监听touch类事件报错:无法被动侦听事件preventDefault,是新版本chrome 浏览器报错。 说明:说一下这个 preventDefault()是个什么鬼,这个是取消默认事件的,...

阅读全文>>

0

理解JavaScript中的浅拷贝与深拷贝

浅拷贝在使用JavaScript对数组进行操作的时候,如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致了问题的发生var arr = ['aa','bb','cc'];var arr2 = arr;arr2[0] = '新来的';console.log(arr);//输出 '新来的','bb','cc'由此可见对数组arr2进行修改时,而arr内数据也会随之改变。这种直接赋值的方式就是浅拷贝现象。那到底是为什么呢?因为JavaScript存储对象都是存地址的,所以浅复制会导致 arr 和 arr2 指向同一块内存地址,大概的示意图如下。所以当修改...

阅读全文>>

0

JavaScript对于页面适配,你应该使用px还是rem

css中的单位很多,%、px、em、rem,以及比较新的vw、vh等。每个单位都有特定的用途,比如当需要设置一个矩形的宽高比为16:9,并且随屏幕宽度自适应时,除了用%,其他单位是很难做到的。所以不存在说某个单位是错误的,某个单位是最好的这种说法。那本文说的页面适配,指的是同样的布局,在不同大小的屏幕上怎么进行缩放、控制间距、宽高、字号等大小。页面适配的方式有很多:使用px,结合Media Query进行阶梯式的适配;使用%,按百分比自适应布局;使用rem,结合html元素的font-size来根据屏幕宽度适配;使用vw、vh,直接根据视口宽高适配。在这些大前提下,还需针对一些小的细节做微调。...

阅读全文>>

0

关于Firefox火狐浏览器下使用sortable.js进行拖拽时打开新窗口页面的问题处理

最近使用Sortable.js开发拖拽的功能,但在Firefox浏览器下遇到一个问题,任何时候拖拽,都会打开一个新窗口页面,这是没办法接受的,于是对此问题进行了以下方式的处理,问题总算解决了。 在页面加载完成时执行以下代码即可: document.body.ondrop = function (event) { event.preventDefault(); event.stopPropagation(); }; 通过以上的处理,在firefox火狐浏览器的操作完全正常了。

阅读全文>>

0

js闭包的强大功能

我觉得闭包的强大之处主要在于他的封装性,也就是信息隐藏。下面我们从以下几个方面来详细说明。函数与私有状态通过闭包,我们可以创建拥有私有状态的函数,闭包使得状态被封装起来。工厂模式与私有原型对象我们先来看一个通过原型创建对象的常规方式,如下:let todoPrototype = { toString : function() { return this.id + " " + this.userName + ": " + this.title; }}function Todo(todo){ let newTodo = Object.create(todoPrototype); Object.as...

阅读全文>>

0

WebStorm 2020.2 正式发布

WebStorm 2020.2 发布了,此版本可将 Prettier 用作默认格式化程序,还带来了对 Vue 的支持、对 JavaScript 的新意图,和对 GitHub PR 的全面支持等等。主要新特性和改进包括:框架和技术:使用 Prettier 作为默认格式化程序的选项,对 Vue.js 进行了各种改进,并支持 WSL 2 中安装的 Git。JavaScript 和 TypeScript:新的智能意图,JSDoc 注释呈现,ML 辅助代码补全,以及调试器增强。HTML 和样式表:更好地支持 Sass 的模块系统,WebP 支持,以及 querySelector 方法中 CSS 选择器的...

阅读全文>>

0

轻量级Javascript全文搜索库——Lunr.js

介绍Lunr.js是个用于浏览器的轻量级 JavaScript 全文搜索引擎。它为JSON文档建立索引,并提供一个简单的搜索界面来检索与文本查询最匹配的文档对于一些小型的博客、开发者文档或 Wiki 网站来说,完全可以通过它实现站内离线搜索:为什么使用它?对于已经将所有数据存储在客户端中的Web应用程序,也能够在客户端上搜索该数据也是很有意义的。这样可以节省在服务器上添加额外的压缩服务。本地搜索索引将更快,没有网络开销,并且即使没有网络连接也将保持可用。Github目前Github上star数6.6khttps://github.com/olivernn/lunr.js简单示例var idx ...

阅读全文>>

0

JavaScript数组常用方法

1、数组去重function removeRepeat(arr){ var newArr = []; for(var i = 0; i < arr.length; i++){ if(newArr.indexOf(arr[i])==-1){ newArr.push(arr[i]); } } return newArr;}var arr = [1,2,3,4,2,1,4,3,3];var result = removeRepeat(arr)console.log(result); // [1, 2, 3, 4]2、找出...

阅读全文>>

0

Javascript运行机制深入

浏览器内核(渲染进程)浏览器的渲染进程是多线程的!包含了哪些线程(列举一些主要常驻线程):GUI渲染线程负责渲染浏览器界面,解析HTML,CSS,构建DOM树和RenderObject树,布局和绘制等。当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行注意,GUI渲染线程与JS引擎线程是互斥的,当JS引擎执行时GUI线程会被挂起(相当于被冻结了),GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。JS引擎线程也称为JS内核,负责处理Javascript脚本程序。(例如V8引擎)JS引擎线程负责解析Javascript脚本,运行代码。JS引擎一直等...

阅读全文>>