【前端体系课】-- Webpack打包
前言pathWebpack 是由 JS 写成的程序, 会对系统上的文件进行操作, 运行在 Node 环境中, 而 Node 运行在不同的 OS 中 (Linux/MacOS/Windows) Mac OS、Linux 和 window 上的路径时不一样的 window 上会使用 \ 或者 \\ 来作为文件路径的分隔符，当然目前也支持 / 在 Mac OS、Linux 的 Unix 操作系统上使用 / 来作为文件路径的分隔符 为了屏蔽他们之间的差异，在开发中对于路径的操作我们可以使用 path 模块 可移植操作系统接口（英语：Portable Operating System Interface，缩写为 POSIX） Linux 和 Mac OS 都实现了 POSIX 接口 Window 部分电脑实现了 POSIX 接口 常见的 Api从路径中获取信息 dirname：获取文件的父文件夹 basename：获取文件名 extname：获取文件扩展名 路径的拼接：path. join 如果我们希望将多个路径进行拼接，但是不同的操作系统可 ...
【前端体系课】-- 包管理工具
npmNode Package Manager，也就是 Node 包管理器 目前已经不仅仅是 Node 包管理器了, 在前端项目中我们也在使用它来管理依赖的包 安装 安装 Node 的过程会自动安装 npm 工具 管理的包 npm 包的官网: https://www.npmjs.org/ 存放位置 发布自己的包其实是发布到 registry 上面的 当安装一个包时其实是从 registry 上面下载的包 配置文件那么对于一个项目来说，我们如何使用 npm 来管理这么多包呢？ 事实上，我们每一个项目都会有一个对应的配置文件，无论是前端项目（Vue、 React）还是后端项目（Node） 这个配置文件会记录项目信息, 如名称、版本号、项目描述等 也会记录项目所依赖的其他库的信息和依赖库的版本号 这个配置文件就是 package. json 该文件名称固定不可变 得到方式 方式一： 手动从零创建项目， npm init –y 方式二： 通过脚手架创建项目，脚手架会帮助我们生成 package. json，并且里面有相关的配置 常见的配置文件 配置属性必须填写的属性： ...
【前端体系课】-- 模块化
什么是模块化在网页开发的早期，Brendan Eich 开发 JavaScript 仅仅作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的 这个时候我们只需要讲 JavaScript 代码写到 <script>标签中即可 并没有必要放到多个文件中来编写；甚至流行：通常来说 JavaScript 程序的长度只有一行 但是随着前端和 JavaScript 的快速发展，JavaScript 代码变得越来越复杂了 ajax 的出现，前后端开发分离，意味着后端返回数据后，我们需要通过 JavaScript 进行前端页面的渲染 SPA 的出现，前端页面变得更加复杂：包括前端路由、状态管理等等一系列复杂的需求需要通过 JavaScript 来实现 包括 Node 的实现，JavaScript 编写复杂的后端程序，没有模块化是致命的硬伤 没有模块化存在的问题: 比如 var 定义的变量作用域问题； 比如 JavaScript 的面向对象并不能像常规面向对象语言一样使用 class； 比如 JavaScript 没有模块化的问题； 模块化已经是 Jav ...
【前端体系课】-- Node简介
概述 Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于 Chrome V8引擎的 JavaScript 运行环境，使用了一个事件驱动、非阻塞式I/O模型，让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与 PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。 Node.js 是一个基于 V8 JavaScript 引擎的 JavaScript 运行时环境，基于 V8 引擎来执行 JavaScript 的代码，但是不仅仅只有 V8 引擎： V8 可以嵌入到任何 C ++应用程序中，无论是 Chrome 还是 Node.js，事实上都是嵌入了 V8 引擎来执行 JavaScript 代码 但是在 Chrome 浏览器中，还需要解析、渲染 HTML、CSS 等相关渲染引擎，另外还需要提供支持浏览器操作的 API、浏览器自己的事件循环等 在 Node.js 中我们也需要进行一些额外的操作，比如文件系统读/写、网络 IO、加密、压缩解压文件等操作 Node 架构Node 与浏览器的区别: No ...
【前端体系课】-- JS函数
在 JavaScript 中, 函数被当作头等公民, 也称函数式编程 函数可以作为别的函数的参数、函数的返回值，赋值给变量或存储在数据结构中 函数可以在变量和变量之间相互进行赋值 既然函数可以作为一个值相互赋值，那么也可以传递给另外一个函数 foo 这种函数我们也可以称之为高阶函数（Higher-order function） 高阶函数必须至少满足两个条件之一： 接受一个或多个函数作为输入 输出一个函数 立即执行函数Immediately-Invoked Function Expression（IIFE 立即调用函数表达式） 表达的含义是一个函数定义完后被立即执行 第一部分是定义了一个匿名函数，这个函数有自己独立的作用域 第二部分是后面的（），表示这个函数被执行了 这个东西有什么用？ 会创建一个独立的执行上下文环境，可以避免外界访问或修改内部的变量，也避免了对内部变量的修改防止全局变量命名冲突 代码风格
【前端体系课】-- JS变量
声明方式变量的声明： 使用 var 关键字（variable 单词的缩写） ES6 还有 let、 const 声明方式 注意事项: 如果一个变量未声明（declaration）就直接使用，那么会报错； 如果一个变量有声明，但是没有赋值，那么默认值是 undefined 如果没有使用 var 声明变量也可以，但是不推荐(事实上会被添加到window对象上) 数据类型JavaScript 中的值都具有特定的类型 有 8 种基本的数据类型（7 种原始类型和 1 种复杂类型） Number String Boolean Undefined Null Object BigInt Symbol typeof因为 ECMAScript 的类型系统是松散的，所以需要一种手段来确定任意变量的数据类型 typeof 操作符就是为此而生 用法: typeof (x)，它与 typeof x 相同 typeof 是一个操作符，并非是一个函数， () 只是将后续的内容当做一个整体而已 返回值: “undefined”表示值未定义; “boolean”表示值为布尔值; “string”表示 ...
【前端体系课】-- JS概述
前面 HTML 是一种标记语言, CSS 也是一种样式语言 JavaScript 是一种编程语言 计算机语言和编程语言的关系和区别: 计算机语言： 计算机语言（computer language）指用于人与计算机之间通讯的语言，是人与计算机之间传递信息的介质。但是其概念比通用的编程语言要更广泛。例如， HTML 是标记语言，也是计算机语言，但并不是编程语言 编程语言： 编程语言（英语： programming language），是用来定义计算机程序的形式语言。它是一种被标准化的交流技巧, 用来向计算机发出指令，一种能够让程序员准确地定义计算机所需要使用数据的计算机语言，并精确地定义在不同情况下所应当采取的行动 编程语言的特点： 数据和数据结构 指令及流程控制 引用机制和重用机制 设计哲学 JavaScript（通常缩写为 JS）是一种高级的、解释型的编程语言 JavaScript 是一门基于原型、头等函数的语言，是一门多范式的语言，它支持面向对象程序设计，指令式编程，以及函数式编程； HTML 和 CSS 也是前端开发的重要组成部分, 而 JavaScript 是前端开发 ...
【前端体系课】-- Flex布局☆
Flexbox 翻译为弹性盒子: 是一种用于按行或按列布局元素的一维布局方法 元素可以膨胀以填充额外的空间, 收缩以适应更小的空间 通常我们使用 Flexbox 来进行布局的方案称之为 flex 布局 (flex layout) flex 布局是目前 web 开发中使用最多的布局方案 特别在移动端可以说已经完全普及 在 PC 端也几乎已经完全普及和使用, 只有非常少数的网站依然在用浮动来布局 为什么需要 flex 布局 长久以来， CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 floats 和 positioning 但是这两种方法本身存在很大的局限性, 并且他们用于布局实在是无奈之举 原来的布局存在哪些痛点 比如在父内容里面垂直居中一个块内容 比如使容器的所有子项等分可用宽度/高度，而不管有多少宽度/高度可用 比如使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同 相关概念container 和 item 开启了 flex 布局的元素叫 flex container flex container 里面的直接子元素叫做 flex item ...
【前端体系课】-- 元素浮动
元素浮动float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它 最初只用于在一段文本内浮动图像, 实现文字环绕的效果 但是早期的 CSS 标准中并没有提供好的左右布局方案, 因此在一段时间里面它成为网页多列布局的最常用工具 绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果 可以通过 float 属性让元素产生浮动效果， float 的常用取值 none：不浮动，默认值 left：向左浮动 right：向右浮动 浮动规则一元素一旦浮动后, 脱离标准流 朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止 <style> body { margin: 0; overflow: 0; } .item1 { background-color: #f00; } .item2 { background-color: #0f0; }</style>--------------------- ...
【前端体系课】-- 元素定位
元素定位默认情况下，元素都是按照 normal flow, 从左到右、从上到下按顺序摆放好, 互相之间不存在层叠现象 在标准流中，可以使用 margin、 padding 对元素进行定位 其中 margin 还可以设置负数 缺点: 设置一个元素的 margin 或者 padding，通常会影响到标准流中其他元素的定位效果 不便于实现元素层叠的效果 如果我们希望一个元素可以跳出标准流, 单独的对某个元素进行定位 可以通过 position 属性来进行设置 常用取值有 5 个: static：默认值, 静态定位 relative：相对定位 absolute：绝对定位 fixed：固定定位 sticky：粘性定位 static 默认值 元素按照 normal flow 布局 left 、 right、 top、 bottom 没有任何作用 relative 元素按照 normal flow 布局 可以通过 left、 right、 top、 bottom 进行定位 定位参照对象是元素自己原来的位置 应用场景: 一般在不影响其他元素位置的前提下，对当前元素位置 ...