Blog
Blog copied to clipboard
ljianshu
关注基础知识，打造优质前端博客，公众号[前端工匠]的作者
## 前言 JavaScript中有一个被称为作用域(Scope)的特性。虽然对于许多新手开发者来说，作用域的概念并不是很容易理解，本文我会尽我所能用最简单的方式来解释作用域和作用域链，希望大家有所收获！ ## 作用域(Scope) ### 1.什么是作用域 作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见性。可能这两句话并不好理解，我们先来看个例子： ``` function outFun2() { var inVariable = "内层变量2"; } outFun2();//要先执行这个函数，否则根本不知道里面是啥 console.log(inVariable); // Uncaught ReferenceError: inVariable is not defined ``` 从上面的例子可以体会到作用域的概念，变量inVariable在全局作用域没有声明，所以在全局作用域下取值会报错。我们可以这样理解：**作用域就是一个独立的地盘，让变量不会外泄、暴露出去**。也就是说**作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。** **ES6 之前...
Bumps [websocket-extensions](https://github.com/faye/websocket-extensions-node) from 0.1.3 to 0.1.4. Changelog Sourced from websocket-extensions's changelog. 0.1.4 / 2020-06-02 Remove a ReDoS vulnerability in the header parser (CVE-2020-7662, reported by Robert McLaughlin) Change license from...
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot] avatar"){kind=avatar}
## 引言 网络协议是每个前端工程师都必须要掌握的知识，TCP/IP 中有两个具有代表性的传输层协议，分别是 TCP 和 UDP，本文将介绍下这两者以及它们之间的区别。 ## 一、TCP/IP 网络模型 计算机与网络设备要相互通信，双方就必须基于相同的方法。比如，如何探测到通信目标、由哪一边先发起通信、使用哪种语言进行通信、怎样结束通信等规则都需要事先确定。不同的硬件、操作系统之间的通信，所有的这一切都需要一种规则。而我们就把这种规则称为协议（protocol）。 TCP/IP 是互联网相关的各类协议族的总称，比如：TCP，UDP，IP，FTP，HTTP，ICMP，SMTP 等都属于 TCP/IP 族内的协议。 TCP/IP 模型是互联网的基础，它是一系列网络协议的总称。这些协议可以划分为四层，分别为链路层、网络层、传输层和应用层。 - 链路层：负责封装和解封装 IP 报文，发送和接受 ARP/RARP 报文等。 - 网络层：负责路由以及把分组报文发送给目标网络或主机。 - 传输层：负责对报文进行分组和重组，并以 TCP 或...
## 前言 函数式编程在前端已经成为了一个非常热门的话题。在最近几年里，我们看到非常多的应用程序代码库里大量使用着函数式编程思想。 本文将略去那些晦涩难懂的概念介绍，重点展示在 JavaScript 中到底什么是函数式的代码、声明式与命令式代码的区别、以及常见的函数式模型都有哪些？**想阅读更多优质文章请猛戳[GitHub博客](https://github.com/ljianshu/Blog)** ## 一、什么是函数式编程 函数式编程是一种编程范式，主要是利用函数把运算过程封装起来，通过组合各种函数来计算结果。函数式编程意味着你可以在更短的时间内编写具有更少错误的代码。举个简单的例子，假设我们要把字符串 `functional programming is great` 变成每个单词首字母大写，我们可以这样实现： ``` var string = 'functional programming is great'; var result = string .split(' ') .map(v =>...
## 前言 本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下：  ## 一、水平居中 ### 1.行内元素水平居中 **利用 text-align: center 可以实现在块级元素内部的行内元素水平居中**。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。 ``` .parent{//在父容器设置 text-align:center; } ``` 此外，如果块级元素内部包着也是一个块级元素，**我们可以先将其由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中**。 ``` Demo .parent{ text-align:center; } .child { display: inline-block; } ``` ###...
## 前言 随着 Web 的发展，用户对于 Web 的实时推送要求也越来越高 ，比如，工业运行监控、Web 在线通讯、即时报价系统、在线游戏等，都需要将后台发生的变化主动地、实时地传送到浏览器端，而不需要用户手动地刷新页面。本文对过去和现在流行的 Web 实时推送技术进行了比较与总结。 **本文完整的源代码请猛戳[Github博客](https://github.com/ljianshu/Blog)，纸上得来终觉浅，建议大家动手敲敲代码。** ## 一、双向通信 HTTP 协议有一个缺陷：通信只能由客户端发起。举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。**在WebSocket协议之前，有三种实现双向通信的方式：轮询（polling）、长轮询（long-polling）和iframe流（streaming）**。 ### 1.轮询（polling）  轮询是客户端和服务器之间会一直进行连接，每隔一段时间就询问一次。其缺点也很明显：连接数会很多，一个接受，一个发送。而且**每次发送请求都会有Http的Header，会很耗流量，也会消耗CPU的利用率**。 - 优点：实现简单，无需做过多的更改 - 缺点：轮询的间隔过长，会导致用户不能及时接收到更新的数据；轮询的间隔过短，会导致查询请求过多，增加服务器端的负担 ``` // 1.html let clockDiv...
## 前言 我们知道Javascript语言的执行环境是"单线程"。也就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务。 这种模式虽然实现起来比较简单，执行环境相对单纯，但是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。 为了解决这个问题，Javascript语言将任务的执行模式分成两种：同步和异步。本文主要介绍异步编程几种办法，并通过比较，得到最佳异步编程的解决方案！ ## 一、同步与异步 我们可以通俗理解为异步就是一个任务分成两段，先执行第一段，然后转而执行其他任务，等做好了准备，再回过头执行第二段。排在异步任务后面的代码，不用等待异步任务结束会马上运行，也就是说，**异步任务不具有”堵塞“效应**。比如，有一个任务是读取文件进行处理，异步的执行过程就是下面这样  这种不连续的执行，就叫做异步。相应地，连续的执行，就叫做同步  "异步模式"非常重要。在浏览器端，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。在服务器端，"异步模式"甚至是唯一的模式，因为执行环境是单线程的，如果允许同步执行所有http请求，服务器性能会急剧下降，很快就会失去响应。接下来介绍下异步编程六种方法。 ## 二、回调函数（Callback） 回调函数是异步操作最基本的方法。以下代码就是一个回调函数的例子： ``` ajax(url, () => { // 处理逻辑 }) ``` 但是回调函数有一个致命的弱点，就是容易写出**回调地狱（Callback hell）**。假设多个请求存在依赖性，你可能就会写出如下代码： ``` ajax(url, () =>...
## 一、前言 要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题。 ## 二、vue-router是什么 这里的路由并不是指我们平时所说的硬件路由器，**这里的路由就是SPA（单页应用）的路径管理器**。再通俗的说，vue-router就是WebApp的链接路径管理系统。 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。**路由模块的本质 就是建立起url和页面之间的映射关系**。 至于我们为啥不能用a标签，这是因为用Vue做的都是单页应用（**当你的项目准备打包时，运行`npm run build`时，就会生成dist文件夹，这里面只有静态资源和一个index.html页面**），所以你写的标签是不起作用的，你必须使用vue-router来进行管理。 ## 三、vue-router实现原理 SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。**单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面**;vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式；根据mode参数来决定采用哪一种方式。 ### 1、Hash模式： **vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当...
Bumps [acorn](https://github.com/acornjs/acorn) from 6.4.0 to 6.4.1. Commits 9a2e9b6 Mark version 6.4.1 90a9548 More rigorously check surrogate pairs in regexp validator See full diff in compare view [](https://help.github.com/articles/configuring-automated-security-fixes) Dependabot...
## 前言 **三栏布局，顾名思义就是两边固定，中间自适应**。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。  我们不妨假定这样一个布局：高度已知，其中左栏、右栏宽度各为300px,中间自适应，可以通过几种方法来实现？以及各自的优缺点是什么？ 本文源代码请猛戳[三栏布局源码](https://github.com/ljianshu/Blog/tree/master/%E4%B8%89%E6%A0%8F%E5%B8%83%E5%B1%80)，欢迎star和fork  ## 一、浮动布局 ``` Layout html * { padding: 0; margin: 0; } .layout article div { min-height: 150px; } .layout.float .left { float:...