Theme
Tags
Series
JavaScript 是一门动态类型的编程语言：它没有类型约束，一个变量可能初始化时是字符串，过一会儿又被赋值为数字。由于隐式类型转换的存在，有的变量的类型很难在运行前就确定。
Nuxt 是一个全栈开发框架，可以用它同时进行服务端和前端的开发。
Tailwind 是一个 CSS UI 框架，它最大的特点是遵循基础/通用类优先 utility-first 的原则，它只提供了基础的工具类 utility classes（如内边距 padding、字体 text 和 font、动效 transition 等预设类），可以让你直接在 HTML 源码上使用这些基础类，通过编译器的编译，生成相应的样式表，从而为页面设置相应的外观样式。
Vue 是渐进式 JavaScript 框架，与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。因此既可以嵌入到已有项目中，优化其中一部分代码；也可以基于 Vue 三大套件开发管理大型项目。
介绍 Vue 3 的基础使用方法，主要针对与 Vue 2 的不同点。
因为浏览器或 Node.js 环境只能运行 JavaScript 代码，所以需要先将 TypeScript 编译为 JavaScript，所以开发时需要安装 TypeScript 编译器。
Tailwind 一般通过 npm 安装，以模块引入项目中，并需要经过编译后才可以使用。
Vue 中的组件是页面中的一部分，通过层层拼装和复用，最终形成了一个完整的页面。
Vue 的组件本质上是一个具有预定义选项的实例，我们使用小型的、独立和通常可复用的组件，通过层层拼装，最终形成了一个完整的页面。
TypeScript 提供了类型系统，除了 JavaScript 提供了的数据类型，还添加了额外的数据类型，如枚举 enum，还支持自定义更复杂的数据类型，类似于数据库的 Scheme。
Nuxt 应用可以部署到具有 Node.js 环境的服务器，也可以将经过 pre-rendered 预渲染的结果部署到 static 静态网页托管平台，或 serverless 和 edge（CDN）环境
Tailwind v3 提供了多种方式在项目中引入该 UI 框架：
过渡动效是主要针对元素素进入（显示）/离开（隐藏）和列表（重排）的情况设置动效，基于 CSS3 的 transition 和 animation 属性实现的。
Vue 内置支持的过渡动效主要是针对元素素进入（显示）/离开（隐藏）和列表（重排）的情况，基于 CSS3 的 transition 和 animation 属性实现的。
有多种方式设定变量的数据类型。
一般 Nuxt 项目会具有以下文件系统
Tailwind CSS 的设计遵循以下的一些规则，了解这些特点可以更快地上手该 UI 框架。
插件通常用来为 Vue 添加全局功能，如 vue-router，可以将插件作为载体，一次载入多种预设功能，如全局方法或 property、全局指令、全局 mixin、实例方法等。
Vue 通过组件可以实现代码重用，但是由于组件基于各种选项，如 data、computed、methods、watch 等，使得同一个功能的逻辑分离四散，所以在处理单个逻辑关注点时，不得不在相关代码的选项块之间不断「跳转」，这种碎片化使得理解和维护复杂组件变得十分困难。
JavaScript 中有很多内置对象，如 Boolean、Error、Date、RegExp 等，在 TypeScript 中当做定义好了的类型直接使用：
Nuxt 为开发者提供了一系列的特色功能，让开发体验更流畅。
Tailwind 是一个支持定制化的 UI 框架，可以将它进行配置「改造」，以适用于开发更具个性化的用户交互界面。一般在项目的根目录下的 tailwind.config.js 文档对 Tailwind 进行配置操作
Vue Router 是 Vue.js 官方的路由管理器（插件），它将组件 components 映射到路由 routes，然后告诉 Vue Router 在哪里渲染它们，:IconCustom{name="mdi:youtube" iconClass="text-red-500"} 这样就可以在单页面应用中实现类似切换 url 而更新页面的效果。
通过 Vue.js 已经用组件搭建出我们的应用，当加入 Vue Router 时，我们需要做的就是将（视图）组件映射到路由（URL）上，让 Vue Router 知道在哪里渲染它们，在单页面应用实现类似多页面切换的效果。
当引入第三方库时，我们会使用这些库 export 的变量，这时需要引用它的声明文件，其中一般包含对该库所提供变量的声明，和相应数据类型的定义，以便 ts 编译器可以识别这些变量，而不会在编译时报错，同时获得代码补全、接口提示等功能。
Tailwind 提供了大量开箱即用的基础类，将它们添加到 HTML 元素类名中，可以在最终的样式表中编译出相应的样式
Nuxt 3 提供了一个模块系统，它其实是一些异步函数，可以方便地对 Nuxt 3 的各种核心功能进行修改和扩展。
该文章介绍了如何使用 Tailwind 和 CSS 自定义变量实现网页多主题切换。
TypeScript 是 JavaScript 的超集，它在完整保留 JavaScript 运行时行为的基础上，通过提供了类型系统，引入静态类型系统来提高代码的可维护性，在很大程度上弥补了 JavaScript 的缺点，减少可能出现的 bug。
Nuxt 提供了一系列的生命周期钩子 Lifecycle Hooks 以便在应用构建和运行的特定阶段执行操作。
该文档主要介绍在 Nuxt 项目中常用的 API
收录一些关于前端性能优化的小技巧，包括新特性，常用代码片段等
收录一些关于前端交互的小技巧，包括细节思考、创新设计、实现代码等
收录一些关于前端性能优化的小技巧，包括新特性，常用代码片段，算法伪码等
收录一些关于前端的小技巧，包括新特性，常用代码片段，算法伪码等
网页亲和性/可及性 accessible 设计可以为无障碍设备，如屏幕阅读器，提供元素相关的信息，以方便用户使用。
Bootstrap 提供了多种预设组件，可以直接复制/套用到项目中添加相应的组件，还可以定制出更多样的组件。
除了通过 CDN 加载编译好的 Bootstrap 代码，还可以通过构建系统对原始代码文件进行编译。
HTML 由不同元素 element 组成，其中每个元素都有其特有的标签 <tag>。
使用标签 <canvas> 在页面创建一个 canvas 画布，一个 2D 平面，并渲染出指定的画面，如形状、图像、文字、图案等。
为 HTML 元素设置标记属性，包括类属性和 id 属性，以提供更个性化的设置，一般用于 CSS 设置样式。
HTML 全称为 Hyper Text Markup Language 是一个专门用来制作网站的语言。
HTML 字符实体是一类有特定功能的字符。由于部分字符不能在 HTML 文档中表示文本内容，即它们是 HTML 中的保留字符或者是键盘上没有按键（无法打印的字符），如果希望正确地显示预留字符，必须在 HTML 源代码中使用它们对应的字符实体。
语义化标签 Semantics Tag 是指具有特定含义的标签，使用语义化元素编写 HTML 文档可以提升网站搜索引擎的优化程度，并提供网页预览，此外使用语义化元素有利于无障碍浏览。
在 2014 年 HTML5 定稿，推出了不少新增的标签与功能。
jade，现称为 pug，是一种 HTML 模板语言，可以在项目中作为 HTML 页面的框架，复用以生成大量类似的网页。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式（插件），它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
人的大脑对对于动态的物体本能地更关注，因此为网页添加合适的动画可以更引人入胜，如 Google 制作的节约能源主题网站 Your Plan, Your Planet 使用了大量有趣的动画引导用户进行交互探索。
图标字体是一些矢量图标，通过引入 CSS 样式表的方式加载，可用于网页中的小图标，类似于字体可以设置大小和颜色。
CSS 选择器：标签选择器、类选择器、id 选择器、伪元素选择器、伪类选择器、属性选择器、组合选择器；以及选择器的优先级
CSS 3 新特性
CSS 用来设置元素的外观样式，其内容可以设置在不同位置，且具有不同的优先级别。
在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能，类似于脚本语言，可以实现条件语句、循环语句等功能， SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能。通过 interpolation，SassScript 甚至可以生成选择器或属性名，这一点对编写 mixin 有很大帮助。
安装两款最受欢迎的跨平台浏览器 Google Chrome 和 Mozilla Firefox，拥有专门面向开发者的强大工具集（即 Developer Tools 或 DevTools）。
使用文本编辑器编写代码，可以借助文本编辑器内置/安装插件所提供的功能以提高开发效率。
Emmet（前身为 Zen Coding）提供了一种非常简练的语法规则，相当于内置了一套可复用的 snippets 代码片段，生成对应的 HTML 结构或者 CSS 代码，提高前端开发效率。
设计师使用 Adobe Photoshop 等软件制作网页原型，即具有注释和说明的网站图像。Web 开发者将设计师创建的原型「翻译」为真正的网站，类似于自然语言之间的翻译过程，使用不同的词和短语来表达相同的意思， 前端工程师使用不同的 HTML 元素等创建出与原型效果相同的网页。
Bredan Eich 在 1995 年创造 JavaScript 是为了交互式及动态元素更容易被添加到网页上。早期叫 LiveScript 后来改为 JavaScript 以借助 Java 营销，最终纳入了 Ecma 国际组织也称为 EcmaScript，根据版本号或基于推出的年份命名为 ES6 或 ES2017 等。
BOM browser object model 浏览器对象模型，是提供给开发者访问浏览器功能的一个接口。
许多事件会自动触发浏览器执行某些行为，如点击一个链接会触发导航 navigation 到该 URL，点击表单的提交按钮会触发提交表单内容到服务器的行为。
Cookie 是直接存储在浏览器中的一小段字符串数据，可以将它看作是一个浏览器上的小型数据库（4k 大小）。
在网页定位元素时大多数 JavaScript 方法处理的是以下两种坐标系中之一
除了让用户与浏览器交互触发生成事件，还可以使用 JavaScript 生成事件，而且还可以自定义事件的类型（不仅仅是浏览器内建事件类型。
DOM 变动观察器用于观察页面的 DOM 变化情况，如特性，添加/删除的元素，文本内容，并在其发生更改时触发回调。我们可以用它来跟踪代码其他部分引入的更改，以及与第三方脚本集成。
尺寸和滚动是日常使用网页经常遇到的，包括浏览页面视窗大小和页面滚动，以及元素的尺寸和内部内容的滚动（设置了 overflow）也是十分常见的交互，相关属性值都可以通过 JavaScript 获取。
根据文档对象模型（Document Object Model，DOM）HTML 文档是由各种对象构成的，可以通过 JavaScript 来操作这些对象以修改页面，如 document.body 表示 <body> 标签的对象，可以通过修改该对象的属性 style.background 设置网页背景颜色。
事件循环是指 JavaScript 引擎在等待任务 -> 执行任务 -> 进入休眠状态等待更多任务，这几个状态之间转换的无限循环。
事件是某事发生的信号，所有的 DOM 节点都生成这样的信号（但事件不仅限于 DOM），JavaScript 就是通过事件与 HTML（DOM 节点）进行交互的。
File System Access API 允许 Web 应用拥有读写本地设备或线上的文件系统的能力。
表单 form 是商务网站最常见的元素，如 <input> 的控件，它有许多特殊的属性和事件。
IndexedDB 是一个浏览器内置的数据库，它比 localStorage 强大得多，它的本机接口是基于事件的。
Web 存储对象 localStorage 和 sessionStorage 允许我们在浏览器中保存键/值对。在页面刷新后（对于 sessionStorage）甚至浏览器完全重启（对于 localStorage）后，数据仍然保留在浏览器中。
修改 DOM 是创建「实时」页面的关键。常用的修改 DOM 方法如下
通常有两种设置元素的样式
在浏览器的所有事件中， UI（user interface）用户界面交互事件是最常见的，如鼠标事件、按键事件等。
数组是一种特殊的数据结构，适用于存储和管理有序的数据项。数组与对象类似，各个元素使用逗号 , 分隔，但这些值都是有顺序的，并用方括号 [] 包括。
代码通常时同步的，即语句依次按顺序执行，JavaScript 线程模型可以确保语句在一个时间轴上运行。异步代码则是不能保证会在一个不间断的时间轴上执行，如网络请求、一些API方法等未知完成使劲按的代码，均为异步操作。
true 和 false 为布尔值
中断语句用以结束并跳出当前该层（嵌套式结构）代码。
在一些场景中需要等待另一个程序执行返回后才可以执行相应的操作，如需要等待脚本加载完成后才可以对其中的函数进行调用，JavaScript 主机 host 提供的许多函数或事件监听器实现这种计划的异步行为 asynchronous actions，如函数 setTimeout（根据给定的时间延后执行）、事件 onload（资源加载完以后执行给定的操作）、onerror（资源加载发生错误执行给定的操作）等。
为了根据不同条件执行不同的操作，可以使用条件语句或 ? 运算符。
柯里化 Currying 是一种函数的高阶技术，被用于许多编程语言中，它是指将 f(a,b,c) 转换为可以被以 f(a)(b)(c) 的形式进行调用。
日期 Date 是一个新的内建对象，通过该对象可以方便地获取日期，该对象还由很多方法以方便地修改时间或测量时间。
在 ES6 中新增了解构赋值 destructuring 这一种特殊的赋值语法，它可以将数组（或其他可迭代对象）或普通对象「拆包」为到一系列变量中，因为有时候可能不需要一个整体的对象/数组而只需要其中部分信息。
脚本可能出现错误，是由于编写出错，或是与预期不同的用户输入，或是错误的服务端响应以及其他数千种原因。
调用 eval(“codeString") 会运行代码字符串，并返回最后一条语句的结果。
函数是将执行相同步骤的代码打包/封装成可重复使用的代码块，并在程序中更方便使用（调用）。JavaScript 内置多种函数，也允许开发者创建自己的函数。
创建的原始值、对象、函数等一切都会占用内存，当我们不再需要某变量或数据时，JavaScript 引擎会自动地进行清除，该操作称为垃圾回收。
常规函数只会返回一个单一值（或者不返回任何值），而使用特殊的语法结构 function* funcName() {...}，即所谓的 Generator 函数，可以按需一个接一个地返回（使用关键字 yield）多个值。
链表元素是一个符合递归结构的特殊对象，这种数据结构可以实现快速插入/删除元素。
循环有各种类型，但是它们本质上都实现相同的操作：重复一定次数地执行特定操作。
映射 Map 是 ES 6 新增的一种特殊的内置对象，它是一个键值对的数据项的集合，通过构造函数 Map() 创建一个（空）映射，使用方法 .set(key, value) 向映射添加键值对，使用方法 .get(key)通过键 key 访问相应的值。
随着我们的应用越来越大需要将其拆分成多个文件，即所谓的模块 module，一个模块 module 就是一个文件/脚本，通常包含一个类或一个函数库。语言级的模块系统在 2015 年的时候出现在了标准（ES6）中，此后逐渐发展，现在已经得到了所有主流浏览器和 Node.js 的支持。
数字类型的数据包括任何正负整数以及小数，JavaScript 不区分浮点数和整数，数字都以 64 位浮点数形式存储，也称为「双精度」，其中 52 个被使用存储这些数字，其中 11 个存储小数点的位置（它们对于整数为零），1 位用于符号。
对象是 JavaScript 支持的一种数据类型，与七种原生类型不同，对象可以用来存储键值对和更复杂的实体。
JavaScript 支持多种操作符/运算符，且不同数据类型可支持的运算符和运算含义也不同。
集合 Set 是 ES6 中新增的内置对象，它是一些值的集合，其中每个值都是唯一不重复的，这和数学意义上的集合相同。使用起来类似于数组，但 Set 与数组之间的最大区别是：
字符串是一串字符集合，它是由零个或多个 16 位 Unicode 字符组成的字符序列，并用引号（单引号、双引号、反引号）括起来。使用字符串来表示句子、名称、地址等数据。
在 ES6 中原生数据类型新增了 Symbol 唯一标识符，是一种创建后值不可变的数据类型，常用于作为对象的属性名（以标识唯一属性）。
在对象方法/函数中需要访问对象中存储的信息才能完成其工作，为了访问该对象一般在方法中可以使用 this 关键字，用以表示调用函数/方法的对象（即函数作为一个对象的方法被调用，则关键字 this 表示该对象）。
变量用来储存信息，使用赋值操作符 = 为变量绑定数据（数据保存到与该变量相关联的内存区域），数据通过变量名进行存取操作。