自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

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

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

原创 ECMAScript新特性(上)

JavaScript VS ECMAScript ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛,它往...

2020-05-10 02:08:42 36 0

原创 前端安全实用防御方案

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

2020-04-05 21:55:16 42 0

原创 【Js】defer和async的区别

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

2020-03-08 09:35:00 30 0

原创 浏览器缓存策略

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

2020-03-08 00:46:08 43 0

原创 架构整洁之道

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

2020-03-01 02:04:53 96 0

原创 手写koa2

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

2020-02-29 17:44:16 77 0

原创 手写Promise

function Promise(executor) { var self = this; self.status = 'pending'; self.onResolvedCallback = []; self.onRejectedCallbac...

2020-02-23 19:11:31 51 0

原创 模拟JSON.parse实现

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

2020-02-23 11:30:09 43 0

原创 类的继承实现

function Parent(name) { this.parent = name; } Parent.prototype.say = function () { console.log(`Hello, ${this.parent}`) } function Child (nam...

2020-02-23 11:19:19 30 0

原创 模拟Object.create实现

Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象__proto__ function simulateCreate (proto) { var F = function () {}; F.prototype = proto; retur...

2020-02-22 23:21:18 151 0

原创 模拟bind实现

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

2020-02-22 22:47:15 40 0

原创 模拟apply实现

/** * 模拟apply实现 */ Function.prototype.newApply = function (context, argArray) { // 如果调用者不是方法抛出异常 if (typeof this !== 'function') { ...

2020-02-22 17:41:56 34 0

原创 模拟call实现

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

2020-02-22 10:13:52 35 0

原创 模拟new实现

创建一个全新的对象 被执行[[prototype]](也就是__proto__)链接 使this指向新创建的对象 创建的每个对象最终被[[prototype]]链接到这个函数的prototype对象上 如果函数没有返回对象类型Object(包含Function,Array,Date,Reg...

2020-02-22 00:43:54 35 0

原创 模拟instanceof实现

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

2020-02-22 00:01:17 36 0

原创 Event实现

简单版 class EventEmeitter { constructor () { this._events = this._events || new Map(); // 储存事件/键值对 this._maxListeners = this._max...

2020-02-21 23:28:59 24 0

原创 影分身术——JS深克隆

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

2020-02-20 23:39:05 29 0

原创 节流函数

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

2020-02-19 23:57:17 28 0

原创 防抖函数

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

2020-02-19 23:43:23 29 0

原创 DOM

事件模型 脚本模型 <button onclick="javascript: alert('Hello')">Hello</button>复制代码 内联模型 <button onclick=&qu...

2020-02-19 18:35:57 36 0

原创 浏览器基础必知必会

浏览器常见内核 浏览器/RunTime 内核(渲染引擎) JavaScript 引擎 Chrome Blink(28~) Webkit(Chrome 27) V8 FireFox Gecko Spider...

2020-02-19 16:40:36 38 0

原创 JS基础必知必会

原型链 原型对象:绝大部分的函数(少数内建函数除外)都有一个prototype属性,这个属性是原型对象用来创建新对象的实例,而所有被创建的对象都会共享原型对象,因此这些对象便可以访问原型对象的属性 原型链 每个对象都有__proto__属性,此属性指向该对象的构造函数的原型 对象可...

2020-02-18 23:43:17 31 0

原创 CSS基础必知必会

CSS选择器优先级 内联 ID选择器 类选择器 标签选择器 link和@import link属于XHTML标签,@import是CSS提供的 link会随着页面加载而加载,@import等页面加载完毕后才加载 @import在IE5以上才能被识别,link属于XHT...

2020-02-16 15:25:32 33 0

原创 HTML基础必知必会

doctype作用 告知浏览器的解析器用什么文档标准来解析文档 影响浏览器对CSS代码和JS脚本的解析 文档解析类型 标准模式(standards mode):页面按照HTML与CSS的定义渲染 怪异模式(quirks mode):会模拟更旧的浏览器的行为 近乎标准(almo...

2020-02-12 01:42:51 54 0

原创 【前端架构】演进式架构

一、更新 依赖和框架版本升级 当修订号发生变更时,通常只是进行一些Bug的修复,不需要我们做出响应 当次版本号发生变更时,往往可能会发生一些API变更,我们要视向下兼容情况来决定是否跟进 当主版本号变化时,可能有些API已经不存在了,我们需要大量地改...

2020-02-10 01:36:03 60 0

原创 【前端架构】微前端实战

一、遗留系统:路由分发 路由分发式微前端 适用场景 不同技术栈之间差异较大,难以兼容、迁移、改造 项目不想花费大量的时间在这个系统的改造上 现在的系统在未来将会被取代 系统功能已经很完善,基本不会有新需...

2020-02-10 00:14:42 133 0

原创 【前端架构】微前端架构设计

一、微前端 微前端架构 应用自治 单一职责 技术栈无关 为什么需要微前端 遗留系统迁移 后端解耦,前端聚合 热闹驱动开发 二、微前端的技术拆分方式 路由分发式:通过HTTP服务...

2020-02-06 00:12:44 124 0

原创 【前端架构】前后端分离架构设计

一、前后端分离 为什么选择前后端分离 独立部署 分清职责 技术栈独立 方便系统演进 提高效率 前后端分离的开发模式 按业务的展示逻辑,确认出待展示的内容 前后端根据内容,一起细...

2020-02-02 22:20:43 94 0

原创 【前端架构】组件化架构设计

一、前端的组件化架构 二、基础:风格指南 原则与模式 亲密性,即将相关的项(组件)组织到一起 对齐,每一项都应当与页面上的内容存在某种视觉联系 重复,重复元素以体现一致性 对比,对比产生强调,以强调产生强烈的反差 ...

2020-01-31 17:48:00 89 0

原创 【前端架构】单页面应用设计

一、前端MVC架构 Model模型层:获取、存放所有的对象数据 View表现层:呈现信息给用户 Controller控制层:模型和视图间的纽带 二、MVC架构原理 简单Model层实现 简单Controller层实现 简单View...

2020-01-29 18:11:20 193 0

原创 【前端架构】多页面应用设计

一、单页面应用分析 构建成本 本地构建流程处理 持续集成服务器 当框架提供的构建流程不符合需求的时候,需要重写构建脚本 学习成本 前端技术更新快 旧框架维护学习成本 新框架学习成本 ...

2020-01-18 00:56:36 147 0

转载 详解JS正则replace的使用方法

在讲replace的高级应用之前,我们先简单梳理一下JS正则中的几个重要的知识点,以帮助你对基础知识的回顾,然后再讲解JS正则表达式在replace中的使用,以及常见的几个经典案例。 一、正则表达式的创建 JS正则的创建有两种方式:new RegExp() 和 直接字面量。 其中 g 表...

2020-01-09 20:43:30 37 0

原创 【前端架构】构建流设计

构建系统是一个Web应用不可缺少的部分,其核心用途是,帮助开发者从源代码开发开始,构建出最后可用的目标软件。开发人员还能通过构建系统中的构建工具添加更多实用的功能,如修改监测代码触发代码编译后自动地刷新浏览器,在构建系统时配置不同的环境参数,在本地运行的时候做反向代理,等等。 下面我们将...

2020-01-02 10:00:57 45 2

原创 【前端架构】工作流设计

基础规范 规范代码组织结构 统一代码风格,即源代码的书写风格 组件、函数等命名规范 开发工具规范 代码组织结构 统一代码风格 使用Lint规范代码 HTMLHint CSSLint ESLint TSLint 规范化命名,提升可读性 命名法:(1)驼峰...

2020-01-02 09:59:43 61 1

原创 【JS】原生JS操作DOM的各种姿势

获取单个DOM元素 document.querySelector('.element'); // 通过class获取 document.querySelector('#element'); // 通过id获取 document.querySelector...

2020-01-02 09:56:59 32 0

转载 Mac电脑使用:通过Mac电脑导出iPhone手机里面的视频(不是iTunes导出视频的方法)

分享一个通过Mac电脑导出iPhone手机里面的视频的方法,这个方法和通过iTunes导出手机视频的方法是并行关系。          方法很简单,就是通过Mac电脑系统里面自带的图像捕捉工具来操作。          具体步骤如下所示:          1.把iP...

2018-01-01 23:13:09 5814 0

转载 Node fs.writeFileSync 操作中 UTF-8 格式 BOM 缺失

NodeJS 默认使用 utf8 格式,这点是没错的 瞎逼逼一下,不解释,意会就好: 万花丛中过,片叶不沾身常在江边走,哪有不湿鞋 o.gif 故事由来 后端给我的是 .cshtml 文件,代码粘贴来复制去太恶心了,于是我写了一段脚本: const ORIG...

2017-09-19 23:20:50 6275 0

转载 吐槽小程序开发踩过的坑,以及一些解决方法

网络请求相关 bug: http状态码不管是什么,一律被解析成200 0.png 要真正解决,只能等官方去fix这个bug了. 发出请求需要注意的几个细节 1.header要设置正确:(为什么header还要我们自己设?很傻逼) get请求时为 header:{ ...

2017-09-19 00:21:40 1976 0

转载 微信小程序开发之IOS/Android兼容坑

一、时间转换问题: 这不只是小程序上面的问题是ios系统 都有这个问题 就是new  Date("2017-06-16") 在IOS会出现NAN的情况所以对于时间转换需要另行封装,解决方案如下 1.替换”-“为”/“ 2.删除”.“后面的字符串(带毫秒也会有...

2017-09-19 00:17:06 12192 1

转载 css3 box-sizing属性

box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。 content-box,border和padding不计算入width之内 padding-box,padding计算入width内 border-box,bo...

2017-09-17 23:45:25 330 0

提示
确定要删除当前文章?
取消 删除