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 生成事件，而且还可以自定义事件的类型（不仅仅是浏览器内建事件类型。
根据文档对象模型（Document Object Model，DOM）HTML 文档是由各种对象构成的，可以通过 JavaScript 来操作这些对象以修改页面，如 document.body 表示 <body> 标签的对象，可以通过修改该对象的属性 style.background 设置网页背景颜色。
DOM 变动观察器用于观察页面的 DOM 变化情况，如特性，添加/删除的元素，文本内容，并在其发生更改时触发回调。我们可以用它来跟踪代码其他部分引入的更改，以及与第三方脚本集成。
尺寸和滚动是日常使用网页经常遇到的，包括浏览页面视窗大小和页面滚动，以及元素的尺寸和内部内容的滚动（设置了 overflow）也是十分常见的交互，相关属性值都可以通过 JavaScript 获取。
事件是某事发生的信号，所有的 DOM 节点都生成这样的信号（但事件不仅限于 DOM），JavaScript 就是通过事件与 HTML（DOM 节点）进行交互的。
事件循环是指 JavaScript 引擎在等待任务 -> 执行任务 -> 进入休眠状态等待更多任务，这几个状态之间转换的无限循环。
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
