不想成熟的大叔-CSDN博客

原创 HTML&CSS：构建网站不能不说的那些事儿

HTML 和 CSS 作为小白入门前端开发必须掌握的必备技能，跟着大叔一起来看看构建静态网站不能不说的那些事儿吧！

2020-05-06 23:58:32 381 8

原创 const关键字：终于拥有真正的常量声明语句

你好，今天大叔想和你唠扯唠扯 ES6 新增的关键字 —— const。在说 const 关键字之前，大叔先和你唠唠大叔自己对 const 的感受 —— JavaScript 尼玛终于可以声明真正的常量啦！大叔为啥会发出这样滴感叹？实在是“天下苦秦久矣”呀~

2021-01-22 16:45:28 381

原创 let关键字：加强版的var关键字

你好，今天大叔想和你唠扯唠扯 ES6 新增的关键字 —— let。再说 let 的具体用法之前，大叔想先和你说说大叔自己对 let 的感受 —— let 其实就是加强版的 var。为啥这么说呢？别急，且听大叔慢慢道来。

2021-01-21 16:47:54 334

原创 2020年JavaScript全球调查报告，一起来看看趋势吧

尽管2020年很糟糕，但 JavaScript 整体上仍然在设法向前发展。得益于像可选链(Optional Chaining)和空值合并运算符(Nullish Coalescing)这样的新特性，语言本身在不断改进，而 TypeScript 的广泛使用将静态类型化普及到了一个新的高度。

2021-01-17 18:57:16 738

原创本地配置多个 Git 账户信息，满足不同的 Git 平台

因为工作的时候为了访问速度快，我把很多仓库都迁移到了码云。但是呢，个人的一些东西还是保留在了GitHub) 了。这样就存在一个不得不解决的问题，就是两个平台的注册时使用的邮箱不同，用户名也不同。之前都是每次 `push` 的时候输入账号和密码来解决这个问题的，但是这样实在是太麻烦了。于是，求助了一下万能的百度（其实更喜欢用 Google），就有了这篇文章。

2020-11-16 21:27:43 472

本文翻译于Mozilla Developer Network翻译者：金云龙原文地址：https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started什么是 Ajax？Ajax 的意思就是异步的 JavaScript 和 XML。简而言之，它是使用 XMLHttpRequest 对象与服务器端通信的脚本语言。它可以发送及接收各种格式的信息，包括 JSON、XML、HTML 和文本文件。Ajax 最为吸引人的就是它的“异步”特性，这意味着Aj.

2020-11-12 08:53:04 124

原创搞懂什么是Node.js原来这么简单

Node.js 的官方介绍在 Node.js 的官方网站的首页中，有这样一句话来描述 Node.js：Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.翻译过来的意思就是：Node.js 是基于 Chrome 的 V

2020-11-12 08:51:43 435

原创 Node.js 长期支持版本和当前发布版本的区别

首先，关于 Node.js 为什么会同时支持两个版本这个问题，Node.js 官方博客的一篇文章中进行解释：Node.js is growing, and growing fast. As we continue to innovate quickly, we will focus on two different release lines. One release line will fall under our LTS plan. All release lines that have LTS su

2020-11-12 08:50:43 1381

原创一款好看的 VSCode 代码主题和图标主题

此文首发于个人博客自从微软推出 Visual Studio Code 这款编辑器之后，就基本上没用过其他的编辑器和 IDE 了。到底是啥原因这么爱这款编辑器呢？启动速度快、插件市场成熟、主流开发语言基本都支持。这么说吧，在遇到 VS Code 之前我是用 WebStorm 这个的，换了 VS Code 之后简直就是起飞的节奏。有点扯远了，咳咳… …一直以来基本上都是使用 VS Code 默认的主题和图标主题，不是因为好看，是一直都没怎么注意过这个事儿。直到看到了 Ayu 这个主题。废话不多说，先.

2020-11-12 08:49:09 5586

原创用 Cmder 替换自带的命令提示符，让开发更高效

不知道有多少小伙伴和我一样，一直是 Windows 和 Mac 双系统并用的状态。说句心里话 Mac 确实是贵，但真心是用了就回不去。要不是有些软件只有 Windows 版本的，我是真心不想在用 Windows 系统了（玩游戏的小伙伴无视）！扯远了不是，来说主题吧~之前一直苦于 Windows 系统下自带的命令提示符没有 Mac 系统自带的终端好用，偶然间让我知道了 Cmder，于是便百度了一下（国内不翻墙的情况没法用 Google 啊~），居然还有这等神奇存在，原谅我的孤陋寡闻吧！什么是 Cmder

