- 博客(127)
- 收藏
- 关注
RSS订阅
原创 零基础学习前端需要掌握的技术和相关教程
前端基础前言简介正文阶段一一、HTML+CSSHTMLCSS二、HTML5+CSS3HTML5CSS3三、Javascript阶段二一、Jquery二、其他阶段三一、VUE二、React三、Node四、webpack阶段四一、Mysql二、Redis阶段五一、项目管理篇二、扩展部分小程序apicloud（移动app开发）三、常用框架使用篇四、综合项目实战前言学习是一个循序渐进的过程，前端的学习也是如此。不论前端开发还是后端开发的学习都要求我们多动手，既要反复的看书，也把学习到的知识点第一时间去实践。前
2020-08-07 16:14:10
639
转载 ES6数组的扩展--Array.from()和Array.of()
目录一、 Array.from() : 将伪数组对象或可遍历对象转换为真数组1.何为伪数组2.有哪些是伪数组3.如何转化为真数组4.Array.from()用法二、Array.of(v1, v2, v3) : 将一系列值转换成数组一、 Array.from() : 将伪数组对象或可遍历对象转换为真数组1.何为伪数组如果一个对象的所有键名都是正整数或零，并且有length属性，那么这个对象就很像数组，语法上称为“类似数组的对象”(array-like object),即为伪数组。var obj = {
2021-04-07 15:34:15
351
转载 你真的懂Promise吗
前言在异步编程中，Promise 扮演了举足轻重的角色，比传统的解决方案（回调函数和事件）更合理和更强大。有些朋友对于这个几乎每天都在打交道的“老朋友”，貌似全懂,但稍加深入就可能疑问百出，本文带大家深入理解这个熟悉的陌生人—— Promise.基本用法1.语法new Promise( function(resolve, reject) {...} /* executor */ )构建 Promise 对象时，需要传入一个 executor 函数，主要业务流程都在 executor 函数中执行。
2021-03-23 14:12:01
273
转载 7个令人兴奋的 JavaScript 新特性
前言一个ECMAScript标准的制作过程，包含了Stage 0到Stage 4 五个阶段，每个阶段提交至下一阶段都需要TC39审批通过。本文介绍这些新特性处于Stage 3 或者Stage 4 阶段，这意味着应该很快在浏览器和其他引擎中支持这些特性。一、类的私有变量最新提案之一是在类中添加私有变量的方法。我们将使用 # 符号表示类的私有变量。这样就不需要使用闭包来隐藏不想暴露给外界的私有变量。class Counter { #x = 0; #increment() { this.
2021-03-22 13:45:56
254
转载 ES2020新特性
目录前言可选链操作符（Optional Chaining）空位合并操作符（Nullish coalescing Operator）Promise.allSettledString.prototype.matchAllDynamic importBigIntglobalThis前言ES2020 是 ECMAScript 对应 2020 年的版本。这个版本不像 ES6 (ES2015)那样包含大量新特性。但是，也添加了许多有趣且有用的特性。本文以简单的代码示例来介绍 ES2020新特性。这样，你可以很快理
2021-03-20 10:44:14
296
转载 盘点ES7、ES8、ES9、ES10新特性
前言从 ECMAScript 2016（ES7）开始，版本发布变得更加频繁，每年发布一个新版本，好在每次版本的更新内容并不多，本文会细说这些新特性，尽可能和旧知识相关联，帮你迅速上手这些特性。ES7新特性1.Array.prototype.includes()方法在 ES6 中我们有 String.prototype.includes() 可以查询给定字符串是否包含一个字符，而在 ES7 中，我们在数组中也可以用 Array.prototype.includes 方法来判断一个数组是否包含一个指定
2021-03-19 16:09:14
232
转载 ES6核心特性
前言ES6 虽提供了许多新特性，但我们实际工作中用到频率较高并不多，根据二八法则，我们应该用百分之八十的精力和时间，好好专研这百分之二十核心特性，将会收到事半功倍的奇效！写文章不容易，请大家多多支持与关注！[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qH7lhZA9-1616036954640)(https://camo.githubusercontent.com/4bb60f87b1e99746ed1a919aa557db4ffc94cad4ec75ab6c5c729
2021-03-18 11:12:39
208
转载 什么是JavaScript 函数式编程？
前言函数式编程在前端已经成为了一个非常热门的话题。在最近几年里，我们看到非常多的应用程序代码库里大量使用着函数式编程思想。本文将略去那些晦涩难懂的概念介绍，重点展示在 JavaScript 中到底什么是函数式的代码、声明式与命令式代码的区别、以及常见的函数式模型都有哪些？一、什么是函数式编程函数式编程是一种编程范式，主要是利用函数把运算过程封装起来，通过组合各种函数来计算结果。函数式编程意味着你可以在更短的时间内编写具有更少错误的代码。举个简单的例子，假设我们要把字符串 functional pro
2021-03-17 14:07:54
205
转载 JavaScript中的垃圾回收和内存泄漏
前言程序的运行需要内存。只要程序提出要求，操作系统或者运行时就必须供给内存。所谓的内存泄漏简单来说是不再用到的内存，没有及时释放。为了更好避免内存泄漏，我们先介绍Javascript垃圾回收机制。在C与C++等语言中，开发人员可以直接控制内存的申请和回收。但是在Java、C#、JavaScript语言中，变量的内存空间的申请和释放都由程序自己处理，开发人员不需要关心。也就是说Javascript具有自动垃圾回收机制(Garbage Collecation)。一、垃圾回收的必要性下面这段话引自《Jav
2021-03-12 11:50:51
142
转载 浏览器与Node的事件循环(Event Loop)有何区别?
前言本文我们将会介绍 JS 实现异步的原理，并且了解了在浏览器和 Node 中 Event Loop 其实是不相同的。一、线程与进程1.概念我们经常说JS 是单线程执行的，指的是一个进程里只有一个主线程，那到底什么是线程？什么是进程？官方的说法是：进程是 CPU资源分配的最小单位；线程是 CPU调度的最小单位。这两句话并不好理解，我们先来看张图：进程好比图中的工厂，有单独的专属自己的工厂资源。线程好比图中的工人，多个工人在一个工厂中协作工作，工厂与工人是 1:n的关系。也就是说一个进程由一
2021-03-11 14:13:47
1027
3
转载 JavaScript常见的六种继承方式
前言面向对象编程很重要的一个方面，就是对象的继承。A 对象通过继承 B 对象，就能直接拥有 B 对象的所有属性和方法。这对于代码的复用是非常有用的。大部分面向对象的编程语言，都是通过“类”（class）实现对象的继承。传统上，JavaScript 语言的继承不通过 class(ES6 引入了class 语法)，而是通过“原型对象”（prototype）实现。那么在JS中常见的继承方式有几种呢？如需本文源码，请猛戳常见的六种继承方式方式一、原型链继承这种方式关键在于:子类型的原型为父类型.
2021-03-10 11:50:09
168
转载 DOM事件机制
前言本文主要介绍DOM事件级别、DOM事件模型、事件流、事件代理和Event对象常见的应用，希望对你们有些帮助和启发！一、DOM事件级别DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。而DOM事件分为3个级别：DOM 0级事件处理，DOM 2级事件处理和DOM 3级事件处理。由于DOM 1级中没有事件的相关内容，所以没有DOM 1级事件。1.DOM 0级事件el.onclick=function(){}// 例1var btn = document.getEle
2021-02-03 14:14:49
297
转载 细说数组常用遍历的方法
前言本文主要介绍数组常见遍历方法：forEach、map、filter、find、every、some、reduce，它们有个共同点：不会改变原始数组。一、forEach：遍历数组var colors = ["red","blue","green"];// ES5遍历数组方法for(var i = 0; i < colors.length; i++){ console.log(colors[i]);//red blue green}// ES6 forEachcolors.fo.
2021-02-02 09:32:41
511
转载 深入理解JavaScript执行上下文和执行栈
前言如果你是一名 JavaScript 开发者，或者想要成为一名 JavaScript 开发者，那么你必须知道 JavaScript 程序内部的执行机制。执行上下文和执行栈是JavaScript中关键概念之一，是JavaScript难点之一。 理解执行上下文和执行栈同样有助于理解其他的 JavaScript 概念如提升机制、作用域和闭包等。本文尽可能用通俗易懂的方式来介绍这些概念。一、执行上下文（Execution Context）1.什么是执行上下文简而言之，执行上下文就是当前 JavaScrip
2021-02-01 10:03:01
227
转载 深入理解JavaScript作用域和作用域链
前言JavaScript中有一个被称为作用域(Scope)的特性。虽然对于许多新手开发者来说，作用域的概念并不是很容易理解，本文我会尽我所能用最简单的方式来解释作用域和作用域链，希望大家有所收获！作用域(Scope)1.什么是作用域作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见性。可能这两句话并不好理解，我们先来看个例子：function outFun2() { var inVariable = "内层变量2";}
2021-01-30 10:16:34
244
转载 JavaScript数据类型转换
前言JavaScript是一门动态语言，所谓的动态语言可以暂时理解为在语言中的一切内容都是不确定的。比如一个变量，这一时刻是个整型，下一时刻可能会变成字符串了。虽然变量的数据类型是不确定的，但是各种运算符对数据类型是有要求的。如果运算符发现，运算子的类型与预期不符，就会自动转换类型。本文主要介绍数据类型强制转换和自动转换，自动转换是基于强制转换之上。强制转换主要指使用Number、String和Boolean三个函数，手动将各种类型的值，分布转换成数字、字符串或者布尔值。一、强制转换1、其他的数据类
2021-01-29 11:47:43
150
转载 JavaScript的数据类型及其检测
目录一、JavaScript有几种类型的值？二、基本数据类型1.值是不可变的2.存放在栈区3.值的比较三、引用数据类型1.值是可变的2.同时保存在栈内存和堆内存3.比较是引用的比较四、检验数据类型1.typeof2.instanceof3.constructor4.Object.prototype.toString.call()一、JavaScript有几种类型的值？Javascript有两种数据类型，分别是基本数据类型和引用数据类型。其中基本数据类型包括Undefined、Null、Boolean、
2021-01-28 13:31:16
142
转载 九种跨域方式实现原理（完整版）
目录前言一、什么是跨域？1.什么是同源策略及其限制内容？2.常见跨域场景二、跨域解决方案1.jsonp1) JSONP原理2) JSONP和AJAX对比3) JSONP优缺点4) JSONP的实现流程5) jQuery的jsonp形式2.cors1) 简单请求2) 复杂请求3.postMessage4.websocket5. Node中间件代理(两次跨域)6.nginx反向代理7.window.name + iframe8.location.hash + iframe9.document.domain +
2021-01-27 10:14:00
904
转载 前端模块化详解(完整版)
前言在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀，此时在JS方面就会考虑使用模块化规范去管理。本文内容主要有理解模块化，为什么要模块化，模块化的优缺点以及模块化规范,并且介绍下开发中最流行的CommonJS, AMD, ES6、CMD规范。本文试图站在小白的角度，用通俗易懂的笔调介绍这些枯燥无
2021-01-26 16:01:19
594
转载 从URL输入到页面展现到底发生什么？
前言打开浏览器从输入网址到网页呈现在大家面前，背后到底发生了什么？经历怎么样的一个过程？先给大家来张总体流程图，具体步骤请看下文分解！总体来说分为以下几个过程:DNS 解析:将域名解析成 IP 地址TCP 连接：TCP 三次握手发送 HTTP 请求服务器处理请求并返回 HTTP 报文浏览器解析渲染页面断开连接：TCP 四次挥手一、URL 到底是啥URL（Uniform Resource Locator），统一资源定位符，用于定位互联网上资源，俗称网址。比如 http://www.
2021-01-25 10:09:18
135
转载 深入理解浏览器的缓存机制
目录一、前言二、缓存位置1.Service Worker2.Memory Cache3.Disk Cache4.Push Cache三、缓存过程分析四、强缓存1.Expires2.Cache-Control3.Expires和Cache-Control两者对比五、协商缓存1.Last-Modified和If-Modified-Since但是 Last-Modified 存在一些弊端：2.ETag和If-None-Match3.两者之间对比：六、缓存机制七、实际场景应用缓存策略1.频繁变动的资源2.不常变化的
2021-01-22 11:03:00
196
转载 浏览器存储
目录前言一、Cookie1.Cookie的来源2.什么是Cookie及应用场景3.Cookie的原理及生成方式4.Cookie的缺陷5.Cookie与安全二、LocalStorage1.LocalStorage的特点2.存入/读取数据3.使用场景三、sessionStorage1.sessionStorage的特点2.使用场景3.sessionStorage 、localStorage 和 cookie 之间的区别四、IndexedDB1.IndexedDB的特点2.IndexedDB的常见操作3.WebS
2021-01-21 10:53:41
194
转载 深入浅出浏览器渲染原理
前言浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分的，一是渲染引擎，另一个是JS引擎。渲染引擎在不同的浏览器中也不是都相同的。目前市面上常见的浏览器内核可以分为这四种：Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）。这里面大家最耳熟能详的可能就是 Webkit 内核了，Webkit 内核是当下浏览器世界真正的霸主。本文我们就以 Webkit 为例，对现代浏览器的渲染过程进行一个深度的剖析。页面加载过程在介绍浏览器渲染过程之
2021-01-19 16:38:01
149
转载 异步解决方案----Promise与Await
目录前言一、Promise的原理与基本语法1.Promise的原理2.Promise的基本语法二、Promise多个串联操作三、Promise常用方法四、Async/Await简介与用法1、Async/Await简介2、Async/Await的用法五、Async/Await错误处理六、为什么Async/Await更好？1. 简洁2. 中间值3.条件语句前言异步编程模式在前端开发过程中，显得越来越重要。从最开始的XHR到封装后的Ajax都在试图解决异步编程过程中的问题。随着ES6新标准的到来，处理异步数据
2021-01-18 14:01:11
135
转载 原型与原型链详解
目录前言一、构造函数二、原型三、原型链1.`__proto__`和`constructor`2.何为原型链前言与大部分面向对象语言不同，ES6之前并没有引入类（class）的概念，JavaScript并非通过类而是直接通过构造函数来创建实例。在介绍原型和原型链之前，我们有必要先复习一下构造函数的知识。一、构造函数构造函数模式的目的就是为了创建一个自定义类，并且创建这个类的实例。构造函数模式中拥有了类和实例的概念，并且实例和实例之间是相互独立的，即实例识别。构造函数就是一个普通的函数，创建方式和普通
2021-01-15 13:50:22
138
转载 JavaScript this 关键字详解
一、前言this关键字是JavaScript中最复杂的机制之一。它是一个很特别的关键字，被自动定义在所有函数的作用域中。对于那些没有投入时间学习this机制的JavaScript开发者来说，this的绑定一直是一件非常令人困惑的事。二、了解this学习this的第一步是明白this既不指向函数自身也不指向函数的词法作用域，你也许被这样的解释误导过，但其实它们都是错误的。随着函数使用场合的不同，this的值会发生变化。但总有一条原则就是JS中的this代表的是当前行为执行的主体，在JS中主要研究的都是
2021-01-14 10:26:20
258
1
转载 深入浅出Javascript闭包
一、引子闭包（closure）是 Javascript 语言的一个难点，面试时常被问及，也是它的特色，很多高级应用都要依靠闭包实现。本文尽可能用简单易懂的话，讲清楚闭包的概念、形成条件及其常见的面试题。我们先来看一个例子：var n = 999;function f1() {console.log(n);}f1() // 999上面代码中，函数f1可以读取全局变量n。但是，函数外部无法读取函数内部声明的变量。function f1() {var n = 999;}console.
2021-01-13 13:47:24
113
转载 浅拷贝与深拷贝
前言在 javascript 中有不同的方法来复制对象，如果你还不熟悉这门语言的话，复制对象时就会很容易掉进陷阱里，那么我们怎样才能正确地复制一个对象呢？读完本文，希望你能明白：什么是深/浅拷贝，他们跟赋值有何区别？深/浅拷贝的实现方式有几种？浅拷贝与深拷贝浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。深拷贝是将一个对象
2021-01-12 12:04:05
130
转载 Webpack4.0各个击破（10）integration篇
目录一. Integration1. 使用Node-API2.使用gulp二. after webpack三. 鸣谢一. Integration下文摘自webpack中文网：首先我们要消除一个常见的误解，webpack是一个模块打包工具(module bundler)，它不是一个任务执行工具，任务执行器是用来自动化处理开发中常见任务的，例如检查(lint)，构建(build)，测试(test)等。相对于打包器，任务执行器所面对的逻辑问题更为上层，你可以使用上层的工具来管理整个持续集成（CI），而把打
2021-01-09 14:13:48
117
转载 2021年Web开发的7大趋势
目录渐进式 Web 应用开发（PWA）深色主题 UI人工智能驱动的聊天机器人单页网站语音识别技术网站安全性云计算延伸阅读技术发展日新月异，所以 Web 开发人员也需要及时了解行业最新的发展趋势。全球有超过 17.4 亿个网站。在每一个细分领域都有无数企业争夺搜索引擎的排名前列位置。开发人员应该了解和发现更多创新的 Web 开发方式，因为这些方法可以帮助企业加快增长速度，并在全球范围内拓展市场和机遇。网站不仅仅是代码的组合，它们更是企业业务的脸面。随着时间的推移，网站开发工作越来越具有创造性。我们还
2021-01-08 14:02:33
279
转载 webpack4.0各个击破（9）—— karma篇
目录一. webpack与自动化测试二. karma-webpack2.1 自动化单元测试库简介2.2 基本使用2.3 默认跑完全部测试用例的场景三. 测试报告四. 配置参考一. webpack与自动化测试webpack对应的关键词是模块化，它的主要任务就是打包和管理模块，所以首先需要明确的概念就是webpack之所以关联自动化测试，是因为它能够为测试脚本提供模块管理的能力，本质上来讲，是将webpack的打包功能嵌入了自动化测试框架，而不是将自动化测试框架作为插件集成进了webpack，理解这个区别是
2021-01-07 09:56:15
187
转载 Webpack4.0各个击破（8）tapable篇
一. tapable概述tapable地址：【tapable-0.2】tapable是webpack的核心框架（4.0以上版本的API已经发生了变化），是一个基于事件流的框架，或者叫做发布订阅模式，或观察者模式，webpack的整个生命周期及其开放的自定义插件系统都离不开tapable的支持，研究其运行原理是阅读webpack源代码的第一步。官方仓库master分支的代码是经过ES6重构的，模块化拆分非常细，且加入了很多非核心逻辑，阅读难度较大。建议先从官方仓库中0.2版本的分支开始学习，整个源码只有4
2021-01-06 09:39:18
165
转载 你应该了解的25个JS技巧
目录1. 类型检查小工具2. 检查是否为空3. 获取列表最后一项4. 带有范围的随机数生成器5. 随机 ID 生成器6. 创建一个范围内的数字7. 格式化 JSON 字符串，stringify 任何内容8. 顺序执行 promise9. 轮询数据10. 等待所有 promise 完成11. 交换数组值的位置12. 条件对象键13. 使用变量作为对象键14. 检查对象里的键15. 删除数组重复项16. 在 ArrayforEach 中执行“break”和“continue”17. 使用别名和默认值来销毁18.
2021-01-05 11:06:43
461
转载 Webpack4.0各个击破（7）plugin篇
一. plugin概述1.1 Plugin的作用plugin机制是webpack中另一个核心概念，它基于事件流框架tapable，你可以参考浏览器环境中的*【DOM事件模型】，【SPA模型中的生命周期钩子】或是node环境中的【EventEmitter模块】*来理解其作用。plugin系统提供给开发者监听webpack生命周期并在特定事件触发时执行指定操作的能力。当然，要写一个真正能实现一定功能的插件，你还需要了解Compiler和Compilation这两个概念，网上可以找到非常多相关的文章（《we
2020-12-31 09:59:21
157
转载 Webpack4.0各个击破（6）loader篇
Webpack4.0各个击破（6）loader篇一. loader综述二. 如何写一个loader三. loader的编译器本质【参考】一. loader综述loader是webpack的核心概念之一，它的基本工作流是将一个文件以字符串的形式读入，对其进行语法分析及转换（或者直接在loader中引入现成的编译工具，例如sass-loader中就引入了node-sass将SCSS代码转换为CSS代码，再交由css-loader处理），然后交由下一环节进行处理，所有载入的模块最终都会经过moduleFact
2020-12-30 14:34:33
104
转载 Webpack4.0各个击破（5）module篇
一. 模块化乱炖脚本合并是基于模块化规范的，javascript模块化是一个非常混乱的话题，各种**【MD】**规范乱飞还要外加一堆【.js】的规范实现。现代化前端项目多基于框架进行开发，较为流行的框架内部基本已经统一遵循ES6的模块化标准，尽管支持度不一，但通过构建工具可以解决浏览器支持滞后的问题；基于nodejs的服务端项目原生支持CommonJs标准；而开发中引入的一些工具类的库，热门的工具类库为了能同时兼容浏览器和node环境，通常会使用UMD标准（Universal Module Defini
2020-12-29 14:26:36
204
转载 webpack4.0各个击破（4）—— Javascript & splitChunk
一. Js模块化开发javascript之所以需要打包合并，是因为模块化开发的存在。开发阶段我们需要将js文件分开写在很多零碎的文件中，方便调试和修改，但如果就这样上线，那首页的http请求数量将直接爆炸。同一个项目，别人2-3个请求就拿到了需要的文件，而你的可能需要20-30个，结果就不用多说了。但是合并脚本可不是*“把所有的碎片文件都拷贝到一个js文件里”*这样就能解决的，不仅要解决命名空间冲突的问题，还需要兼容不同的模块化方案，更别提根据模块之间复杂的依赖关系来手动确定模块的加载顺序了，所以利用自
2020-12-28 14:27:52
295
转载 webpack4.0各个击破（3）—— Assets篇
一. Assets资源的基本处理需求Assets，指项目中被引用的资源，通常为各种格式的图片和字体文件，当然也可能包含各式各样其他扩展名的文件（.json,.xml等），常见的图片和文字资源的处理包括：体积压缩雪碧图合并及引用修正资源的引用路径自动替换二. webpack处理引用资源2.1 资源打包webpack通过file-loader处理资源文件，它会将rules规则命中的资源文件按照配置的信息（路径，名称等）输出到指定目录，并返回其资源定位地址（输出路径，用于生产环境的publicP
2020-12-25 14:03:44
209
转载 webpack4.0各个击破（2）—— CSS篇
webpack作为前端最火的构建工具，是前端自动化工具链最重要的部分，使用门槛较高。本系列是笔者自己的学习记录，比较基础，希望通过问题 + 解决方式的模式，以前端构建中遇到的具体需求为出发点，学习webpack工具中相应的处理办法。（本篇中的参数配置及使用方式均基于webpack4.0版本）一. CSS文件基本处理需求假设项目中的CSS文件均采用预编译语言编写，那么在打包中需要处理的基本问题包括：预编译语言转换样式文件挂载方式选择代码优化（合并及压缩）去除或保留指定格式的注释资源定位路.
2020-12-24 10:42:45
251
转载 Webpack4.0各个击破（1）html篇
webpack作为前端最火的构建工具，是前端自动化工具链最重要的部分，使用门槛较高。本系列是笔者自己的学习记录，比较基础，希望通过问题 + 解决方式的模式，以前端构建中遇到的具体需求为出发点，学习webpack工具中相应的处理办法。（本篇中的参数配置及使用方式均基于webpack4.0版本）一. webpack中的html对于浏览器而言，html文件是用户访问的入口点，也是所有资源的挂载点，所有资源都是通过html中的标记来进行引用的。而在webpack的构建世界里，html只是一个展示板，而en.
2020-12-23 14:40:01
136
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人