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