2020-11-12 08:47:45 214

转载举例解析 JavaScript 中的防抖和节流

说明：CSDN 的编辑器无法直接嵌入 CodePen 演示代码，可以看我的个人博客的这篇文章防抖（Debounce）和节流（throttle）都是用来控制某个函数在一定时间内执行多少次的技巧，两者相似而又不同。当我们给 DOM 绑定事件的时候，加了防抖和节流的函数变得特别有用。为什么呢？因为我们在事件和函数执行之间加了一个控制层。记住，我们是无法控制 DOM 事件触发频率的。看下滚动事件的例子： See the Pen Scroll events counter by Corbach.

2020-11-12 08:45:19 147

原创 Express框架如何接收POST方法的请求参数

问题描述使用 Express 框架时，通过 POST 方式处理客户端的请求参数，但是通过 req.query 接收到的一直都是 {}。问题还原为了清晰地记录这个问题，我将问题进行抽离单独还原这个问题的场景。现在抽离之后的工程目录如下：|--app.js|--index.ejs|--package.json这里使用了 ejs 模板引擎，所以要先安装 ejs 和 Express 框架：npm install --save--dev expressnpm install --sve--dev

2020-11-12 08:42:29 859

原创 ECMAScript2017新特性

ES2017 是 ECMAScript 的第 8 个版本，正式名称应该叫做 ECMAScript2017，发布于 2017 年 6 月，相比于 ES2015 来讲 ES2017 也只是一个小版本更新，但是同时也带来了很多有用的新功能。Object 的 values 方法首先是为 Object 对象新增了 values() 方法，这个方法和 ECMAScript5 当中的 keys() 方法非常类似，keys() 方法返回的是对象中所有键所组成的数组，values() 方法返回的是对象中所有值所组成的数组

2020-07-27 15:26:12 354 1

原创 ECMAScript2016新特性

ES2016 正式名称叫做 ECMAScript2016，发布于 2016 年 6 月，与 ES2015 相比 ES2016 只是一个小版本更新，只包含两个小功能。数组的 includes 方法首先，就是数组实例的 includes() 方法，这个方法可以用来检查数组当中是否包含指定成员变得更加简单。在这之前想要检查某个数组当中是否存在某个指定的成员，就必须使用数组的 indexOf() 方法来实现。如下代码所示：const arr = ['foo', 1, NaN, false]console.

2020-07-26 19:48:51 491

原创 ES2015 生成器与生成器的应用场景

生成器在 ECMAScript2015 中新增了一种叫做生成器的函数，英文为 Generator。引入这样一个新特性的目的就是能够在复杂的异步代码中减少回调函数嵌套所产生的的问题，从而提供更好的异步编程的解决方案。这里先来了解一下生成器的语法结构，如下代码所示：function* foo() { console.log('this is generator function.') return '前端课湛'}定义一个生成器函数的方式就是函数表达式定义函数方式的 function 关键字后

2020-07-24 22:58:38 394

原创 ES2015 实现可迭代接口与迭代器模式

for…of 循环在 ECMAScript 中遍历数据有很多中方法，首先是最基本的 for 循环，它比较适用于变量普通的数组，然后就是 for...in 循环，它比较适合于遍历键值对，再有就是一些对象的遍历方法，比如数组的 forEach() 方法。这些各种各样的遍历数据的方式都会有一定的局限性，所以 ECMAScript2015 借鉴了很多其他语言引入了一种全新的 for...of 循环，这种循环方式作为遍历所有数据结构的统一方式。换句话说，只要明白 for…of 内部工作的原理就可以使用这种循环去遍历

2020-07-24 12:52:04 247

原创你是否能看清这个世界，取决于透明度

书接上文，上回书咱们讲了 CSS 里面有关设置颜色值的三种方式。三种方式呢，具体的用法不同、使用的场景可能也不同，但是三种方式咱们都是需要掌握的。尤其是色彩关键字和 RGB 模式这两种，毕竟是目前比较主流的用法。接下来，咱们来讲一讲颜色世界里面的最后一个内容 - 透明度。没错，你没有看错，就是透明度！之前咱们也不是没有说过它，在说 background-color 属性的默认值时，说是 transparent 就表示透明。但是，现在咱们要单独地来讲一讲透明度这个内容。

