9 铁拐李FE

尚未进行身份认证

我要认证

公众号「前端那些事儿」,个人微信号:JerroldLee

等级
TA的排名 6k+

ECMAScript新特性(上)

JavaScript VS ECMAScriptECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准(ES标准)的实现和扩展。JavaScript:一种直译式脚本语言,是一.

2020-05-10 02:08:42

前端安全实用防御方案

XSS防御 转义字符(正则替换) function escape(str) { str = str.replace(/&/g, '&') str = str.replace(/</g, '<') str = str.replace(/>/g, '>') str = str.replace(/"/g, '...

2020-04-05 21:55:16

【Js】defer和async的区别

如果没有defer和async,会阻塞dom树构建,立即加载并执行脚本 造成阻塞的原因:因为加载的js可能会对dom做增删查改等操作,这些操作会对dom树产生影响,如果不阻塞,等浏览器解析完标签生成dom树后,js修改了某些节点,那么浏览器又得重新解析,然后生成dom树,性能就会比较差 如果script带有async属性,不会阻塞dom树构建,立即异步加载,加载好后立即执行 如果scri...

2020-03-08 09:35:00

浏览器缓存策略

​浏览器缓存类型 强缓存 协商缓存 缓存获取流程 根据httpheader判断是否命中强缓存,如果命中,返回200状态码,让客户端直接从本地缓存中获取资源,不会向服务器请求资源 当没有命中强缓存时,客户端会发送请求到服务器,服务器通过request header验证该资源是否命中协商缓存 如果命中协商缓存,服务器直接返回请求(304状态码)...

2020-03-08 00:46:08

架构整洁之道

​一、架构设计的目标 用最少的人力成本满足构建和维护该系统的需求 衡量指标 工程师团队规模 代码总行数 代码变更行数 二、软件系统的价值 行为价值 按需求文档编写代码 可用性 功能性bug 性能 稳定性 紧急,但是...

2020-03-01 02:04:53

手写koa2

​一、koa2核心设计 封装nodehttp server,创造Koa类构造函数 构造request、response、及context对象 中间件机制实现 二、koa2核心代码实现1.主文件koa.jsconsthttp=require('http');constcontext=require('./context');const...

2020-02-29 17:44:16

手写Promise

function Promise(executor) { var self = this; self.status = 'pending'; self.onResolvedCallback = []; self.onRejectedCallback = []; function resolve(value) { if (value ins...

2020-02-23 19:11:31

模拟JSON.parse实现

var simulateJsonParse = function (jsonString) { if (!jsonString) { return jsonString; } var jsonObj = eval('(' + jsonString + ')'); return jsonObj;}var testJsonString = '{"n...

2020-02-23 11:30:09

类的继承实现

function Parent(name) { this.parent = name;}Parent.prototype.say = function () { console.log(`Hello, ${this.parent}`)}function Child (name, parent) { // 将父类的构造函数绑定在子类上 Parent.call...

2020-02-23 11:19:19

模拟Object.create实现

Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象__proto__function simulateCreate (proto) { var F = function () {}; F.prototype = proto; return new F();}复制代码参考资料 www.cxymsg.com/guid...

2020-02-22 23:21:18

模拟bind实现

bind介绍bind()方法会创建一个新的函数,当这个新函数被调用时,bind()的第一个参数将作为它运行时的this,之后的一序列参数将会在传递的实参前传入作为它的参数。模拟bind实现/*** 模拟bind实现*/Function.prototype.simulateBind = function (context) { if (typeof this !== 'f...

2020-02-22 22:47:15

模拟apply实现

/*** 模拟apply实现*/Function.prototype.newApply = function (context, argArray) { // 如果调用者不是方法抛出异常 if (typeof this !== 'function') { throw new TypeError('调用者不是一个方法'); } // 判断参数是...

2020-02-22 17:41:56

模拟call实现

将函数设为对象的属性 执行&删除这个函数 指定this到函数并传入给定参数执行函数 如果不传入参数,默认指向window /*** 实现一个call方法*/Function.prototype.myCall = function (context) { context = context ? Object(context) : window; context...

2020-02-22 10:13:52

模拟new实现

创建一个全新的对象 被执行[[prototype]](也就是__proto__)链接 使this指向新创建的对象 创建的每个对象最终被[[prototype]]链接到这个函数的prototype对象上 如果函数没有返回对象类型Object(包含Function,Array,Date,RegExp,Error),那么表达式中的函数调用将返回该对象引用 /*** 模拟new实现*/c...

2020-02-22 00:43:54

模拟instanceof实现

/*** 模拟instanceof*/const simulateInstanceof = (L, R) => { // L表示左边表达式,R表示右边表达式 const O = R.prototype; // 取R的显示原型 L = L.__proto__; // 取L的隐式原型 while (true) { if (L === nul...

2020-02-22 00:01:17

Event实现

简单版class EventEmeitter { constructor () { this._events = this._events || new Map(); // 储存事件/键值对 this._maxListeners = this._maxListeners || 10; // 设立监听上限 }}// 触发名为type的事件...

2020-02-21 23:28:59

影分身术——JS深克隆

分身术种类普通分身术:有其形,无其实,不具有完备的主体 影分身术:从真身上得到完备的继承,具有和真身一样的完备性普通分身术普通分身术技术实现/*** 简单克隆实现*/const originObj = { a: 1, b: 2};const simpleCloneObj = JSON.parse(JSON.stringify(originObj...

2020-02-20 23:39:05

节流函数

节流函数原理规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。适用场景拖拽场景:固定时间内只执行一次,防止超高频次触发位置变动 缩放场景:控制浏览器resize 动画场景:避免短时间内多次触发动画引起性能问题函数实现/*** 节流函数*/const throttle = (fn, delay = 500) => { l...

2020-02-19 23:57:17

防抖函数

防抖函数原理在事件被触发n秒后再执行回调函数,如果在这n秒内又被触发,则重新计算。适用场景按钮提交场景:防止多次提交按钮,只执行最后一次提交 服务端验证场景:表单验证需要服务端配合,只执行一段连续的输入事件的最后一次,还有搜索词联想功能等函数实现/*** 防抖函数*/const debounce = (fn, delay) => { let timer =...

2020-02-19 23:43:23

DOM

事件模型 脚本模型 <button onclick="javascript: alert('Hello')">Hello</button>复制代码 内联模型 <button onclick="showHello()">Hello</button>复制代码 动态绑定 /*** <but...

2020-02-19 18:35:57

查看更多

勋章 我的勋章
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv4
    勤写标兵Lv4
    授予每个自然周发布9篇以上(包括9篇)原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。