JavaScript
文章平均质量分 77
胡斐小鱼
这个作者很懒,什么都没留下…
展开
-
前端进阶之最长递增子序列算法和vue.js中的Diff算法
Vue3中的Diff算法与最大递增子序列算法原创 2024-04-04 22:27:23 · 1054 阅读 · 0 评论 -
答:一道价值25k的蚂蚁金服异步串行面试题
原题: 一道价值25k的蚂蚁金服异步串行面试题const log = console.log;const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));const subFlow = createFlow([() => delay(1000).then(() => log("c"))]);createFlow([ () => log("a"), () => l原创 2020-08-15 22:42:06 · 571 阅读 · 0 评论 -
【译】Git Commit Message 格式约定
原文链接目的可以自动生成 CHANGELOG;可以忽略通过git bisect生成的commit message;为浏览提交历史提供更清晰的格式;生成 CHANGELOG在更改日志中使用这三个部分:新功能、bug修复、非后向兼容变更(breaking change)。在发布版本时,这三个部分的内容可由脚本生成,并指向相关commit的链接。当然,也可以在实际发布之前基于脚本生成骨架,手动编辑CHANGELOG的内容。查看自上次发布以来所有提交主题(提交消息中的第一行)的列表:gi.翻译 2020-08-07 15:25:44 · 452 阅读 · 0 评论 -
Koa源码笔记
Koa是基于Node.js的web框架,利用它可以很快搭建起一个http服务。本来是要利用它验证下http协议中某些细节问题,但是发现源码不多,就顺带看了下。Koa作为一个第三方模块,对外仅暴露了 Application和HttpError。 我们仅讨论Application(HttpError实际为第三方模块,用于给Koa添加自定义的http错误处理方法)。Application是一个class可看做Koa自身,先看下Koa实例上有哪些方法:上面的这些方法除了inspect和toJSON这两个.原创 2020-05-21 14:15:45 · 472 阅读 · 0 评论 -
2019 JS内功修炼之读jQuery源码
引言:2019年,react hooks成功上位,vue3.0发布alpha版,TS使用率的飞速增长,以及大量前端开发工具使用体验的大幅优化和提高等等让越来越多的开发者吐槽前端学不动了的时候,最好的应对方式便是对基础概念的掌握。内功足够强大,才能做到不被别人牵着鼻子走。阅读开源代码是一个很好的方式,首先率选择了jQuery便是里面的内容没有太多足够抽象的设计思想。更多的是对于基础内容的覆盖。同时...原创 2020-01-05 19:33:52 · 309 阅读 · 0 评论 -
探究JavaScript中的valueOf和toString
JS 中的类型JS中的类型分为两大类: primitive和object。primitive: null, undefined, Number, String, Boolean, Symbol。object:不是primitive类型的值,都是object类型。JS是非严格类型的语言在JS中存在大量的数据隐式转换,例如 1 + 'a'。对于primitive类型,在不同类型之间有明确的转...原创 2020-01-05 17:03:21 · 168 阅读 · 0 评论 -
ES6中的Generator
ES6中GeneratorGenerator是ES6一个很有意思的特性,也是不容易理解的特性。不同于let/const提供了块级作用域这样明显的目的,这玩意儿被搞出来到底是干嘛的?首先我们需要明确一个问题,在JavaScript中,任何一个函数只要开始执行,便无法停止下来直到执行完成(别跟我提debug,你见过哪个用户在使用产品的还得开个debug调试你的代码)。but,Generator提...原创 2018-10-16 16:52:43 · 347 阅读 · 0 评论 -
ES7(ES2016)中的Decorator
Decorator,字面意思是修饰器。用来修饰啥呢? 类。先看一段代码index.js:let readOnly = function(target, name, descriptor){ descriptor.writable=false; return descriptor}class ClassA { @readOnly boo() { ...原创 2018-10-19 12:26:12 · 495 阅读 · 0 评论 -
一道用hasOwnProperty给数组去重的面试题
hasOwnPropertyhasOwnProperty是javascript中用于检测对象是否包含某个属性的方法,返回一个布尔值。var o = { a: 1};console.log(o.hasOwnProperty('a')); // trueconsole.log(o.hasOwnProperty('b')); // false有一个用hasOwnProperty实现数组去重的...原创 2018-11-04 13:33:08 · 2052 阅读 · 1 评论 -
初窥AST
AST是什么AST(Abstract Syntax Tree),抽象语法树, 是程序的抽象意义表示。意味着跟语言的具体文法无关,利用抽象语法树可以进行程序的处理和转换。例如更改函数名称,语法转换甚至不同语言间的转换。AST的一个示例:AST的各种应用场景编译器(compilor)DOMJS引擎构建工具webpack依赖查询treeshakingbabelJ...原创 2019-02-24 16:43:03 · 265 阅读 · 0 评论 -
JavaScript prototype 原型链
几个概念构造函数: 构造函数实际上是一个普通函数,通过new操作符,可以利用构造函数快速创建对象;prototype:每个构造函数自身上都会有一个prototype属性,该属性值为一个对象,这个对象具有一个constructor属性,constructor指向构造函数自身;实例: 通过构造函数创建的对象,可以看做是该构造函数的实例;__proto__:通过构造函数创建的每个对象上面,都会...原创 2019-07-01 20:36:02 · 135 阅读 · 0 评论 -
ES6中的let/cont、解构赋值和迭代器Interator
ES6中的一些新特性这是进入十月份的第一篇笔记(\笑哭)。引入let/const的目的ES5中的作用域分为:全局作用域 和 函数作用域。并没有块作用域的概念,ECMAScript 6(简称ES6)中新增了块级作用域。块作用域由 { } 包括,if语句和for语句里面的{ }也属于块作用域。ES5创建作用域的两种方式:立即执行函数try catch语句在ES6中引入let/co...原创 2018-10-15 16:52:19 · 471 阅读 · 0 评论 -
JavaScript通过Promise实现sleep方法
主要还是为了练习Promise, async/await 的使用(async function(){ /** * s 休眠时长, 单位:秒 */ function sleep(s){ s = s || 0; s = parseInt(s) * 1000; let now = +new Date(); ...原创 2018-10-15 10:02:00 · 7602 阅读 · 1 评论 -
无头浏览器 和 Puppeteer
什么是无头浏览器无头浏览器即headless browser,是一种没有界面的浏览器。它有浏览器该有的一切功能,除了界面。可以通过命令进行浏览器内的各种操作。我们日常使用浏览器的步骤为:启动浏览器、打开一个网页、进行交互。在无头浏览器中,我们可以通过程序或脚本来执行以上过程,从而模拟出真实的浏览器使用场景。无头浏览器应用场景有了无头浏览器,我们就能做包括但不限于以下事情:对网页进行截图...转载 2018-09-18 22:32:53 · 3933 阅读 · 2 评论 -
DOM对象
DOM是针对HTML和XML文档的一个API(应用程序编程接口)。它具有跨平台和语言中立的特点。DOM将HTML和XML描述成一个多层节点构成的结构。每个节点都有不同的特点和表现特征。不同的节点之间具有一定的层级关系(父子、祖先和兄弟)。文档节点是每个DOM的根节点,被称为文档元素,而每个DOM只能有一个文档元素。Node类型每个文档节点都可以看作一个Node,Java...原创 2018-06-30 20:39:49 · 289 阅读 · 0 评论 -
DOM扩展
对 DOM 的两个主要的扩展是 Selectors API(选择符 API)和 HTML5。这两个扩展都源自开发社区, 而将某些常见做法及 API 标准化一直是众望所归。此外,还有一个不那么引人瞩目的 Element Traversal (元素遍历)规范,为 DOM 添加了一些属性。虽然前述两个主要规范(特别是 HTML5)已经涵盖了大 量的 DOM 扩展,但专有扩展依然存在。选择符API...原创 2018-07-01 20:55:02 · 233 阅读 · 0 评论 -
JavaScript中的位运算
先说下位掩码,这是看JavaScript位运算的初衷。位掩码的概念什么是位掩码,先看个有趣的智力题,据说也是很多公司的面试题目。小白鼠试毒问题 有1000瓶药水,其中只有一瓶有毒,小白鼠喝了会死。问,最多需要多少只小白鼠可以试出来哪瓶有毒?答案: 将1000瓶药水用二进制编码,第一瓶表示为01, 第二瓶表示为10, 第三瓶表示为11,……,第1000瓶表示为...原创 2018-07-02 21:13:04 · 1198 阅读 · 2 评论 -
Vuex学习
这篇产出完全可以看做是Vuex官网的复刻版,写这篇的目的主要是因为最开始的时候,对Vuex的基础不够熟悉,其它方面也不够深入。现在回头看主要是加深自己的理解,并以文字总结的方式记录下来。状态模式管理什么是状态模式管理?以一种集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。一般来说,组件的状态管理一般是自管理模式。 single-flow。但是...原创 2018-06-27 22:31:39 · 160 阅读 · 0 评论 -
JS中的事件
事件事件是JavaScript跟HTML交互实现的一种机制。在文档或浏览器进行用户交互或其它的某些特定瞬间,会触发事件,然后JavaScript响应这些事件。在设计模式上看,这类似于观察者模式。JavaScript 和 HTML 之间是 松耦合的。到今天为止,虽然不同的浏览器(IE9+、Chrome、Firefox、Opera、Safira)基本上都实现了 “DOM2级事件” 的 核心部分...原创 2018-07-16 16:04:37 · 229 阅读 · 0 评论 -
ES6中的Promise
Promise出现的背景先抛出一个概念:回调地狱。如果你知道回调地狱的意思,那么你可能就不需要看下面的这段内容了。众所周知JavaScript是单线程语言,So~,它不具有实现异步编程的先天基础。但这并不是意味它无法实现异步编程,回调函数就是早期的一种方案。但是,如果在一个回调函数当中,再形成一个回调,如此反复,一层层嵌套下去,就会形成一个很长的回调链。这样的代码不具有可读性也不利于维护,...原创 2018-06-28 16:48:19 · 119 阅读 · 0 评论 -
H5中的Canvas
Forturn’s wheel takes you very high and then throws you very low, and there is nothing you can do but face the turn of it with courage.Canvas设置<canvas>元素的 宽度时,注意不要使用style属性,直接通过指定 <...原创 2018-07-23 15:06:33 · 1591 阅读 · 0 评论 -
JSON.stringify方法
JSON.stringify方法对正则的处理看Sizzle的时候,用JSON.stringify方法输出了一下RegExp,结果是个空对象{}。一脸茫然。。。。。 一脸懵逼???黑人问号.pngJSON.stringify({r: /abc/});// '{"r":{}}'JSON.stringify(/abc/);// "{}"那么我们看看RegExp.prototype....原创 2018-07-05 20:57:58 · 2673 阅读 · 0 评论 -
jQuery中的选择器引擎Sizzle
读Sizzle的源码,分析的Sizzle版本号是2.3.3。Sizzle的Github主页浏览器原生支持的元素查询方法: 方法名 方法描述 兼容性描述 getElementById 根据元素ID查询元素 IE6+, Firefox 2+, Chrome 4+, Safari 3.1+ getElementsByTagName 根据元素名称查...原创 2018-07-12 21:12:55 · 359 阅读 · 0 评论 -
ES6 中的 Reflect 和 Proxy
ReflectReflect 是ES6中新增的特性。它是一个普通对象,下面有13个静态方法(enumerate在最终的发布版中被移除),可以再全局下访问。它不能当做函数调用,也不可以用new操作符生成一个实例。首先来说,Reflect的提出是为了整合之前JS中存在的一些不太合理的地方。1)更加有用的返回值Object.getOwnPropertyNames(Reflect)/...原创 2018-07-07 13:53:25 · 1368 阅读 · 0 评论 -
DOM2中的Range
DOM2 级在 Document 类型中定义了 createRange()方法。在兼容 DOM 的浏览器中,这个方法属于 document 对象。使用 hasFeature()或者直接检测该方法,都可以确定浏览器是否支持范围。 var supportsRange = document.implementation.hasFeature("Range", "2.0"); var alsoS...原创 2018-07-15 00:14:07 · 344 阅读 · 0 评论 -
Node基本原理学习
node是什么 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。 Node使用包管理器NPM。第一句话 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 运行环境, 不是一门语言,不是一个框架。只是能够作为Ja...原创 2018-07-28 11:29:18 · 1354 阅读 · 0 评论 -
不要阻塞事件循环(或工作池)
原文: Don’t Block the Event Loop (or the Worker Pool)你应该阅读本指南吗?如果您编写比命令行脚本更复杂的程序,那么阅读本文可以帮助您编写性能更高,更安全的应用程序。在编写本文档时,主要是基于Node服务器。但里面的原则也适用于其它复杂的Node应用程序。在没有特别说明操作系统的情况下,默认为Linux。TL; DRNode.j...翻译 2018-08-13 21:08:36 · 697 阅读 · 0 评论 -
再写Node基础(读《Node.js 来一打C++扩展》)
NPM的作用: Node.js程序依赖包的发布、管理和安装。CommonJS规范requirerequire是一个函数,参数是模块标识符,返回值是所引用模块暴露给外部使用者的内容。直白一点讲:一个模块定义文件module1.jsmodule.exports={ a:1, f: function(){ console.log('f'...转载 2018-08-24 20:21:50 · 1490 阅读 · 0 评论 -
编写一个Chrome插件
也可说是突然萌生出来的一个想法: 编写一个Chrome插件。前段时间发现Chrome浏览器占用的系统内存相当的大。其实也对,随着现代web程序的功能日益强大和丰富,浏览器吃内存是必然的。连office都有在线版的了,对比一下office2016的安装包大小(2.41G),想想当初的windows XP安装包大小也才700M。所以可想而知,在线版的office承载的功能之强大。这么一看,感觉浏览...原创 2018-09-11 16:10:48 · 499 阅读 · 0 评论 -
前端中的跨域
同源策略?同源策略/SOP(Same origin policy)是一种约定,属于浏览器的一个安全功能。不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。基于这个策略,有以下几种限制:cookie:js不能读取其它域下的cookie,否则你的登录信息,安全信息就泄露了;Storage和Index...原创 2018-09-09 15:54:28 · 150 阅读 · 0 评论 -
CORS——一种新的跨域解决方案
一种新的跨域解决方案:CORS(跨域资源共享)。它是W3c的工作草案,定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用 自定义的HTTP头部允许浏览器和服务器相互了解对方,从而决定请求或响应成功与否。CORS需要浏览器和服务器同时支持。目前,所有主流浏览器都支持该功能,IE浏览器不能低于IE8(IE10提供了对规范的完整支持;但在IE8、IE9中,CORS...原创 2018-09-09 15:59:42 · 258 阅读 · 0 评论 -
JavaScript 作用域 闭包
作用域与闭包 什么是作用域? 在当前运行环境下,可以访问的变量或函数的范围。 作用域分为词法作用域和动态作用域。 词法作用域是在js代码编译阶段就确定下来的; 对应的,with和eval语句会产生动态作用域。 词法作用域是在词法分析时被定义的作用域 ————《你不懂JS:作用域与闭包》会产生新的作用域的情况: - 函数 - {}(ES6) - eval举个例子说明作...原创 2018-06-24 11:24:14 · 373 阅读 · 0 评论