2020-07-23 21:51:03 169

原创表示一个颜色居然有这么多种方式

书接上文，上回书咱们讲了 CSS 中的前景色和背景色。说白了，所谓的前景色就是给字体设置颜色，不过人家就叫前景色，咱也是没啥办法。背景色相对来说是比较简单的，但是要注意 background-color 属性的默认值是 transparent 表示透明。知道了怎么设置前景色和背景色了，可是咱们一直都是在用代表某个颜色的英文单词来设置颜色的。这时候，你可能会问了，除了这种方式之外，还有没有其他方式同样可以设置颜色呢？接下来，咱们就来说一说可以设置颜色值的类型。

2020-07-23 21:49:44 634

原创 CSS中的颜色其实很简单，不信你看

如果你已经看到了这儿，说明你已经掌握了 CSS 的选择器。学习选择器确实是一个很枯燥乏味的事情，又要记住数量庞大的选择器，还有它们的用法以及使用的时候需要注意的地方。接下来，咱们来讲一讲一个比较有趣的内容 - 颜色。CSS 里面有关颜色属性只有两个，一个是用来设置字体颜色的 color 属性，咱们一般把它称为前景色；一个是用来设置背景颜色的 background-color 属性，咱们一般把它称为背景色。

2020-07-23 21:47:44 354

原创 ES2015 Symbol数据类型

对象的属性名同名的问题在 ECMAScript2015 之前对象的属性名都是字符串类型，而字符串是有可能会重复的，那如果重复的话就会产生冲突。比如创建一个用来数据缓存的对象，约定这个对象是全局共享的，然后通过注释的方式模拟不同的 JavaScript 文件使用这个数据缓存对象的情况。比如在 shared.js 文件中创建这个数据缓存对象，如下代码所示：const cache = {}然后在 a.js 文件当中向数据缓存对象添加缓存数据，如下代码所示：cache['foo'] = Math.ran

2020-07-23 18:06:15 290

原创 ES2015 Set与Map数据结构

Set 数据结构ECMAScript2015 中新增了一个叫做 Set 的全新数据结构，可以理解为集合，它与传统的数组非常的类似。不过，Set 内部的成员是不允许重复的。那也就是说，每一个值在同一个 Set 当中是唯一的。Set 是一个类型，可以通过 new Set() 构造函数创建一个实例对象。如下代码所示：const s = new Set()然后，再通过 Set 的实例方法 add() 向 Set 集合添加数据。如下代码所示：s.add(1).add(2).add(3).add(4)由

2020-07-23 16:18:01 543

原创 ES2015 类、静态方法与类的继承

class 类在此之前，ECMAScript 中都是通过定义函数以及函数的原型对象来实现的类型。如下代码所示：function Person(name) { this.name = name}如果需要这个类型所有实例之间共享一些成员，可以借助于函数对象的 prototype 来实现。如下代码所示：Person.prototype.say = function () { console.log(`hi, my name is ${this.name}`)}自从 ECMAScript2

2020-07-22 23:11:55 237

原创伪元素选择器：真实与虚伪只隔一个选择器

书接上文，上回书咱们讲到了一个特殊的选择器，叫做伪类选择器。这类选择器主要是用来设置 HTML 元素在某种状态下的样式。不是太好掌握，需要仔细地理解、消化，再加上自己的总结才行。接下来，咱们来说一说最后一种选择器，也是一种用法比较特殊的选择器，叫做伪元素选择器。

2020-07-22 22:15:51 352 1

原创伪类选择器：可以预设未来某种状态

书接上文，上回书咱们讲到了 CSS 的群组选择器，这种选择器算是一种把咱们之前所有的选择器整合在一起来定位 HTML 元素的方式。而且到这为止，咱们已经把 CSS 的几类选择器都过了一遍。虽然可能你也只是有个印象而已，不过没有关系的，因为往后咱们接触到的每一块内容都要用到选择器。慢慢地，你也就会熟练起来啦！那么接下来，咱们要说一个 CSS 选择器里面比较特殊的内容，至少我觉得比较特殊，就是伪类选择器。

2020-07-22 22:13:57 157

原创群组选择器：人多肯定好办事儿

