1.1、概念 它是一个将数据渲染为HTML视图 的js库 1.2、原生js痛点 用dom的API去操作dom，繁琐且效率低 用js直接操作dom，浏览器会进行大量的回流和重绘 原生js没有组件化的编程方案...时不要用引号 标签中引入js表达式要用{} 如果在jsx要写行内样式需要使用style={ {coler：red}}形式 样式的类名指定不能写class，要写className; 只有一个根标签 标签必须闭合...标签首字母 ①若小写字母开头，则会将该标签转为html同名标签，如果没找到，则会报错； ②若大写字母开头，则会认为是组件，它就会去找对应的组件，如果没找到，就会报组件未定义的错误； 三、React...来操作路由的跳转、前进、后退 withRouter的使用 作用：它就是专门解决在一般组件中想要使用路由组件的那几个API的这个问题的，它接收一个一般组件，然后调用后，该一般组件身上也有了路由组件的...即可 14.6、错误边界 所谓的错误边界就是说，在实际开发过程中，组件复用是很正常的，但你很难避免调用的子组件出现错误（语法错误，或者是因为数据格式不对导致的报错，你不可能兼容到各个位置），如果没有错误边界
聊天插件系统是一种令人兴奋的新方式，可以扩展ChatGPT的功能，纳入您自己的业务数据，并为客户与您的业务互动增加另一个渠道。...这将告诉ChatGPT可以使用哪些API，出于什么原因，以及请求和响应会是什么样子。 插件服务的基础功能和托管由你决定。你的API可以托管在任何地方，使用任何REST API或编程语言。...这为互动增加了一个流动性的元素，而这是一个死板的GUI或结构化的数据API所不能满足的。例如，"我今天应该穿外套吗？"...这个提示将导致API调用一个基于你的位置的天气服务，对天气的解释，以及对原始问题的回答："是的，你应该穿一件夹克。今天的温度是12度，有80%的机会下雨。"。...打字不规范的信息或含糊不清的描述可能会导致调用错误的API或做出错误的行动。 构建第一个JavaScript ChatGPT 插件 我们将为我们的聊天插件建立自己的express服务器。
TS 在 vanilla JS 体验之上增加了一个全面的可选类型系统。很长一段时间里，整个 JS 生态系统对 TS 的支持不足以让我觉得应该推荐它。...但是这个代码不是产生有效的 JavaScript，而是导致无效的 TypeScript，因为现在使用它的 1000 个位置提供了错误的类型。...我不知道 TS 本质上是否能比 JS 更少出现“错误”，不给我强烈认为，迫使开发人员首先定义接口和 API，从而产生更好的代码是很有必要的。...我认为现在应该抛弃一些循环，应该去使用定义良好的 API。这样对任何未来数据访问模式实现的改进都将使你的代码受益。for 循环过于通用，无法对同一模式进行有意义的优化。...，调用了哪些函数以及其他有用的数据。
主要还是我们应该避免保留不必要的资源。来看看一些常见的场景。 1.计时器的监听 setInterval() 方法重复调用函数或执行代码片段，每次调用之间有固定的时间延迟。...另一个问题可能是错误地定义了一个全局变量： var a = 'example 1'; // 作用域限定在创建var的地方 b = 'example 2'; // 添加到Window对象中 要防止这种问题可以使用严格模式...当你需要时，你仍然可以使用Window。不过，你必须以明确的方式使用它。...严格模式是如何影响我们前面的例子： 对于 addElement 函数，当从全局作用域调用时，this 是未定义的 如果没有在一个变量上指定const | let | var，你会得到以下错误: Uncaught...只要代码是整洁的，而且我们不忘自己清理，就不会发生泄漏。 了解内存和垃圾回收在JavaScript中是如何工作的是必须的。一些开发者得到了错误的意识，认为由于它是自动的，所以他们不需要担心这个问题。
局部变量 - 局部变量仅在定义它的函数中可见，函数参数始终是该函数的本地参数。 问题13：JS 中“this”运算符的用途是什么？ this关键字引用它所属的对象。 根据使用位置，它具有不同的值。...在JS中命名变量时要遵循以下规则: 咱们不应该使用任何JS保留关键字作为变量名。例如，break或boolean变量名无效。 JS 变量名不应该以数字(0-9)开头。它们必须以字母或下划线开头。...innerText:从起始位置到终止位置的内容, 但它去除Html标签 问题 34：JS中的事件冒泡是什么 事件冒泡是HTML DOM API中事件传播的一种方式，当一个事件发生在另一个元素中的一个元素中...咱们应该小心使用这种清空数组的方法，因为如果你从另一个变量引用了这个数组，那么原始的引用数组将保持不变。...该技术的另一个特性是允许为全局变量提供一个简单的别名，这在jQuery插件中经常使用。 问题50：JS中的转义字符是什么 JS转义字符使咱们能够在不破坏应用程序的情况下编写特殊字符。
API 我们将一起看看它们是什么，我们应该在哪里使用它们，以及如何使用它们。...首先，我将使用vite.js，它是一个快速启动新项目的神奇工具： npm create vite@latest unknown-web-apis 当被要求选择一个框架时，选择vanilla来创建一个vanillajavascript...另一个使用Page Visibility API的场景是，当用户没有查看页面时，停止获取不必要的资源。...兼容性 基本不支持[8] Broadcast Channel API 这是什么 我想谈论的另一个API是Broadcast Channel API 。它允许浏览器上下文互相发送和接收基本数据。...# 11 个需要避免的 React 错误用法 # 6 个 Vue3 开发必备的 VSCode 插件 # 3 款非常实用的 Node.js 版本管理工具 # 6 个你必须明白 Vue3 的 ref 和 reactive
然后就是踩坑，因为vite2还算是比较新，所以介绍文章不多，虽然已经出来官网文档了，但是现在的官网似乎侧重原理介绍，对于最初级的使用方式，似乎没有，或者是我还没有找到。 这里汇总一些基础用法。...attrs、emit、slots还是在这里，用法应该没啥变化。 expose 在子组件里面写一个方法，然后在父组件里面可以调用，这个算是弥补了一个不足吧，当然以前也是有这种方式的。...导出的方法，父组件的调用方式 import { ref, onMounted } from 'vue' const hw = ref(null)...如果说 vue3 的composition API 带来的心智难度是1 （约束性变小） 的话，那么这个vite2带来的难度大概是 2 （约束性几乎没了），想要驾驭好更难了一些。...vue3 还可以不太在意分出来js文件，但是现在是必须分出来单独的js文件了，否则那代码真的是不敢看。 正在尝试写个博客具体体验一下。
本文介绍为这些非常不确定的行为设计 API 时应该考虑的原则，了解这些原则之后你会体会到为什么会有这些 API 设计上的差异，然后指导你设计新的类型。...---- 不确定性 像并发集合一样，如 ConcurrentDictionary、ConcurrentQueue，其设计为线程安全，于是它的每一个对外公开的方法调用都不会导致其内部状态错误...API 设计指导 在了解了上面的用法指导后，API 设计指导也呼之欲出了： 针对典型的应用场景，必须设计一个专门的方法，一次调用即可完全获取当时需要的状态，或者一次调用即可完全修改需要修改的状态； 不要提供大于...1 个方法组合在一起才能使用的 API，这会让调用方获取不一致的状态。...对于多线程并发导致的不确定性，使用方虽然可以通过 lock 来规避以上第二条问题，但设计方最好在设计之初就避免问题，以便让 API 更好使用。
这显然是错误的：我们以后会想把 name 设置成一个字符串。 此时你必须告诉 TypeScript，它可以是别的类型。...useEffect里面的回调应该是什么都不返回，或者是一个会清理任何副作用的Destructor函数（「析构函数」，这个词借用了C++中类的说法） ---- 类型化 useMemo 和 useCallback...如何解决context的值可能是未定义的情况呢。我们针对context的获取可以使用一个「自定义的hook。」...❝PureComponent 可能会因「深层的数据不一致」而产生错误的否定判断，从而导致shouldComponentUpdate结果返回false，界面得不到更新，要谨慎使用。...从如下方面进行检测： 识别具有「不安全生命周期」的组件 关于旧版字符串Ref API 使用的警告 关于不推荐使用 findDOMNode 的警告 检测意外的副作用 检测遗留Context API 确保可重用状态
Vue3 已经更新到 RC9，正式发布在即，其中让人倍加关注的重大更新：组装式 API (Composition API) 到底是什么，相比 Vue2 又有什么优势呢？ （一）响应式数据 1....对比分析 写了太多 Vue 的我们可能已经忘了，Vue2 的代码从标准 JS 模块的角度来看有多奇怪： mounted 中修改的 this.now 数据是在哪创建的？...不少新手可能都犯过一个错误，在 data 中返回的数据字段和 props、methods 或者 computed 中的字段命名撞车（尤其是使用名为 data 的字段），在编码阶段并不能被 IDE 直接发现...API 说明 下面详细说说常用的几个响应式数据相关 API：ref, reactive 和 toRefs。 (1) ref 上面例子中使用到的 ref，可以将一个数据包装成响应式数据代理对象。...// => 1 当你修改代理对象的 count.value 属性时，模板中使用到 count 的位置将响应数据的变化，更新视图中的数据状态。
最好使用库的最新版本，以获得尽可能好的性能。 这篇文章将讨论 React 18 是什么，React 17 的问题，React 18 的新特性，以及为什么你应该使用最新版本。 1..../client'; function App({ callback }) { // 第一次创建 div 时将调用 callback return ( <div ref={callback...React 18 中的 createRoot() API 支持批处理所有状态更新，而不管它们发生在应用程序的什么位置。React 在所有状态更新后 re-render 页面。...由于这是一个重大的更改，你可以使用 flushSync() API停止自动批处理。...React 18 相对于 React 17 的优点 即使在了解了 React 17 和 React 18 之间的区别之后，你可能仍然不确定是切换到 React 18 还是坚持使用 React 17。
在本文中，你将了解如何在 Vue.js 中引用组件中的 HTML 元素。 前提条件 本文适用于所有使用 Vue 的开发人， 包括初学者。...在阅读本文之前，你应该具备一些前提条件： Node.js 10.x或更高版本。...正确的使用语法非常重要，因为这意味着 Vue 不会将此视为错误，的确如此。根据我们已经知道的关于 Vue refs的内容，它们会返回一个对象，但是根据未定义的响应来判断，有些东西是错误的。...条件处理 Vue.js 的 refs 也可用于输出 DOM 元素内部的多个元素，例如使用 v-for 指令的条件语句。refs 在调用时返回一个 item 数组，而不是对象。...结论 本文讲解了怎样在 Vue.js 中引用 DOM 中的 HTML 元素。你现在可以访问和记录所有的元素，例如值，子节点，数据属性，甚至它的 base URL。 另外我们还学会了实现这一目标的方法。
在我使用JavaScript的头几年里，我觉得自己是个骗子。尽管我可以用框架建立网站，但还是缺少一些东西。我惧怕JavaScript的工作面试，因为我对基础知识掌握得不够牢固。...你可以把原型想象成每个对象上的一个 "隐藏 "属性，它决定了 "下一步要看哪里"。...如果你不想多次编写相同的代码，函数就很方便。"调用 "一个像sayHi()这样的函数，告诉计算机运行里面的代码，然后再回到程序中的位置。...在一个函数中this的值取决于该函数的调用方式，而不是它的定义位置。像.bind、.call和.apply这样的抓手让你对this的值有更多控制。 箭头函数。箭头函数类似于函数表达式。...这起初可能看起来很奇怪，但我们应该记住，函数是值，所以我们可以把它们传递出去——就像我们对数字、字符串或对象所做的那样。这种风格可能会被过度使用，但适度地使用是非常有表现力的。 回调。
slot使用场景有哪些一、slot是什么在HTML中 slot 元素 ，作为 Web Components 技术套件的一部分，是Web组件内的一个占位符该占位符可以在后期使用自己的标记语言填充举个栗子<...message: '我是祖先组件提供的数据', name: this.name, // 传递属性 say: this.say } }}子组件通过使用inject:[“参数1”...常用来做一些异步操作小结父子关系的组件数据传递选择 props 与 $emit进行传递，也可选择ref兄弟关系的组件数据传递可选择$bus，其次可以选择$parent进行传递祖先与后代组件数据传递可选择...只能认为比较的两个节点是同一个，哪怕它们实际上不是，这导致了频繁更新元素，使得整个patch过程比较低效，影响性能实际使用中在渲染一组列表时key必须设置，而且必须是唯一标识，应该避免使用数组索引作为key.../components下在使用到的页面中，采用绝对路径的形式引用// 错误用法import Input from '../..
但实际上，这些库和框架仍然使用 vanilla JavaScript。那么该怎么实现呢？ 我希望这个“JavaScript 路由教程”能够帮你了解如何用原生 JS 写出自己的路由。...简介 我遇到了很多出于各种原因想要自己创建路由的人。既然你看到本文，那意味着你可能也是其中的一个！ 最重要的是，使用 vanilla JS router 可以减少你对框架的依赖。...JavaScript 的 History API 我看过很多没有提到 JavaScript History API 的 vanilla JS router 教程。...基于 History API 的 Vanilla JS 路由设置 先让我们仔细研究构建 URL 切换器所需的最少代码（而无需刷新页面），然后我会向你展示其的工作方式的 GIF 动图。...我们在这里没有使用 React 或 Vue，因此在我的源代码中 load_content 将负责直接在 DOM 中更新视图。此区域可能填充了你的 API 加载的某些内容。
程序员的主要工作就是不断地构建解析器，把一种数据转化成另外一种数据。- 程序君 这是我在很多文章中都阐释过的一个观点。...当时我接手这个工作的时候，之前的工程师已经留下了好几万行 php 代码，这些代码处理几十个来自不同厂商的 feed，把里面的内容提取出来存在数据库中。...Server Object Server object 在 swagger UI 里很有用，它定义了 API 可以通过什么 API 访问，以及 base path 是什么。...是 #/components/responses/Error 的 response，response code 可以随意（这里未定义，所以可能是 404，可能是 400，甚至 500） 这个路由使用的名为...值得注意的是： 在 OpenAPI 中，很多对象都可以用 $ref 来引用，你可以把 ref 当成一个指针，它指向当前文档（或者其他文档）对应位置的对象。
Go 作为一个有用的编程环境的另一个方面是对最常见的编程错误拥有定义良好的语义，这有助于理解和调试。这个想法并不是什么新鲜事。...软件程序除了简单易用外，还应该不容易被滥用。它必须妥善对待编程错误。它们发生时，应该给出明确的指示，而且永远不要让它的影响变得不可预测。...给拥有错误的程序定义一个良好的语义并不像人们常识中的那样简单。在 C/C++ 中，未定义的行为已经演变成了完全委托编译器作者将一个漏洞百出的程序变成另一个漏洞百出的程序。...Go 不会采用这种方法，这里没有不确定的行为，针对诸如空指针引用，整数溢出，死循环等错误都在 Go 中有明确的语义。...数据竞争的定义是对内存某一位置的写操作与对同一位置的读或斜操作同时进行，除非所有涉及的访问均为 sync/atomic 包提供的原子数据访问。如前所述，强烈建议程序员使用适当的同步来避免数据竞争。
其中一种方法是将SVG文件封装在Vue.js模板组件中，然后将其作为组件导入和使用。 另一个选择是使用默认的 标签来渲染SVG文件。...> 标签来指定它们的位置，并使用 src 属性。...在本文中，我们将介绍如何使用Vue.js从数据对象中删除属性。 要从Vue.js的数据对象中删除属性，我们可以使用 this.$delete 方法。...要从Vue.js的数据对象中删除属性，我们可以使用 this.$delete 方法。我们还可以使用 Vue.delete 方法来做同样的事情。 5、如何优雅的处理前端API错误？...一个完美实现的前端必须处理所有可能的边缘情况，以提供流畅的用户体验。在本文中，我们将探讨处理API错误的有效和高效方法，向用户提供有意义的反馈和解决问题的指导。
当你读取一个未定义的对象的属性或调用其方法时，这个错误会在 Chrome 中出现。 您可以很容易的在 Chrome 开发者控制台中进行测试。 ?...在我们工作中，这种错误可能发生的一种场景是：如果在加载元素之前尝试在 JavaScript 中使用元素。 因为 DOM API 对于空白的对象引用返回值为 null。...任何执行和处理 DOM 元素的 JS 代码都应该在创建 DOM 元素之后执行。 JS 代码按照 HTML 中的规定从上到下进行解释。...因此，使用 JS 命名空间时最安全的选择是始终以实际名称空间作为前缀。...原因应该是清楚的，即执行上下文不理解导致的指向错误。 7、 Uncaught RangeError 当你调用一个不终止的递归函数就会发生这种错误。您可以在 Chrome 开发者控制台中进行测试。 ?
领取专属 10元无门槛券
手把手带您无忧上云
