前端工匠公众号
关注
分享
扫一扫
文章平均质量分 95
Github博客3K+star 原创作者，致力于打造一系列帮助初中级前端工程师提高的优质文章
浪里行舟
个人Github博客5500+star，公众号［前端工匠］
展开
-
一文读懂javascript深拷贝与浅拷贝
前言在 javascript 中有不同的方法来复制对象，如果你还不熟悉这门语言的话，复制对象时就会很容易掉进陷阱里，那么我们怎样才能正确地复制一个对象呢？读完本文，希望你能明白：什么是深...原创 2020-06-23 08:00:00 · 1445 阅读 · 0 评论 -
React Hooks 原理与最佳实践
1. 前言React Hooks 是 React 16.8 引入的新特性，允许我们在不使用 Class 的前提下使用 state 和其他特性。React Hooks 要解决的问题是状态共...原创 2020-06-30 08:00:00 · 4216 阅读 · 0 评论 -
你真的懂Promise吗
前言在异步编程中，Promise 扮演了举足轻重的角色，比传统的解决方案（回调函数和事件）更合理和更强大。可能有些小伙伴会有这样的疑问：2020年了，怎么还在谈论Promise？事实上，有些朋友对于这个几乎每天都在打交道的“老朋友”，貌似全懂,但稍加深入就可能疑问百出，本文带大家深入理解这个熟悉的陌生人—— Promise.基本用法1.语法new Promise( function(res...原创 2020-04-20 10:20:17 · 1182 阅读 · 0 评论 -
十分钟上手ES2020新特性
前言ES2020 是 ECMAScript 对应 2020 年的版本。这个版本不像 ES6 (ES2015)那样包含大量新特性。但也添加了许多有趣且有用的特性。本文的代码地址：https://github.com/ljianshu/Blog本文以简单的代码示例来介绍 ES2020新特性。这样，你可以很快理解这些新功能，而不需要多么复杂的解释。可选链操作符（Optional Chain...原创 2020-02-09 11:11:06 · 6019 阅读 · 3 评论 -
令人期待的 JavaScript 新特性
前言一个ECMAScript标准的制作过程，包含了Stage 0到Stage 4 五个阶段，每个阶段提交至下一阶段都需要TC39审批通过。本文介绍这些新特性处于Stage 3 或者Stage 4 阶段，这意味着应该很快在浏览器和其他引擎中支持这些特性。更多优质文章请猛戳GitHub博客一、类的私有变量最新提案之一是在类中添加私有变量的方法。我们将使用 # 符号表示类的私有变量。这样就不需要使...原创 2019-12-27 10:13:10 · 6459 阅读 · 6 评论 -
盘点ES7、ES8、ES9、ES10新特性
前言从 ECMAScript 2016（ES7）开始，版本发布变得更加频繁，每年发布一个新版本，好在每次版本的更新内容并不多，本文会细说这些新特性，尽可能和旧知识相关联，帮你迅速上手这些特性。想阅读更多优质文章请猛戳GitHub博客ES7新特性1.Array.prototype.includes()方法在 ES6 中我们有 String.prototype.includes() 可以查询...原创 2019-12-25 14:33:12 · 3371 阅读 · 1 评论 -
解读HTTP/2与HTTP/3 的新特性（推荐）
前言HTTP/2 相比于 HTTP/1.1，可以说是大幅度提高了网页的性能，只需要升级到该协议就可以减少很多之前需要做的性能优化工作，当然兼容问题以及如何优雅降级应该是国内还不普遍使用的原因之一。虽然 HTTP/2 提高了网页的性能，但是并不代表它已经是完美的了，HTTP/3 就是为了解决 HTTP/2 所存在的一些问题而被推出来的。想阅读更多优质文章请猛戳GitHub博客一、H...原创 2019-10-16 07:20:00 · 17717 阅读 · 2 评论 -
写技术博客那点事
前言写文章是一个短期收益少，长期收益很大的一件事情，人们总是高估短期收益，低估长期收益。往往是很多人坚持不下来，特别是写文章的初期，刚写完文章没有人阅读会有一种挫败感，影响了后期创作。从某种意义上说，博客是我最好的学习笔记和个人名片。在IT行业内，技术博客是了解一个开发者最好的方式之一，特别是当你没有一张足够分量的文凭或者一段出彩的工作经历时，你就应该沉下心来好好打磨自己技术，打造自己的博客。...原创 2019-02-16 18:57:18 · 6148 阅读 · 4 评论 -
常见六大Web安全攻防解析
前言在互联网时代，数据安全与个人隐私受到了前所未有的挑战，各种新奇的攻击技术层出不穷。如何才能更好地保护我们的数据？本文主要侧重于分析几种常见的攻击的类型以及防御的方法。想阅读更多优质原创文章请猛戳GitHub博客一、XSSXSS (Cross-Site Scripting)，跨站脚本攻击，因为缩写和 CSS重叠，所以只能叫 XSS。跨站脚本攻击是指通过存在安全漏洞的Web网站注册用户的浏...原创 2019-06-26 12:42:19 · 6890 阅读 · 10 评论 -
vue组件间通信六种方式（完整版）
前言组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如pro...原创 2019-05-27 09:14:25 · 5253 阅读 · 7 评论 -
JS 异步编程六种方案
前言我们知道Javascript语言的执行环境是"单线程"。也就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务。这种模式虽然实现起来比较简单，执行环境相对单纯，但是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个...原创 2019-06-28 11:15:45 · 24680 阅读 · 17 评论 -
为什么HTTPS比HTTP更安全?
前言近几年，互联网发生着翻天覆地的变化，尤其是我们一直习以为常的HTTP协议，在逐渐的被HTTPS协议所取代，在浏览器、搜索引擎、CA机构、大型互联网企业的共同促进下，互联网迎来了“HTTPS加密时代”，HTTPS将在未来的几年内全面取代HTTP成为传输协议的主流。读完本文，希望你能明白： HTTP通信存在什么问题 HTTPS如何改进HTTP存在那些问题 HTTP...原创 2019-08-09 14:39:34 · 51729 阅读 · 96 评论 -
如何居中一个元素（终结版）
前言本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下：一、水平居中1.行内元素水平居中利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。 .parent{//在父容器设置 text-align:...原创 2019-04-26 00:01:16 · 1167 阅读 · 3 评论 -
cookie已凉，浏览器存储该怎么做
前言随着移动网络的发展与演化，我们手机上现在除了有原生 App，还能跑“WebApp”——它即开即用，用完即走。一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功能和体验。WebApp 优异的性能表现，有一部分原因要归功于浏览器存储技术的提升。cookie存储数据的功能已经很难满足开发所需，逐渐被WebStorage、IndexedDB所取代，本文将介绍这几种存储方式的差异和优缺点。...原创 2019-04-03 09:51:41 · 13165 阅读 · 21 评论 -
你不知道的浏览器页面渲染机制
前言浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分的，一是渲染引擎，另一个是JS引擎。渲染引擎在不同的浏览器中也不是都相同的。目前市面上常见的浏览器内核可以分为这四种：Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）。这里面大家最耳熟能详的可能就是 Webkit 内核了，Webkit 内核是当下浏览器世界真正的霸主。本...原创 2019-04-10 07:51:24 · 813 阅读 · 0 评论 -
页面性能优化办法有哪些？
引子互联网有一项著名的8秒原则。用户在访问Web网页时，如果时间超过8秒就会感到不耐烦，如果加载需要太长时间，他们就会放弃访问。大部分用户希望网页能在2秒之内就完成加载。事实上，加载时间每多1秒，你就会流失7%的用户。8秒并不是准确的8秒钟，只是向网站开发者表明了加载时间的重要性。那我们如何优化页面性能，提高页面加载速度呢？这是本文主要要探讨的问题，然而性能优化是个综合性问题，没有标准答案，想要...原创 2019-05-27 09:10:38 · 1490 阅读 · 1 评论 -
函数节流和防抖
前言事件的触发权很多时候都属于用户，有些情况下会产生问题：向后台发送数据，用户频繁触发，对服务器造成压力一些浏览器事件:window.onresize、window.mousemove等，触发的频率非常高，会造成浏览器性能问题如果你碰到这些问题，那就需要用到函数节流和防抖了。本文首发地址为GitHub博客,写文章不易，请多多支持与关注！一、函数节流(throttle)函数...原创 2019-07-28 15:37:39 · 964 阅读 · 0 评论 -
DOM事件机制
前言本文主要介绍DOM事件级别、DOM事件模型、事件流、事件代理和Event对象常见的应用，希望对你们有些帮助和启发！本文首发地址为GitHub博客,写文章不易，请多多支持与关注！一、DOM事件级别DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。而DOM事件分为3个级别：DOM 0级事件处理，DOM 2级事件处理和DOM 3级事件处理。由于DOM 1级中没...原创 2019-07-28 15:34:56 · 2318 阅读 · 1 评论 -
详解vue组件三大核心概念
前言本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件，也可以从这三个部分展开，它们可以帮助你快速了解一个组件的所有功能。本文的代码请猛戳github博客，纸上得来终觉浅，大家动手多敲敲代码！一、属性1.自定义属性propsprop 定义了这个组件有哪些可配置的属性，组件的核心功能也都是它来确定的。写通用组件时，props 最...原创 2019-05-30 13:12:04 · 32575 阅读 · 3 评论 -
揭秘Vue中的Virtual Dom
前言Vue.js 2.0引入Virtual DOM,比Vue.js 1.0的初始渲染速度提升了2-4倍，并大大降低了内存消耗。那么，什么是Virtual DOM？为什么需要Virtual DOM？它是通过什么方式去提升页面渲染效率的呢？这是本文所要探讨的问题。模板转换成视图的过程在正式介绍 Virtual Dom之前，我们有必要先了解下模板转换成视图的过程整个过程（如下图）：Vue.js...原创 2019-06-26 12:38:49 · 1287 阅读 · 2 评论 -
JavaScript中的垃圾回收和内存泄漏
前言程序的运行需要内存。只要程序提出要求，操作系统或者运行时就必须供给内存。所谓的内存泄漏简单来说是不再用到的内存，没有及时释放。为了更好避免内存泄漏，我们先介绍Javascript垃圾回收机制。在C与C++等语言中，开发人员可以直接控制内存的申请和回收。但是在Java、C#、JavaScript语言中，变量的内存空间的申请和释放都由程序自己处理，开发人员不需要关心。也就是说Javascrip...原创 2019-04-30 09:13:36 · 2707 阅读 · 6 评论 -
详解Vue计算属性和侦听属性
前言一些初学者可能对计算属性和侦听属性的使用场景感到困惑不解，本文主要介绍两者的用法、使用场景及其两者的区别。本文的代码请猛戳github博客，纸上得来终觉浅，大家动手多敲敲代码！计算属性1.介绍计算属性是自动监听依赖值的变化，从而动态返回内容，监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。它有以下几个特点：数据可以进行逻辑处理，减少模板中计算逻辑。对计算属性中...原创 2019-07-28 15:31:59 · 817 阅读 · 0 评论 -
春招季如何横扫 Javascript 面试核心考点(基础版)？
引言Javascript是前端面试的重点，本文重点梳理下 Javascript 中的常考知识点，然后就一些容易出现的题目进行解析。限于文章的篇幅，无法将知识点讲解的面面俱到，本文只罗列了一些重难点，如果想要了解更多内容欢迎点击我的博客。一、变量类型1.JS 的数据类型分类根据 JavaScript 中的变量类型传递方式，分为基本数据类型和引用数据类型。其中基本数据类型包括Undefined...原创 2019-03-29 09:30:52 · 1044 阅读 · 3 评论 -
TCP和UDP比较
引言网络协议是每个前端工程师都必须要掌握的知识，TCP/IP 中有两个具有代表性的传输层协议，分别是 TCP 和 UDP，本文将介绍下这两者以及它们之间的区别。想阅读更多优质文章请猛戳GitHub博客一、TCP/IP网络模型计算机与网络设备要相互通信，双方就必须基于相同的方法。比如，如何探测到通信目标、由哪一边先发起通信、使用哪种语言进行通信、怎样结束通信等规则都需要事先确定。不同的硬件、...原创 2019-03-20 10:07:30 · 1542 阅读 · 1 评论 -
深入理解JavaScript执行上下文和执行栈
前言如果你是一名 JavaScript 开发者，或者想要成为一名 JavaScript 开发者，那么你必须知道 JavaScript 程序内部的执行机制。执行上下文和执行栈是JavaScript中关键概念之一，是JavaScript难点之一。 理解执行上下文和执行栈同样有助于理解其他的 JavaScript 概念如提升机制、作用域和闭包等。本文尽可能用通俗易懂的方式来介绍这些概念。想阅读更多优...原创 2019-03-18 09:19:55 · 666 阅读 · 0 评论 -
深入理解JavaScript作用域和作用域链
前言JavaScript中有一个被称为作用域(Scope)的特性。虽然对于许多新手开发者来说，作用域的概念并不是很容易理解，本文我会尽我所能用最简单的方式来解释作用域和作用域链，希望大家有所收获！作用域(Scope)1.什么是作用域作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见性。可能这两句话并不好理解，我们先来看个例...原创 2019-03-15 09:22:30 · 23460 阅读 · 2 评论 -
深入理解浏览器的缓存机制
一、前言缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传...原创 2019-03-05 12:26:21 · 11104 阅读 · 0 评论 -
Web 实时推送技术的总结
前言HTTP/2 相比于 HTTP/1，可以说是大幅度提高了网页的性能，只需要升级到该协议就可以减少很多之前需要做的性能优化工作，当然兼容问题以及如何优雅降级应该是国内还不普遍使用的原因之一。虽然 HTTP/2 提高了网页的性能，但是并不代表它已经是完美的了，HTTP/3 就是为了解决 HTTP/2 所存在的一些问题而被推出来的。想阅读更多优质文章请猛戳GitHub博客一、HTTP协议H...原创 2019-03-14 08:27:57 · 2330 阅读 · 0 评论 -
从URL输入到页面展现到底发生什么？
前言打开浏览器从输入网址到网页呈现在大家面前，背后到底发生了什么？经历怎么样的一个过程？先给大家来张总体流程图，具体步骤请看下文分解！阅读更多优质文章请猛戳GitHub博客总体来说分为以下几个过程:DNS 解析:将域名解析成 IP 地址TCP 连接：TCP 三次握手发送 HTTP 请求服务器处理请求并返回 HTTP 报文浏览器解析渲染页面断开连接：TCP 四次挥手一、URL...原创 2019-03-12 09:15:50 · 2295 阅读 · 0 评论 -
ES6核心特性
前言ES6 虽提供了许多新特性，但我们实际工作中用到频率较高并不多，根据二八法则，我们应该用百分之八十的精力和时间，好好专研这百分之二十核心特性，将会收到事半功倍的奇效！写文章不容易，请大家多多支持与关注！一、开发环境配置这部分着重介绍：babel 编译ES6语法，如何用webpack实现模块化。1.babel为啥需要babel？ES6 提供了许多新特性，但并不是所有的浏览器都能够完...原创 2019-02-27 09:11:14 · 4806 阅读 · 0 评论 -
前端模块化详解(完整版)
前言在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀，此时在JS方面就会考虑使用模块化规范去管理。本文内容主要有理解模块化，为什么要模块化，模块化的优缺点以及模块化规范,并且介绍下开发中...原创 2019-02-16 19:13:46 · 25380 阅读 · 2 评论 -
关于响应式布局，你必须要知道的
一、前言响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。本文主要介绍一些响应式布局容易忽略但又很重要的知识点。二、视口移动前端中常说的 viewport （视口）就是浏览器中用于呈现网页的区域。视口通常并不等于屏幕大小，特别是可以缩放浏览器窗口的情况下。手机端与PC端视口存在差异，电脑端的视口宽度...原创 2019-08-30 09:30:08 · 8835 阅读 · 5 评论