quiz: change fetch/setTimeout/setInterval mentions to methods

This commit is contained in:
Yangshun 2024-06-08 17:06:38 +08:00
parent 2dc187f8ee
commit 8417e54e1f
22 changed files with 27 additions and 27 deletions

View File

@ -51,7 +51,7 @@ WIP.
### Async
- Reference: [Async and Peformance](https://github.com/getify/You-Dont-Know-JS/blob/master/async%20&%20performance/README.md#you-dont-know-js-async--performance)
- `setTimeout`, `setInterval` and event loop
- `setTimeout()`, `setInterval()` and event loop
- [setImmediate() vs nextTick() vs setTimeout(fn,0)](http://voidcanvas.com/setimmediate-vs-nexttick-vs-settimeout/)
- Event Loop
- Debounce and Throttle

View File

@ -25,7 +25,7 @@ Regardless of which type of format you are given, one thing stays true - you nee
Be _extremely_ familiar with the following concepts:
- CSS: Specificity, Box model, Layout, Positioning
- JavaScript: `this` keyword, Prototypes, closures, Async-style code, Promises, Timers (`setTimeout`, `setInterval`)
- JavaScript: `this` keyword, Prototypes, closures, Async-style code, Promises, Timers (`setTimeout()`, `setInterval()`)
- JavaScript design patterns: Observer pattern, Module pattern
- HTML: Event delegation (it was useful in almost every interview), DOM traversal, DOM manipulation, Form validation and submission
- Vanilla JS, or jQuery at the very least. Not all interviews allow you to use React as they want to see mastery of the fundamentals

View File

@ -388,7 +388,7 @@ This is a browser-reported string that allows the network protocol peers to iden
Ajax (asynchronous JavaScript and XML) is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows for web pages, and by extension web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly use JSON instead of XML, due to the advantages of JSON being native to JavaScript.
The `XMLHttpRequest` API is frequently used for the asynchronous communication or these days, the `fetch` API.
The `XMLHttpRequest` API is frequently used for the asynchronous communication or these days, the `fetch()` API.
###### References

View File

@ -77,7 +77,7 @@ JavaScript coding interviews share a lot of similarities with algorithmic coding
| Algorithms | Binary Search, Breadth-first Search, Depth-first Search, Recursion |
| JavaScript Language | Data types (checking for types, type coercion), Scope, Closures, Callbacks, How `this` keyword works, Object-oriented Programming in JavaScript (prototypes, classes, methods), Arrow functions vs normal functions, Invoking functions via `Function.prototype.apply()`/`Function.prototype.call()`, `Promise`, Handling variadic arguments |
| DOM | DOM traversal, DOM creation, DOM manipulation, Accessing element/node properties, Event delegation |
| Runtime APIs | Timer (`setTimeout`, `setInterval`) |
| Runtime APIs | Timer (`setTimeout()`, `setInterval()`) |
## JavaScript Coding Interview Rubrics

View File

@ -77,7 +77,7 @@ Entrevistas de codificação em JavaScript compartilham muitas semelhanças com
| Algoritmos | Busca Binária, Busca em Largura (Breadth-first Search), Busca em Profundidade (Depth-first Search), Recursão |
| Linguagem JavaScript | Tipos de dados (verificação de tipos, coerção de tipos), Escopo, Closures, Callbacks, Funcionamento da palavra-chave `this`, Programação Orientada a Objetos em JavaScript (protótipos, classes, métodos), Funções de seta vs. funções normais, Invocando funções via `Function.prototype.apply()`/`Function.prototype.call()`, Promises, Manipulação de argumentos variádicos |
| DOM | Navegação no DOM, Criação no DOM, Manipulação no DOM, Acesso a propriedades de elementos/nós, Delegação de Eventos |
| APIs em Tempo de Execução | Temporizador (`setTimeout`, `setInterval`) |
| APIs em Tempo de Execução | Temporizador (`setTimeout()`, `setInterval()`) |
## Critérios de Avaliação para Entrevistas de Codificação em JavaScript

View File

@ -77,7 +77,7 @@ JavaScript 编码面试与算法编码面试有许多相似之处。 一般来
| 算法 | 二进制搜索、广度优先搜索、深度优先搜索、递归 |
| JavaScript 语言 | 数据类型(检查类型、类型强制转换)、范围、闭合、回调、如何使用此处关键字、面向对象编程(原型、类、方法),箭头函数与普通函数、通过`Function.prototype.apply()` / `Function.prototype.call()`调用函数,`Promise`,处理多参数 |
| DOM | DOM 遍历、DOM 创建、DOM 操作、访问元素/节点属性、事件委托 |
| 运行时 API | 计时器(`setTimeout`、`setInterval` |
| 运行时 API | 计时器(`setTimeout()`、`setInterval()` |
## 如何准备 JavaScript 编码面试

View File

@ -39,7 +39,7 @@ As you can see, you can be expect to be asked quiz questions in almost every pos
| CSS | Box model, Selectors, Specificity, Positioning, Units, Flexbox, Grid, Media Queries |
| JavaScript | Data types, Scope, Closures, `this`, Variable declaration (`var`, `let`, `const`), Array methods, Object methods, Promises, Classes, Async/Await |
| DOM | DOM creation/manipulation/traversal, Event bubbling/capturing, Event delegation |
| Runtime APIs | `fetch`, Storage (`localStorage`, `sessionStorage`), Timers (`setTimeout`, `setInterval`) |
| Runtime APIs | `fetch()`, Storage (`localStorage`, `sessionStorage`), Timers (`setTimeout()`, `setInterval()`) |
## Tips

View File

@ -39,7 +39,7 @@ Como você pode ver, pode-se esperar que façam perguntas de quiz em quase todas
| CSS | Modelo de Caixa, Seletores, Especificidade, Posicionamento, Unidades, Flexbox, Grid, Consultas de Mídia |
| JavaScript | Tipos de Dados, Escopo, Closures, `this`, Declaração de Variáveis (`var`, `let`, `const`), Métodos de Arrays, Métodos de Objetos, Promessas, Classes, Async/Await |
| DOM | Criação/Manipulação/Travessia do DOM, Propagação/Captura de Eventos, Delegação de Eventos |
| APIs em Tempo de Execução | `fetch`, Armazenamento (`localStorage`, `sessionStorage`), Temporizadores (`setTimeout`, `setInterval`) |
| APIs em Tempo de Execução | `fetch()`, Armazenamento (`localStorage`, `sessionStorage`), Temporizadores (`setTimeout()`, `setInterval()`) |
## Dicas

View File

@ -39,7 +39,7 @@ description: 准备测验式前端面试问题的指南——预期情况,需
| CSS | 盒模型选择器优先级定位单位FlexboxGrid媒体查询 |
| JavaScript | 数据类型,作用域,闭包,`this`,变量声明(`var`、`let`、`const`数组方法对象方法Promise异步/等待 |
| DOM | DOM 创建/操作/遍历,事件冒泡/捕获,事件委托 |
| 运行时 API | `fetch`,存储(`localStorage`、`sessionStorage`),定时器(`setTimeout`、`setInterval` |
| 运行时 API | `fetch()`,存储(`localStorage`、`sessionStorage`),定时器(`setTimeout()`、`setInterval()` |
## 提示

View File

@ -73,7 +73,7 @@ User interface coding interviews share a fair bit of similarity with non-front e
| CSS | Box model, Selectors, Specificity, Positioning, Units, Flexbox, Grid, CSS custom properties (variables) |
| JavaScript | Closures, Callbacks, `Promise`, `async`/`await`, Handling variadic arguments |
| DOM | DOM traversal, DOM creation, DOM manipulation, Accessing element/node properties, Event delegation |
| Runtime APIs | Timer (`setTimeout`, `setInterval`), Network (Ajax, `fetch`) |
| Runtime APIs | Timer (`setTimeout()`, `setInterval()`), Network (Ajax, `fetch()`) |
| Accessibility | ARIA roles, states & properties, Keyboard interactions |
## User Interface Coding Interview Rubrics

View File

@ -73,7 +73,7 @@ Entrevistas de codificação de interface de usuário compartilham algumas semel
| CSS | Modelo de caixa, Seletores, Especificidade, Posicionamento, Unidades, Flexbox, Grid, Propriedades personalizadas CSS (variáveis) |
| JavaScript | Closures, Callbacks, `Promise`, `async`/`await`, manipulando argumentos variádicos |
| DOM | Travessia do DOM, Criação do DOM, Manipulação do DOM, Acesso às propriedades de elementos/nós, Delegação de eventos |
| APIs de runtime | Temporizador (`setTimeout`, `setInterval`), Rede (Ajax, `fetch`) |
| APIs de runtime | Temporizador (`setTimeout()`, `setInterval()`), Rede (Ajax, `fetch()`) |
| Acessibilidade | Papéis, estados e propriedades ARIA, Interações de Teclado |
## Rubricas para Entrevistas de Codificação de Interface do Usuário

View File

@ -73,7 +73,7 @@ description: 准备前端/网络开发人员面试中的用户界面问题的指
| CSS | 盒模型、选择器、特异性、定位、单位、Flexbox、Grid、CSS 自定义属性(变量) |
| JavaScript | 闭包、回调、`Promise`、`async`/`await`、变长参数处理 |
| DOM | DOM 遍历、DOM 创建、DOM 操作、访问元素/节点属性、事件委托 |
| 运行时 API | 计时器(`setTimeout`、`setInterval`、网络Ajax、`fetch` |
| 运行时 API | 计时器(`setTimeout()`、`setInterval()`、网络Ajax、`fetch()` |
| 可访问性 | ARIA 角色、状态和属性、键盘交互 |
## 用户界面编码面试评分标准

View File

@ -40,7 +40,7 @@ Since cookies have a relatively low maximum size, it is not advisable to store a
With that in mind, the best kind of data to store within cookies is small pieces of data that needs to be transmitted to the server, such as auth tokens, session IDs, analytics tracking IDs, GDPR cookie consent, language preferences that are important for authentication, authorization, and rendering on the server. These values are sometimes sensitive and can benefit from the `HttpOnly`, `Secure`, and `Expires`/`Max-Age` capabilities that cookies provide.
`localStorage` and `sessionStorage` both implement the [Web Storage API interface](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API). Web Storages have a generous total capacity of 5MB, so storage size is usually not a concern. The key difference is that values stored in Web Storage are not automatically sent on HTTP requests. While you can manually include values from Web Storage when making AJAX/`fetch` requests, the initial browser request will contain them.
`localStorage` and `sessionStorage` both implement the [Web Storage API interface](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API). Web Storages have a generous total capacity of 5MB, so storage size is usually not a concern. The key difference is that values stored in Web Storage are not automatically sent on HTTP requests. While you can manually include values from Web Storage when making AJAX/`fetch()` requests, the initial browser request will contain them.
Hence Web Storage should not be used to store data that is relied on by the server for the initial rendering of the page if server-side rendering is being used (typically authentication/authorization-related information). `localStorage` is most suitable for user preferences data that do not expire, like themes and layouts (if it is not important for the server to render the final layout). `sessionStorage` is most suitable for temporary data that only needs to be accessible within the current browsing session, such as form data (useful to preserve data during accidental reloads).

View File

@ -4,7 +4,7 @@ title: Explain Ajax in as much detail as possible.
## TL;DR
Ajax (asynchronous JavaScript and XML) facilitates asynchronous communication between the client and server, enabling dynamic updates to web pages without reloading. It uses techniques like `XMLHttpRequest` or the `fetch` API to send and receive data in the background. In modern web applications, `fetch` API is more commonly used to implement Ajax.
Ajax (asynchronous JavaScript and XML) facilitates asynchronous communication between the client and server, enabling dynamic updates to web pages without reloading. It uses techniques like `XMLHttpRequest` or the `fetch()` API to send and receive data in the background. In modern web applications, `fetch()` API is more commonly used to implement Ajax.
Using `XMLHttpRequest` API:
@ -23,7 +23,7 @@ xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
xhr.send();
```
Using `fetch` API:
Using `fetch()` API:
```js
fetch('https://jsonplaceholder.typicode.com/todos/1')
@ -41,7 +41,7 @@ fetch('https://jsonplaceholder.typicode.com/todos/1')
Ajax (asynchronous JavaScript and XML) is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. Unlike traditional web applications where every user interaction triggers a full page reload, with Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows for web pages, and by extension web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly use JSON instead of XML, due to the advantages of JSON being native to JavaScript.
Initially Ajax was implemented using the `XMLHttpRequest` API, but the `fetch` API is more suitable for modern web applications.
Initially Ajax was implemented using the `XMLHttpRequest` API, but the `fetch()` API is more suitable for modern web applications.
## `XMLHttpRequest` API
@ -62,9 +62,9 @@ xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
xhr.send();
```
## `fetch` API
## `fetch()` API
Alternatively, the `fetch` API provides a modern, promise-based approach to making Ajax requests. It is more commonly used in modern web applications.
Alternatively, the `fetch()` API provides a modern, promise-based approach to making Ajax requests. It is more commonly used in modern web applications.
Here's how you can use it:
@ -86,7 +86,7 @@ Here's a breakdown of the core functionalities involved in an Ajax request:
- **Event Trigger**: A user interacts with a web page element, like clicking a button or submitting a form.
- **JavaScript Code Execution**: JavaScript code embedded in the web page captures the event and initiates an asynchronous communication using the XMLHttpRequest object (or the Fetch API in modern implementations).
- **`XMLHttpRequest` (or `fetch`) API**: This object establishes a connection with the server and sends the user's request, which might include data to be submitted or specific information to be retrieved.
- **`XMLHttpRequest` (or `fetch()`) API**: This object establishes a connection with the server and sends the user's request, which might include data to be submitted or specific information to be retrieved.
- **Server Processing**: The web server receives the request, processes it, and generates a response containing the requested data (e.g., updated content, validation results).
- **Data Reception**: The XMLHttpRequest object or Fetch API receives the response from the server.
- **DOM Manipulation**: JavaScript processes the received data and dynamically alters the HTML content of the web page using the Document Object Model (DOM). This allows for targeted updates without reloading the entire page.

View File

@ -4,4 +4,4 @@ title: 尽可能详细地解释Ajax
Ajax (异步 JavaScript 和 XML) 是一套网络开发技术,在客户端使用许多网络技术创建异步 Web 应用程序。 使用 Ajax Web 应用程序可以将数据异步地发送到服务器(后端)并从服务器上检索,而不干扰现有页面的显示和行为。 通过将数据交换层与表现层解耦Ajax 允许网页,以及扩展的 Web 应用程序,动态地改变内容,而不需要重新加载整个页面。 实际上,现代实现通常使用 JSON 而不是 XML因为 JSON 是 JavaScript 的原生优势。
`XMLHttpRequest` API 或如今的 `fetch` API 经常用于异步通信。
`XMLHttpRequest` API 或如今的 `fetch()` API 经常用于异步通信。

View File

@ -11,7 +11,7 @@ They can be implemented manually or included through libraries and are often use
Common use cases include:
- **New JavaScript Methods**: For example, `Array.prototype.includes()`, `Object.assign()`, etc.
- **New APIs**: Such as `fetch`, `Promise`, `IntersectionObserver`, etc. Modern browsers support these now but for a long time they have to be polyfilled.
- **New APIs**: Such as `fetch()`, `Promise`, `IntersectionObserver`, etc. Modern browsers support these now but for a long time they have to be polyfilled.
Libraries and services for polyfills:

View File

@ -327,7 +327,7 @@ if (document.getElementsByTagName) {
Ajax非同期 JavaScript と XMLは、クライアント側で多くの Web テクノロジを使用して非同期 Web アプリケーションを作成する一連の Web 開発手法です。Ajax を使用すると、Web アプリケーションは、既存のページの表示や動作を妨げずに、バックグラウンドで非同期的にサーバーにデータを送信し、サーバーから取得することができます。Ajax は、データ交換レイヤーをプレゼンテーション・レイヤーから切り離すことにより、Web ページ、さらには Web アプリケーションに対して、ページ全体を再ロードせずにコンテンツを動的に変更できるようにします。実際には、現代の実装では、XML を JSON に置き換えるのが一般的です。これは、JavaScript 固有のメリットがあるからです。
`XMLHttpRequest` API は、非同期通信や最近の `fetch` API のためによく使われます。
`XMLHttpRequest` API は、非同期通信や最近の `fetch()` API のためによく使われます。
###### 参考

View File

@ -334,7 +334,7 @@ if (document.getElementsByTagName) {
Ajax(asynchronous JavaScript and XML)는 비동기 웹 응용 프로그램을 만들기 위해 클라이언트 측에서 사용되는 웹 개발 기술의 집합입니다. Ajax를 사용하면 웹 애플리케이션은 기존 페이지의 화면 및 동작을 방해하지 않으면서 백그라운드에서 비동기적으로 서버로 데이터를 보내고 서버에서 데이터를 받아올 수 있습니다. Ajax는 프리젠테이션 레이어에서 데이터 교환 레이어를 분리함으로써, 웹페이지 및 확장 웹 애플리케이션이 전체 페이지를 다시 로드 할 필요 없이 동적으로 컨텐츠를 변경할 수 있도록 합니다. 실제로 최근에는 일반적으로 네이티브 JavaScript의 장점 때문에 XML대신 JSON을 사용합니다.
`XMLHttpRequest` API는 비동기 통신에 자주 사용되며, 최근에는 `fetch` API가 자주 사용됩니다.
`XMLHttpRequest` API는 비동기 통신에 자주 사용되며, 최근에는 `fetch()` API가 자주 사용됩니다.
###### 참고자료

View File

@ -416,7 +416,7 @@ Jest to string zgłaszany przez przeglądarkę, który umożliwia elementom prot
Ajax (asynchronous JavaScript and XML - asynchroniczny JavaScript i XML) to zestaw technik tworzenia stron internetowych wykorzystujących wiele technologii sieciowych po stronie klienta do tworzenia asynchronicznych aplikacji internetowych. Dzięki Ajax aplikacje internetowe mogą wysyłać dane i pobierać je z serwera asynchronicznie (w tle) bez ingerencji w wyświetlanie i zachowanie istniejącej strony. Oddzielając warstwę wymiany danych od warstwy prezentacji, Ajax pozwala stronom internetowym, a poprzez rozszerzenia aplikacji internetowych, dynamicznie zmieniać treść bez konieczności ponownego ładowania całej strony. W praktyce nowoczesne implementacje często zastępują użycie JSON zamiast XML, ze względu na zalety natywnej obsługi JSON w JavaScript.
API `XMLHttpRequest` jest często używany do komunikacji asynchronicznej lub w dzisiejszych czasach, `fetch` API.
API `XMLHttpRequest` jest często używany do komunikacji asynchronicznej lub w dzisiejszych czasach, `fetch()` API.
###### Bibliografia

View File

@ -334,7 +334,7 @@ if (document.getElementsByTagName) {
Ajax (асинхронный JavaScript и XML) - это набор методов веб-разработки, использующих множество веб-технологий на стороне клиента для создания асинхронных веб-приложений. С помощью Ajax веб-приложения могут отправлять данные на сервер и получать их с сервера асинхронно (в фоновом режиме), не влияя на отображение и поведение открытой страницы. Отделяя уровень обмена данными от уровня представления, Ajax позволяет веб-страницам и, в частности, веб-приложениям динамически изменять содержимое без необходимости перезагрузки всей страницы. На практике для получения/передачи данных используется формат данных JSON вместо XML из-за того, что JSON основан на JavaScript.
Раньше для асинхронного взаимодействия использовали `XMLHttpRequest` API, а сейчас принято использовать `fetch` API.
Раньше для асинхронного взаимодействия использовали `XMLHttpRequest` API, а сейчас принято использовать `fetch()` API.
###### Ссылки

View File

@ -322,7 +322,7 @@ Ito ay isang string na iniulat ng browser na nagbibigay-daan sa mga network prot
Ang Ajax ay (sinkronisadong JavaScript at XML) ay isang set ng mga diskarte sa pag-develop ng web gamit ang maraming mga teknolohiya ng web sa panig ng kliyente upang lumikha ng mga aplikasyon ng web na sinkronisado. Sa Ajax, ang mga web na aplikasyon ay maaaring magpadala ng datos sa at kunin mula sa isang serber na di-sinkronisado (sa background) nang hindi nakakasagabal sa displey at pag-uugali ng umiiral na pahina. Sa pamamagitan ng pag-decoupling ng layer ng pagpapalit ng datos mula sa layer ng pagtatanghal, ang Ajax ay nagbibigay-daan para sa mga web na pahina, at sa pamamagitan ng extension ng mga aplikasyon sa web, upang baguhin ang nilalaman na dynamic na walang kailangang i-reload ang buong pahina. Sa pagsasagawa, ang mga modernong pagpapatupad ay kadalasang kapalit ng JSON para sa XML dahil sa mga pakinabang ng pagiging likas sa JavaScript.
Ang `XMLHttpRequest` na API ay madalas na ginagamit para sa di-sinkronisadong komunikasyon o sa mga araw ngayon, ang`fetch` na API.
Ang `XMLHttpRequest` na API ay madalas na ginagamit para sa di-sinkronisadong komunikasyon o sa mga araw ngayon, ang`fetch()` na API.
###### Mga Reperensiya

View File

@ -333,7 +333,7 @@ if (document.getElementsByTagName) {
Ajaxasynchronous JavaScript and XML是使用客户端上的许多 Web 技术,创建异步 Web 应用的一种 Web 开发技术。借助 AjaxWeb 应用可以异步在后台向服务器发送数据和从服务器检索数据而不会干扰现有页面的显示和行为。通过将数据交换层与表示层分离Ajax 允许网页和扩展 Web 应用程序动态更改内容,而无需重新加载整个页面。实际上,现在通常将 XML 替换为 JSON因为 JavaScript 对 JSON 有原生支持优势。
`XMLHttpRequest` API 经常用于异步通信。此外还有最近流行的`fetch` API。
`XMLHttpRequest` API 经常用于异步通信。此外还有最近流行的`fetch()` API。
###### 参考