书接上文，上回书咱们讲到了 CSS 的层级选择器，它主要是基于 HTML 元素之间的三种关系来定位 HTML 元素的。所以，想要搞清楚层级选择器，首先需要搞清楚 HTML 元素之间的三种关系是怎么样的。接下来，咱们来学习一下第四种选择器，叫做群组选择器。看到这个名字，可能你已经想到了，这种选择器就是把咱们之前已经掌握了的选择器来个整合。

2020-07-22 22:12:09 337

原创层级选择器：利用关系来达到目标

书接上文，上回书咱们说到了 CSS 的基本选择器，虽然只有 5 个，但用法上还是有一些地方是需要咱们注意的。尤其是属性选择器和选择器的优先级别这两块内容上！接下来，咱们来说一说选择器里面的第二类，叫做层级选择器。这种选择器呢，说白了是利用 HTML 元素之间的关系来定位 HTML 元素的。所以说啊，想要把这种选择器搞明白，就得先搞明白 HTML 元素之间的关系是怎么样的。

2020-07-22 22:10:45 212

原创基本选择器：样式设计的必备工具

书接上文，上回书咱们知道了 CSS 选择器能做什么，主要是选择器定位 HTML 元素的三种情况，以及选择器分成了五类。好吧！接下来，咱们就一类一类的来学习吧。

2020-07-22 22:08:13 249

原创选择有很多种，CSS提供了哪些呢

如果你已经看到这儿了，那么恭喜你！你已经成功的入门了。至少现在你知道了 HTML 的基本结构、CSS 和 HTML 之间的关系，以及怎么在 HTML 里面使用 CSS。那么，接下来，咱们将学习对于 CSS 这妹子很重要的选择器。因为它是把 HTML 元素和 CSS 外联样式成功地连接在一起的纽带，说白了，CSS 样式想要作用在某个 HTML 元素上，就得先通过选择器定位到这个元素才可以。

2020-07-22 22:04:56 165

原创想搞定HTML，那就先搞定CSS吧

书接上文，上回书咱们了解了一下 HTML 这妹子的好闺蜜 CSS，知道了 CSS 是谁，为啥她能和 HTML 成为这么好的闺蜜，以及她的成长背景。接下来，咱们要继续深入 CSS，为啥？因为你看到过不化妆就出门的妹子吗？！还是的，现在的 HTML 和 CSS 基本上是形影不离的。咱们想要把 HTML 搞到手，就得先从 CSS 下手。

2020-07-22 22:01:50 166

原创 CSS：一个HTML形影不离的闺蜜

书接上文，上回书咱们讲到了 HTML 的基本结构，了解到在 HTML 的基本结构里面，有着 HTML 声明、元素和元素的属性这些内容。算是完成了咱们和 HTML 这妹子的第一次吧！虽然简单了点，可是简单不好吗？！

2020-07-22 21:59:35 356

原创 HTML：你和我的第一次，就这样简单吗

书接上文，上回书咱们介绍了几种主流的编辑器，重点介绍了 VSCode 编辑器的一些基本用法。那么接下来，将是咱们和 HTML 这妹子的第一次正式约会啦！让咱们深入一点来探索一下妹子吧，是不是很期待呢？！HTML 的基本结构咱们先使用 VSCode 编辑器新建一个文件，把这个文件的扩展名保存为 .html 或者 .htm，比如 MyFirstHTML.html。然后，在文件里面输入 HTML:5，根据提示框的内容进行选择。咱们就得到了 HTML5 这个版本的最基本的内容啦！怎么样？够简单吧。当然了

2020-07-22 21:55:57 258 2

原创 ES2015 Proxy代理对象与Reflect反射对象

Proxy 代理对象如果想要监视某个对象中属性的读写，可以使用 ECMAScript2015 之前的 Object.defineProperty() 方法为对象添加属性，这样的话就可以监测到对象属性的读写过程。这种方法应用的非常广泛，在 Vue3.0 之前的版本就是使用这样的方法来实现数据响应，从而完成双向数据绑定。在 ECMAScript2015 当中设计了 Proxy 类型，它就是专门为对象设置访问代理器的。如果你不能理解什么是代理的话，你可以把它想象成门卫。也就是说，无论你是从里面拿东西还是放东西

2020-07-22 14:08:47 320 1

原创 ES2015 对象字面量增强与扩展方法

对象字面量的增强对象是 ECMAScript 中最常用的数据结构，ECMAScript2015 升级了对象字面量的语法。在 ECMAScript2015 之前使用字面量方式定义一个对象，如下代码所示：const bar = '前端课湛'const obj = { foo: 100, bar: bar}从上述代码可以看到，即使 obj 对象的 bar 属性名和 bar 变量名相同，也需要按照对象字面量的方式进行定义。如下图所示：在 ECMAScript2015 之后，如果变量名与属性

