Blog
Blog copied to clipboard
ljianshu
关注基础知识，打造优质前端博客，公众号[前端工匠]的作者
### 前言 ES2020 是 ECMAScript 对应 2020 年的版本。这个版本不像 ES6 (ES2015)那样包含大量新特性。但是，也添加了许多有趣且有用的特性。 本文以简单的代码示例来介绍 ES2020新特性。这样，你可以很快理解这些新功能，而不需要多么复杂的解释。 ### 可选链操作符（Optional Chaining） **可选链** 可让我们在查询具有多个层级的对象时，不再需要进行冗余的各种前置校验。 日常开发中，当需要访问嵌套在对象内部好几层的属性时，可能就会得到臭名昭著的错误`Uncaught TypeError: Cannot read property...`，这种错误，让整段程序运行中止。  于是，你就要修改你的代码来处理来处理属性链中每一个可能的undefined对象，比如： ``` let nestedProp = obj &&...
## 前言 一些初学者可能对计算属性和侦听属性的使用场景感到困惑不解，本文主要介绍两者的用法、使用场景及其两者的区别。 本文的代码请猛戳[github博客](https://github.com/ljianshu/Blog/tree/master/vue2.0%E5%AD%A6%E4%B9%A0)，纸上得来终觉浅，大家动手多敲敲代码！ ## 计算属性 ### 1.介绍 计算属性是自动监听依赖值的变化，从而动态返回内容，监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。它有以下几个特点： - 数据可以进行逻辑处理，减少模板中计算逻辑。 - 对计算属性中的数据进行监视 - 依赖固定的数据类型（响应式数据） 计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性。默认只有get，如果需要set，要自己添加。另外set设置属性，并不是直接修改计算属性，而是修改它的依赖。 ``` computed: { fullName: { // getter get: function () { return this.firstName +...
### 前言 VSCode，是一个免费的、开源的跨平台编辑器,也是我最满意的编辑器之一。 本文向大家推荐一些我喜欢的vscode插件，不出意外的话，这些插件将对你的工作效率提升有不小的帮助！ ### GitLens VS Code中的 Git 体验在易用性和完整性之间取得了一个不错的平衡，大部分用户都能够使用它完成工作，同时又不会被太多的功能吓到。但是很多硬核的 Git 用户肯定会觉得功能还不够用。包括但不限于： - 不能查看某个 commit 中的代码改动； - 不能比较两个 commit 或者 branch，然后阅览代码改动； - 不能查看代码历史记录。 不过 GitLens 这个插件的出现，就弥补上了上述不足。  类似的 Extension： -...
## 前言 AJAX即“Asynchronous Javascript And XML”，是指一种创建交互式网页应用的网页开发技术。AJAX 是一种用于创建快速动态网页的技术。它可以令开发者只向服务器获取数据（而不是图片，HTML文档等资源），互联网资源的传输变得前所未有的轻量级和纯粹，这激发了广大开发者的创造力，使各式各样功能强大的网络站点，和互联网应用如雨后春笋一般冒出，不断带给人惊喜。  ## 一、什么是Ajax Ajax是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。简单地说，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。常见运用场景有表单验证是否登入成功、百度搜索下拉框提示和快递单号查询等等。**Ajax的目的是提高用户体验，较少网络数据的传输量**。同时，由于AJAX请求获取的是数据而不是HTML文档，因此它也节省了网络带宽，让互联网用户的网络冲浪体验变得更加顺畅。 ## 二、Ajax原理是什么 在解释Ajax原理之前，我们不妨先举个“领导想找小李汇报一下工作”例子，领导想找小李问点事，就委托秘书去叫小李，自己就接着做其他事情，直到秘书告诉他小李已经到了，最后小李跟领导汇报工作。  Ajax请求数据流程与“领导想找小李汇报一下工作”类似。其中最核心的依赖是浏览器提供的XMLHttpRequest对象，它扮演的角色相当于秘书，使得浏览器可以发出HTTP请求与接收HTTP响应。浏览器接着做其他事情，等收到XHR返回来的数据再渲染页面。  理解了Ajax的工作原理后，接下来我们探讨下如何使用Ajax。 ## 三、Ajax的使用 ### 1.创建Ajax核心对象XMLHttpRequest(记得考虑兼容性) ``` 1. var xhr=null; 2. if (window.XMLHttpRequest)...
## 引言 Javascript是前端面试的重点，本文重点梳理下 Javascript 中的常考知识点，然后就一些容易出现的题目进行解析。限于文章的篇幅，无法将知识点讲解的面面俱到，本文只罗列了一些重难点，**如果想要了解更多内容欢迎点击[我的博客](https://github.com/ljianshu/Blog)**。 ## 一、变量类型 ### 1.JS 的数据类型分类 根据 JavaScript 中的变量类型传递方式，分为基本数据类型和引用数据类型。其中基本数据类型包括Undefined、Null、Boolean、Number、String、Symbol (ES6新增，表示独一无二的值)，而引用数据类型统称为Object对象，主要包括对象、数组和函数。 **在参数传递方式上，有所不同：** - 函数的参数如果是简单类型，会将一个值类型的数值副本传到函数内部，函数内部不影响函数外部传递的参数变量 - 如果是一个参数是引用类型，会将引用类型的地址值复制给传入函数的参数，函数内部修改会影响传递参数的引用对象。 > 题目：基本类型和引用类型的区别 基本类型和引用类型存储于内存的位置不同，基本类型直接存储在栈中,而引用类型的对象存储在堆中，与此同时，在栈中存储了指针，而这个指针指向正是堆中实体的起始位置。下面通过一个小题目，来看下两者的主要区别： ``` // 基本类型 var a = 10 var...
### 前言 一个ECMAScript标准的制作过程，包含了Stage 0到Stage 4 五个阶段，每个阶段提交至下一阶段都需要TC39审批通过。本文介绍这些新特性处于Stage 3 或者Stage 4 阶段，这意味着应该很快在浏览器和其他引擎中支持这些特性。 ### 一、类的私有变量 最新提案之一是在类中添加私有变量的方法。我们将**使用 # 符号表示类的私有变量**。这样就不需要使用闭包来隐藏不想暴露给外界的私有变量。 ``` class Counter { #x = 0; #increment() { this.#x++; } onClick() { this.#increment(); }...
## 前言 Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的问题。----官方文档 本文将针对响应式原理做一个详细介绍，并且带你实现一个基础版的响应式系统。本文的代码请猛戳[Github博客](https://github.com/ljianshu/Blog/tree/master/vue2.0%E5%AD%A6%E4%B9%A0/%E5%86%85%E9%83%A8%E8%BF%90%E8%A1%8C%E6%9C%BA%E5%88%B6/%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86) ## 什么是响应式 我们先来看个例子： ``` Price :￥{{ price }} Total:￥{{ price * quantity }} Taxes: ￥{{ totalPriceWithTax }} 改变价格 ``` ``` var app =...
深入理解BFC
## 一、什么是BFC Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。**Block formatting context直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干**。**通俗地讲，BFC是一个容器，用于管理块级元素。** ## 二、如何创建BFC - float为 left|right -...
## 一、前言 当我们的应用遇到多个组件共享状态时，会需要多个组件依赖于同一状态抑或是来自不同视图的行为需要变更同一状态。以前的解决办法： **a.将数据以及操作数据的行为都定义在父组件;** **b.将数据以及操作数据的行为传递给需要的各个子组件(有可能需要多级传递)** 传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。在搭建下面页面时，你可能会对 vue 组件之间的通信感到崩溃 ，特别是非父子组件之间通信。此时就应该使用vuex，轻松可以搞定组件间通信问题。  ## 二、什么是Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。这里的关键在于集中式存储管理。**简单来说,对 vue 应用中多个组件的共享状态进行集中式的管理(读/写)**。 ## 三、Vuex的原理是什么 #### 1.简要介绍Vuex原理  Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时，必须通过Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action，但Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。 #### 2.简要介绍各模块在流程中的主要功能： - Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方法触发对应action进行回应。 -...
懒加载和预加载
## 一、懒加载 #### 1.什么是懒加载 **懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式**。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。 #### 2.为什么要用懒加载 - **能提升用户的体验**，不妨设想下，用户打开像手机淘宝长页面的时候，如果页面上所有的图片都需要加载，由于图片数目较大，等待时间很长，用户难免会心生抱怨，这就严重影响用户体验。 - **减少无效资源的加载**，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担。 - **防止并发加载的资源过多会阻塞js的加载**，影响网站的正常使用。 #### 3.懒加载的原理 首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在data-original属性中， 当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现延迟加载。 #### 4.懒加载实现步骤 ``` Lazyload .image-item { display: block;...