Ctrl
K
All
Bootstrap
Css
Environment
Html
Javascript
Nuxt3
Tailwind
Typescript
Vue2
Vue3
这个网站收集了我在学习前端开发技术时所做的笔记
收录一些关于前端性能优化的小技巧，包括新特性，常用代码片段等
收录一些关于前端交互的小技巧，包括细节思考、创新设计、实现代码等
收录一些关于前端性能优化的小技巧，包括新特性，常用代码片段，算法伪码等
收录一些关于前端的小技巧，包括新特性，常用代码片段，算法伪码等
网页亲和性/可及性 accessible 设计可以为无障碍设备，如屏幕阅读器，提供元素相关的信息，以方便用户使用。
Bootstrap 提供了多种预设组件，可以直接复制/套用到项目中添加相应的组件，还可以定制出更多样的组件。
除了通过 CDN 加载编译好的 Bootstrap 代码，还可以通过构建系统对原始代码文件进行编译。
CSS
人的大脑对对于动态的物体本能地更关注，因此为网页添加合适的动画可以更引人入胜，如 Google 制作的节约能源主题网站 Your Plan, Your Planet 使用了大量有趣的动画引导用户进行交互探索。
图标字体是一些矢量图标，通过引入 CSS 样式表的方式加载，可用于网页中的小图标，类似于字体可以设置大小和颜色。
CSS 选择器：标签选择器、类选择器、id 选择器、伪元素选择器、伪类选择器、属性选择器、组合选择器；以及选择器的优先级
CSS 3 新特性
CSS 用来设置元素的外观样式，其内容可以设置在不同位置，且具有不同的优先级别。
在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能，类似于脚本语言，可以实现条件语句、循环语句等功能， SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能。通过 interpolation，SassScript 甚至可以生成选择器或属性名，这一点对编写 mixin 有很大帮助。
SCSS
安装两款最受欢迎的跨平台浏览器 Google Chrome 和 Mozilla Firefox，拥有专门面向开发者的强大工具集（即 Developer Tools 或 DevTools）。
Frontend Develop Setup
使用文本编辑器编写代码，可以借助文本编辑器内置/安装插件所提供的功能以提高开发效率。
Emmet（前身为 Zen Coding）提供了一种非常简练的语法规则，相当于内置了一套可复用的 snippets 代码片段，生成对应的 HTML 结构或者 CSS 代码，提高前端开发效率。
设计师使用 Adobe Photoshop 等软件制作网页原型，即具有注释和说明的网站图像。Web 开发者将设计师创建的原型「翻译」为真正的网站，类似于自然语言之间的翻译过程，使用不同的词和短语来表达相同的意思， 前端工程师使用不同的 HTML 元素等创建出与原型效果相同的网页。
HTML 由不同元素 element 组成，其中每个元素都有其特有的标签 <tag>。
HTML
使用标签 <canvas> 在页面创建一个 canvas 画布，一个 2D 平面，并渲染出指定的画面，如形状、图像、文字、图案等。
为 HTML 元素设置标记属性，包括类属性和 id 属性，以提供更个性化的设置，一般用于 CSS 设置样式。
HTML 全称为 Hyper Text Markup Language 是一个专门用来制作网站的语言。
HTML 字符实体是一类有特定功能的字符。由于部分字符不能在 HTML 文档中表示文本内容，即它们是 HTML 中的保留字符或者是键盘上没有按键（无法打印的字符），如果希望正确地显示预留字符，必须在 HTML 源代码中使用它们对应的字符实体。
语义化标签 Semantics Tag 是指具有特定含义的标签，使用语义化元素编写 HTML 文档可以提升网站搜索引擎的优化程度，并提供网页预览，此外使用语义化元素有利于无障碍浏览。
在 2014 年 HTML5 定稿，推出了不少新增的标签与功能。
jade，现称为 pug，是一种 HTML 模板语言，可以在项目中作为 HTML 页面的框架，复用以生成大量类似的网页。
Bredan Eich 在 1995 年创造 JavaScript 是为了交互式及动态元素更容易被添加到网页上。早期叫 LiveScript 后来改为 JavaScript 以借助 Java 营销，最终纳入了 Ecma 国际组织也称为 EcmaScript，根据版本号或基于推出的年份命名为 ES6 或 ES2017 等。
JavaScript
BOM browser object model 浏览器对象模型，是提供给开发者访问浏览器功能的一个接口。
JavaScript Manipulate Browser
许多事件会自动触发浏览器执行某些行为，如点击一个链接会触发导航 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 方法如下
通常有两种设置元素的样式
该文档主要介绍在 Nuxt 项目中常用的 API
Nuxt 3
Nuxt 应用可以部署到具有 Node.js 环境的服务器，也可以将经过 pre-rendered 预渲染的结果部署到 static 静态网页托管平台，或 serverless 和 edge（CDN）环境
Nuxt 为开发者提供了一系列的特色功能，让开发体验更流畅。
Nuxt 提供了一系列的生命周期钩子 Lifecycle Hooks 以便在应用构建和运行的特定阶段执行操作。
Nuxt 是一个全栈开发框架，可以用它同时进行服务端和前端的开发。
Nuxt 3 提供了一个模块系统，它其实是一些异步函数，可以方便地对 Nuxt 3 的各种核心功能进行修改和扩展。
一般 Nuxt 项目会具有以下文件系统
Tailwind CSS 的设计遵循以下的一些规则，了解这些特点可以更快地上手该 UI 框架。
Tailwind CSS
Tailwind 是一个支持定制化的 UI 框架，可以将它进行配置「改造」，以适用于开发更具个性化的用户交互界面。一般在项目的根目录下的 tailwind.config.js 文档对 Tailwind 进行配置操作
Tailwind 是一个 CSS UI 框架，它最大的特点是遵循基础/通用类优先 utility-first 的原则，它只提供了基础的工具类 utility classes（如内边距 padding、字体 text 和 font、动效 transition 等预设类），可以让你直接在 HTML 源码上使用这些基础类，通过编译器的编译，生成相应的样式表，从而为页面设置相应的外观样式。
该文章介绍了如何使用 Tailwind 和 CSS 自定义变量实现网页多主题切换。
Tailwind 提供了大量开箱即用的基础类，将它们添加到 HTML 元素类名中，可以在最终的样式表中编译出相应的样式
Tailwind 一般通过 npm 安装，以模块引入项目中，并需要经过编译后才可以使用。
Tailwind v3 提供了多种方式在项目中引入该 UI 框架：
JavaScript 中有很多内置对象，如 Boolean、Error、Date、RegExp 等，在 TypeScript 中当做定义好了的类型直接使用：
TypeScript
TypeScript 提供了类型系统，除了 JavaScript 提供了的数据类型，还添加了额外的数据类型，如枚举 enum，还支持自定义更复杂的数据类型，类似于数据库的 Scheme。
JavaScript 是一门动态类型的编程语言：它没有类型约束，一个变量可能初始化时是字符串，过一会儿又被赋值为数字。由于隐式类型转换的存在，有的变量的类型很难在运行前就确定。
有多种方式设定变量的数据类型。
因为浏览器或 Node.js 环境只能运行 JavaScript 代码，所以需要先将 TypeScript 编译为 JavaScript，所以开发时需要安装 TypeScript 编译器。
当引入第三方库时，我们会使用这些库 export 的变量，这时需要引用它的声明文件，其中一般包含对该库所提供变量的声明，和相应数据类型的定义，以便 ts 编译器可以识别这些变量，而不会在编译时报错，同时获得代码补全、接口提示等功能。
过渡动效是主要针对元素素进入（显示）/离开（隐藏）和列表（重排）的情况设置动效，基于 CSS3 的 transition 和 animation 属性实现的。
Vue 2
Vue 是渐进式 JavaScript 框架，与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。因此既可以嵌入到已有项目中，优化其中一部分代码；也可以基于 Vue 三大套件开发管理大型项目。
Vue 中的组件是页面中的一部分，通过层层拼装和复用，最终形成了一个完整的页面。
Vue Router 是 Vue.js 官方的路由管理器（插件），它将组件 components 映射到路由 routes，然后告诉 Vue Router 在哪里渲染它们，:IconCustom{name="mdi:youtube" iconClass="text-red-500"} 这样就可以在单页面应用中实现类似切换 url 而更新页面的效果。
插件通常用来为 Vue 添加全局功能，如 vue-router，可以将插件作为载体，一次载入多种预设功能，如全局方法或 property、全局指令、全局 mixin、实例方法等。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式（插件），它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vue 内置支持的过渡动效主要是针对元素素进入（显示）/离开（隐藏）和列表（重排）的情况，基于 CSS3 的 transition 和 animation 属性实现的。
Vue 3
介绍 Vue 3 的基础使用方法，主要针对与 Vue 2 的不同点。
Vue 的组件本质上是一个具有预定义选项的实例，我们使用小型的、独立和通常可复用的组件，通过层层拼装，最终形成了一个完整的页面。
Vue 通过组件可以实现代码重用，但是由于组件基于各种选项，如 data、computed、methods、watch 等，使得同一个功能的逻辑分离四散，所以在处理单个逻辑关注点时，不得不在相关代码的选项块之间不断「跳转」，这种碎片化使得理解和维护复杂组件变得十分困难。
TypeScript 是 JavaScript 的超集，它在完整保留 JavaScript 运行时行为的基础上，通过提供了类型系统，引入静态类型系统来提高代码的可维护性，在很大程度上弥补了 JavaScript 的缺点，减少可能出现的 bug。
通过 Vue.js 已经用组件搭建出我们的应用，当加入 Vue Router 时，我们需要做的就是将（视图）组件映射到路由（URL）上，让 Vue Router 知道在哪里渲染它们，在单页面应用实现类似多页面切换的效果。
Copyright © 2024 Ben
Theme BlogiNote
Icons from Icônes
More
Theme
Search
