- 博客(110)
- 收藏
- 关注
RSS订阅原创 OAuth2.0与前端无感知token刷新实现
前言OAuth是一个关于授权(authorization)的开放网络标准，在全世界得到广泛的应用。Facebook、Twitter和Google等各种在线服务都提供了基于OAuth规范的认证机制。OAuth一般用于面向第三方大范围公开的API中的认证工作。换言之，假设带有用户注册功能的在线服务A(例如腾讯qq)对外公开了API，在线服务B(例如百度网盘)便可使用这些在线服务A的API提供的各种功能。这种情况下，当某个已在qq里注册的用户需要百度网盘的在线服务时，网盘的在线服务就会希望访问qq来使用该用户
2020-09-26 14:18:22
1621
原创 前端需要掌握的设计模式
提到设计模式，相信知道的同学都会脱口而出，五大基本原则（SOLID）和 23 种设计模式。SOLID 所指的五大基本原则分别是：单一功能原则、开放封闭原则、里式替换原则、接口隔离原则和依赖反转原则。逐字逐句诠释这五大基本原则违背了写这篇文章的初衷，引用社区大佬的理解，SOLID 可以简单概括为六个字，即“高内聚，低耦合”：高 层模块不依赖底层模块，即为依赖反转原则。内 部修改关闭，外部扩展开放，即为开放封闭原则。聚 合单一功能，即为单一功能原则。低 知识要求，对外接口简单，即为迪米特法则。耦 合多
2020-09-25 14:35:42
608
原创 前端异常问题
HTML 属性相关autofocus基本概念autofocus特性让你能够指定一个表单控件，当页面载入后该表单自动获得焦点，除非用户覆盖它，例如在另一个控件中输入值。一个文档内只有一个表单能够拥有autofocus 特性，它是一个 Boolean 值。这个特性适用于<input>, <button>, <select>, 与 <textarea>元素复制代码例外情况是，如果一个 autofocus 元素的 type 特性值设置成了 hidden，
2020-09-24 14:38:24
338
原创 前端代码格式化初探
什么是代码风格这个问题是最基础的，也是最重要的。只有理解了这个问题，下面的问题才有意义。代码风格可以类比于写作风格，只不过写作风格更加丰富多彩。例如美学家朱光潜的文字朴实直接，却很容易让人产生共情。两年前我第一次读他的《给青年的十二封信》，就引起了很多的思考。那种良师的谆谆教导的感觉，至今都让我难以忘记。类似英语环境中的作家海明威，就是行文硬朗，人送称号——美国硬汉。这就是一种写作风格。代码风格就更加具体了，好比句尾加不加分号，函数加不加空格，函数注释的格式。这些细碎的东西就构成了代码的风格。风格没有好坏
2020-09-23 14:26:03
625
1
原创 都是从零开始学前端，3年后，为啥有人月薪 10k，有人却 40k，究竟是什么原因导致的呢？
前言正在初学者学习一门新技术往往不知道如何开始，从哪开始，终点是啥。为啥有人月薪 10k，有人却 40k，就看你的技术能不能提高生产率，创造更多价值。学习前端也是这样，要系统全面，前期一定要有刨根问底的精神，遇到问题要究其原因，直到解决为止。下面我把前端需要掌握的技术点做一个总结。1.基础知识学会下面这些基本知识，能够写出基本的页面，不同的布局样式。2.动态性动态性是指通过 document 可以动态修改 HTML 元素的样式和布局，添加事件，获取元素的 frame。3.语言学习某个方向的
2020-09-22 15:04:28
313
原创 前端面试常见的手写功能
1. 防抖function debounce(func, ms = 500) { let timer; return function (...args) { if (timer) { clearTimeout(timer); } timer = setTimeout(() => { func.apply(this, args); }, ms); };}复制代码2. 节流function throttle(func, ms
2020-09-21 14:34:26
270
2
原创 前端学习之路：我的HTML、CSS学习之路
前端学习大概的路线图因为刚开始学习，没有完整的前端知识体系，所以是大概的路线图，希望大家可以帮我一起修改完善。大致的思路是：1.先打好基础，在学习框架基础方面主要涉及到的语言是Html、CSS、JavaScript，如果在这三个里面在挑基础的话应该就是Html、CSS了。所以，2.基础知识里面先学Html,CSS。Html\CSS学习计划之前有过一个月的断断续续的学习，W3C的基础知识也看了，但是一到自己写页面还是不会。我就问自己为什么？我觉得可能的原因是，会HTML\CSS基础知识还不足
2020-09-18 14:23:01
272
原创 前端 10 问~网络
1、TCP/IP 模型有几层？它们分别解决了什么问题物理层：网线传输比特流数据链路层：解决了局域网内主机间通信网络层：解决了两个局域网之间的通信传输层：解决了数据传输到主机后，应该交给哪个进程处理的问题w2、HTTP 有哪些常见的状态码1、200 OK : 请求成功2、301 Moved Permanently : 永久重定向3、302 Found: 临时重定向4、304 Not Modified : 所请求的资源未修改5、 400 Bad Request : 客户端请求的语法错误，服务
2020-09-17 14:02:44
262
原创 7款前端性能分析工具
1、 LighthouseLighthouse是一个开源的自动化工具，用于帮助改进网络应用的质量。可将其作为一个 Chrome扩展程序运行，或从命令行运行。Lighthouse分析web应用程序和web页面，收集关于开发人员最佳实践的现代性能指标和见解，让开发人员根据生成的评估页面，来进行网站优化和完善，提高用户体验。2、SpeedCurveSpeedCurve 可以帮助追踪自己的性能表现，以及竞争对手的性能表现。它可以用来查看某个因素在不同站点的速度表现，并且还提供了综合监控。综合监控是在受控环境中
2020-09-16 18:57:58
642
原创 学前端要多久？学前端要多久？学前端多少钱
随着第五届互联网大会的逐步进行，互联网行业再次掀起一番热浪，让大家也虎视眈眈的盯上了IT行业。而且，IT行业目前的薪资也是异常的客观，让很多人也想学IT。尤其是现在热门的Python、前端一类的课程。那么，现在学前端要多久？学前端怎么样多少钱呢以及后续的就业前景怎么样，就让我们一起看看。学习前端要多久？学前端要多久？对于很多人来说，这是迫切想知道的，如果你是零基础的话，现在学习最起码4~6个月，自学的话估计需要大半年甚至一年或者更多时间。如果是选择培训班的话，目前大概都是在4个月左右的时间。这个就看我们
2020-09-12 16:28:49
1327
原创 前端新人都应该关注的Web前端饱和性分析？前端面试必知必会的十点！
现在前端市场是不是已经饱和了？巴巴巴巴巴…还有：XXX行业是否已经饱和？angular1.5是不是已经被淘汰？前端还有前途吗？bootstrap为什么被称为垃圾框架？等等等不是博主不友好，只想说一句：饱和的不是市场，饱和的是那曾经不知天高地厚的心。另一方面，众所周知，语言都是相通的。而前端更是广泛应用的典范，来来来这位小同学，前端早已不再是浅层的静态页面了，大前端时代的到来，带了个无数的就业与发展机会。以下听我细细说来~大前端时代关系组网图偶然听学弟说，他现在找工作，应届毕业生很难找到了工
2020-09-11 21:23:30
192
原创 前端模块化以及了解CommonJS
JavaScript的发展历程如果要了解前端为什么要进行模块化，还是得了解JS语言的发展历程。起初，JavaScript仅仅是一门脚本语言，就是相当于在页面中添加插入一小段脚本，类似给衣服打一块补丁。所以起初JS要处理的东西相当的少，一个script标签足以解决。后来，ajax的出现，前端的世界从同步转向了异步。前后端逐渐分离，客户端要处理的事情，与日俱增。也导致我们的JS代码量越来越多，往往会分成很多个js文件。到了这个时候，就会引起一个灾难性的问题：js文件中的全局函数或者全局变量对于所有js文
2020-09-08 16:10:41
176
原创 前端面试~ vue 中 key 的作用和工作作原理
解析key 在 vue 中，除了解决 list 渲染过程中一些隐蔽的 bug，提高渲染效率，以及在过渡过程中区分节点以外， 最主要的用途还是在 diff 算法中 。首先要知道 vue 的更新流程：reactiveSetter → dep.notify()→ watcher.update() → queueWatcher() → watcher.run() → updateComponent() → vm._render() → vm._update() → vm. patch () → patch()
2020-09-07 20:23:56
1498
转载 前端Docker一气呵成
写给前端的Docker实战教程全文超过一万字，阅读此文章，你可能需要一杯咖啡☕️️~ 笔者花生PeA，百度前端汪、ACGer。个人博客 pea3nut.blog；个人资料 pea3nut.info 在保留此段前提下，随意转载。本篇文章详细而又简短的介绍了：一名完全不了解 Docker 前端程序员，将全站 Docker 化的过程。内容主要包含：Docker 基本概念 真实站点迁移过程： 静态站点 Nodejs 站点(Express) WordPress(PHP) 一些必备技巧：开机启动、常用Shell
2020-09-05 21:01:01
320
原创 前端的CSP & CSP如何落地，了解一下
CSP(Content-Security-Policy)是一个HTTP response header, 它描述允许页面控制用户代理能够为指定的页面加载哪些资源, 可防止XSS攻击使用方式：Content-Security-Policy: 指令1 指令1的值1 指令1的值2 指令1的值3; 指令2 指令2的值1 指令2的值2复制代码调试工具： Chrome插件——modheader。通过随意设置响应头来测试CSP简单过一遍常见的指令获取资源相关的指令font-srcframe-srcim
2020-09-03 14:53:58
1076
原创 前端埋点的实践
1、前言开始正文前先介绍一下埋点的概念～，（熟悉的朋友可以略过）前端埋点： 是一种手段，它的目的是上报相关行为数据，相关人员以数据为依据来分析产品在用户端的使用情况，根据分析出来的结果辅助产品优化、迭代。BI：商业智能，公司内部做数据分析相关的部门。2、背景在流量红利逐渐消失的现在，数据的采集、分析和精细化的运营显得更加重要，所以埋点的需求在互联网产品中是很常见的，目的上面也提到了。我们的追求就是又快又好的做好埋点工作，但是现实却不那么美好；目前我们团队在前端埋点方面存在一些痛点：在构造埋点字段
2020-09-02 13:35:07
1430
原创 前端组件通信的一点点理解
前话吾辈同时是 vue/react 的使用者。在使用现代前端框架时，我们经常要要面对的问题之一就是组件之间的通信，目前我们有着很多选择，包括但不限于以下这些。Super Component Props : 将状态或操作放在父组件，然后传递到子组件。该特性在 vue/react 都存在Context/Provider Pattern : 将状态放在父组件，然后所有的子组件都可以获取到。例如 react 中的 context 或 vue 中的 provide/injectGlobal State :
2020-09-01 12:37:10
342
原创 前端的学习历程~ES6+新特性总结
本文简单列举了ES6+中的一些新特性，部分知识点涉及面过大，本文将一带而过。正文1. let、const块级作用域以及和var的区别let、const声明的变量，在for，if语句中，会形成块级作用域，块级作用域内的变量，不能被作用域外部使用let、const声明变量不再会有声明提升，在变量声明之前使用运行时会报错//块级作用域一级块级作用域的使用if(true) { const param = 'param in if block'; console.log(param);//
2020-08-31 21:07:50
327
原创 一次详解，从后端导出文件到前端（Blob）下载过程
前言对于不是从事音视频方面的同学来说，很多情况下都是通过window.location.href 来下载文件。这种方式，一般是前后端的登录态是基于Cookie+ Session 的方式，由于HTTP 请求首部字段会自动 Set-Cookie 来携带用户的 SessionId，所以可以用 window.location.href 来打开一个链接下载文件。当然，还有一种情况，不需要登录态的校验（比较che）。众所周知，还有另一种登录态的处理方式 JWT(JSON Web Token)。这种情况，一般会要求
2020-08-29 16:01:32
1343
原创 怎样使用Jenkins 来自动做前端效能测试
Jenkins 安装、设定在这里依相对应的作业系统找下载连结。点进去以后选用homebrew下载Jenkins brew install jenkins-lts。接着启动Jenkins brew services start jenkins-lts，然后浏览器打开http://localhost:8080稍等一下就可看到准备画面。备注，其他指令还有…Install the latest LTS version : brew install jenkins-lts Install a speci
2020-08-28 13:23:53
243
原创 Vue3--07Conditional Rendering 条件渲染
v-ifThe directive v-ifis used to conditionally render a block. The block will only be rendered if the directive’s expression returns a truthy value.v-if指令用来条件渲染一个块(block)元素.这个块元素只在指令表达式的结果为真值时候渲染.+<h1 v-if="awesome">Vue is awesome!</h1>复制代码
2020-08-26 16:43:34
267
原创 大前端进阶-读懂vuejs源码
前言此文章适合准备第一次阅读vuejs源码的童鞋，由于vuejs的源码非常多，而且分布在各个文件夹中，因此想要读懂源码，需要理清整个框架的脉络。此文章就是从编译入口出发，找到源码中的关键点。准备工作打包源码浏览器调试比单纯的阅读源码更有效率，那么如何为vuejs添加sourceMap？1.fork vue源码仓库到自己的github仓库中，这样，可以随便添加注释和修改。2.下载项目，打开package.json文件，找到文件中：1.vuejs使用rollup打包，在dev命令最后添加--so
2020-08-25 22:12:36
297
原创 身为一位前端工程师，你真的知道BOM的这些用法吗？
BOM一. BOＭ简介&写作背景BOM简介BOM：Broswer Object Model浏览器对象模型在JavaScript中可以大概的理解为，就是window对象，用来进行与浏览器相关的一些操作学习BOM就是学习 JavaScript中的window对象写作背景看过 《你不知道的JavaScript》的小伙伴都知道，书中有个这样的公式 JavaScript = ES + DOM + BOMES 和 DOM都是我们耳熟能详的，在日常的开发中也是这样，绝大部分时间都在使用 ES +
2020-08-24 19:47:04
340
原创 什么是前端的核心竞争力
作为IT圈鄙视链的底层，凡是前端所到之处都充满了”焦虑’。一方面，前端技术入门简单，热度高，学历要求较低，吸引了众多人才涌入，导致竞争压力越来越高，75%的人薪资卡在18k左右，止步不前，想要高薪却没有方向。另一方面，前端技术变化快，也让在其他行业尤为重要的工作经验，却无法成为前端人的核心竞争力。再或者说，对于普通前端来说，职业发展的天花板并不高。前端平时基本都是和页面及UI打交道，对于后端的服务，数据存储，运维，部署等等懂的不多，就导致了往往是后端领导前端。但在这些情况下，我们仍然能够看到许多大厂
2020-08-22 17:23:36
1113
原创 WEB前端-CSS盒子
1.盒子模型主要定义四个区域：内容（content）、内边距（padding）、边框（border）、外边距（margin）2.border，设置元素的边框，属性（边框三要素）：宽度、样式、颜色，这也是通常border属性值的书写顺序（非严格要求）单独书写：border-width（宽度，默认3px）、border-style（样式，默认none）、border-color（颜色，默认黑色）border-style属性值：dotted（点状）、solid（实线）、double（双实线）、dashed（
2020-08-21 14:56:39
287
原创 web前端框架的插件机制全梳理（axios、koa、redux、vuex）
前言前端中的库很多，开发这些库的作者会尽可能的覆盖到大家在业务中千奇百怪的需求，但是总有无法预料到的，所以优秀的库就需要提供一种机制，让开发者可以干预插件中间的一些环节，从而完成自己的一些需求。本文将从 koa 、 axios 、 vuex 和 redux 的实现来教你怎么编写属于自己的插件机制。对于刚接触前端的来说：本文能让你搞明白神秘的插件和拦截器到底是什么东西。对于接触前端很久了的来说：在你写的开源框架中也加入拦截器或者插件机制，让它变得更加强大吧！axios首先我们模拟一个简单的 a
2020-08-20 14:51:29
275
原创 整理的一些前端代码规范系列 -- css规范
一.命名规范(BEM规范)BEM规范是一种主流的css命名规范，BEM分别对应的是block ， element 和 modifier，为的是结束混乱的命名方式，达到一个语义化的CSS命名方式。1.1 什么是Block在BEM规范中，block（块）表示一个组件的意思，假设你要写一个按钮的组件，只需要设置一个 .button 类的按钮，然后可以在任何按钮上使用该类，就可以生成该组件的传统样式。在BEM 中，块被写为和 class 的名字一样，如下所示：.button {}.header {}
2020-08-19 15:26:18
300
1
原创 前端一年的经验，面试官都会问一些什么问题呢？都是这样一些的问题
面试准备阶段学习以及复习基础知识这一定是第一步需要做的事情，先制定规划，然后按照这一条既定的规划去学习以及复习，可分为六部分去准备：css部分像 css这一部分，面试必问，但是它的东西很杂很多，我不知道有多少人和我感觉一样：学习前端最难的是css，而不是js。css这一部分，布局、实现一个什么样的形状、一些属性的使用等问的会多一些～javascript部分JavaScript 部分，数据类型到一些隐式转换这些基础知识，看代码说输出，v8底层执行机制、垃圾回收、闭包、作用域、作用域链，原型、原型
2020-08-18 15:25:29
4802
原创 前端面试的那些事儿 ~ 深入浅出 webpack 之基础应用篇
前端工程化经历过很多优秀的工具，例如 Grunt、Gulp、webpack、rollup 等等，每种工具都有自己适用的场景，而现今应用最为广泛的当属 weback 打包了。因此 webpack 也自然而然成了面试官打探你是否懂前端工程化的重要指标。由于 webpack 技术栈比较复杂，因此决定分以下几篇文章全面深入的讲解：基础应用篇高级应用篇性能优化篇原理篇（ webpack 框架执行流程、手写 plugin、手写 loader ）webpack 是什么webpack 是模块打包工具webp
2020-08-17 21:00:23
205
原创 WEB前端面试题的一点整理-CSS、JS、React、http
null是对象原型链的终点，null == undefinedundefined不是保留字，它只是全局对象的一个属性，在低版本 IE 中能被重写。undefined 在 ES5 中已经是全局对象的一个只读（read-only）属性了，它不能被重写。但是在局部作用域中，还是可以被重写的。void 0 === undefined，用 void 0 代替 undefined 能节省不少字节的大小，事实上，不少 JavaScript 压缩工具在压缩过程中，正是将 undefined 用 void 0 代替掉了
2020-08-15 18:46:21
304
原创 实现微前端，你所需要了解的 Vue Genesis 渲染器
我们的需求核心的就是渲染器，它提供了最基础渲染能力，有了它，你可以实现微前端、微服务、远程组件、首屏渲染，甚至可以和 react、Ejs 等配合使用。它可以和怎样的你协作？如果你是传统的后端渲染的，需要做seo，但是你希望在部分布局，部分页面引入 vue，那么 renderer.renderjson() 足以，将渲染结果传递给后端渲染的模板引擎中即可。如果你是中后台系统，业务系统全部集中在一个项目，你希望可以按照业务进行服务的拆分，那么 `` 足以如果你是 CSR 渲染的项目，那么 render.
2020-08-14 14:03:49
294
原创 基于JSON Schema的前端可视化活动编辑器
先看效果，为一个可视化活动编辑器。演示地址：form.lljj.me/vue-editor.… 项目地址：github.com/lljj-x/vue-…基于 JSON Schema 开箱即用的简单活动可视化编辑器。 背景 在做生成一个可视化店铺装修系统的时候，需要解决配置数据表单的通用性，参阅了一些现用的解决方案，最终通过 JSON Schema 来生成对应的表单和校验规则。参考资料：github.com/CntChen/cnt…JSON Schema 主要运用在如下几点：基于 JSON Sche
2020-08-13 21:03:21
1985
原创 Web前端性能优化，应该怎么做?
前言作为一个开发了多个 H5 项目的前端工程师，在开发过程中难免会遇到一些兼容性等 爬过坑 的问题。现在我将这些问题一一汇总一下，并在后面给出 坑产生的原理 ，和 现阶段常规的填坑方案 。由此来做一个阶段性的总结。问题下面列举了我遇到的一些常规问题，如有遇到其他问题请在评论区补充，之后我也会实践后加以补充，感谢！移动端 H5 相关问题汇总：1px 问题响应式布局iOS 滑动不流畅iOS 上拉边界下拉出现白色空白页面件放大或缩小不确定性行为click 点击穿透与延迟软键盘弹出将页面顶起来
2020-08-12 17:39:58
435
原创 前端一些冷知识：如何将Canvas绘制过程转换为视频。你知道吗？不知道的看这里
文末有福利如果我们用Canvas实现了一些动画效果，需要将它回放出来，很多人通常就是用录屏工具将屏幕内容录下来播放，很少有人知道，Canvas可以直接通过现代浏览器支持的 Media Streams API 来转成视频。Canvas对象支持captureStream方法，这个方法会返回一个MediaStream对象。然后，我们可以通过这个对象创建一个MediaRecorder来录屏。我们看一个简单的例子。录制视频首先我们写一个非常简单的Canvas动画效果，代码如下：const canvas =
2020-08-11 21:05:09
529
原创 使用oss来搭建个人纯前端项目主页
不知道有没有前端小伙伴有和我一样的困扰，想做一个纯前端展示的个人网站，或者写了一个有用的插件，想要写一个demo页面放在readme中。然后就买了1核1g的阿里云学生机，第一年还挺便宜，一百来块就搞定，但是第二年续费就要五六百块了。但是我其实也不需要一个ECS来跑脚本或者运行后端程序数据库啥的。在ECS上也仅仅是启个Nginx或者更粗暴的http-server守护进程来跑vue或者react打包后的html页面，也不需要考虑SEO的事儿。还需要域名绑定服务器，各种备案。麻烦不说，是不是还总会碰到扫端口的给你
2020-08-10 20:31:34
642
原创 WEB前端H5 Vide常见场景浅析
1.原生H5 video标签<video id="mse" autoplay=true playsinline controls="controls"> <source src="实机视频地址" type="video/mp4"> 你的浏览器不支持Video标签</video>复制代码2.第三方插件video.js_this.player = videojs( _this.videoNode, { autoplay:
2020-08-07 15:37:52
293
原创 想知道大厂的面试吗？来看这里，给你看一个宝贝。大前端进阶、面试必须要会的知识点总结
文章结构本文将按知识分类整理，可在PC端右侧书签栏针对性分类阅读，内容将持续更新。同时，文无第一，武无第二，如有错误及纰漏，望能斧正。本文本着包容、开放、1. 说说你知道哪些页面布局方式？他们各有什么优缺点？从早期前端发展到现在，经历了一下发展历程：** table布局，position布局，浮动布局，栅格布局，flex弹性盒子布局 。**table布局：优点：不需要使用任何CSS配合就可搭建正题布局；兼容性强，所有浏览器都支持该元素；缺点：任意单元格的布局属性改变将引起整个表格的回流，耗费性能
2020-08-06 22:00:53
125
原创 微前端架构选型指南
快速选型指南图我还是直接先给结论：微前端选型指南关键点的相关解释如下：框架限制。在后台微服务系统里，人们使用其它语言的库来开发新的服务，如用于人工智能的 Python。但是在前端，几乎不存在这种可能性。所以当我们的前端框架只有一个时，我们在采用微前端的技术时，可选范围就更大了。而遗憾的是，多数组织需要兼容遗留系统。IE 问题。不论是在几年前，还是在今年，我们实施微前端最先考虑的就是对于 IE 的支持。在我遇到的项目上，基本上都需要支持 IE，因此在技术选型上就受限一定的限制。而在我们那些不需要支
2020-08-05 14:35:02
786
原创 前端low-code意味着什么？
一.low-code 是什么？A low-code development platform (LCDP) is software that provides a development environment used to create application software through graphical user interfaces and configuration instead of traditional hand-coded computer programming. A low
2020-08-04 19:42:28
2456
原创 前端页面性能优化：WEBP+VUE实践
本文旨在如何快速在vue项目上切换全站图片，并针对不兼容的浏览器版本进行降级。生成webp对于目前大多数的项目来说，比较方便且合适的方式是集成webpack的loader或者plugin，在build的过程中生成webp。当然也可以预先在项目中预先准备好webp，比如说在UI给切图时，多提供一个webp格式。目前已有很多loader和plugin来干这个事情，本文中使用的是 imagemin-webp-webpack-plugin ，配置很简单，样例如下:import ImageminWebpWeb
2020-08-03 16:44:15
1789
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人