2020-07-21 17:40:04 251 2

原创 ES2015 箭头函数

箭头函数在 ECMAScript2015 简化了函数表达式的定义方式，允许使用 => 符号来定义函数，称为箭头函数。这种函数一来简化了函数的定义，二来多了一些特性。在 ECMAScript2015 之前使用函数表达式定义函数需要使用 function 关键字进行定义，如下代码所示：function inc(number) { return number + 1}在 ECMAScript2015 之后可以使用箭头函数来定义一个完全相同的函数，如代码所示：const inc = n =&

2020-07-20 16:01:46 268

原创 ES2015 函数的参数默认值与剩余参数

参数默认值ECMAScript2015 为函数的形参列表扩展了一些有用的新语法，其中一个叫做参数默认值。在 ECMAScript2015 之前要为函数中的参数定义默认值，需要在函数体中通过逻辑代码来实现。如下代码所示：function foo(enable) { enable = enable || true console.log(`foo invoked - enable: ${enable}`)}foo()这里存在一个很多人经常犯错误的地方，就是很喜欢使用短路运算的方式来设置参数

2020-07-18 11:30:41 352

原创 ES2015 模板字符串与字符串扩展方法

模板字符串在 ECMAScript2015 中增强了定义字符串的方式，ECMAScript2015 之前定义字符串需要通过单引号或者双引号的方式，如下代码所示：const str = 'hello es2015, this is a string.'console.log(str)在 ECMAScript2015 中新增了一种叫做模板字符串的方式来定义字符串，它需要使用反引号（`）进行标识。如下代码所示：const str = `hello es2015, this is a string.`

2020-07-15 23:41:22 269

原创 ES2015 数组与对象的解构

ECMAScript2015 新增了一种从数组或者对象获取指定元素的快捷方式，这是一种新的语法，这种新语法叫做解构。如下代码所示，定义一个数组：const arr = [100, 200, 300]const foo = arr[0]const bar = arr[1]const baz = arr[2]console.log(foo, bar, baz)在 ECMAScript2015 之前想要获取这个数组中的元素，需要通过索引访问对应的值，然后将访问的结果赋值给一个变量。数组的解构而

2020-07-13 23:38:46 436

原创 ES2015 let与块级作用域

什么是块级作用域作用域，顾名思义就是指某个成员可访问的范围。在 ECMAScript5 之前只有两种作用域：全局作用域函数作用域ECMAScript2015 之后新增了块级作用域，这时 ECMAScript 存在三种作用域：全局作用域函数作用域块级作用域块，指的就是一对花括号所包裹起来的范围，比如 if 语句或者 for 语句中的花括号都会产生这里所说的块的概念。if (true) { console.log('前端课湛')}for (var i = 0; i < 1

2020-07-10 22:53:28 265

原创 ECMAScript与ECMAScript2015

ECMAScript 与 JavaScriptECMAScript 也是一种脚本语言，通常缩写为 ES，通常会把它看作是 JavaScript 语言的标准化规范。实际上 JavaScript 是 ECMAScript 的扩展语言，因为在 ECMAScript 只是提供了最基本的语法。通俗点来说，就是约定了我们的代码要如何编写，比如我们要怎么定义变量和函数，要怎么定义分支和循环的语句。ECMAScript 只是停留在语言层面，并不能用来在完成实际功能开发。而我们经常使用的 JavaScript 实现了 E

2020-07-08 17:30:06 329

原创这可能是迄今为止对大前端最好的解释

前端技术领域发展至今，已经不仅仅是 PC 端浏览器网页的开发这么简单了。现在很流行一个词来形成前端技术领域，叫做大前端。但是，至少到目前为止我个人还没有看到一个对大前端的解释非常不错的。不过，接下来的内容我个人觉得是目前我看到对大前端的解释是最好的了。向服务端进发众所周知，一个完整的 Web 应用应该包含服务端和客户端两个部分。很多人认为前端程序员更多地是开发客户端这一部分，但现在比较主流的是服务端中的一部分是需要前端程序员进行参与的。现在前端程序员需要参与到服务端中 MVC 架构的 View 层的

2020-07-07 00:24:11 468

空空如也

空空如也