随笔分类 - javascript
摘要：Array.from()会把类似数组的对象转换成真实数组，对象需满足两个条件： 具有length属性，length的值即为数组的长度 对象key要是数字，并会作为数组的下标 let obj = { '0': 'first', '1': 'second', '2': 'third', length:
阅读全文
posted @ 2020-12-07 14:46
浅笑·
摘要：1.事件截获原理 利用事件的捕获阶段，添加事件。 再利用触发事件元素(e.target)来判断(根据一定的标识或者某些特征)是否是我们需要劫持的dom。 2.具体拦截 这里使用id作为一个判断根据，真实场景中肯定不是这样的。 这里的特征是需要根据一定的规则去寻找的。(这里只是为了演示原理) <!DO
阅读全文
posted @ 2020-12-07 14:44
浅笑·
摘要：曾几何时，ES6/ES2015 对 JavaScript 语言进行了重大升级。它引入了许多不同的新功能。其中之一就是我们可以用在任何兼容容器（对象、数组、字符串、集合、映射）前面的三个连续点。这些小点使我们能够编写更加优雅和简洁的代码。在本文中我将会解释这三个点的工作原理，并展示最常见的例子。 三个
阅读全文
posted @ 2020-12-07 14:41
浅笑·
摘要：写在前面 距 typescript 3.7 正式发布已经有一段时间了，这段时间正在对手上的项目进行 typescript 的迁移工作，所以会特别留意每一次的 release。 对于 3.7 中包含的新特性，其实相比较之前几次 release 来说，算是一个比较小的发布版本，但是其中包含的几个特性对代
阅读全文
posted @ 2020-12-07 14:39
浅笑·
摘要：Set基本用法 ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 Set 本身是一个构造函数，用来生成 Set 数据结构。 const s = new Set(); \[2, 3, 5, 4, 5, 2, 2\].forEach(x => s.add(x));
阅读全文
posted @ 2020-12-07 14:37
浅笑·
摘要：先看代码 这个代码平淡无奇，就是从一个数组中找到一个数，O(n)的算法，找不到就返回 null。 下面是正常的 old-school 的方式。不用多说。 //正常的版本 function find (x, y) { for ( let i = 0; i < x.length; i++ ) { if
阅读全文
posted @ 2020-12-07 14:34
浅笑·
摘要：写这篇文章的起因是在写单元测试时，做形如下测试时 new Promise((resolve, reject) => reject(1)).then().catch(err => { console.log(err) }) async function jestTest () { await Prom
阅读全文
posted @ 2020-12-07 14:32
浅笑·
摘要：fold（reduce） 说说reduce吧, 很喜欢这个函数，节省了不少代码量，而且有一些声明式的雏形了，一些常见的工具函数，flatten，deepCopy，mergeDeep等用reduce实现的很优雅简洁。reduce也称为fold，本质上就是一个折叠数组的过程，把数组中的多个值经过运算变成
阅读全文
posted @ 2020-12-07 14:30
浅笑·
摘要：1 引言 取数是前端业务的重要部分，也经历过几次演化： fetch 的兼容性已经足够好，足以替换包括 $.post 在内的各种取数封装。 原生用得久了，发现拓展性更好、支持 ssr 的同构取数方案也挺好，比如 isomorphic-fetch、axios。 对于数据驱动场景还是不够，数据流逐渐将取数
阅读全文
posted @ 2020-12-07 14:28
浅笑·
摘要：短轮询（Polling） 短轮询的实现思路就是浏览器端每隔几秒钟向服务器端发送 HTTP 请求，服务端在收到请求后，不论是否有数据更新，都直接进行响应。在服务端响应完成，就会关闭这个 TCP 连接，代码实现也最简单，就是利用 XHR， 通过 setInterval 定时向后端发送请求，以获取最新的数
阅读全文
posted @ 2020-12-07 14:26
浅笑·
摘要：使用标记的联合类型构建付款方式 假设咱们为系统用户可以选择的以下支付方式建模 Cash (现金) PayPal 与给定的电子邮件地址 Credit card 带有给定卡号和安全码 对于这些支付方法，咱们可以创建一个 TypeScript 接口 interface Cash { kind: "cash
阅读全文
posted @ 2020-12-07 14:24
浅笑·
摘要：方案一：js 实现 js 无敌大法好。兼容极佳，但是体验上就比较感人了。这里不过多介绍。 方案二：Fixed 实现 fixed 是基于浏览器的定位，在组件中显的不是很适用。而且在 iOS 也有兼容性问题。 方案三：Sticky 实现 sticky 是新加的 position 的值，可以用于实现粘性定
阅读全文
posted @ 2020-12-07 14:23
浅笑·
摘要：在开发中，变量名，函数名一般要做到清晰明了，尽量做到看名字就能让人知道你的意图，所以变量和函数命名是挺重要，今天来看看如果较优雅的方式给变量和函数命名。 变量 使用有意义和可发音的变量名 // 不好的写法 const yyyymmdstr = moment().format("YYYY/MM/DD"
阅读全文
posted @ 2020-12-07 14:22
浅笑·
摘要：1. 多个 .catch var p = new Promise((resolve, reject) => { reject(Error('The Fails!')) }) p.catch(error => console.log(error.message)) p.catch(error => c
阅读全文
posted @ 2020-12-07 14:21
浅笑·
摘要：细心点的朋友可能会注意到，有些网站使用document.write动态加载js的时候需要把</script>拆分开来写？如下面的例子所示： <script type='text/JavaScript'> if (typeof window['jQuery'] == 'undefined') docu
阅读全文
posted @ 2020-12-07 14:20
浅笑·
摘要：本文主要涉及三个关键词： 同源策略（Same-origin policy，简称 SOP） 跨站请求伪造（Cross-site request forgery，简称 CSRF） 跨域资源共享（Cross-Origin Resource Sharing，简称 CORS） 同源策略 SOP 同源 先解释何
阅读全文
posted @ 2020-12-07 14:19
浅笑·
摘要：图像是web上提供的最基本的内容类型之一。他们说一张图片胜过千言万语。但是如果你不小心的话，图片大小有时高达几十兆。 因此，虽然网络图像需要清晰明快，但它们尺寸可以缩小压缩的，使用加载时间保持在可接受的水平。 在我的网站上，我注意到我的主页的页面大小 超过了 1.1MB，图片占了约88%，我还注意到
阅读全文
posted @ 2020-12-07 14:18
浅笑·
摘要：什么是AOP？ AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来，这些跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。把这些功能抽离出来之后， 再通过“动态织入”的方式掺入业务逻辑模块中。 AOP能给我们带来什么好处？ AOP的好处首先是可以保持业务逻辑模块的
阅读全文
posted @ 2020-12-07 14:17
浅笑·
摘要：在前端面试中面试官基本都会问到什么是匿名函数、什么是闭包函数。 本文就先来说一下什么是匿名函数。 匿名函数顾名思义就是没有名字的函数，通常我们所写的函数都是这样的： function do(){ // 执行代码 }; // 调用 do(); 这种写法是定义了一个名为do的函数，并通过函数名称进行调用
阅读全文
posted @ 2020-12-04 15:08
浅笑·
摘要：一、示例场景 1.1、设置抽奖活动的奖项名称 奖项名称：["一等奖", "二等奖", "三等奖", "未中奖"]。假设抽奖活动设置了这四个奖项，当然开发者可以扩展更多。 var prizes = ["一等奖","二等奖","三等奖","未中奖"]; //奖项名称数组 1.2、设置各奖项权重 奖项权重
阅读全文
posted @ 2020-12-04 15:06
浅笑·
浙公网安备 33010602011771号