<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/">
    <channel>
        <title>Frontend Note</title>
        <link>https://frontend-note.benbinbin.com</link>
        <description>This website contains some notes I made while learning frontend technology.</description>
        <lastBuildDate>Wed, 30 Oct 2024 14:07:21 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <image>
            <title>Frontend Note</title>
            <url>https://frontend-note.benbinbin.com/avatar.png</url>
            <link>https://frontend-note.benbinbin.com</link>
        </image>
        <copyright>All rights reserved 2024, Benbinbin</copyright>
        <item>
            <title><![CDATA[About]]></title>
            <link>https://frontend-note.benbinbin.com/about</link>
            <guid>/about</guid>
            <description><![CDATA[Hi 👋 我是 Ben]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Bootstrap 无障碍设计]]></title>
            <link>https://frontend-note.benbinbin.com/article/bootstrap/bootstrap-accessible</link>
            <guid>/article/bootstrap/bootstrap-accessible</guid>
            <description><![CDATA[网页亲和性/可及性 accessible 设计可以为无障碍设备，如屏幕阅读器，提供元素相关的信息，以方便用户使用。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Bootstrap 基础样式]]></title>
            <link>https://frontend-note.benbinbin.com/article/bootstrap/bootstrap-basic</link>
            <guid>/article/bootstrap/bootstrap-basic</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Bootstrap 组件]]></title>
            <link>https://frontend-note.benbinbin.com/article/bootstrap/bootstrap-component</link>
            <guid>/article/bootstrap/bootstrap-component</guid>
            <description><![CDATA[Bootstrap 提供了多种预设组件，可以直接复制/套用到项目中添加相应的组件，还可以定制出更多样的组件。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[定制 Bootstrap]]></title>
            <link>https://frontend-note.benbinbin.com/article/bootstrap/bootstrap-custom</link>
            <guid>/article/bootstrap/bootstrap-custom</guid>
            <description><![CDATA[除了通过 CDN 加载编译好的 Bootstrap 代码，还可以通过构建系统对原始代码文件进行编译。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Bootstrap 简介]]></title>
            <link>https://frontend-note.benbinbin.com/article/bootstrap/bootstrap-introduction</link>
            <guid>/article/bootstrap/bootstrap-introduction</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Bootstrap 布局]]></title>
            <link>https://frontend-note.benbinbin.com/article/bootstrap/bootstrap-layout</link>
            <guid>/article/bootstrap/bootstrap-layout</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[CSS 高级语法]]></title>
            <link>https://frontend-note.benbinbin.com/article/css/css-advance-style</link>
            <guid>/article/css/css-advance-style</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[CSS 动画]]></title>
            <link>https://frontend-note.benbinbin.com/article/css/css-animation</link>
            <guid>/article/css/css-animation</guid>
            <description><![CDATA[人的大脑对对于动态的物体本能地更关注，因此为网页添加合适的动画可以更引人入胜，如 Google 制作的节约能源主题网站 Your Plan, Your Planet 使用了大量有趣的动画引导用户进行交互探索。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[CSS 常用样式]]></title>
            <link>https://frontend-note.benbinbin.com/article/css/css-basic-style</link>
            <guid>/article/css/css-basic-style</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[CSS 图标字体]]></title>
            <link>https://frontend-note.benbinbin.com/article/css/css-icon-font</link>
            <guid>/article/css/css-icon-font</guid>
            <description><![CDATA[图标字体是一些矢量图标，通过引入 CSS 样式表的方式加载，可用于网页中的小图标，类似于字体可以设置大小和颜色。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[CSS 概述]]></title>
            <link>https://frontend-note.benbinbin.com/article/css/css-introudction</link>
            <guid>/article/css/css-introudction</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[CSS 网页布局]]></title>
            <link>https://frontend-note.benbinbin.com/article/css/css-layout</link>
            <guid>/article/css/css-layout</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[CSS 选择器]]></title>
            <link>https://frontend-note.benbinbin.com/article/css/css-selector</link>
            <guid>/article/css/css-selector</guid>
            <description><![CDATA[CSS 选择器：标签选择器、类选择器、id 选择器、伪元素选择器、伪类选择器、属性选择器、组合选择器；以及选择器的优先级]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[CSS3]]></title>
            <link>https://frontend-note.benbinbin.com/article/css/css3</link>
            <guid>/article/css/css3</guid>
            <description><![CDATA[CSS 3 新特性]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[引用 CSS]]></title>
            <link>https://frontend-note.benbinbin.com/article/css/refer-to-css</link>
            <guid>/article/css/refer-to-css</guid>
            <description><![CDATA[CSS 用来设置元素的外观样式，其内容可以设置在不同位置，且具有不同的优先级别。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[SCSS 进阶语法]]></title>
            <link>https://frontend-note.benbinbin.com/article/css/scss/scss-advance</link>
            <guid>/article/css/scss/scss-advance</guid>
            <description><![CDATA[在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能，类似于脚本语言，可以实现条件语句、循环语句等功能， SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能。通过 interpolation，SassScript 甚至可以生成选择器或属性名，这一点对编写 mixin 有很大帮助。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[SCSS 基础语法]]></title>
            <link>https://frontend-note.benbinbin.com/article/css/scss/scss-basic</link>
            <guid>/article/css/scss/scss-basic</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[简介]]></title>
            <link>https://frontend-note.benbinbin.com/article/css/scss/scss-introudction</link>
            <guid>/article/css/scss/scss-introudction</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[前端设计小技巧]]></title>
            <link>https://frontend-note.benbinbin.com/article/design</link>
            <guid>/article/design</guid>
            <description><![CDATA[收录一些关于前端性能优化的小技巧，包括新特性，常用代码片段等]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[浏览器]]></title>
            <link>https://frontend-note.benbinbin.com/article/environment/browser</link>
            <guid>/article/environment/browser</guid>
            <description><![CDATA[安装两款最受欢迎的跨平台浏览器 Google Chrome 和 Mozilla Firefox，拥有专门面向开发者的强大工具集（即 Developer Tools 或 DevTools）。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[开发者工具]]></title>
            <link>https://frontend-note.benbinbin.com/article/environment/console</link>
            <guid>/article/environment/console</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[开发调试]]></title>
            <link>https://frontend-note.benbinbin.com/article/environment/debug</link>
            <guid>/article/environment/debug</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[文本编辑器]]></title>
            <link>https://frontend-note.benbinbin.com/article/environment/editor</link>
            <guid>/article/environment/editor</guid>
            <description><![CDATA[使用文本编辑器编写代码，可以借助文本编辑器内置/安装插件所提供的功能以提高开发效率。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[emmet]]></title>
            <link>https://frontend-note.benbinbin.com/article/environment/emmet</link>
            <guid>/article/environment/emmet</guid>
            <description><![CDATA[Emmet（前身为 Zen Coding）提供了一种非常简练的语法规则，相当于内置了一套可复用的 snippets 代码片段，生成对应的 HTML 结构或者 CSS 代码，提高前端开发效率。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[前端编程样式指南]]></title>
            <link>https://frontend-note.benbinbin.com/article/environment/frontend-code-style</link>
            <guid>/article/environment/frontend-code-style</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 控制台]]></title>
            <link>https://frontend-note.benbinbin.com/article/environment/javascript-console</link>
            <guid>/article/environment/javascript-console</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[从原型到网站]]></title>
            <link>https://frontend-note.benbinbin.com/article/environment/prototype-to-website</link>
            <guid>/article/environment/prototype-to-website</guid>
            <description><![CDATA[设计师使用 Adobe Photoshop 等软件制作网页原型，即具有注释和说明的网站图像。Web 开发者将设计师创建的原型「翻译」为真正的网站，类似于自然语言之间的翻译过程，使用不同的词和短语来表达相同的意思， 前端工程师使用不同的 HTML 元素等创建出与原型效果相同的网页。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[HTML 常用元素]]></title>
            <link>https://frontend-note.benbinbin.com/article/html/html-basic-element</link>
            <guid>/article/html/html-basic-element</guid>
            <description><![CDATA[HTML 由不同元素 element 组成，其中每个元素都有其特有的标签 <tag>。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[HTML Canvas]]></title>
            <link>https://frontend-note.benbinbin.com/article/html/html-canvas</link>
            <guid>/article/html/html-canvas</guid>
            <description><![CDATA[使用标签 <canvas> 在页面创建一个 canvas 画布，一个 2D 平面，并渲染出指定的画面，如形状、图像、文字、图案等。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[HTML 元素标记属性]]></title>
            <link>https://frontend-note.benbinbin.com/article/html/html-class-and-id</link>
            <guid>/article/html/html-class-and-id</guid>
            <description><![CDATA[为 HTML 元素设置标记属性，包括类属性和 id 属性，以提供更个性化的设置，一般用于 CSS 设置样式。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[HTML 概述]]></title>
            <link>https://frontend-note.benbinbin.com/article/html/html-introduction</link>
            <guid>/article/html/html-introduction</guid>
            <description><![CDATA[HTML 全称为 Hyper Text Markup Language 是一个专门用来制作网站的语言。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[HTML 字符实体]]></title>
            <link>https://frontend-note.benbinbin.com/article/html/html-named-character</link>
            <guid>/article/html/html-named-character</guid>
            <description><![CDATA[HTML 字符实体是一类有特定功能的字符。由于部分字符不能在 HTML 文档中表示文本内容，即它们是 HTML 中的保留字符或者是键盘上没有按键（无法打印的字符），如果希望正确地显示预留字符，必须在 HTML 源代码中使用它们对应的字符实体。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[HTML 语义化元素]]></title>
            <link>https://frontend-note.benbinbin.com/article/html/html-semantics-element</link>
            <guid>/article/html/html-semantics-element</guid>
            <description><![CDATA[语义化标签 Semantics Tag 是指具有特定含义的标签，使用语义化元素编写 HTML 文档可以提升网站搜索引擎的优化程度，并提供网页预览，此外使用语义化元素有利于无障碍浏览。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[HTML文档结构]]></title>
            <link>https://frontend-note.benbinbin.com/article/html/html-structure</link>
            <guid>/article/html/html-structure</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[HTML5]]></title>
            <link>https://frontend-note.benbinbin.com/article/html/html5</link>
            <guid>/article/html/html5</guid>
            <description><![CDATA[在 2014 年 HTML5 定稿，推出了不少新增的标签与功能。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Pug]]></title>
            <link>https://frontend-note.benbinbin.com/article/html/pug</link>
            <guid>/article/html/pug</guid>
            <description><![CDATA[jade，现称为 pug，是一种 HTML 模板语言，可以在项目中作为 HTML 页面的框架，复用以生成大量类似的网页。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[前端交互小技巧]]></title>
            <link>https://frontend-note.benbinbin.com/article/interaction</link>
            <guid>/article/interaction</guid>
            <description><![CDATA[收录一些关于前端交互的小技巧，包括细节思考、创新设计、实现代码等]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 概述]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/js-introduction</link>
            <guid>/article/javascript/js-introduction</guid>
            <description><![CDATA[Bredan Eich 在 1995 年创造 JavaScript 是为了交互式及动态元素更容易被添加到网页上。早期叫 LiveScript 后来改为 JavaScript 以借助 Java 营销，最终纳入了 Ecma 国际组织也称为 EcmaScript，根据版本号或基于推出的年份命名为 ES6 或 ES2017 等。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript BOM]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/manipulate-browser/js-bom</link>
            <guid>/article/javascript/manipulate-browser/js-bom</guid>
            <description><![CDATA[BOM browser object model 浏览器对象模型，是提供给开发者访问浏览器功能的一个接口。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 浏览器默认行为]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/manipulate-browser/js-browser-default-behavior</link>
            <guid>/article/javascript/manipulate-browser/js-browser-default-behavior</guid>
            <description><![CDATA[许多事件会自动触发浏览器执行某些行为，如点击一个链接会触发导航 navigation 到该 URL，点击表单的提交按钮会触发提交表单内容到服务器的行为。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 浏览器环境]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/manipulate-browser/js-browser-environment</link>
            <guid>/article/javascript/manipulate-browser/js-browser-environment</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript Cookie]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/manipulate-browser/js-cookie</link>
            <guid>/article/javascript/manipulate-browser/js-cookie</guid>
            <description><![CDATA[Cookie 是直接存储在浏览器中的一小段字符串数据，可以将它看作是一个浏览器上的小型数据库（4k 大小）。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 坐标]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/manipulate-browser/js-coordinate</link>
            <guid>/article/javascript/manipulate-browser/js-coordinate</guid>
            <description><![CDATA[在网页定位元素时大多数 JavaScript 方法处理的是以下两种坐标系中之一]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 创建自定义事件]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/manipulate-browser/js-custom-event</link>
            <guid>/article/javascript/manipulate-browser/js-custom-event</guid>
            <description><![CDATA[除了让用户与浏览器交互触发生成事件，还可以使用 JavaScript 生成事件，而且还可以自定义事件的类型（不仅仅是浏览器内建事件类型。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[DOM]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/manipulate-browser/js-dom</link>
            <guid>/article/javascript/manipulate-browser/js-dom</guid>
            <description><![CDATA[根据文档对象模型（Document Object Model，DOM）HTML 文档是由各种对象构成的，可以通过 JavaScript 来操作这些对象以修改页面，如 document.body 表示 <body> 标签的对象，可以通过修改该对象的属性 style.background 设置网页背景颜色。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript DOM 变动观察器]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/manipulate-browser/js-dom-observer</link>
            <guid>/article/javascript/manipulate-browser/js-dom-observer</guid>
            <description><![CDATA[DOM 变动观察器用于观察页面的 DOM 变化情况，如特性，添加/删除的元素，文本内容，并在其发生更改时触发回调。我们可以用它来跟踪代码其他部分引入的更改，以及与第三方脚本集成。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 尺寸与滚动]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/manipulate-browser/js-dom-size-and-scroll</link>
            <guid>/article/javascript/manipulate-browser/js-dom-size-and-scroll</guid>
            <description><![CDATA[尺寸和滚动是日常使用网页经常遇到的，包括浏览页面视窗大小和页面滚动，以及元素的尺寸和内部内容的滚动（设置了 overflow）也是十分常见的交互，相关属性值都可以通过 JavaScript 获取。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 事件]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/manipulate-browser/js-event</link>
            <guid>/article/javascript/manipulate-browser/js-event</guid>
            <description><![CDATA[事件是某事发生的信号，所有的 DOM 节点都生成这样的信号（但事件不仅限于 DOM），JavaScript 就是通过事件与 HTML（DOM 节点）进行交互的。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 事件循环]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/manipulate-browser/js-event-loop</link>
            <guid>/article/javascript/manipulate-browser/js-event-loop</guid>
            <description><![CDATA[事件循环是指 JavaScript 引擎在等待任务 -> 执行任务 -> 进入休眠状态等待更多任务，这几个状态之间转换的无限循环。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 操作文件系统]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/manipulate-browser/js-file-system-access-api</link>
            <guid>/article/javascript/manipulate-browser/js-file-system-access-api</guid>
            <pubDate>Thu, 15 Jun 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[File System Access API 允许 Web 应用拥有读写本地设备或线上的文件系统的能力。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 表单]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/manipulate-browser/js-form</link>
            <guid>/article/javascript/manipulate-browser/js-form</guid>
            <description><![CDATA[表单 form 是商务网站最常见的元素，如 <input> 的控件，它有许多特殊的属性和事件。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[IndexedDB]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/manipulate-browser/js-indexdb</link>
            <guid>/article/javascript/manipulate-browser/js-indexdb</guid>
            <description><![CDATA[IndexedDB 是一个浏览器内置的数据库，它比 localStorage 强大得多，它的本机接口是基于事件的。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript localStorage 和 sessionStorage]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/manipulate-browser/js-localstorage-and-sessionstorage</link>
            <guid>/article/javascript/manipulate-browser/js-localstorage-and-sessionstorage</guid>
            <description><![CDATA[Web 存储对象 localStorage 和 sessionStorage 允许我们在浏览器中保存键/值对。在页面刷新后（对于 sessionStorage）甚至浏览器完全重启（对于 localStorage）后，数据仍然保留在浏览器中。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 修改 DOM]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/manipulate-browser/js-modify-dom</link>
            <guid>/article/javascript/manipulate-browser/js-modify-dom</guid>
            <description><![CDATA[修改 DOM 是创建「实时」页面的关键。常用的修改 DOM 方法如下]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 资源加载]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/manipulate-browser/js-resource-load</link>
            <guid>/article/javascript/manipulate-browser/js-resource-load</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 选择页面内容范围]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/manipulate-browser/js-select</link>
            <guid>/article/javascript/manipulate-browser/js-select</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 样式]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/manipulate-browser/js-style</link>
            <guid>/article/javascript/manipulate-browser/js-style</guid>
            <description><![CDATA[通常有两种设置元素的样式]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript UI 事件]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/manipulate-browser/js-ui-event</link>
            <guid>/article/javascript/manipulate-browser/js-ui-event</guid>
            <description><![CDATA[在浏览器的所有事件中， UI（user interface）用户界面交互事件是最常见的，如鼠标事件、按键事件等。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[为网页添加脚本]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/refer-to-script</link>
            <guid>/article/javascript/refer-to-script</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 数组]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-array</link>
            <guid>/article/javascript/syntax/js-array</guid>
            <description><![CDATA[数组是一种特殊的数据结构，适用于存储和管理有序的数据项。数组与对象类似，各个元素使用逗号 , 分隔，但这些值都是有顺序的，并用方括号 [] 包括。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 异步操作]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-async</link>
            <guid>/article/javascript/syntax/js-async</guid>
            <description><![CDATA[代码通常时同步的，即语句依次按顺序执行，JavaScript 线程模型可以确保语句在一个时间轴上运行。异步代码则是不能保证会在一个不间断的时间轴上执行，如网络请求、一些API方法等未知完成使劲按的代码，均为异步操作。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 基本语法]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-basic-syntax</link>
            <guid>/article/javascript/syntax/js-basic-syntax</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript BigInt]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-bigint</link>
            <guid>/article/javascript/syntax/js-bigint</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 布尔值]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-boolean</link>
            <guid>/article/javascript/syntax/js-boolean</guid>
            <description><![CDATA[true 和 false 为布尔值]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 中断语句]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-break</link>
            <guid>/article/javascript/syntax/js-break</guid>
            <description><![CDATA[中断语句用以结束并跳出当前该层（嵌套式结构）代码。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[回调]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-callback</link>
            <guid>/article/javascript/syntax/js-callback</guid>
            <description><![CDATA[在一些场景中需要等待另一个程序执行返回后才可以执行相应的操作，如需要等待脚本加载完成后才可以对其中的函数进行调用，JavaScript 主机 host 提供的许多函数或事件监听器实现这种计划的异步行为 asynchronous actions，如函数 setTimeout（根据给定的时间延后执行）、事件 onload（资源加载完以后执行给定的操作）、onerror（资源加载发生错误执行给定的操作）等。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 类]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-class</link>
            <guid>/article/javascript/syntax/js-class</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 条件语句]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-condition-statement</link>
            <guid>/article/javascript/syntax/js-condition-statement</guid>
            <description><![CDATA[为了根据不同条件执行不同的操作，可以使用条件语句或 ? 运算符。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Currying]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-currying</link>
            <guid>/article/javascript/syntax/js-currying</guid>
            <description><![CDATA[柯里化 Currying 是一种函数的高阶技术，被用于许多编程语言中，它是指将 f(a,b,c) 转换为可以被以 f(a)(b)(c) 的形式进行调用。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[数据类型]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-data-type</link>
            <guid>/article/javascript/syntax/js-data-type</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 日期]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-date</link>
            <guid>/article/javascript/syntax/js-date</guid>
            <description><![CDATA[日期 Date 是一个新的内建对象，通过该对象可以方便地获取日期，该对象还由很多方法以方便地修改时间或测量时间。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 解构赋值]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-destructure</link>
            <guid>/article/javascript/syntax/js-destructure</guid>
            <description><![CDATA[在 ES6 中新增了解构赋值 destructuring 这一种特殊的赋值语法，它可以将数组（或其他可迭代对象）或普通对象「拆包」为到一系列变量中，因为有时候可能不需要一个整体的对象/数组而只需要其中部分信息。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[错误处理]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-error</link>
            <guid>/article/javascript/syntax/js-error</guid>
            <description><![CDATA[脚本可能出现错误，是由于编写出错，或是与预期不同的用户输入，或是错误的服务端响应以及其他数千种原因。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Eval]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-eval</link>
            <guid>/article/javascript/syntax/js-eval</guid>
            <description><![CDATA[调用 eval(“codeString") 会运行代码字符串，并返回最后一条语句的结果。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 函数]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-function</link>
            <guid>/article/javascript/syntax/js-function</guid>
            <description><![CDATA[函数是将执行相同步骤的代码打包/封装成可重复使用的代码块，并在程序中更方便使用（调用）。JavaScript 内置多种函数，也允许开发者创建自己的函数。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 垃圾回收]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-garbage-collection</link>
            <guid>/article/javascript/syntax/js-garbage-collection</guid>
            <description><![CDATA[创建的原始值、对象、函数等一切都会占用内存，当我们不再需要某变量或数据时，JavaScript 引擎会自动地进行清除，该操作称为垃圾回收。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Generator]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-generator</link>
            <guid>/article/javascript/syntax/js-generator</guid>
            <description><![CDATA[常规函数只会返回一个单一值（或者不返回任何值），而使用特殊的语法结构 function* funcName() {...}，即所谓的 Generator 函数，可以按需一个接一个地返回（使用关键字 yield）多个值。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 可迭代对象]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-iterable</link>
            <guid>/article/javascript/syntax/js-iterable</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 链表]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-list</link>
            <guid>/article/javascript/syntax/js-list</guid>
            <description><![CDATA[链表元素是一个符合递归结构的特殊对象，这种数据结构可以实现快速插入/删除元素。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 循环语句]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-loop-statement</link>
            <guid>/article/javascript/syntax/js-loop-statement</guid>
            <description><![CDATA[循环有各种类型，但是它们本质上都实现相同的操作：重复一定次数地执行特定操作。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 映射]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-map</link>
            <guid>/article/javascript/syntax/js-map</guid>
            <description><![CDATA[映射 Map 是 ES 6 新增的一种特殊的内置对象，它是一个键值对的数据项的集合，通过构造函数 Map() 创建一个（空）映射，使用方法 .set(key, value) 向映射添加键值对，使用方法 .get(key)通过键 key 访问相应的值。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript Math 对象]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-math</link>
            <guid>/article/javascript/syntax/js-math</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 模块]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-module</link>
            <guid>/article/javascript/syntax/js-module</guid>
            <description><![CDATA[随着我们的应用越来越大需要将其拆分成多个文件，即所谓的模块 module，一个模块 module 就是一个文件/脚本，通常包含一个类或一个函数库。语言级的模块系统在 2015 年的时候出现在了标准（ES6）中，此后逐渐发展，现在已经得到了所有主流浏览器和 Node.js 的支持。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 数字类型]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-number</link>
            <guid>/article/javascript/syntax/js-number</guid>
            <description><![CDATA[数字类型的数据包括任何正负整数以及小数，JavaScript 不区分浮点数和整数，数字都以 64 位浮点数形式存储，也称为「双精度」，其中 52 个被使用存储这些数字，其中 11 个存储小数点的位置（它们对于整数为零），1 位用于符号。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 对象]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-object</link>
            <guid>/article/javascript/syntax/js-object</guid>
            <description><![CDATA[对象是 JavaScript 支持的一种数据类型，与七种原生类型不同，对象可以用来存储键值对和更复杂的实体。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 操作符]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-opertator</link>
            <guid>/article/javascript/syntax/js-opertator</guid>
            <description><![CDATA[JavaScript 支持多种操作符/运算符，且不同数据类型可支持的运算符和运算含义也不同。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript Promise]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-promise</link>
            <guid>/article/javascript/syntax/js-promise</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript Proxy]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-proxy</link>
            <guid>/article/javascript/syntax/js-proxy</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 正则表达式]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-regex</link>
            <guid>/article/javascript/syntax/js-regex</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 作用域]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-scope</link>
            <guid>/article/javascript/syntax/js-scope</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 集合]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-set</link>
            <guid>/article/javascript/syntax/js-set</guid>
            <description><![CDATA[集合 Set 是 ES6 中新增的内置对象，它是一些值的集合，其中每个值都是唯一不重复的，这和数学意义上的集合相同。使用起来类似于数组，但 Set 与数组之间的最大区别是：]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 字符串]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-string</link>
            <guid>/article/javascript/syntax/js-string</guid>
            <description><![CDATA[字符串是一串字符集合，它是由零个或多个 16 位 Unicode 字符组成的字符序列，并用引号（单引号、双引号、反引号）括起来。使用字符串来表示句子、名称、地址等数据。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript Symbol]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-symbol</link>
            <guid>/article/javascript/syntax/js-symbol</guid>
            <description><![CDATA[在 ES6 中原生数据类型新增了 Symbol 唯一标识符，是一种创建后值不可变的数据类型，常用于作为对象的属性名（以标识唯一属性）。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 关键字 this]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-this</link>
            <guid>/article/javascript/syntax/js-this</guid>
            <description><![CDATA[在对象方法/函数中需要访问对象中存储的信息才能完成其工作，为了访问该对象一般在方法中可以使用 this 关键字，用以表示调用函数/方法的对象（即函数作为一个对象的方法被调用，则关键字 this 表示该对象）。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 常用函数与方法]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-useful-function</link>
            <guid>/article/javascript/syntax/js-useful-function</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[JavaScript 变量]]></title>
            <link>https://frontend-note.benbinbin.com/article/javascript/syntax/js-variable</link>
            <guid>/article/javascript/syntax/js-variable</guid>
            <description><![CDATA[变量用来储存信息，使用赋值操作符 = 为变量绑定数据（数据保存到与该变量相关联的内存区域），数据通过变量名进行存取操作。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Nuxt 3 API]]></title>
            <link>https://frontend-note.benbinbin.com/article/nuxt3/nuxt-3-api</link>
            <guid>/article/nuxt3/nuxt-3-api</guid>
            <pubDate>Wed, 22 Mar 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[该文档主要介绍在 Nuxt 项目中常用的 API]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Nuxt 3 生成部署]]></title>
            <link>https://frontend-note.benbinbin.com/article/nuxt3/nuxt-3-deploy</link>
            <guid>/article/nuxt3/nuxt-3-deploy</guid>
            <pubDate>Tue, 07 Mar 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[Nuxt 应用可以部署到具有 Node.js 环境的服务器，也可以将经过 pre-rendered 预渲染的结果部署到 static 静态网页托管平台，或 serverless 和 edge（CDN）环境]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Nuxt 3 特色功能]]></title>
            <link>https://frontend-note.benbinbin.com/article/nuxt3/nuxt-3-feature</link>
            <guid>/article/nuxt3/nuxt-3-feature</guid>
            <pubDate>Sun, 19 Mar 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[Nuxt 为开发者提供了一系列的特色功能，让开发体验更流畅。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Nuxt 3 生命周期钩子]]></title>
            <link>https://frontend-note.benbinbin.com/article/nuxt3/nuxt-3-hook</link>
            <guid>/article/nuxt3/nuxt-3-hook</guid>
            <pubDate>Thu, 16 Mar 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[Nuxt 提供了一系列的生命周期钩子 Lifecycle Hooks 以便在应用构建和运行的特定阶段执行操作。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Nuxt 3 简介]]></title>
            <link>https://frontend-note.benbinbin.com/article/nuxt3/nuxt-3-introduction</link>
            <guid>/article/nuxt3/nuxt-3-introduction</guid>
            <pubDate>Tue, 07 Mar 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[Nuxt 是一个全栈开发框架，可以用它同时进行服务端和前端的开发。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Nuxt 3 模块系统]]></title>
            <link>https://frontend-note.benbinbin.com/article/nuxt3/nuxt-3-module</link>
            <guid>/article/nuxt3/nuxt-3-module</guid>
            <pubDate>Thu, 09 Mar 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[Nuxt 3 提供了一个模块系统，它其实是一些异步函数，可以方便地对 Nuxt 3 的各种核心功能进行修改和扩展。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Nuxt 3 插件]]></title>
            <link>https://frontend-note.benbinbin.com/article/nuxt3/nuxt-3-plugin</link>
            <guid>/article/nuxt3/nuxt-3-plugin</guid>
            <pubDate>Mon, 20 Mar 2023 00:00:00 GMT</pubDate>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Nuxt 3 开发配置]]></title>
            <link>https://frontend-note.benbinbin.com/article/nuxt3/nuxt-3-setup</link>
            <guid>/article/nuxt3/nuxt-3-setup</guid>
            <pubDate>Fri, 10 Mar 2023 00:00:00 GMT</pubDate>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Nuxt 3 项目结构]]></title>
            <link>https://frontend-note.benbinbin.com/article/nuxt3/nuxt-3-structure</link>
            <guid>/article/nuxt3/nuxt-3-structure</guid>
            <pubDate>Wed, 22 Mar 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[一般 Nuxt 项目会具有以下文件系统]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[前端性能小技巧]]></title>
            <link>https://frontend-note.benbinbin.com/article/performance</link>
            <guid>/article/performance</guid>
            <description><![CDATA[收录一些关于前端性能优化的小技巧，包括新特性，常用代码片段，算法伪码等]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Tailwind 核心思想]]></title>
            <link>https://frontend-note.benbinbin.com/article/tailwind/tailwind-concept</link>
            <guid>/article/tailwind/tailwind-concept</guid>
            <description><![CDATA[Tailwind CSS 的设计遵循以下的一些规则，了解这些特点可以更快地上手该 UI 框架。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Tailwind 配置]]></title>
            <link>https://frontend-note.benbinbin.com/article/tailwind/tailwind-config</link>
            <guid>/article/tailwind/tailwind-config</guid>
            <description><![CDATA[Tailwind 是一个支持定制化的 UI 框架，可以将它进行配置「改造」，以适用于开发更具个性化的用户交互界面。一般在项目的根目录下的 tailwind.config.js 文档对 Tailwind 进行配置操作]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Tailwind 简介]]></title>
            <link>https://frontend-note.benbinbin.com/article/tailwind/tailwind-introduction</link>
            <guid>/article/tailwind/tailwind-introduction</guid>
            <description><![CDATA[Tailwind 是一个 CSS UI 框架，它最大的特点是遵循基础/通用类优先 utility-first 的原则，它只提供了基础的工具类 utility classes（如内边距 padding、字体 text 和 font、动效 transition 等预设类），可以让你直接在 HTML 源码上使用这些基础类，通过编译器的编译，生成相应的样式表，从而为页面设置相应的外观样式。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Tailwind 多主题切换]]></title>
            <link>https://frontend-note.benbinbin.com/article/tailwind/tailwind-multiple-theme</link>
            <guid>/article/tailwind/tailwind-multiple-theme</guid>
            <description><![CDATA[该文章介绍了如何使用 Tailwind 和 CSS 自定义变量实现网页多主题切换。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Tailwind 基础类]]></title>
            <link>https://frontend-note.benbinbin.com/article/tailwind/tailwind-utility</link>
            <guid>/article/tailwind/tailwind-utility</guid>
            <description><![CDATA[Tailwind 提供了大量开箱即用的基础类，将它们添加到 HTML 元素类名中，可以在最终的样式表中编译出相应的样式]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Tailwind v2 安装与编译]]></title>
            <link>https://frontend-note.benbinbin.com/article/tailwind/tailwind-v2-setup</link>
            <guid>/article/tailwind/tailwind-v2-setup</guid>
            <description><![CDATA[Tailwind 一般通过 npm 安装，以模块引入项目中，并需要经过编译后才可以使用。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Tailwind v3 安装与编译]]></title>
            <link>https://frontend-note.benbinbin.com/article/tailwind/tailwind-v3-setup</link>
            <guid>/article/tailwind/tailwind-v3-setup</guid>
            <description><![CDATA[Tailwind v3 提供了多种方式在项目中引入该 UI 框架：]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[前端小技巧]]></title>
            <link>https://frontend-note.benbinbin.com/article/tip</link>
            <guid>/article/tip</guid>
            <description><![CDATA[收录一些关于前端的小技巧，包括新特性，常用代码片段，算法伪码等]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[TypeScript 内置对象]]></title>
            <link>https://frontend-note.benbinbin.com/article/typescript/typescript-built-in-object</link>
            <guid>/article/typescript/typescript-built-in-object</guid>
            <description><![CDATA[JavaScript 中有很多内置对象，如 Boolean、Error、Date、RegExp 等，在 TypeScript 中当做定义好了的类型直接使用：]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[TypeScript 数据类型]]></title>
            <link>https://frontend-note.benbinbin.com/article/typescript/typescript-data-type</link>
            <guid>/article/typescript/typescript-data-type</guid>
            <description><![CDATA[TypeScript 提供了类型系统，除了 JavaScript 提供了的数据类型，还添加了额外的数据类型，如枚举 enum，还支持自定义更复杂的数据类型，类似于数据库的 Scheme。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[TypeScript 简介]]></title>
            <link>https://frontend-note.benbinbin.com/article/typescript/typescript-introduction</link>
            <guid>/article/typescript/typescript-introduction</guid>
            <description><![CDATA[JavaScript 是一门动态类型的编程语言：它没有类型约束，一个变量可能初始化时是字符串，过一会儿又被赋值为数字。由于隐式类型转换的存在，有的变量的类型很难在运行前就确定。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[TypeScript 类型设定]]></title>
            <link>https://frontend-note.benbinbin.com/article/typescript/typescript-set-type</link>
            <guid>/article/typescript/typescript-set-type</guid>
            <description><![CDATA[有多种方式设定变量的数据类型。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[TypeScript 安装与编译]]></title>
            <link>https://frontend-note.benbinbin.com/article/typescript/typescript-setup</link>
            <guid>/article/typescript/typescript-setup</guid>
            <description><![CDATA[因为浏览器或 Node.js 环境只能运行 JavaScript 代码，所以需要先将 TypeScript 编译为 JavaScript，所以开发时需要安装 TypeScript 编译器。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[TypeScript 声明文件]]></title>
            <link>https://frontend-note.benbinbin.com/article/typescript/typescript-type-define-file</link>
            <guid>/article/typescript/typescript-type-define-file</guid>
            <description><![CDATA[当引入第三方库时，我们会使用这些库 export 的变量，这时需要引用它的声明文件，其中一般包含对该库所提供变量的声明，和相应数据类型的定义，以便 ts 编译器可以识别这些变量，而不会在编译时报错，同时获得代码补全、接口提示等功能。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Vue 2 动效]]></title>
            <link>https://frontend-note.benbinbin.com/article/vue2/vue-2-animate</link>
            <guid>/article/vue2/vue-2-animate</guid>
            <description><![CDATA[过渡动效是主要针对元素素进入（显示）/离开（隐藏）和列表（重排）的情况设置动效，基于 CSS3 的 transition 和 animation 属性实现的。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Vue 2 基础]]></title>
            <link>https://frontend-note.benbinbin.com/article/vue2/vue-2-basic</link>
            <guid>/article/vue2/vue-2-basic</guid>
            <description><![CDATA[Vue 是渐进式 JavaScript 框架，与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。因此既可以嵌入到已有项目中，优化其中一部分代码；也可以基于 Vue 三大套件开发管理大型项目。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Vue 2 组件]]></title>
            <link>https://frontend-note.benbinbin.com/article/vue2/vue-2-component</link>
            <guid>/article/vue2/vue-2-component</guid>
            <description><![CDATA[Vue 中的组件是页面中的一部分，通过层层拼装和复用，最终形成了一个完整的页面。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Vue Router]]></title>
            <link>https://frontend-note.benbinbin.com/article/vue2/vue-2-router</link>
            <guid>/article/vue2/vue-2-router</guid>
            <description><![CDATA[Vue Router 是 Vue.js 官方的路由管理器（插件），它将组件 components 映射到路由 routes，然后告诉 Vue Router 在哪里渲染它们，:IconCustom{name="mdi:youtube" iconClass="text-red-500"} ​这样就可以在单页面应用中实现类似切换 url 而更新页面的效果。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Vue 2 插件]]></title>
            <link>https://frontend-note.benbinbin.com/article/vue2/vue2-plugin</link>
            <guid>/article/vue2/vue2-plugin</guid>
            <description><![CDATA[插件通常用来为 Vue 添加全局功能，如 vue-router，可以将插件作为载体，一次载入多种预设功能，如全局方法或 property、全局指令、全局 mixin、实例方法等。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Vuex]]></title>
            <link>https://frontend-note.benbinbin.com/article/vue2/vuex</link>
            <guid>/article/vue2/vuex</guid>
            <description><![CDATA[Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式（插件），它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Vue 3 动效]]></title>
            <link>https://frontend-note.benbinbin.com/article/vue3/vue-3-animate</link>
            <guid>/article/vue3/vue-3-animate</guid>
            <description><![CDATA[Vue 内置支持的过渡动效主要是针对元素素进入（显示）/离开（隐藏）和列表（重排）的情况，基于 CSS3 的 transition 和 animation 属性实现的。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Vue 3 基础]]></title>
            <link>https://frontend-note.benbinbin.com/article/vue3/vue-3-basic</link>
            <guid>/article/vue3/vue-3-basic</guid>
            <description><![CDATA[介绍 Vue 3 的基础使用方法，主要针对与 Vue 2 的不同点。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Vue 3 组件]]></title>
            <link>https://frontend-note.benbinbin.com/article/vue3/vue-3-component</link>
            <guid>/article/vue3/vue-3-component</guid>
            <description><![CDATA[Vue 的组件本质上是一个具有预定义选项的实例，我们使用小型的、独立和通常可复用的组件，通过层层拼装，最终形成了一个完整的页面。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Vue 3 组合式 API]]></title>
            <link>https://frontend-note.benbinbin.com/article/vue3/vue-3-composition-api</link>
            <guid>/article/vue3/vue-3-composition-api</guid>
            <description><![CDATA[Vue 通过组件可以实现代码重用，但是由于组件基于各种选项，如 data、computed、methods、watch 等，使得同一个功能的逻辑分离四散，所以在处理单个逻辑关注点时，不得不在相关代码的选项块之间不断「跳转」，这种碎片化使得理解和维护复杂组件变得十分困难。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Vue3 的 TypeScript 支持]]></title>
            <link>https://frontend-note.benbinbin.com/article/vue3/vue-3-typescript</link>
            <guid>/article/vue3/vue-3-typescript</guid>
            <description><![CDATA[TypeScript 是 JavaScript 的超集，它在完整保留 JavaScript 运行时行为的基础上，通过提供了类型系统，引入静态类型系统来提高代码的可维护性，在很大程度上弥补了 JavaScript 的缺点，减少可能出现的 bug。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Vue Router Next]]></title>
            <link>https://frontend-note.benbinbin.com/article/vue3/vue-router-next</link>
            <guid>/article/vue3/vue-router-next</guid>
            <description><![CDATA[通过 Vue.js 已经用组件搭建出我们的应用，当加入 Vue Router 时，我们需要做的就是将（视图）组件映射到路由（URL）上，让 Vue Router 知道在哪里渲染它们，在单页面应用实现类似多页面切换的效果。]]></description>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Vuex 4]]></title>
            <link>https://frontend-note.benbinbin.com/article/vue3/vuex</link>
            <guid>/article/vue3/vuex</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Frontend Note]]></title>
            <link>https://frontend-note.benbinbin.com/</link>
            <guid>/</guid>
            <content:encoded><![CDATA[this should be the full content]]></content:encoded>
        </item>
    </channel>
</rss>