- 博客(25)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 js利用promise.race实现异步并发请求最大并发数的控制
class PoolRequest{ // 连接池 #quene = []; #max = 1; #doRequest(url) { return new Promise((resolve, reject) => { setTimeout(() => { url % 2 == 0 ? resolve() : reject(); }, url); }); } constructor(limit = 1) {
2021-02-15 20:41:03
1233
原创 【面试】面试题有疑问或者不会的题目汇总
loader和plugin的区别是什么我回答的是loader是接受输入参数（文件内容）并经过一系列的处理然后对应输出；而plugin在整个webpack生命周期都有效标准答案：webpack官网这里已经有了描述loaderloader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。本.
2021-01-25 12:24:45
160
原创 script标签中的async 和defer加载顺序
async不阻塞页面，不影响domcontentload，它是什么时候加载完什么时候执行（浏览器空闲）defer是等所有非async资源加载完成后在执行（哪怕他已经加载完毕）。多个defer按照顺序执行，哪怕后一个defer资源已经加载完成也要等前一个defer执行完毕才去执行等到所有非async资源全部加载完成触发domcontentload...
2020-12-10 16:06:56
305
原创 webpack懒加载代码原理深究
背景介绍：我们在实际的开发过程中，vue-router的组件经常这样去写：{ component: () => import('my/component/path/*.vue')}这样写的目的是实现懒加载，也就是当需要该组件的时候才去实际发送请求。我们模拟懒加载，然后分析下构建后的源码文件准备(文件链接)a.js import('./b.js');b.js console.log("hello");webpack.config.jsconst path = requ
2020-11-12 18:27:10
778
原创 https那些事（一）
如何建立安全连接？公钥：所有人都知道私钥：只有服务器自己知道公钥加密数据，私钥解密： 只要能解密这个数据就代表是服务端私钥加密，公钥解密： 所有人都可以知道，但是没人能对解析出来的数据“二次伪造”，因为私钥只存在在服务端1、客户端获取服务器公钥以及加密算法2、客户端 => 服务端 客户端用公钥加密一个随机数rd，加密结果为str（没有私钥解密不了）3、服务端 => 客户端 解析str，将rd的结果返回给客户端（私钥加密，有了公钥就可以以解析）4、客户端校验rd，通过，
2020-09-14 12:27:53
106
原创 杂记2020-09-11
一直想写点什么，一直拖着懒得去动手。直到今天看到一个面试人的简历。北京的秋天似乎比家里大部分夏天的时光都燥热，一直特别不喜欢极热的天气。自以为喜欢冬天下雪的日子，喜欢外边特别冷，后来才发现自己喜欢的不过是在暖暖的屋子里面看外面的冰天雪地。然而北京的暖气似乎没有家里那么给力。再过一周就要回家了。好像印象中对“家”这个词没有特殊的概念。傻逼结婚的时候，给他当伴郎，早晨大老早的去他家的时候，就特别羡慕。父亲在楼下收拾楼道走廊以及楼门前，母亲在屋里忙着零碎琐事招待我们这帮小孩。在平凡不过的一个场景，却是我羡慕
2020-09-11 11:28:06
163
原创 将jsbridge封装成promise
在与原生交互每次都要这么写setupWebViewJavascriptBridge(() => { // bridge 操作});当同时调用多个协议的时候，这种回调函数的方式看起来很乱但是我么可以将他封装成为一个promiselet bridgePromise = () => { // 判断当前浏览器是否是在ios下的webview打开运行的 const isIos = () => /(iPhone|iPad|iPod|iOS)/i.test(navigator.user
2020-09-11 09:43:13
555
原创 二叉搜索树的概念以及js实现增删操作
二叉搜索树 js1、概念二叉搜索树又称二叉查找树、二叉排序树。它满足如下性质它的所有左子树上面的节点均比它小它的所有右子树上面的节点均比它大它的左右子树也满足二叉搜索树的性质2、二叉搜索树的数据结构 function TreeNode(data) { this.data = data; // 实际的数据 this.lchild = null; // 左节点 this.rchild = null; // 右节点 }3、二叉搜索树的操作3.1 插入插入的
2020-08-17 14:51:57
107
原创 addEventListener和removeEventListener第三个参数
官方文档众所周知addEventListener和removeEventListenr是为dom添加或者卸载事件，比如： let fun = () => { alert("i am called"); }; document.addEventListener('click', fun); // 当需要移除点击事件的时候，如下调用 // document.removeEventListener('click', fun);参数 ta.
2020-08-07 16:44:20
1711
原创 web本地存储相关知识
1、本地存储都有哪几种方式web端的本地存储主要分为如下4种形式：cookie，sessionStorage，localStorage，indexedDb。其中indexedDb是一个小型数据库，这里不做讨论2、cookie sessionStorage localStorage有哪些共同点？他们存储数据的字段都是string都有跨域限制3、cookie sessionStorage localStorage有哪些不同点？cookiesessionStoragelocaSto
2020-08-05 17:25:26
169
原创 jsonp概念原理以及实现
jsonp1、为什么会有跨域浏览器是同源策略，他是一个约定也是最核心的内容，同时也是安全性的最佳保障。试想一下，如果没有这种限制的话，一个页面同时加载了a与b两个域下的js文件，那么他们的document以及cookie等信息都是共享的，也就是说a可以拿到b域下的信息，反之b也可以拿到a域下的信息，这样的结果是非常可怕的2、同源的概念两个页面具有相同的协议（protocol），主机（host）和端口号（port）。可以将下列代码拷贝到控制台进行执行，查看结果 console.log(locati
2020-08-04 17:13:01
238
原创 微任务与宏任务
1、微任务与宏任务分类微任务promiseprocess.nextTickMutationObserver宏任务setTimeoutsetIntervalI/O这里只是列举了一些常见的方法，还有部分未列举在内（MutationObserver被列举在里面的原因是因为我第一眼看到他的时候竟然不知道这是个什么东西…）2、执行顺序主线程任务循环执行直至完毕微任务列表循环执行直至完毕宏任务列表为空则返回1，否则取出第一个任务执行完毕后跳转至2继续执行由于宏任务与微任务是队列的
2020-08-03 12:40:15
193
1
原创 js防抖与节流
要清楚防抖与节流的实现，首先要明白防抖与节流的概念是什么1、防抖防抖：当一个事件在一个连续时间内多次执行的时候，只有在最后一次事件触发大于规定时间（delay）的时候，才执行该事件。实际举例：比如浏览器窗口大小更改的时候（onresize事件），我们需要执行一个函数，如果这个函数足够“卡顿”的话，那么频繁执行的话会感觉到明显的卡顿，比如： // 实现一个阻塞函数 let sleep = (delay = 500) => { let t = Date.now(); while(Date
2020-08-02 23:30:02
136
原创 主流的spa应用的路由的哈希和history模式
现在的主流应用比如vue和react构建的spa应用的访问地址都具有2种模式，一种是哈希模式，一种是history模式。history模式是基于h5的history对象去进行操作，两者有什么不同呢？首先说history模式。history模式需要服务端（比如nginx）将所有的代理路由请求均打到index.html页面上，因为spa的路由是前端去进行管理的，所以后端对路由无需任何操作。但是我需要...
2019-02-28 19:07:07
838
翻译 react如何将一个function执行为class？（How Does React Tell a Class from a Function?）
本文转载，转载地址考虑下这个用function定义的Greeting Componentfunction Greeting() { return <p>Hello</p>;}React同样支持将它定义为classclass Greeting extends React.Component { render() { return <p>...
2018-12-11 15:08:05
1029
1
原创 浅谈js任务队列（microtask and macrotask）
首先思考如下一段代码// setTimeoutsetTimeout(() => { console.log("setTimeout");});// promisePromise.resolve().then(() => { console.log("promise");});你觉得会是以什么样的顺序输出？那么反过来如下呢？// promisePromise.r...
2018-10-25 09:58:24
1371
原创 一道有关概率的问题
前几天qq群里面突然有一个人问了一个问题36个数字中任选15个数字，包含某6个数字的概率是多少？这是一个抽奖活动，看着中奖应该没那么难，他觉得应该在3-4%之间实际情况呢？先写代码模拟以下这个题目的实现let result = [];let rand = () => Math.floor(Math.random() * 36);for(let i = 0; i < 1...
2018-10-19 11:49:27
205
原创 restful四种方法说明
restful虽然不是标准的http规范，也有说它是一种风格，但是个人认为只要实现了既有的约定，他也就是一种规范（虽然没被http纳入，但是服务器大概都已经实现了…）四种方法：get post put delete分别对应增删改查 get：查 post：增 put：改 delete：删其中get和delete没什么疑问，对于post和put网上有幂等这一说法 其实没那么复杂，...
2018-07-19 10:21:36
1640
原创 es6如何取消一个promise（一个网络请求等同样的问题）
在之前使用angular的时候，曾经遇到这么一个坑，当我在当前页面的网络请求尚未返回的时候，跳转到下一个页面之后，结果在网络请求回来的时候还是会去执行网络请求成功的函数。虽然无伤大雅（我之前没遇到什么问题），但是控制台有的时候报错却又让人真心不爽。。。首先清楚一点的是，网络请求其实是一个异步的请求，就像angular中的$http.get(url)这个的结果是一个promise，我们在then中...
2018-06-08 10:44:43
11149
原创 从认证谈一谈JWT
JWT全称JSON WEB TOKEN，基于token了不用想，八成都是和用户认证有关系。传统认证方式是通过cookie基于session的，这个优缺点就不在列举了。我在我们项目里面使用JWT的最主要原因就是因为一个是跨域的问题，一个是分布式的问题。先说大致的流程，用户在登录的时候，登录结果返回一个token值，以后的每次请求，都会在http的header中的Authorization中带...
2018-06-05 14:36:23
324
原创 js延迟执行dom操作（函数节流）
今天在群里有人问道比如在执行搜索的时候，不想让他立马执行搜索，而是在500ms之后执行搜索，这个专有名词叫什么。。。然后上网上查了下名字叫做函数节流（话说我真不知道有这么个词语，但是平时生活中也没少用）在执行一个耗费cpu的操作，比如是onresize，如果每次我们都要resize的话，cpu是消耗不起的，所以我们就在执行onresize函数的时候，判断上一次执行距离这一次执行的间隔，然后再去执行f
2017-09-11 12:03:09
608
原创 有关jq序列化表单排除空值的问题（$("form").serialize()）
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
2017-09-06 10:13:40
5598
1
原创 javascript 字符串replace参数问题
前几天在群里发现有人发来了一段代码求问是什么意思content = content.replace(reg, function($1, $2){});我是第一次见到replace的第二个参数竟然可以用函数（毕竟渣渣一枚。。。）然后看了菜鸟教程，第一个参数正则没什么其他异议（好像也可以是字符串，但重点不在这里），但是第二个参数既可以是字符串也可以是函数，并且如果是字符串的话，$符号有不
2017-08-30 15:53:20
560
原创 nodemailer使用qq邮箱的坑
不多说，贴代码'use strict';const nodemailer = require('nodemailer');// create reusable transporter object using the default SMTP transportlet transporter = nodemailer.createTransport({
2017-06-19 11:48:37
2357
webpack懒加载代码示例
2020-11-12
angularjs指令的模板绑定页面元素
2016-11-07
TA创建的收藏夹 TA关注的收藏夹
TA关注的人