qns(quiz): zh-CN and pt-BR translations
This commit is contained in:
Yangshun
parent
e618b7667e
commit
3d069212e3
|
|
@ -0,0 +1,21 @@
|
|||
---
|
||||
title: Você conhece o estilo SVG?
|
||||
---
|
||||
|
||||
Se você usa alguma ferramenta de análise estática em seu fluxo de trabalho (por exemplo, ESLint, TypeScript Compiler), geralmente ela também pode verificar se você está referenciando variáveis não declaradas. A maioria dos SVGs que você encontra na web usa CSS inline, mas existem vantagens e desvantagens associadas a cada tipo.
|
||||
|
||||
A coloração básica pode ser feita definindo dois atributos no nó: `fill` e `stroke`. `fill` define a cor dentro do objeto e `stroke` define a cor da linha desenhada ao redor do objeto. Você pode usar os mesmos esquemas de nomenclatura de cores CSS que você usa em HTML, independentemente de serem nomes de cores (que é `red`), Valores RGB (que são `rgb(255,0,0)`), valores de Hex, valores RGBA, etc.
|
||||
|
||||
```html
|
||||
<rect
|
||||
x="10"
|
||||
y="10"
|
||||
width="100"
|
||||
height="100"
|
||||
stroke="blue"
|
||||
fill="purple"
|
||||
fill-opacity="0.5"
|
||||
stroke-opacity="0.8" />
|
||||
```
|
||||
|
||||
O `fill="purple"` acima é um exemplo de um _atributo apresentacional_. Curiosamente, e ao contrário de estilos embutidos como `style="preenche: roxo"` que também é um atributo, os atributos de apresentação podem ser [sobrescritos pelo CSS]\(https://css-tricks. estilos de om/presentation-attributes-vs-inline-styles/) definidos em uma folha de estilos. Daí se você fez algo como `svg { fill: blue; }` ele irá substituir o preenchimento roxo que foi definido.
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
---
|
||||
title: 您是否熟悉SVG样式？
|
||||
---
|
||||
|
||||
有这么几种方法可以为形状（Shapes）着色（包括在对象上指定属性），使用内联的CSS、嵌入的CSS部分或外部CSS文件。 您在网页上找到的大多数SVG都使用内联CSS，但是每种类型都有优劣之处。
|
||||
|
||||
可以通过在节点上设置两个属性来做基本着色：`fill` 和 `stroke` 。 `fill`设置对象内的颜色，`stroke`设置对象周围绘制的线的颜色。 你可以使用在 HTML 中的 CSS 颜色命名方案定义它们的颜色，比如说颜色名（像red这种）、rgb 值（像 rgb(255,0,0) 这种）、十六进制值、rgba 值，等等。
|
||||
|
||||
```html
|
||||
<rect
|
||||
x="10"
|
||||
y="10"
|
||||
width="100"
|
||||
height="100"
|
||||
stroke="blue"
|
||||
fill="purple"
|
||||
fill-opacity="0.5"
|
||||
stroke-opacity="0.8" />
|
||||
```
|
||||
|
||||
上述`fill="purple"`是一个 _呈现属性_ 的示例。 有趣的是，与内部样式不同的是，像`style="fill: purple"` (它恰巧也是一个属性)，呈现属性可以被[样式表中定义的CSS样式](https://css-tricks.com/presentation-attributes-vs-inline-styles/)所覆盖。 因此，如果你做了类似于`svg { fill: blue; }`的事情，它将覆盖已定义的紫色填充。
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
---
|
||||
title: Você pode descrever a principal diferença entre um loop `.forEach` e um loop `.map()`?
|
||||
subtitle: Por que você escolheria um em vez do outro?
|
||||
---
|
||||
|
||||
Para entender as diferenças entre os dois, vamos ver o que cada função faz.
|
||||
|
||||
## `forEach`
|
||||
|
||||
- Itera através dos elementos em uma matriz.
|
||||
- Executa um callback para cada elemento.
|
||||
- Não retorna um valor.
|
||||
|
||||
```js
|
||||
const a = [1, 2, 3];
|
||||
const doubled = a. orEach((num, index) => {
|
||||
// Faça algo com num e/ou índice.
|
||||
});
|
||||
|
||||
// doubled = indefinido
|
||||
```
|
||||
|
||||
## `map`
|
||||
|
||||
- Itera através dos elementos em uma matriz.
|
||||
- "Mapeia" cada elemento para um novo elemento chamando a função em cada elemento, criando um novo array como resultado.
|
||||
|
||||
```js
|
||||
const a = [1, 2, 3];
|
||||
const doubled = a. ap((num) => {
|
||||
return num * 2;
|
||||
});
|
||||
|
||||
// duplicou = [2, 4, 6]
|
||||
```
|
||||
|
||||
A principal diferença entre `.forEach` e `.map()` é que `.map()` retorna um novo array. Se você precisa do resultado, mas não deseja alterar o array original, `.map()` é a opção clara. Se você simplesmente precisa iterar sobre um array, `forEach` é uma ótima escolha.
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
---
|
||||
title: 你能描述一个 ".forEach" 循环和 ".map()" 循环之间的主要差异吗？
|
||||
subtitle: 这两者你会如何选择？
|
||||
---
|
||||
|
||||
为了理解两者之间的差异，让我们看看每个函数做什么。
|
||||
|
||||
## `forEach`
|
||||
|
||||
- 通过数组中的元素进行迭代。
|
||||
- 对每个元素执行回调。
|
||||
- 不返回值。
|
||||
|
||||
```js
|
||||
const a = [1, 2, 3];
|
||||
const doubled = a.forEach((num, index) => {
|
||||
// 使用 num 和 index 做点什么
|
||||
});
|
||||
|
||||
// doubled = undefined
|
||||
```
|
||||
|
||||
## `map`
|
||||
|
||||
- 通过数组中的元素进行迭代。
|
||||
- 通过在每个元素上调用函数，将每个元素 "映射 "到一个新的元素上，并作为结果创建一个新的数组。
|
||||
|
||||
```js
|
||||
const a = [1, 2, 3];
|
||||
const doubled = a.map((num) => {
|
||||
return num * 2;
|
||||
});
|
||||
|
||||
// doubled = [2, 4, 6]
|
||||
```
|
||||
|
||||
`.forEach` 和 `.map()` 之间的主要区别是`.map()` 返回一个新数组。 如果你需要结果，但不想改变原始数组，`.map()`是一个明确的选择。 如果你只需遍历一个数组，`forEach`就是一个很好的选择。
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
---
|
||||
title: Você pode explicar a diferença entre codificar um site para ser responsivo e usar uma estratégia mobile-first?
|
||||
---
|
||||
|
||||
Estas duas abordagens não se excluem mutuamente. Tornar um site responsivo significa que alguns elementos irão responder adaptando seu tamanho ou outras funcionalidades de acordo com o tamanho da tela do dispositivo, normalmente a largura da viewport, através de media queries CSS, por exemplo, tornando o tamanho da fonte menor em dispositivos menores.
|
||||
|
||||
```css
|
||||
@media (min-width: 768px) {
|
||||
. y-class {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
. y-class {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Uma estratégia mobile-first também é responsiva, no entanto, ela define todos os estilos para dispositivos móveis como padrão e adiciona regras específicas para dispositivos maiores posteriormente. Seguindo o exemplo anterior:
|
||||
|
||||
```css
|
||||
.min-classe {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.my-class {
|
||||
font-size: 24px;
|
||||
}
|
||||
```
|
||||
|
||||
Uma estratégia mobile-first tem as seguintes principais vantagens:
|
||||
|
||||
- É mais performático em dispositivos móveis, já que todas as regras aplicadas para eles não precisam ser validadas em relação a nenhuma media query.
|
||||
- Designs mobile-first são mais propensos a ser utilizáveis em dispositivos maiores (apenas aparecerão mais esticados, mas ainda utilizáveis). No entanto, o inverso não é verdadeiro.
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
---
|
||||
title: 你能解释一下将网站编码为响应式与使用移动优先策略之间的区别吗？
|
||||
---
|
||||
|
||||
这两种办法并非相互排斥。 网站响应意味着某些元素将根据设备的屏幕大小通过调整其大小或其他功能来应对。 通常是视图宽度，通过 CSS 媒体查询，例如，在较小的设备上使字体大小更小。
|
||||
|
||||
```css
|
||||
@media (min-width: 768px) {
|
||||
.my-class {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.my-class {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
移动优先的策略也是响应式的，但它允许我们应该默认和定义移动设备的所有样式，只在以后为其他设备添加特定的响应式规则。 沿用上一个示例：
|
||||
|
||||
```css
|
||||
.my-class {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.my-class {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
移动优先策略具有以下主要优点：
|
||||
|
||||
- 它在移动设备上的性能更强，因为适用于它们的所有规则都不必与任何媒体查询进行验证。
|
||||
- 移动优先的设计更有可能在更大的设备上使用（只是会显得更拉长，但仍然可以使用）。 当然，反过来就不适用了。
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
---
|
||||
title: Você pode dar um exemplo para desestruturar um objeto ou um array?
|
||||
---
|
||||
|
||||
Destructuring é uma expressão disponível no ES2015 que permite uma maneira sucinta e conveniente de extrair valores de objetos ou arrays e colocá-los em variáveis distintas.
|
||||
|
||||
## Desestruturação de array
|
||||
|
||||
```js
|
||||
// Atribuição de variáveis.
|
||||
const foo = ['one', 'two', 'three'];
|
||||
|
||||
const [one, two, three] = foo;
|
||||
console. og(um); // "um"
|
||||
console.log(dois); // "dois"
|
||||
console.log(três); // "três"
|
||||
```
|
||||
|
||||
```js
|
||||
// Trocar variáveis
|
||||
let a = 1;
|
||||
let b = 3;
|
||||
|
||||
[a, b] = [b, a];
|
||||
console. og(a); // 3
|
||||
console.log(b); // 1
|
||||
```
|
||||
|
||||
## Desestruturação de objeto
|
||||
|
||||
```js
|
||||
// Atribuição de variáveis.
|
||||
const o = {p: 42, q: true};
|
||||
const {p, q} = o;
|
||||
|
||||
console.log(p); // 42
|
||||
console.log(q); // true
|
||||
```
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
---
|
||||
title: 您能提供一个解构对象或数组的例子吗？
|
||||
---
|
||||
|
||||
解构是一个在 ES2015 中可用的表达式，它使得能够以简洁和方便的方式提取对象或数组的值，并将它们置于不同的变量中。
|
||||
|
||||
## 数组的解构
|
||||
|
||||
```js
|
||||
// 变量赋值
|
||||
const foo = ['one', 'two', 'three'];
|
||||
|
||||
const [one, two, three] = foo;
|
||||
console.log(one); // "one"
|
||||
console.log(two); // "two"
|
||||
console.log(three); // "three"
|
||||
```
|
||||
|
||||
```js
|
||||
// 交换变量
|
||||
let a = 1;
|
||||
let b = 3;
|
||||
|
||||
[a, b] = [b, a];
|
||||
console.log(a); // 3
|
||||
console.log(b); // 1
|
||||
```
|
||||
|
||||
## 对象的解构
|
||||
|
||||
```js
|
||||
// 变量赋值
|
||||
const o = {p: 42, q: true};
|
||||
const {p, q} = o;
|
||||
|
||||
console.log(p); // 42
|
||||
console.log(q); // true
|
||||
```
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
---
|
||||
title: Você pode dar um exemplo de uma função de curry e por que essa sintaxe oferece uma vantagem?
|
||||
---
|
||||
|
||||
Currying é um padrão em que uma função com mais de um parâmetro é dividida em várias funções que, quando chamadas em série, acumularão todos os parâmetros necessários um de cada vez. Essa técnica pode ser útil para tornar o código escrito em um estilo funcional mais fácil de ler e compor. É importante observar que, para que uma função seja curried, ela precisa começar como uma função e, em seguida, ser dividida em uma sequência de funções que cada uma aceita um parâmetro.
|
||||
|
||||
```js
|
||||
function curry(fn) {
|
||||
if (fn.length === 0) {
|
||||
return fn;
|
||||
}
|
||||
|
||||
function _curried(depth, args) {
|
||||
return function (newArgument) {
|
||||
if (depth - 1 === 0) {
|
||||
return fn(...args, newArgument);
|
||||
}
|
||||
return _curried(depth - 1, [...args, newArgument]);
|
||||
};
|
||||
}
|
||||
|
||||
return _curried(fn.length, []);
|
||||
}
|
||||
|
||||
function add(a, b) {
|
||||
return a + b;
|
||||
}
|
||||
|
||||
var curriedAdd = curry(add);
|
||||
var addFive = curriedAdd(5);
|
||||
|
||||
var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
|
||||
```
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
---
|
||||
title: 您能提供一个柯里化函数的例子，以及为什么这个语法会有优势？
|
||||
---
|
||||
|
||||
柯里化是一种模式，即一个有多个参数的函数被分解成多个函数，当被串联调用时，将一次积累所有需要的参数。 这种技术有助于使以函数式风格的代码更容易阅读和组合。 值得注意的是，要使一个函数被柯里化，它需要从一个函数开始，然后分解成一连串的函数，每个函数接受一个参数。
|
||||
|
||||
```js
|
||||
function curry(fn) {
|
||||
if (fn.length === 0) {
|
||||
return fn;
|
||||
}
|
||||
|
||||
function _curried(depth, args) {
|
||||
return function (newArgument) {
|
||||
if (depth - 1 === 0) {
|
||||
return fn(...args, newArgument);
|
||||
}
|
||||
return _curried(depth - 1, [...args, newArgument]);
|
||||
};
|
||||
}
|
||||
|
||||
return _curried(fn.length, []);
|
||||
}
|
||||
|
||||
function add(a, b) {
|
||||
return a + b;
|
||||
}
|
||||
|
||||
var curriedAdd = curry(add);
|
||||
var addFive = curriedAdd(5);
|
||||
|
||||
var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
|
||||
```
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
---
|
||||
title: Você pode dar um exemplo de uma propriedade `@media` diferente de `tela`?
|
||||
---
|
||||
|
||||
Existem quatro tipos de propriedades `@media` (incluindo `screen`):
|
||||
|
||||
- `all`: para todos os dispositivos de tipo de mídia
|
||||
- `print`: para impressoras
|
||||
- `speech`: para leitores de tela que "lêem" a página em voz alta
|
||||
- `screen`: para telas de computadores, tablets, smartphones, etc.
|
||||
|
||||
Aqui está um exemplo de uso do tipo de mídia `print`:
|
||||
|
||||
```css
|
||||
@media print {
|
||||
body {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
---
|
||||
title: 你能举例说明除 "screen "以外的媒体查询属性吗？
|
||||
---
|
||||
|
||||
有四种类型的媒体查询属性(包括`screen`)：
|
||||
|
||||
- `all`：适用于所有媒体类型设备
|
||||
- `print`: 适用于打印机
|
||||
- `speech`：用于屏幕阅读器，大声 "读 "出页面。
|
||||
- `screen`：用于电脑屏幕、平板电脑、智能手机等。
|
||||
|
||||
下面是 `print` 媒体类型的用法示例：
|
||||
|
||||
```css
|
||||
@media print {
|
||||
body {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Você pode oferecer um caso de uso para a nova sintaxe de arrow function =>?
|
||||
subtitle: Como essa nova sintaxe difere de outras funções?
|
||||
---
|
||||
|
||||
Um benefício óbvio das arrow functions é simplificar a sintaxe necessária para criar funções, sem a necessidade da palavra-chave `função`. O `isto` dentro das arrow functions também está ligado ao escopo que é diferente comparado a funções regulares onde o `isto` é determinado pelo objeto que o chama. `this` com escopo léxico é útil ao invocar callbacks, especialmente em componentes React.
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: 您可以为新箭头函数语法提供一个用例吗？
|
||||
subtitle: 这个新语法与其他函数有什么不同？
|
||||
---
|
||||
|
||||
箭头函数的一个明显好处是简化创建函数所需的语法，而不需要 `function` 关键字。 箭头函数中的`this`也与正常函数不同，而正常函数`this`是由调用对象决定的。 在调用回调时，特别是在React组件中，词法范围的`this`非常有用。
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
title: Crie um loop for que itere até `100` enquanto exibe **"fizz"** em múltiplos de `3`, **"buzz"** em múltiplos de `5` e **"fizzbuzz"** em múltiplos de `3` e `5`
|
||||
---
|
||||
|
||||
Confira esta versão de FizzBuzz por [Paul Irish](https://gist.github.com/jaysonrowe/1592432#gistcomment-790724).
|
||||
|
||||
```js
|
||||
for (let i = 1; i <= 100; i++) {
|
||||
let f = i % 3 == 0,
|
||||
b = i % 5 == 0;
|
||||
console. og(f ? (b ? 'FizzBuzz' : 'Fizz') : b ? 'Buzz' : i);
|
||||
}
|
||||
```
|
||||
|
||||
No entanto, não é aconselhável escrever isso acima durante entrevistas. Mantenha-se fiel à abordagem longa mas clara. Para mais versões malucas de FizzBuzz, confira o link de referência abaixo.
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
title: 创建一个for循环，迭代到`100`，同时在`3`的倍数上输出**"fizz "**，在`5`的倍数上输出**"buzz "**，在`3`和`5`的公倍数上输出`fizzbuzz "**。
|
||||
---
|
||||
|
||||
看看这个版本的 FizzBuzz，作者是 [Paul Irish](https://gist.github.com/jaysonrowe/1592432#gistcomment-790724)。
|
||||
|
||||
```js
|
||||
for (let i = 1; i <= 100; i++) {
|
||||
let f = i % 3 == 0,
|
||||
b = i % 5 == 0;
|
||||
console.log(f ? (b ? 'FizzBuzz' : 'Fizz') : b ? 'Buzz' : i);
|
||||
}
|
||||
```
|
||||
|
||||
不过，上述内容不宜在面试时写。 只要坚持长期而明确的做法。 关于更多古怪的FizzBuzz版本，请查看下面的参考链接。
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
---
|
||||
title: Por que geralmente é uma boa ideia posicionar os CSS `<link>` entre `<head></head>` e os JS `<script>` logo antes de `</body>`?
|
||||
subtitle: Você conhece alguma exceção?
|
||||
---
|
||||
|
||||
Em poucas palavras, posicionamento CSS `<link>`s and JavaScript `<script>`s permite uma renderização mais rápida da página e um melhor desempenho geral.
|
||||
|
||||
## Colocando `<link>`s em `<head>`
|
||||
|
||||
Colocar `<link>`s em `<head>` faz parte da especificação adequada na construção de um site otimizado. Quando uma página é carregada pela primeira vez, HTML e CSS são analisados simultaneamente; O HTML cria o DOM (modelo de objeto do documento) e o CSS cria o modelo de objeto CSSOM (CSS Object Model). Ambos são necessários para criar os elementos visuais de um site, permitindo um tempo rápido para o "primeiro desenho significativo" (first meaningful paint). Colocar o CSS<link>`s no `<head>\` garante que os estilos são carregados e prontos para uso quando o navegador começar a renderizar a página.
|
||||
|
||||
Esta renderização progressiva é uma métrica em que os sites são medidos na sua pontuação de desempenho. Colocar folhas de estilo perto do final do documento é o que impede a renderização progressiva em muitos navegadores. Alguns navegadores bloqueiam a renderização para evitar ter que repintar elementos da página se seus estilos mudarem. O usuário fica então preso visualizando uma página em branco. Outras vezes, podem ocorrer flashes de conteúdo não estilizado (FOUC), que mostram uma página da web sem a aplicação de estilos.
|
||||
|
||||
## Colocando `<script>`s logo antes `</body>`
|
||||
|
||||
`<script>` bloqueia a análise HTML enquanto eles estão sendo baixados e executados, o que pode diminuir a velocidade da sua página. Colocar o `<script>`s na parte inferior permitirá que o HTML seja analisado e exibido ao usuário primeiro.
|
||||
|
||||
Uma exceção para posicionamento de `<script>`s na parte inferior é quando o script contém `documento.write()`, mas hoje em dia não é uma boa prática usar `document.write()`. Também, colocar `<script>`s na parte inferior significa que o navegador não pode iniciar o download dos scripts até que o documento inteiro seja analisado. Isso garante que seu código que precisa manipular elementos DOM não irá lançar um erro e parar todo o script. Se você precisar colocar `<script>`s no `<head>`, use o atributo `defer`, que alcançará o mesmo efeito de executar o script somente depois que o HTML for analisado, mas o navegador pode expulsar a solicitação de rede antes de baixar o script.
|
||||
|
||||
Tenha em mente que colocar scripts antes da tag de fechamento `</body>` irá criar a ilusão de que a página carrega mais rápido em um cache vazio (já que os scripts não vão bloquear o download do resto do documento). No entanto, se você tiver algum código que deseja executar durante o carregamento da página, ele só começará a ser executado após o carregamento completo da página. Se você colocar esses scripts na tag \`<head>, eles começariam a ser executados antes, então em um cache carregado a página parece carregar mais rápido.
|
||||
|
||||
## As tags `<head>` e ` <body>` agora são opcionais
|
||||
|
||||
Como na especificação HTML5, certas tags HTML como `<head>` e`<body>` são opcionais. O guia de estilo do Google recomenda até a sua remoção para economizar bytes. No entanto esta prática ainda não é amplamente adotada e o ganho de desempenho é provavelmente mínimo e para a maioria dos sites isso não vai importar.
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
---
|
||||
title: 为什么一般来说，将CSS`<link>`放在`<head></head>`之间，将JS`<script>`放在`<3>`之前是个好主意？
|
||||
subtitle: 您是否知道任何例外情况？
|
||||
---
|
||||
|
||||
简而言之， 这种CSS `<link>` 和 JavaScript `<script>` 的放置可以更快地呈现页面和更好的整体性能。
|
||||
|
||||
## 将<link>` 放置在`<head> \` 中
|
||||
|
||||
将<link>` 放入`<head>`是建立一个优化网站的正确规范的一部分。 当页面首次加载时，HTML和CSS同时解析； HTML 创建DOM (文档对象模型) ， CSS 创建CSSOM (CSS 对象模型)。 两者都需要在网站中创建视觉效果，以优化 "首次有意义的绘制 "时机。 将 CSS `<link>` 放入`<head>\`中确保了样式表已加载并准备在浏览器开始渲染页面时使用。
|
||||
|
||||
这种渐进式渲染是网站在其性能评分中衡量的一个指标。 将样式表放在文档的底部是禁止在许多浏览器中进行渐进式渲染的原因。 某些浏览器阻止渲染以避免在其样式改变时需要重新刷新页面元素。 然后，用户会被卡住，面对一个空白页面。 其它时候可能会有无样式内容的闪烁(FOUC)，它会显示一个没有应用样式的网页。
|
||||
|
||||
## 在`</body>`之前放置`<script>`。
|
||||
|
||||
`<script>`标签在下载和执行时阻止了HTML解析，这可能会拖慢你的页面显示。 将`<script>`放在底部将允许HTML首先被解析并显示给用户。
|
||||
|
||||
当你的脚本包含`document.write()`时，`<script>`在底部的定位是一个例外，但现在使用`document.write()`并不是一个好的做法。 另外，将 `<script>`放在底部意味着，在解析整个文档之前，浏览器无法开始下载脚本。 这将确保您需要操纵DOM元素的代码不会导致错误从而停止整个脚本。 如果你需要把`<script>`放在`<head>`中，请使用`defer`属性，这将达到同样的效果，即在HTML被解析后才运行脚本，但浏览器可以提前启动网络请求以下载脚本。
|
||||
|
||||
请记住，把脚本放在结尾的`</body>`标签之前，会造成页面在空的缓存中加载更快的错觉（因为脚本不会阻止下载文档的其他部分）。 但是，如果你想要在页面加载时运行一些代码，它只会在整个页面加载后才开始执行。 如果你将那些脚本放入`<head>`标签， 他们会在预设的缓存中开始执行, 所以页面实际上会加载更快。
|
||||
|
||||
## `<head>` 和 `<body>`标签现在是可选的
|
||||
|
||||
按照HTML5的规格，某些HTML标签，如`<head>`和`<body>`都是可选的。 谷歌的样式指南甚至建议删除它们以便保存字节。 然而，仍然存在着这样一种现象： 这种做法仍然没有得到广泛采用，性能收益很可能很小，对大多数网站来说不太可能起作用。
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
title: Descrever o contexto de formatação de bloco (BFC) e como ele funciona.
|
||||
---
|
||||
|
||||
Um Contexto de Formatação de Bloco (BFC) é parte da renderização visual do CSS em uma página da web, no qual os blocos são organizados. Elementos flutuantes, posicionados absolutamente, `inline-blocks`, `table-cells`, `table-captions` e elementos com `overflow` diferente de `visible` (exceto quando esse valor foi propagado para a área visível) estabelecem novos contextos de formatação de bloco.
|
||||
|
||||
Saber estabelecer um contexto de formatação de blocos é importante, porque sem fazer isso, a caixa de contenção não conterá [contém filhos flutuados](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height). Isso é semelhante ao colapso das margens, mas mais insidioso, pois você encontrará caixas inteiras colapsando de maneiras estranhas.
|
||||
|
||||
Um BFC é uma caixa HTML que atende pelo menos uma das seguintes condições:
|
||||
|
||||
- O valor de 'float' não é 'none'.
|
||||
- O valor de `posição` não é `static` nem `relative`.
|
||||
- O valor de `display` é `table-cell`, `table-caption`, `inline-block`, `flex`, or `inline-flex`, `grid`, or `inline-grid`.
|
||||
- O valor de 'float' não é 'none'.
|
||||
|
||||
Em um BFC, a borda externa esquerda de cada caixa toca a borda esquerda do bloco contêiner (para formatação da direita para a esquerda, as bordas direitas se tocam).
|
||||
|
||||
As margens verticais entre caixas adjacentes de nível de bloco em um BFC colapsam. Leia mais em [margens de recolhimento](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing).
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
title: 描述块级格式化上下文(BFC)及其工作方式。
|
||||
---
|
||||
|
||||
块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域。 浮动、绝对定位的元素、`inline-blocks`、`table-cells`、`table-caption`和 `overflow `值不为 `visible` 的元素（除非该值已被传播到视口）建立新的块格式化上下文。
|
||||
|
||||
了解如何建立一个块格式化的上下文是很重要的，因为如果不这样做，容器盒子就不会[包含浮动的子元素](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height)。 这类似于外边距重叠，但更阴险，因为你会发现整个盒子以奇特的方式重叠。
|
||||
|
||||
想要创建一个BFC，至少满足下列条件之一：
|
||||
|
||||
- `float` 的值不是 `none` 。
|
||||
- `position` 的值既不是`static` 也不是`relative` 。
|
||||
- `display` 的值是 `table-cell`, `table-caption`, `inline-block`, `flex`, 或 `inline-flex`, `gid`, 或 `inline-grid`。
|
||||
- `overflow`的值不是\`visible'。
|
||||
|
||||
在BFC中，每个盒子的左外边缘都会接触到包含块的左边缘（对于从右到左的格式化，右边缘会接触）。
|
||||
|
||||
BFC 中相邻区块级盒子之间的垂直外间距会被折叠。 在[外边距重叠](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_mark_mark_bolsing)上阅读更多内容。
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Descreva a propagação de eventos
|
||||
---
|
||||
|
||||
Quando um evento é disparado em um elemento do DOM, ele tentará manipular o evento se houver um ouvinte anexado, então o evento é propagado para seu pai e a mesma coisa acontece. Essa propagação ocorre pelos ancestrais do elemento até o `document`. A propagação de eventos é o mecanismo por trás da delegação de eventos.
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: 描述事件冒泡过程
|
||||
---
|
||||
|
||||
当事件触发 DOM 元素时，如果有监听器，它会尝试处理事件， 然后事件会向上冒泡并发生同样的事件。 这种冒泡发生在元素的祖先上，一直到`document`。 事件冒泡是活动授权背后的机制。
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
---
|
||||
title: Descreva os 'float' e como funcionam.
|
||||
---
|
||||
|
||||
Float é uma propriedade CSS de posicionamento. Elementos flutuantes permanecem uma parte do fluxo da página, e afetarão o posicionamento de outros elementos (por exemplo, texto irá fluir em torno dos elementos flutuantes), ao contrário de `posição: absoluto`, que são removidos do fluxo da página.
|
||||
|
||||
A propriedade CSS `clear` pode ser usada para ser posicionada abaixo de `left`/`right`/`both` elementos flutuantes.
|
||||
|
||||
Se um elemento pai não conter nada além de elementos flutuantes, sua altura será desmoronada a nada. Ele pode ser corrigido limpando o float após os elementos flutuantes no contêiner, mas antes do fechamento do container.
|
||||
|
||||
## O hack do Clearfix
|
||||
|
||||
O hack `.clearfix` usa um CSS inteligente [pseudo-element](/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for) (`::after`) para limpar floats. Ao invés de definir o excesso de fluxo no pai, você aplica uma classe adicional `clearfix` para ele. Em seguida, aplique este CSS:
|
||||
|
||||
```css
|
||||
.clearfix::after {
|
||||
content: ' ';
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
}
|
||||
```
|
||||
|
||||
Como alternativa, dê a propriedade `overflow: auto` ou `overflow: hidden` ao elemento pai que estabelecerá um novo contexto de formatação de bloco dentro dos filhos e ele será expandido para conter seus filhos.
|
||||
|
||||
## Trívia
|
||||
|
||||
Nos bons dias antigos, o CSS frameworks como o Bootstrap 2 usou a propriedade `float` para implementar seu sistema de grade. No entanto, com CSS Flexbox e Grid atualmente, não há muita necessidade de usar a propriedade `float`.
|
||||
|
||||
## Referências
|
||||
|
||||
- [Clearfix: Uma Lição em Desenvolvimento Web Evolução](https://css-tricks.com/clearfix-a-lesson-web-development-evolution/)
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
---
|
||||
title: 描述“浮动”及其工作方式。
|
||||
---
|
||||
|
||||
Float 是一个 CSS 定位属性。 浮动元素仍然是文档流的一部分，将影响到其他元素的定位（如： 文本将环绕在浮动元素周围）。不同于`position: absolute` 元素，它们将从文档流中删除。
|
||||
|
||||
CSS `clear` 属性可以放置在 `left`/`right`/`both` 浮动元素之下。
|
||||
|
||||
如果父元素只包含浮动元素，它的高度将被折叠为零。 可以通过在容器中的浮动元素之后但在关闭容器之前清除浮动来解决。
|
||||
|
||||
## 清浮动技巧
|
||||
|
||||
`.clearfix` 用一个聪明的 CSS [伪元素]\(/questions/quiz/sign-pseudo-elements-and-discussions-what they-are-used-for) (`:after `) 来清除浮动。 不要在父级设置溢出，而是对它应用一个额外的类 `clearfix` 。 然后应用此 CSS ：
|
||||
|
||||
```css
|
||||
.clearfix::after {
|
||||
content: ' ';
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
}
|
||||
```
|
||||
|
||||
或者，， 给`overflow: auto` 或 `overflow: hidden` 属性到父元素, 它将在子元素中建立一个新的块格式化环境, 它将扩展到包含它的子元素.
|
||||
|
||||
## 琐事
|
||||
|
||||
在过去的好日子里，Bootstrap 2等CSS框架使用`float`属性来实现其网格系统。 然而，随着这些日子的 CSS Flexbox 和 Grid，已不再需要使用 `float` 属性。
|
||||
|
||||
## 参考资料
|
||||
|
||||
- [清浮动: 网页开发的演变课程](https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/)
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
title: Descreva pseudo-elementos e discuta para que eles são usados.
|
||||
---
|
||||
|
||||
Um CSS [pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) é uma palavra-chave adicionada a um seletor que permite estilizar uma parte específica do(s) elemento(s) selecionado(s). Eles podem ser usados para decoração (`::first-line`, `::first-letter`) ou adicionando elementos à marcação (combinado com `conteúdo: . .`) sem ter que modificar a marcação (`:before`, `:after`).
|
||||
|
||||
- `::first-line` e `::first-letter` podem ser usados para decorar o texto.
|
||||
- Usado no truque `.clearfix` conforme mostrado acima, para adicionar um elemento de espaço zero com `clear: both`.
|
||||
- As setas triangulares em tooltips utilizam `::before` e `::after`. Incentiva a separação de responsabilidades porque o triângulo é considerado parte do estilo e não realmente do DOM.
|
||||
|
||||
## Notas
|
||||
|
||||
- Pseudo-elementos são diferentes de [pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes), que são usados para estilizar um elemento baseado em seu _state_ (como `:hover`, `:focus`, etc).
|
||||
- Dois-pontos devem ser usados em vez de dois-pontos para distinguir pseudo-classes de pseudo-elementos. A maioria dos navegadores suporta ambas as sintaxes, pois essa distinção não estava clara nas especificações antigas do W3C.
|
||||
|
||||
## Referências
|
||||
|
||||
- [Pseudo-elements - CSS ├MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
title: 描述伪元素并讨论其用途。
|
||||
---
|
||||
|
||||
CSS [伪元素](https://developer.mozilla.org/en-US/docs/Web/CS/Pseudo-elements) 是一个添加到选择器中的关键词，使您能够修改所选元素的特定部分的样式。 它们可以用于装饰(::firstline,`::firstletter`)或添加标签元素(结合`content: ...`) 无需修改标签(`:before`, `:after `)
|
||||
|
||||
- `::firstline` 和 `::firstletter` 可以用于装饰文本。
|
||||
- 用于 `.clearfix` 技巧，如上图所示，添加一个带有`clear: both`的零空间元素。
|
||||
- Tooltips 中的三角箭头使用 `:before` 和 `:after ` 。 鼓励关注点分离，因为三角形被视为样式的一部分，而不是真正的DOM。
|
||||
|
||||
## 备注
|
||||
|
||||
- 伪元素不同于 [伪类](https://developer.mozilla.org/en-US/docs/Web/CS/Pseudo-classes)，后者用于根据状态(例如`:hover`, `:focus`, 等等) 修改样式。
|
||||
- 应使用双冒号而不是单冒号来区分伪类和伪元素。 大多数浏览器都支持这两种语法，因为旧的 W3C 视图中没有区分这点。
|
||||
|
||||
## 参考资料
|
||||
|
||||
- [伪元素-CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CS/Pseudo-elements)
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
---
|
||||
title: Descreva a diferença entre um cookie, `sessionStorage` e `localStorage`.
|
||||
---
|
||||
|
||||
## Similaridades
|
||||
|
||||
Cookies, `localStorage`, and `sessionStorage`, são todos:
|
||||
|
||||
- Mecanismos de armazenamento no lado do cliente. Isso significa que os clientes podem ler e modificar os valores.
|
||||
- Armazenamento baseado em chave-valor.
|
||||
- Eles só são capazes de armazenar valores como strings. Objetos terão que ser serializados em uma string (`JSON.stringify()`) a fim de serem armazenados.
|
||||
|
||||
## Diferenças
|
||||
|
||||
| Propriedade | Cookie | `localStorage` | `sessionStorage` |
|
||||
| ------------------------------------------------- | ------------------------------------------------------------------ | --------------- | ---------------- |
|
||||
| Iniciador | Cliente ou servidor. O servidor pode usar o cabeçalho `Set-Cookie` | Cliente | Cliente |
|
||||
| Vencimento | Definir manualmente | Para sempre | Ao fechar a aba |
|
||||
| Persistente através de sessões do navegador | Depende se a expiração está definida | Sim | Não |
|
||||
| Enviado para o servidor com cada solicitação HTTP | Os cookies são automaticamente enviados via cabeçalho `Cookie` | Não | Não |
|
||||
| Capacidade (por domínio) | 4kb | 5MB | 5MB |
|
||||
| Acesso | Quqlquer Janela | Quqlquer Janela | Mesma Guia |
|
||||
|
||||
Também existem outros mecanismos de armazenamento do lado do cliente, como [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) que é mais poderoso do que as tecnologias acima mencionadas, mas mais complicado de usar.
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
---
|
||||
title: 描述cookie、 `sessionStorage` 和 `localStorage` 之间的差异。
|
||||
---
|
||||
|
||||
## 相似性
|
||||
|
||||
Cookies、`localStorage`和`sessionStorage`都是:
|
||||
|
||||
- 客户端的存储机制。 这意味着客户端可以阅读和修改这些值。
|
||||
- 基于键值的存储。
|
||||
- 他们只能存储作为字符串的值。 对象必须序列化为字符串 (`JSONstringify()`) 才能存储。
|
||||
|
||||
## 差异
|
||||
|
||||
| 属性 | Cookie | LocalStorage | SessionStorage |
|
||||
| --------------- | ------------------------------- | ------------ | -------------- |
|
||||
| 发起方 | 客户端或服务器。 服务器可以使用 `Set-Cookie` 头 | 客户端 | 客户端 |
|
||||
| 有效期 | 手动设置 | 永久 | 标签关闭时 |
|
||||
| 跨浏览器会话的持久性 | 取决于是否设置过期时间 | 是 | 否 |
|
||||
| 每次HTTP请求都发送到服务器 | Cookie 会自动通过 `Cookie` 头发送 | 否 | 否 |
|
||||
| 容量(每个域) | 4kb | 5MB | 5MB |
|
||||
| 访问权限 | 任何窗口 | 任何窗口 | 部分标签页 |
|
||||
|
||||
还有其他客户端存储机制，如 [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/ADI/IndexedDB_API)，比上述技术更强大，但使用起来更复杂。
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
title: Descreva a diferença entre<script>`, `<script async>` e `<script defer>`
|
||||
---
|
||||
|
||||
tags `<script>` são usadas para incluir JavaScript em uma página da web. Os atributos `async` e `defer` são usados para mudar como/quando o carregamento e a execução do script acontecem.
|
||||
|
||||
## Simples `<script>`
|
||||
|
||||
Para tags normais `<script>` sem qualquer `async` ou `defer`, quando forem encontrados, a análise do HTML é bloqueada, o script é buscado e executado imediatamente. A análise do HTML é retomada após a execução do script.
|
||||
|
||||
## `<script async>`
|
||||
|
||||
No `<script async>`, o script será buscado em paralelo à análise do HTML e será executado assim que estiver disponível (potencialmente antes da conclusão da análise do HTML) e não será necessariamente executado na ordem em que aparece no documento HTML. Use `async` quando o script é independente de quaisquer outros scripts na página, por exemplo, analytics.
|
||||
|
||||
## `<script defer>`
|
||||
|
||||
No `<script defer>`, o script será buscado em paralelo à análise HTML e executado quando o documento tiver sido totalmente analisado, mas antes de disparar `DOMContentLoaded`. Se houver múltiplos, cada script adiado é executado na ordem em que eles apareceram no documento HTML.
|
||||
|
||||
Se um script depende de um DOM totalmente analisado, o atributo `defer` será útil para garantir que o HTML seja totalmente analisado antes de ser executado.
|
||||
|
||||
## Notas
|
||||
|
||||
- Geralmente, o atributo `async` deve ser usado para scripts que não são críticos para a renderização inicial da página e não dependem um do outro. enquanto o atributo `defer` deve ser usado para scripts que dependem de / é dependente de outro script.
|
||||
- Os atributos `async` e `defer` são ignorados para scripts que não têm o atributo `src`.
|
||||
- `<script>`s com `defer` ou `async` que contêm `document.write()` serão ignorados com uma mensagem como "Uma chamada para o documento.write() de um script externo carregado de forma assíncrona foi ignorado.
|
||||
|
||||
## Referências
|
||||
|
||||
- [`<script>`: O elemento Script shr.MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer)
|
||||
- [async vs defer attributes](https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html)
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
title: 描述`<script>`、`<script async>`和`<script defer> `之间的差异
|
||||
---
|
||||
|
||||
<script> 标签用于在网页上包含 JavaScript 。 "async" 和 `defer` 属性用于更改脚本加载和执行的方式/时机。
|
||||
|
||||
## 普通`<script>`
|
||||
|
||||
对于普通的<script>标签，在遇到它们时没有任何`async` 或 `defer`。 HTML解析被阻止，脚本会被下载并立即执行。 脚本执行后HTML解析恢复。
|
||||
|
||||
## `<script async>`
|
||||
|
||||
在"<script async>"中，脚本将与HTML解析并行获取，并在其可用时立即执行（可能在HTML解析完成之前），而且不一定按照HTML文档中的顺序执行。 当脚本独立于页面上的任何其他脚本时使用 "async" ，比如分析。
|
||||
|
||||
## `<script defer>`
|
||||
|
||||
在`<script defer>`, 脚本将在文档已完全解析并执行时并行获取到 HTML 解析和执行， 但在 `DOMContentLoaded` 事件之前。 如果其中有多个，每个defer脚本都是按照它们在 HTML 文档中出现的顺序执行的。
|
||||
|
||||
如果脚本依赖于完全解析的DOM，则`defer` 属性将有助于确保在执行前完全解析HTML。
|
||||
|
||||
## 备注
|
||||
|
||||
- 一般说来， "async" 属性应该用于对页面初始化不重要且不依赖于对方的脚本。 `defer` 属性应该用于依赖于/被依赖于其他脚本的脚本。
|
||||
- 没有`src`属性的脚本， `async` 和 `deleger` 属性会被忽略。
|
||||
- 包含`defer'或`async'的`<script>`将被忽略，并显示 "来自异步加载的外部脚本对document.write()的调用被忽略 "的信息。
|
||||
|
||||
## 参考资料
|
||||
|
||||
- [`<script>`: 脚本元素 | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer)
|
||||
- [async vs defer 属性](https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html)
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
title: Descreva o que você gosta e não gosta sobre os pré-processadores CSS que você usou.
|
||||
---
|
||||
|
||||
## Curtidas
|
||||
|
||||
- A maioria das vantagens mencionadas em ["Quais são as vantagens/desvantagens de usar pré-processadores CSS?"](/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors).
|
||||
- Less é escrito em JavaScript, o que o torna compatível com o Node.
|
||||
|
||||
## Dislikes
|
||||
|
||||
- Sass depende de `node-sass`, que é um vínculo para o LibSass escrito em C++. A biblioteca tem que ser recalculada com frequência quando estiver mudando entre as versões do Node.js.
|
||||
- No Less, os nomes de variáveis são prefixados com `@`, o que pode ser confundido com palavras-chave nativas do CSS, como a regra `@media`, `@import` e `@font-face`.
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
title: 描述您喜欢和不喜欢使用的 CSS 预处理器。
|
||||
---
|
||||
|
||||
## 喜欢
|
||||
|
||||
- 主要是[“使用CSS preprocessors的优点/缺点?”]\(/questions/quiz/what-are-the-favourges-adversus of using-css-preprocesss) 中提到的优势。
|
||||
- Less 是用 JavaScript 写的，它在 Nodejs 中很好用。
|
||||
|
||||
## 不喜欢
|
||||
|
||||
- Sass 依赖 `node-sass`，它是一个 C++ 写的 LibSass的绑定。 当在 Node.js 版本间切换时，必须经常重新编译库。
|
||||
- 在Less中，变量名前缀是`@`, 它可能与原生的 CSS 关键字混淆, 例如`@media`, `@import` 和 `@font-face` 规则。
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
title: Descreva `z-index` e como o contexto de empilhamento é formado.
|
||||
---
|
||||
|
||||
A propriedade `z-index` no CSS controla a ordem de empilhamento vertical dos elementos que se sobrepõem. 'z-index' afeta apenas elementos posicionados (elementos que têm um valor de 'posição' que não é 'static') e seus descendentes ou itens flexíveis.
|
||||
|
||||
Sem qualquer valor de `z-index`, pilha de elementos na ordem de exibição no DOM (o menor nível abaixo na mesma hierarquia aparece no topo). Elementos com posicionamento não estático (e seus filhos) sempre aparecerão no topo dos elementos com posição estática padrão, independente da hierarquia HTML.
|
||||
|
||||
Um contexto de empilhamento é um elemento que contém um conjunto de camadas. Dentro de um contexto local de empilhamento, os valores de `z-index` de seus filhos são definidos em relação a esse elemento, ao invés da raiz do documento. Camadas fora desse contexto — ou seja, elementos irmãs de um contexto local de empilhamento — não podem ficar entre as camadas dentro dele. Se um elemento B ficar no topo do elemento A, um elemento filho do elemento A, elemento C, nunca pode ser maior que o elemento B, mesmo que o elemento C tenha um `z-index` maior que o elemento B.
|
||||
|
||||
Cada contexto de empilhamento é auto-contido - após o conteúdo do elemento ser empilhado, todo o elemento é considerado na ordem de empilhamento do contexto de empilhamento do pai. Algumas propriedades CSS desencadeiam um novo contexto de empilhamento, como `opacity` menor que 1, `filter` que não é `none`, e `transform` que não é `none`.
|
||||
|
||||
_**Nota**: O que exatamente se qualifica um elemento para criar um contexto de empilhamento está listado neste longo conjunto de [rules](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context)._
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
title: 描述“z-index”和堆叠上下文是如何形成的。
|
||||
---
|
||||
|
||||
CSS中的`z-index`属性可以控制重叠元素的垂直堆叠顺序。 `z-index`只影响定位元素(`position`值不是`static`的元素) 及其后代或 flex item。
|
||||
|
||||
在没有任何`z-index`值的情况下，元素按照它们在DOM中出现的顺序堆叠（同一层次中最低的一个出现在上面）。 具有非`static`定位(及其子位置) 的元素总是会出现在默认`static`位置的元素之上，不论HTML层次结构如何。
|
||||
|
||||
堆叠上下文是一个包含一组图层的元素。 在一个局部堆叠环境中，其子元素的`z-index`值是相对于该元素而不是根document设置的。 该上下文之外的层--即局部堆叠上下文的同级元素--不能位于它的层之间。 如果一个元素B位于元素A的上面，元素A的一个子元素C永远不会高于元素B，即使元素C的`z-index`比元素B高。
|
||||
|
||||
每个堆叠上下文都是自成一体的--在元素的内容被堆叠后，整个元素被认为是按照父堆叠上下文的堆叠顺序。 少数CSS 属性会触发一个新的堆叠上下文，如小于1的 `opacity` 、`filter` 不是 `none` 和 `transform` 不是 `none` 。
|
||||
|
||||
_**注意**：究竟是什么让一个元素有资格创建一个堆叠上下文，在这一长串[规则](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context)中列出。_
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
---
|
||||
title: Que tipo de coisas você deve estar atento ao projetar ou desenvolver para sites multilíngues?
|
||||
---
|
||||
|
||||
Projetar e desenvolver para sites multilíngues faz parte da internacionalização (i18n).
|
||||
|
||||
## Otimização de Busca (Seo)
|
||||
|
||||
- Use o atributo `lang` na tag `<html>`.
|
||||
- Incluir a localidade na URL (por exemplo, en_US, zh_CN, etc).
|
||||
- Páginas web devem usar `<link rel="alternate" hreflang="other_locale" href="url_for_other_locale">` para dizer aos motores de pesquisa que há outra página no `href` especificado com o mesmo conteúdo, mas para outro idioma/locale.
|
||||
|
||||
## Entendendo a diferença entre localidade e idioma
|
||||
|
||||
As configurações regionais controlam como números, datas e horários são exibidos para sua região: que pode ser um país, ou uma porção de país, ou talvez nem mesmo respeite as fronteiras do país.
|
||||
|
||||
## O idioma pode diferir entre países
|
||||
|
||||
Certos idiomas, especialmente os mais falados, têm diferentes "sabores" em diferentes países (regras de gramática, ortografia, caracteres). É importante diferenciar idiomas para o país de destino e não assumir/forçar a versão de um país de um idioma para todos os países que falam o idioma. Exemplos:
|
||||
|
||||
- `en`: `en-US` (Inglês Americano), `en-GB` (Inglês Britânico)
|
||||
- `zh`: `zh-CN` (Chinês (Simplificado)), `zh-TW` (Chinês (Tradicional))
|
||||
|
||||
## Prever localidade, mas sem restrições
|
||||
|
||||
Os servidores podem determinar a localidade/idioma dos visitantes por meio de uma combinação de cabeçalhos HTTP `Accept-Language` e endereços IP. Com esses, os visitantes podem selecionar automaticamente a melhor configuração regional para o visitante. No entanto, as previsões não são infalíveis (especialmente se os visitantes estiverem usando VPNs) e os visitantes ainda devem ser capazes de mudar seu país/idioma facilmente, sem complicações.
|
||||
|
||||
## Considere as diferenças no comprimento do texto em diferentes idiomas
|
||||
|
||||
Algum conteúdo pode ser mais longo quando escrito em outro idioma. Esteja atento a problemas de layout ou de overflow no design. É melhor evitar projetar onde a quantidade de texto pode fazer ou quebrar um design. A contagem de caracteres entra em jogo com coisas como manchetes, rótulos e botões. Eles são menos importantes com texto livre, como texto do corpo ou comentários. Por exemplo, alguns idiomas, como alemão e francês, tendem a usar palavras e frases mais longas do que o inglês, o que pode causar problemas de layout se você não levar isso em conta.
|
||||
|
||||
## Direção de leitura do idioma
|
||||
|
||||
Idiomas como inglês e francês são escritos da esquerda para a direita, de cima para baixo. No entanto, alguns idiomas, como hebraico e árabe, são escritos da direita para a esquerda. Isso pode afetar o layout do seu site e a colocação de elementos na página, então você deve ter cuidado ao projetar seu site de uma maneira que acomode diferentes direções de texto.
|
||||
|
||||
## Não concatene strings traduzidas
|
||||
|
||||
Não faça nada como `"A data de hoje é " + data`. Isso pode causar problemas em idiomas com ordens de palavras diferentes. Use uma string de modelo com substituição de parâmetros para cada idioma em vez disso. Por exemplo, observe as duas frases a seguir em inglês e chinês, respectivamente: I will travel on {% date %} e {% date %} 我会出发. Observe que a posição da variável é diferente devido às regras gramaticais do idioma.
|
||||
|
||||
## Formatação de datas e moedas
|
||||
|
||||
As datas do calendário são apresentadas de formas diferentes às vezes. Ex. "May 31, 2012" nos EUA. vs. "31 May 2012" em partes da Europa.
|
||||
|
||||
## Não coloque texto em imagens
|
||||
|
||||
Colocar texto em imagens baseadas em raster (por exemplo, png, gif, jpg, etc.) não é uma abordagem escalável. Colocar texto em uma imagem ainda é uma maneira popular de exibir fontes não padronizadas com boa aparência em qualquer computador. No entanto, para dar suporte à tradução de texto de imagem em outros idiomas, é necessário criar uma imagem separada para cada idioma, o que não é um fluxo de trabalho escalonável para os designers.
|
||||
|
||||
## Esteja ciente de como as cores são percebidas
|
||||
|
||||
As cores são percebidas de maneira diferente em diferentes idiomas e culturas. O design deve usar as cores de forma apropriada.
|
||||
|
||||
## Referências
|
||||
|
||||
- [As diferenças entre localidades e idiomas](https://devblogs.microsoft.com/setup/the-differences-between-locales-and-languages)
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
---
|
||||
title: 在设计或开发多语言站点时你必须注意什么事？
|
||||
---
|
||||
|
||||
设计和开发多语种网站是国际化的一部分(i18n)。
|
||||
|
||||
## 搜索引擎优化
|
||||
|
||||
- 使用 `<html>` 标签上的 `lang` 属性。
|
||||
- 在 URL 中包含区域设置(例如 en_US, zh_CN等)。
|
||||
- 网页应该使用 `<link rel="alternate" hreflang="other_locale" href="url_for_other_locale">` 来告诉搜索引擎，在指定的 `href` 中有另一个页面具有相同的内容，但是对于另一种语言/本地化。
|
||||
|
||||
## 了解地域与语言之间的区别
|
||||
|
||||
地域设置控制您所在区域的数字、日期和时间显示方式：它可能是一个国家，或国家的一部分，甚至可能不尊重国家边界。
|
||||
|
||||
## 语言可能因国家而异。
|
||||
|
||||
某些语言，尤其是广为流传的语言在不同国家有不同的“喜好”（语法规则、拼写、字符）。 重要的是要区分目标国家的语言，而不要假定/强制一个国家的语言版本适用于所有讲该语言的国家。 示例：
|
||||
|
||||
- `en`: `en-USA` (美国英文), `en-GB` (英国英文)
|
||||
- `zh`: `zh-CN`(简体中文), `zh-TW`(繁体中文)
|
||||
|
||||
## 预测地域，但不限制
|
||||
|
||||
服务器可以通过HTTP头部`Accept-Language`和IP组合来决定访客的地域/语言。 通过这些，可以为访客自动选择最佳地域设置。 然而，预测并不是万无一失的(特别是如果访客使用VPN)，仍然应当允许访客不受干扰地改变自己的国家/语言。
|
||||
|
||||
## 考虑不同语言文本长度的差异
|
||||
|
||||
某些内容如果用另一种语言写入，可能会更长。 注意设计中的布局或溢出问题。 最好是避免在文字数量会影响设计的情况下进行设计。 字符数量与标题、标签和按钮等事项有关。 对于自由流动的文本，如正文或评论，它们就不是一个问题。 例如，德语和法语等某些语言往往使用比英语长的语言和句子。 如果您不考虑到这一点，可能会导致布局问题。
|
||||
|
||||
## 语言阅读方向
|
||||
|
||||
英语和法语等语言是从左到右、从上到下写的。 但是，有些语言，例如希伯来语和阿拉伯语是从右到左写的。 这可能会影响您站点的布局和页面上元素的位置， 这样你就必须小心设计你的网站，要考虑到不同的文本方向。
|
||||
|
||||
## 不要简单地串联翻译后的字符串
|
||||
|
||||
不要做任何类似"今天的日期为"+日期"的事情。 在语序不同的语言中，它会出现错误。 使用模板字符串加参数替换每种语言。 例如，分别用英文和中文来看看以下两句：`I will travel on {% date %}`，以及`{% date %} 我会出发` 请注意，由于语言的语法规则，变量的位置不同。
|
||||
|
||||
## 格式化日期和货币
|
||||
|
||||
日历日期有时以不同的方式呈现。 例如： 美国的“May 31, 2012” vs. 欧洲部分地区的"31 May 2012"。
|
||||
|
||||
## 不在图像中放置文本
|
||||
|
||||
将文本放在位图中（如png、gif、jpg等）并不是一种可扩展的方法。 在图像中放置文字仍然是一种常用的方式，可以在任何计算机上显示优雅、非系统字体。 不过，为了支持图像文本翻译成其他语言，需要为每种语言创建单独的图像，这不是设计人员的灵活工作流程。
|
||||
|
||||
## 要注意色彩的感知方式
|
||||
|
||||
不同语言和文化对颜色的看法不同。 设计应适当使用颜色。
|
||||
|
||||
## 参考资料
|
||||
|
||||
- [地域和语言之间的区别]\(https://devblogs.microsoft.com/setup/the-diffes-between en-locales-and-langues)
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Qual a diferença entre o evento `load` do documento e o evento `DOMContentLoaded` do documento?
|
||||
---
|
||||
|
||||
O evento `DOMContentLoaded` é disparado quando o documento HTML inicial foi completamente carregado e analisado, sem esperar que folhas de estilo, imagens e subframes terminem de carregar.
|
||||
|
||||
O evento `load` do `window` só é disparado após o DOM e todos os recursos e ativos dependentes terem sido carregados.
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Document `load` 事件和 `DOMContentLoaded` 事件之间的区别？
|
||||
---
|
||||
|
||||
当初始的 HTML 文档被完全加载并解析时，`DOMContentLoaded` 事件将被触发。 无需等待样式表、图像和子帧来完成加载。
|
||||
|
||||
`window` 上的 `load` 事件只在 DOM 和所有依赖的资源和资产加载后才能触发。
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
title: "Diferença entre: `function Person(){}`, `var person = Person()`, e `var person = new Person()`?"
|
||||
---
|
||||
|
||||
Esta pergunta é muito vaga. Nossa melhor suposição sobre a intenção dessa pergunta é que ela está perguntando sobre construtores em JavaScript. Tecnicamente falando, `function Person(){}` é apenas uma declaração de função normal. A convenção é usar PascalCase para funções que se destinam a ser usadas como construtores.
|
||||
|
||||
`var person = Person()` invoca o `Person` como uma função, e não como um construtor. Invocar como tal é um erro comum se a função pretende ser usada como um construtor. Normalmente, o construtor não devolve nada. Assim, invocando o construtor como uma função normal retornará `undefined` e que será atribuído à variável pretendida como a instância.
|
||||
|
||||
`var person = new Person()` cria uma instância do objeto `Person` usando o operador `new`, que herda de `Person.prototype`. Uma alternativa seria usar `Object.create`, tais como: `Object.create(Person.prototype)`.
|
||||
|
||||
```js
|
||||
function Person(name) {
|
||||
this.name = name;
|
||||
}
|
||||
|
||||
var person = Person('John');
|
||||
console.log(person); // undefined
|
||||
console.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined
|
||||
|
||||
var person = new Person('John');
|
||||
console.log(person); // Person { name: "John" }
|
||||
console.log(person.name); // "john"
|
||||
```
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
title: "比较差异: `function Person(){}`, `var person = Person()`, 和 `var person = new Person()`?"
|
||||
---
|
||||
|
||||
这个问题相当含糊。 我们对其意图的最好猜测是，它在询问JavaScript中的构造函数。 从技术上讲，`function Person(){}` 只是一个正常函数声明。 惯例是对打算作为构造函数使用的函数使用PascalCase。
|
||||
|
||||
`var persons = Person()` 将`Person` 作为函数，而不是作为构造函数。 如果要将函数用作构造函数，这样的动作是常见的错误。 构造函数通常不会返回任何东西。 因此，调用构造函数像一个正常函数会返回 `undefined` ，它会被分配给指定为实例的变量。
|
||||
|
||||
`var persone = new Person()` 创建一个 `Person` 对象的实例，使用`new` 操作符继承了 `Person.prototype`。 另一种办法是使用“Object.create”，例如：“Object.create(Person.prototype)”。
|
||||
|
||||
```js
|
||||
function Person(name) {
|
||||
this.name = name;
|
||||
}
|
||||
|
||||
var person = Person('John');
|
||||
console.log(person); // undefined
|
||||
console.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined
|
||||
|
||||
var person = new Person('John');
|
||||
console.log(person); // Person { name: "John" }
|
||||
console.log(person.name); // "john"
|
||||
```
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
---
|
||||
title: Template Literals do ES2015 oferecem muita flexibilidade na geração de strings, você pode dar um exemplo?
|
||||
---
|
||||
|
||||
Os literais de template ajudam a simplificar a interpolação de strings ou a incluir variáveis em uma string. Antes do ES2015, era comum fazer algo assim:
|
||||
|
||||
```js
|
||||
var pessoa = {name: 'Tyler', age: 28};
|
||||
console.log(
|
||||
'Oi, meu nome é ' + pessoa. ame + e eu sou ' + pessoa. ge + ' anos de idade!',
|
||||
);
|
||||
// 'Oi, meu nome é Tyler e eu tenho 28 anos!'
|
||||
```
|
||||
|
||||
Com os template literals, agora você pode criar a mesma saída assim:
|
||||
|
||||
```js
|
||||
console const person = {name: 'Tyler', age: 28};. og(`Oi, meu nome é ${person.name} e tenho ${person.age} anos!);
|
||||
// 'Oi, meu nome é Tyler e eu tenho 28 anos!'
|
||||
```
|
||||
|
||||
Observe que você usa backticks, não aspas, para indicar que você está usando um texto literal e que você pode inserir expressões dentro dos espaços reservados `${}`.
|
||||
|
||||
Um segundo caso útil de uso é a criação de strings de várias linhas. Antes de ES2015, você pode criar uma string multi-linha como esta:
|
||||
|
||||
```js
|
||||
console.log('Esta é a linha um.\nEsta é a linha dois.');
|
||||
// Esta é a linha um.
|
||||
// Esta é a linha dois.
|
||||
```
|
||||
|
||||
Ou se você quisesse dividi-lo em várias linhas no seu código, para que você não tenha que rolar até a direita no seu editor de texto para ler uma longa string, você também poderia escrever assim:
|
||||
|
||||
```js
|
||||
console.log('Esta é a linha um.\nEsta é a linha dois.');
|
||||
// Esta é a linha um.
|
||||
// Esta é a linha dois.
|
||||
```
|
||||
|
||||
Os template literals, no entanto, preservam qualquer espaçamento que você adicionar a eles. Por exemplo, para criar a mesma saída multi-linha que criamos acima, você pode simplesmente fazer:
|
||||
|
||||
```js
|
||||
console.log('Esta é a linha um.
|
||||
Esta é a linha dois.');
|
||||
// Esta é a linha um.
|
||||
// Esta é a linha dois.
|
||||
```
|
||||
|
||||
Um outro caso de uso de template literals seria usar como substituto para as bibliotecas de templates para interpolações variáveis simples:
|
||||
|
||||
```js
|
||||
const person = {name: 'Tyler', age: 28};
|
||||
document.body.innerHTML = `
|
||||
<div>
|
||||
<p>Nome: ${person.name}</p>
|
||||
<p>Idade: ${person.age}</p>
|
||||
</div>
|
||||
`;
|
||||
```
|
||||
|
||||
**Note que seu código pode ser suscetível a XSS usando `.innerHTML`. Higienize seus dados antes de exibi-los se vierem de um usuário!**
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
---
|
||||
title: ES2015 模板字面量在生成字符串时具有很大的灵活性，您能给出一个例子吗？
|
||||
---
|
||||
|
||||
模板字面量有助于简单地进行字符串插值，或在字符串中包含变量。 在 ES2015之前，常见的做法是做这样的：
|
||||
|
||||
```js
|
||||
var person = {name: 'Tyler', age: 28};
|
||||
console.log(
|
||||
'Hi, my name is ' + person.name + ' and I am ' + person.age + ' years old!',
|
||||
);
|
||||
// 'Hi, my name is Tyler and I am 28 years old!'
|
||||
```
|
||||
|
||||
使用模板字面量，您现在可以创建相同的结果像这样：
|
||||
|
||||
```js
|
||||
const person = {name: 'Tyler', age: 28};
|
||||
console.log(`Hi, my name is ${person.name} and I am ${person.age} years old!`);
|
||||
// 'Hi, my name is Tyler and I am 28 years old!'
|
||||
```
|
||||
|
||||
请注意您使用反引号而不是引号， 指示您使用的是一个字段，您可以在 "${}" 占位符中插入表达式。
|
||||
|
||||
第二个有用的案例是创建多行字符串。 在 ES2015之前，您可以创建一个多行字符串像这样：
|
||||
|
||||
```js
|
||||
console.log('This is line one.\nThis is line two.');
|
||||
// This is line one.
|
||||
// This is line two.
|
||||
```
|
||||
|
||||
或者如果你想要将它分成你的代码中的多行，所以你不必滚动到你的文本编辑器中的右边阅读一个长字符串， 你也可以像这样写：
|
||||
|
||||
```js
|
||||
console.log('This is line one.\n' + 'This is line two.');
|
||||
// This is line one.
|
||||
// This is line two.
|
||||
```
|
||||
|
||||
然而，模板字面量保留您添加到它们的任何空格、换行。 例如，要创建与我们在上面创建的相同的多行输出, 你可以简单地做：
|
||||
|
||||
```js
|
||||
console.log(`This is line one.
|
||||
This is line two.`);
|
||||
// This is line one.
|
||||
// This is line two.
|
||||
```
|
||||
|
||||
模板字面量的另一个使用情况是作为简单变量插值的模板库的替代物：
|
||||
|
||||
```js
|
||||
const person = {name: 'Tyler', age: 28};
|
||||
document.body.innerHTML = `
|
||||
<div>
|
||||
<p>Name: ${person.name}</p>
|
||||
<p>Age: ${person.age}</p>
|
||||
</div>
|
||||
`;
|
||||
```
|
||||
|
||||
**注意你的代码可能会因为使用`.innerHTML`而受到XSS的影响。 如果数据来自一个用户，请在显示数据之前将其净化！**
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Explique o Ajax com o máximo de detalhes possível.
|
||||
---
|
||||
|
||||
Ajax (asynchronous JavaScript and XML) é um conjunto de técnicas de desenvolvimento web que utilizam diversas tecnologias web no lado do cliente para criar aplicações web assíncronas. Com o Ajax, as aplicações web podem enviar dados para e receber do servidor de forma assíncrona (em segundo plano) sem interferir na exibição e comportamento da página existente. Ao separar a camada de intercâmbio de dados da camada de apresentação, o Ajax permite que páginas web, e por extensão, aplicações web, alterem o conteúdo dinamicamente sem precisar recarregar toda a página. Na prática, implementações modernas comumente usam JSON em vez de XML, devido às vantagens de o JSON ser nativo ao JavaScript.
|
||||
|
||||
A API `XMLHttpRequest` é frequentemente usada para a comunicação assíncrona ou hoje em dia, a API fetch.
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: 尽可能详细地解释Ajax
|
||||
---
|
||||
|
||||
Ajax (异步 JavaScript 和 XML) 是一套网络开发技术，在客户端使用许多网络技术创建异步网络应用程序。 使用 Ajax， Web 应用程序可以将数据异步地发送到服务器（后端）并从服务器上检索，而不干扰现有页面的显示和行为。 通过将数据交换层与表现层解耦，Ajax允许网页，以及扩展的网页应用程序，动态地改变内容，而不需要重新加载整个页面。 实际上，现代实现通常使用JSON而不是XML，因为JSON是JavaScript的原生优势。
|
||||
|
||||
`XMLHttpRequest` API或如今的 `fetch` API经常用于异步通信。
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
---
|
||||
title: Explique os sprites CSS e como você os implementaria em uma página ou site.
|
||||
---
|
||||
|
||||
Os sprites CSS combinam várias imagens em um único arquivo de imagem maior e usam uma combinação de CSS `background-image`, `posição-fundo` e `tamanho-fundo` para selecionar uma parte específica da imagem maior como a imagem desejada.
|
||||
|
||||
Essa técnica costumava ser comumente usada para ícones (por exemplo, o Gmail usa sprites para todas as suas imagens).
|
||||
|
||||
## Vantagens
|
||||
|
||||
- Reduz o número de solicitações HTTP para várias imagens (apenas um único pedido é necessário por spritesheet). Mas com HTTP2, carregar várias imagens já não é muito problema.
|
||||
- Download avançado de ativos que não serão baixados até ser necessário, como imagens que aparecem apenas nos pseudo-estados `:hover`. O piscar não seria visto.
|
||||
|
||||
## Como implementar
|
||||
|
||||
1. Use um gerador de sprites que agrupa várias imagens em uma só e gere o CSS apropriado para isso.
|
||||
2. Cada imagem teria uma classe CSS correspondente com as propriedades 'background-image' e 'background-position' definidas.
|
||||
3. Para usar essa imagem, adicione a classe correspondente ao seu elemento.
|
||||
|
||||
A folha de estilos gerada pode parecer algo como:
|
||||
|
||||
```css
|
||||
.icon {
|
||||
background-image: url('https://example.com/images/spritesheet.png');
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.icon-cart {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.icon-arrow {
|
||||
background-position: -24px 0;
|
||||
}
|
||||
```
|
||||
|
||||
E pode ser usado no HTML como tal:
|
||||
|
||||
```html
|
||||
<span class="icon icon-cart"></span>
|
||||
|
||||
<span class="icon icon-arrow"></span>
|
||||
```
|
||||
|
||||
## Referências
|
||||
|
||||
- [Implementando sprites de imagem em CSS - CSS: Cascading Style Sheets ├MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS)
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
---
|
||||
title: 解释CSS 图像精灵（雪碧图），以及您如何在页面或网站上实现它们。
|
||||
---
|
||||
|
||||
CSS 图像精灵将多个图像合并为一个更大的图像文件，并使用 CSS `background-image`, `background-position` 和 `background-size` 来选择更大图像的特定部分作为所需图像。
|
||||
|
||||
它曾经是用于图标的一种常用技术(例如，Gmail使用图像精灵作为其所有图像)。
|
||||
|
||||
## 优点
|
||||
|
||||
- 减少多个图像的 HTTP 请求数量 (每张spritesheet 只需要一个请求)。 但是使用 HTTP2 加载多个图像已不再是一个问题。
|
||||
- 预先下载在需要之前不会下载的资产，如只会出现在 `:hover` 伪状态上的图像。 闪烁不会被看到。
|
||||
|
||||
## 实现方式
|
||||
|
||||
1. 使用图像精灵生成器将多个图像包装成一个图像并生成相应的 CSS
|
||||
2. 每个图像都有一个对应的 CSS 类，定义了 `background-image` 和 `background-position` 属性。
|
||||
3. 要使用此图像，请将相应的类添加到您的元素中。
|
||||
|
||||
生成的样式表看起来可能像这样：
|
||||
|
||||
```css
|
||||
.icon {
|
||||
background-image: url('https://example.com/images/spritesheet.png');
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.icon-cart {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.icon-arrow {
|
||||
background-position: -24px 0;
|
||||
}
|
||||
```
|
||||
|
||||
并且可以像这样用在 HTML 中：
|
||||
|
||||
```html
|
||||
<span class="icon icon-cart"></span>
|
||||
|
||||
<span class="icon icon-arrow"></span>
|
||||
```
|
||||
|
||||
## 参考资料
|
||||
|
||||
- [在 CSS 中实现图像精灵 - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS)
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: Explique delegação do evento
|
||||
---
|
||||
|
||||
A delegação do evento é uma técnica que envolve adicionar ouvintes de eventos a um elemento pai em vez de adicionar os ouvintes do evento aos elementos descendentes. O ouvinte será disparado sempre que o evento for acionado nos elementos descendentes, devido à propagação do evento através do DOM. Os benefícios desta técnica são:
|
||||
|
||||
- A quantia de memória diminui porque somente um único handler é necessário no elemento pai, em vez de ter que anexar manipuladores de eventos em cada elemento descendente.
|
||||
- Não há necessidade de desvincular o manipulador dos elementos que são removidos e vincular o evento para novos elementos.
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: 解释事件委托
|
||||
---
|
||||
|
||||
事件委托是一种技术，涉及将事件监听器添加到父元素，而不是将事件监听器添加到子元素。 由于事件在DOM上冒泡，每当事件在后代元素上被触发时，监听器就会启动。 这种技术的好处是：
|
||||
|
||||
- 内存占用减少，因为父元素只需要一个单个处理程序，而不必附加每个后代的事件处理程序。
|
||||
- 没有必要从已删除的元素中解绑处理器、将事件绑定到新元素。
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
---
|
||||
title: Explique `Function.prototype.bind`
|
||||
---
|
||||
|
||||
> O método `bind()` cria uma nova função que, quando chamada, tem sua palavra-chave this definida para o valor fornecido, com uma determinada sequência de argumentos precedendo qualquer um fornecido quando a nova função é chamada.
|
||||
|
||||
_Source: [Function.prototype.bind() - JavaScript | MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind)_
|
||||
|
||||
`bind()` é mais útil para vincular o valor do `this` em métodos de classes que você quer passar para outras funções. Isso foi frequentemente feito em métodos de classe de componente React que não foram definidos usando arrow functions.
|
||||
|
||||
```js
|
||||
const john = {
|
||||
age: 42,
|
||||
getAge: function () {
|
||||
return this.age;
|
||||
},
|
||||
};
|
||||
|
||||
console.log(john.getAge()); // 42
|
||||
|
||||
const unboundGetAge = john.getAge;
|
||||
console.log(unboundGetAge()); // undefined
|
||||
|
||||
const boundGetAge = john.getAge.bind(john);
|
||||
console.log(boundGetAge()); // 42
|
||||
|
||||
const mary = {age: 21};
|
||||
const boundGetAgeMary = john.getAge.bind(mary);
|
||||
console.log(boundGetAgeMary()); // 21
|
||||
```
|
||||
|
||||
No exemplo acima, quando o método `getAge` é chamado sem um objeto chamado (como `unboundGetAge`), o valor é 'indefinido' porque o valor 'this' dentro de 'getAge()' se torna o objeto global. `boundGetAge()` tem seu `this` ligado a `john`, portanto pode obter o `idade` de `john`.
|
||||
|
||||
Podemos até usar `getAge` em outro objeto que não é `john`! `boundGetAgeMary` retorna a `idade` de `mary`.
|
||||
|
||||
## Prática
|
||||
|
||||
Tente [implementar seu próprio método `Function.prototype.bind()`](/questions/javascript/function-bind) na Great Front End.
|
||||
|
||||
## Referências
|
||||
|
||||
- [Function.prototype.bind() - JavaScript | MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind)
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
---
|
||||
title: 解释 `function.prototype.bind`
|
||||
---
|
||||
|
||||
> `bind()`方法创建了一个新的函数，在被调用时，它有`this`关键字设置为提供的值。 具有在调用新函数时所提供的任何参数之前的特定序列。
|
||||
|
||||
_资料来源：[Function.prototype.bind() - JavaScript | MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind)_
|
||||
|
||||
`bind()` 对于绑定你想要传递到其他类的函数值非常有用。 这通常是在React类组件方法中做的，而这些方法没有使用箭头函数来定义。
|
||||
|
||||
```js
|
||||
const john = {
|
||||
age: 42,
|
||||
getAge: function () {
|
||||
return this.age;
|
||||
},
|
||||
};
|
||||
|
||||
console.log(john.getAge()); // 42
|
||||
|
||||
const unboundGetAge = john.getAge;
|
||||
console.log(unboundGetAge()); // undefined
|
||||
|
||||
const boundGetAge = john.getAge.bind(john);
|
||||
console.log(boundGetAge()); // 42
|
||||
|
||||
const mary = {age: 21};
|
||||
const boundGetAgeMary = john.getAge.bind(mary);
|
||||
console.log(boundGetAgeMary()); // 21
|
||||
```
|
||||
|
||||
在上面的例子中，当`getAge`方法被调用时没有一个调用对象（如`unboundGetAge`）， 值为 `undefined` ，因为`getAge()` 里的 `this` 值变成了全局对象。 `boundGetAge()` 将其`this` 绑定到`john`，因此它能够获得`john`的`age`。
|
||||
|
||||
我们甚至可以在另一个不是`john`的对象上使用 `getAge`! `boundGetAgeMary` 返回 `mary` 的`age` 。
|
||||
|
||||
## 练习
|
||||
|
||||
在GreatFrontEnd尝试[实现你自己的 `Function.prototype.bind()` 方法](/questions/javascript/function-bind)。
|
||||
|
||||
## 参考资料
|
||||
|
||||
- [Function.prototype.bind() - JavaScript | MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind)
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
---
|
||||
title: Explique "hoisting"
|
||||
---
|
||||
|
||||
Hoisting é um termo usado para explicar o comportamento de declarações variáveis em seu código. Variáveis declaradas ou inicializadas com a palavra-chave `var` terão sua declaração "movida" até o topo do escopo do módulo/função do escopo, a que chamamos de hoisting. No entanto, apenas a declaração está hoisted, a atribuição (se houver uma), ficará onde está.
|
||||
|
||||
Observe que a declaração não é realmente movida - o motor de JavaScript analisa as declarações durante a compilação e torna-se ciente das declarações e dos seus âmbitos. É mais fácil compreender este comportamento, visualizando as declarações como sendo hoisted até ao topo do seu escopo. Vamos explicar com alguns exemplos.
|
||||
|
||||
```js
|
||||
console.log(foo); // indefinido
|
||||
var foo = 1;
|
||||
console.log(foo); // 1
|
||||
```
|
||||
|
||||
As declarações de função têm o corpo hoisted enquanto as expressões da função (escritas na forma de declarações variáveis) só tem a declaração da variável hoisted.
|
||||
|
||||
```js
|
||||
// Declaração de função
|
||||
console.log(foo); // [Função: foo]
|
||||
foo(); // 'FOOOO'
|
||||
function foo() {
|
||||
console. og('FOOOO');
|
||||
}
|
||||
console.log(foo); // [Função: foo]
|
||||
|
||||
// console
|
||||
de Expressão de Função. og(bar); // indefinido
|
||||
bar(); // Uncaught TypeError: bar não é uma função
|
||||
var bar = function () {
|
||||
console. og('BARRRR');
|
||||
};
|
||||
console.log(bar); // [Função: bar]
|
||||
```
|
||||
|
||||
Variáveis declaradas via `let` e `const` também sofrem o hoisted. No entanto, ao contrário de `var` e `function`, eles não são inicializados e acessá-los antes que a declaração resulte em uma exceção `ReferenceError`. A variável está em uma "zona temporária morta" desde o início do bloco até que a declaração seja processada.
|
||||
|
||||
```js
|
||||
x; // undefined; // Erro de referência: y não está definido
|
||||
|
||||
var x = 'local';
|
||||
let y = 'local';
|
||||
```
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
---
|
||||
title: 解释“（变量）提升”
|
||||
---
|
||||
|
||||
提升是用于解释你代码中变量声明行为的一个术语。 使用`var`关键字声明或初始化的变量将会将其声明“移动”到其模块/函数级别范围的顶端。 我们把它成为变量提升。 然而，只有声明被提升，赋值（如果有的话）将留在原地。
|
||||
|
||||
请注意，声明实际上并没有被移动--JavaScript引擎在编译过程中解析了声明，并意识到了声明及其作用域。 通过视觉将声明置于其作用域之首，更容易理解这种行为。 让我们用几个例子来解释。
|
||||
|
||||
```js
|
||||
console.log(foo); // undefined
|
||||
var foo = 1;
|
||||
console.log(foo); // 1
|
||||
```
|
||||
|
||||
函数声明的主体提升到顶端，而函数表达式(以变量声明的形式写成) 只有变量声明被提升到顶端。
|
||||
|
||||
```js
|
||||
// Function Declaration
|
||||
console.log(foo); // [Function: foo]
|
||||
foo(); // 'FOOOOO'
|
||||
function foo() {
|
||||
console.log('FOOOOO');
|
||||
}
|
||||
console.log(foo); // [Function: foo]
|
||||
|
||||
// Function Expression
|
||||
console.log(bar); // undefined
|
||||
bar(); // Uncaught TypeError: bar is not a function
|
||||
var bar = function () {
|
||||
console.log('BARRRR');
|
||||
};
|
||||
console.log(bar); // [Function: bar]
|
||||
```
|
||||
|
||||
通过 `let` 和 `const` 声明的变量也被提升。 然而，与`var` 和 `function`不同的是，在声明导致`ReferenceError` 例外之前，它们没有初始化并访问它们。 该变量处于从代码块开始直到声明被处理时的一个“暂时性死区”。
|
||||
|
||||
```js
|
||||
x; // undefined
|
||||
y; // Reference error: y is not defined
|
||||
|
||||
var x = 'local';
|
||||
let y = 'local';
|
||||
```
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Explique como um navegador determina quais elementos correspondem a um seletor CSS.
|
||||
---
|
||||
|
||||
Esta pergunta está relacionada com a pergunta sobre [escrever um CSS eficiente](/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css). Os navegadores combinam seletores da direita (seletor-chave) para a esquerda. Os navegadores filtram elementos no DOM de acordo com o seletor-chave e percorrem seus elementos pais para determinar correspondências. Quanto menor o comprimento da cadeia de seletores, mais rápido o navegador pode determinar se aquele elemento corresponde ao seletor.
|
||||
|
||||
Por exemplo, com um seletor `p span`, os navegadores primeiro encontram todos os elementos `<span>` e percorrem seus pais até a raiz para encontrar o elemento `<p>`. Para um determinado `<span>`, assim que ele encontrar um `<p>`, ele sabe que o<span>\` corresponde ao seletor e pode parar de atravessar seus pais.
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: 解释浏览器如何决定什么元素与 CSS 选择器匹配。
|
||||
---
|
||||
|
||||
这个问题与[编写高效的CSS](/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css) 的问题有关。 浏览器从最右边（关键选择器）到左边匹配选择器。 浏览器根据关键选择器过滤出DOM中的元素，并向上遍历其父元素以确定匹配。 选择器链长度越短，浏览器就能越快确定该元素是否与选择器匹配。
|
||||
|
||||
例如，使用选择器`p span`， 浏览器先找到所有 `<span>` 元素，然后沿其父元素遍历到根节点以找到`<p>` 元素。 对于一个特定的`<span>`，只要它找到一个`<p>`，它就知道这个`<span>`符合选择器，并可以停止遍历它的父元素。
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
---
|
||||
title: Explique como o JSONP funciona (e como ele não é Ajax)
|
||||
---
|
||||
|
||||
O JSONP (JSON com padding) é um método comumente utilizado para contornar as políticas de domínio cruzado em navegadores web, porque solicitações Ajax da página atual para um domínio de origem cruzada não são permitidas.
|
||||
|
||||
O JSONP funciona fazendo uma solicitação a um domínio cross-origin através de uma tag `<script>` e geralmente com um parâmetro de consulta `callback`, por exemplo: `https://example O?callback=printData`. O servidor irá, então, encapsular os dados em uma função chamada printData e enviá-la de volta ao cliente.
|
||||
|
||||
```html
|
||||
<!-- https://mydomain.com -->
|
||||
<script>
|
||||
function printData(data) {
|
||||
console.log(`Meu nome é ${data.name}!`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<script src="https://example.com?callback=printData"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
// Arquivo carregado de https://example.com?callback=printData
|
||||
printData({name: 'John Doe'});
|
||||
```
|
||||
|
||||
O cliente deve ter a função `printData` no seu escopo global e a função será executada pelo cliente quando a resposta do domínio de origem cruzada for recebida.
|
||||
|
||||
O JSONP pode ser inseguro e tem algumas implicações de segurança. Como o JSONP é JavaScript, ele pode fazer tudo o que o JavaScript pode fazer, então você precisa confiar no provedor dos dados JSONP.
|
||||
|
||||
Hoje em dia, [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) é a abordagem recomendada, e a JSONP é vista como um hack.
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
---
|
||||
title: 解释JSONP 如何工作(以及它为什么不是真正的 Ajax)
|
||||
---
|
||||
|
||||
JSONP (JSON with Padding) 是一种通常用来绕过网络浏览器中的跨域策略的方法，因为不允许从当前页面的 Ajax 请求到跨源域。
|
||||
|
||||
JSONP 工作方式是通过一个 `<script>` 标签向一个跨源域提出请求，通常使用一个 `callback` 查询参数， 例如：`https://example.com?callback=printData`。 然后，服务器将把数据填充到一个名为 `printData` 的函数中，然后返回给客户端。
|
||||
|
||||
```html
|
||||
<!-- https://mydomain.com -->
|
||||
<script>
|
||||
function printData(data) {
|
||||
console.log(`My name is ${data.name}!`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<script src="https://example.com?callback=printData"></script>
|
||||
```
|
||||
|
||||
```js
|
||||
// 从 https://example.com?callback=printData 加载的文件
|
||||
printData({name: 'John Doe'});
|
||||
```
|
||||
|
||||
客户端必须将`printData`函数设在其全局范围内，当收到跨源域的响应时，该函数将由客户端执行。
|
||||
|
||||
JSONP 可能是不安全的，并涉及一些安全问题。 因为JSONP 真的是JavaScript，它可以做所有其它JavaScript可以做的事情，所以你需要信任JSONP 数据的提供者。
|
||||
|
||||
这几天， [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) 是推荐的方法，JSONP 被视为一种 hack（破解）。
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
---
|
||||
title: Explique como funciona a herança de protótipos
|
||||
---
|
||||
|
||||
Essa é uma pergunta extremamente comum em entrevistas de JavaScript. Todos os objetos JavaScript têm uma propriedade `__proto__` com exceção de objetos criados com `object.create(null)`, ou seja, uma referência a outro objeto, que é chamado de "protótipo" do objeto. Quando uma propriedade é acessada em um objeto e se a propriedade não é encontrada nesse objeto, o motor de JavaScript olha para o objeto `__proto__`, e o `__proto__`**proto**`e assim por diante, até que encontre a propriedade definida em um dos`**proto**\`s ou até chegar ao final da cadeia de protótipos. Este comportamento simula a herança clássica, mas é realmente mais de [delegação do que herança](https://davidwalsh.name/javascript-objects).
|
||||
|
||||
## Exemplo de Herança de Protótipos
|
||||
|
||||
```js
|
||||
// Construtor de objeto pai.
|
||||
function Animal(name) {
|
||||
this.name = name;
|
||||
}
|
||||
|
||||
// Adiciona um método ao protótipo do objeto pai.
|
||||
Animal.prototype.makeSound = function () {
|
||||
console.log('The ' + this.constructor.name + ' makes a sound.');
|
||||
};
|
||||
|
||||
// Criança objeto construtor.
|
||||
function Dog(name) {
|
||||
Animal.call(this, name); // Chama o construtor pai.
|
||||
}
|
||||
|
||||
// Define o protótipo do objeto filho para ser uma nova instância do objeto pai.
|
||||
Dog.prototype = Object.create(Animal.prototype);
|
||||
|
||||
// Adiciona um método ao protótipo do objeto filho.
|
||||
Dog.prototype.bark = function () {
|
||||
console.log('Woof!');
|
||||
};
|
||||
|
||||
// Criar uma nova instância do Cachorro.
|
||||
const bolt = new Dog('Bolt');
|
||||
|
||||
// Chama métodos no objeto filho.
|
||||
console.log(bolt.name); // "Bolt"
|
||||
bolt.makeSound(); // "O cão faz um som."
|
||||
bolt.bark(); // "Woof!"
|
||||
```
|
||||
|
||||
As coisas a observar são:
|
||||
|
||||
- `.makeSound` não está definido em `Dog`, então o motor aumenta a cadeia de protótipos e encontra `.makeSound` para fora do `Animal` herdado.
|
||||
- Precisamos chamar `Object.create` de uma das seguintes maneiras para os métodos do protótipo serem herdados:
|
||||
- `Object.create(Parent.prototype)`
|
||||
- `Object.create(new Parent(null))`
|
||||
- `Object.create(objLiteral)`
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
---
|
||||
title: 解释原型继承如何工作
|
||||
---
|
||||
|
||||
这是一个极其常见的 JavaScript 面试问题。 所有 JavaScript 对象（用`Object.create(null)` 创建的对象除外）都有一个 `__proto__` 属性，是指另一个对象，它叫做对象的“原型”。 当一个属性在一个对象上被访问时，如果该属性未在该对象上被找到， JavaScript 引擎看看对象的 `__proto__`、 `__proto__` 的 `__proto__` 等，直到它在一个 `__proto__`中找到定义的属性或直到它到达原型链的末尾。 这种行为模拟传统继承，但它实际上更多是[委托而不是继承](https://davidwalsh.name/javascript-objects)。
|
||||
|
||||
## 原型继承的例子
|
||||
|
||||
```js
|
||||
// Parent object constructor.
|
||||
function Animal(name) {
|
||||
this.name = name;
|
||||
}
|
||||
|
||||
// Add a method to the parent object's prototype.
|
||||
Animal.prototype.makeSound = function () {
|
||||
console.log('The ' + this.constructor.name + ' makes a sound.');
|
||||
};
|
||||
|
||||
// Child object constructor.
|
||||
function Dog(name) {
|
||||
Animal.call(this, name); // Call the parent constructor.
|
||||
}
|
||||
|
||||
// Set the child object's prototype to be a new instance of the parent object.
|
||||
Dog.prototype = Object.create(Animal.prototype);
|
||||
|
||||
// Add a method to the child object's prototype.
|
||||
Dog.prototype.bark = function () {
|
||||
console.log('Woof!');
|
||||
};
|
||||
|
||||
// Create a new instance of Dog.
|
||||
const bolt = new Dog('Bolt');
|
||||
|
||||
// Call methods on the child object.
|
||||
console.log(bolt.name); // "Bolt"
|
||||
bolt.makeSound(); // "The Dog makes a sound."
|
||||
bolt.bark(); // "Woof!"
|
||||
```
|
||||
|
||||
需要注意的是：
|
||||
|
||||
- `.makeSound` 没有定义在`Dog`上，因此引擎会在继承的原型链`Animal`上发现`.makeSound`。
|
||||
- 我们需要通过以下方式调用 `Object.create` 方法来继承原型方法：
|
||||
- `Object.create(Parent.prototype)`
|
||||
- `Object.create(new Parent(null))`
|
||||
- `Object.create(objLiteral)`
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
title: Explique como `this` funciona em JavaScript
|
||||
---
|
||||
|
||||
Não há uma explicação simples para `this`; ela é um dos conceitos mais confusos do JavaScript. Uma explicação superficial é que o valor do `this` depende de como a função é chamada. Tendo lido muitas explicações sobre `this` online, [Arnav Aggrawal](https://medium.com/@arnav_aggarwal)" a explicação foi mais clara. As seguintes regras se aplicam:
|
||||
|
||||
1. Se a palavra-chave `new` é usada ao chamar a função, `new` dentro da função é um objeto totalmente novo.
|
||||
2. Se `apply`, `call`, ou `bind` forem usados para chamar/criar uma função, `this` dentro da função é o objeto passado como o argumento.
|
||||
3. Se uma função é chamada como um método, como `obj.method()` — `this` é o objeto do qual a função é uma propriedade.
|
||||
4. Se uma função é chamada como uma chamada de função livre, significando que ele foi invocado sem nenhuma das condições presentes acima, `this` é o objeto global. Em um navegador, é o objeto `window`. Se em modo rigoroso (`'usar strict'`), `this` será `undefined` em vez do objeto global.
|
||||
5. Se se aplicarem múltiplas das regras acima, a regra que é maior ganha e definirá o valor `this`.
|
||||
6. Se a função é uma arrow function ES2015, ela ignora todas as regras acima e recebe o valor `this` do seu escopo circundante no momento em que ele é criado.
|
||||
|
||||
Para uma explicação aprofundada, confira o [artigo na Medium](https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3).
|
||||
|
||||
#### Você pode dar um exemplo de uma das maneiras como o trabalho com "this" mudou no ES2015?
|
||||
|
||||
ES2015 permite que você use [arrow functions](http://2ality.com/2017/12/alternate-this.html#arrow-functions) que usa o [enclosing lexical scope](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this). Isso geralmente é conveniente, mas impede quem chamou de controlar o contexto através de `.call` ou `. pply`—as consequências são que uma biblioteca como `jQuery` não irá vincular corretamente o `this` em suas funções de manipulador de eventos. Portanto, é importante ter isso em mente ao refatorar grandes aplicações legadas.
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
title: 解释 JavaScript `this` 如何工作
|
||||
---
|
||||
|
||||
`this`没有简单的解释；它是JavaScript中最令人困惑的概念之一。 一个简短的解释是，`this`的值取决于函数如何调用。 在线阅读了很多关于`this`的解释，[Arnav Aggrawal](https://med.com/@arnav_aggarwal)的解释很清楚。 适用下列规则：
|
||||
|
||||
1. 如果调用函数时使用 `new` 关键字，那么函数中的`this` 是一个全新的对象。
|
||||
2. 如果`apply`, `call`, 或 `bind` 用于调用/创建函数, 那么函数中的`this` 是作为参数传递的对象。
|
||||
3. 如果一个函数作为方法被调用，例如`obj.method()` -- `this`是该函数的一个属性对象。
|
||||
4. 如果一个函数被作为一个自由函数调用， 意思是在没有上述任何条件的情况下调用它，`this `就是全局对象。 在浏览器中，它是 `window ` 对象。 如果在严格模式下(`'use strict'`)，`this`将是`undefined ` 而不是全局对象。
|
||||
5. 如果上述多条规则都适用，则排名靠前的规则获胜，并将设置`this`值。
|
||||
6. 如果函数是一个 ES2015 箭头函数， 它将无视上面的所有规则，并在创建时接收其周围范围的`this`值。
|
||||
|
||||
若要深入解释，请查阅他的[Medium 上面的文章]\(https://codeburst.io/the-simple-rules-this in javascript-35d97f31bde3)。
|
||||
|
||||
#### 你能否举例说明在ES2015年处理这一问题的方式已经发生变化？
|
||||
|
||||
ES2015 允许您使用[箭头函数](http://2ality.com/2017/12/alternate-this.html#arrow-functions)来使用[封闭的词汇范围](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this). 这通常很方便，但确实阻止了调用者通过`.call`或`.apply`控制上下文--后果是诸如`jQuery`这样的库不会在你的事件处理函数中正确绑定`this`。 因此，在重构大型遗留应用程序时必须牢记这一点。
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
---
|
||||
title: Explique a diferença entre objetos mutáveis e imutáveis
|
||||
---
|
||||
|
||||
A imutabilidade é um princípio central na programação funcional e também tem muito a oferecer para programas orientados para objetos. Um objeto mutável é um objeto cujo estado pode ser modificado depois de criado. Um objeto mutável é um objeto cujo estado pode ser modificado depois de criado.
|
||||
|
||||
## O que é um exemplo de um objeto imutável em JavaScript?
|
||||
|
||||
Em JavaScript, alguns tipos internos (números, strings) são imutáveis, mas objetos personalizados geralmente são mutáveis.
|
||||
|
||||
Alguns objetos JavaScript imutáveis integrados são `Math`, `Date`.
|
||||
|
||||
Aqui estão algumas maneiras de adicionar/simular imutabilidade em objetos JavaScript simples.
|
||||
|
||||
### Propriedades Constante de Objeto
|
||||
|
||||
Ao combinar `gravável: falso` e `configurável: falso`, você pode criar uma constante (não pode ser alterada, redefinida ou apagada) como uma propriedade do objeto, como:
|
||||
|
||||
```js
|
||||
let myObject = {};
|
||||
Object.defineProperty(myObject, 'number', {
|
||||
value: 42,
|
||||
writable: false,
|
||||
configurable: false,
|
||||
});
|
||||
console.log(myObject.number); // 42
|
||||
myObject.number = 43;
|
||||
console.log(myObject.number); // 42
|
||||
```
|
||||
|
||||
### Evitar Extensões
|
||||
|
||||
Se você quiser evitar que um objeto tenha novas propriedades adicionadas, mas deixando o resto das propriedades do objeto sozinhas, chame `Object. reventExtensões(...)`:
|
||||
|
||||
```js
|
||||
let myObject = {
|
||||
a: 2,
|
||||
};
|
||||
|
||||
Object.preventExtensions(myObject);
|
||||
|
||||
myObject.b = 3;
|
||||
myObject.b; // undefined
|
||||
```
|
||||
|
||||
No modo não restrito, a criação de `b` falha silenciosamente. No modo estrito, ele lança um `TypeError`.
|
||||
|
||||
### Proteção
|
||||
|
||||
`Object.seal()` cria um objeto "selado", o que significa que recebe um objeto existente e basicamente chama `objeto. reventExtensões ()` nele, mas também marca todas as suas propriedades existentes como `configurable: false`.
|
||||
|
||||
Então, não só você não pode adicionar mais propriedades, mas você também não pode reconfigurar ou apagar quaisquer propriedades existentes (embora você ainda possa modificar seus valores).
|
||||
|
||||
### Travamento
|
||||
|
||||
`Object.freeze()` cria um objeto congelado, o que significa que é preciso um objeto existente e basicamente chama `objeto.seal()` nele, mas também marca todas as propriedades do tipo "acesso a dados" como writable:false, para que seus valores não possam ser alterados.
|
||||
|
||||
Essa abordagem é o maior nível de imutabilidade que você pode alcançar para um objeto em si, pois impede quaisquer mudanças no objeto ou em qualquer uma de suas propriedades diretas (embora, como mencionado acima, o conteúdo de quaisquer outros objetos referenciados não seja afetado).
|
||||
|
||||
```js
|
||||
let immutableObject = Object.freeze({});
|
||||
```
|
||||
|
||||
Congelar um objeto não permite que novas propriedades sejam adicionadas a um objeto e impede que os usuários removam ou modifiquem as propriedades existentes. `Object.freeze()` preserva a enumerabilidade, configurabilidade, gravabilidade e protótipo do objeto. Ele retorna o objeto passado e não cria uma cópia congelada.
|
||||
|
||||
## Quais são os prós e os contras da imutabilidade?
|
||||
|
||||
### Prós
|
||||
|
||||
- Detecção de mudanças mais fácil: A igualdade de objetos pode ser determinada de maneira eficiente e fácil por meio da igualdade referencial. Isso é útil para comparar diferenças de objetos no React e Redux.
|
||||
- Menos complicado: Programas com objetos imutáveis são menos complicados de se pensar, já que você não precisa se preocupar sobre como um objeto pode evoluir ao longo do tempo.
|
||||
- Compartilhamento fácil por referências: Uma cópia de um objeto é tão boa quanto outra, então você pode armazenar objetos em cache ou reutilizar o mesmo objeto várias vezes.
|
||||
- Seguro para threads: Objetos imutáveis podem ser usados com segurança entre threads em um ambiente multi-threaded, já que não há risco de serem modificados em outras threads que estão sendo executadas simultaneamente.
|
||||
- Menos necessidade de memória: Usando bibliotecas como [Immer](https://immerjs.github.io/immer/) e [Immutable.js]\(https://immutable-js. om/), objetos são modificados usando compartilhamento estrutural e menos memória é necessária para ter vários objetos com estruturas semelhantes.
|
||||
- Não há necessidade de cópias defensivas: cópias defensivas não são mais necessárias quando objetos imutáveis são retornados ou passados para funções, uma vez que não há possibilidade de um objeto imutável ser modificado por ela.
|
||||
|
||||
### Contras
|
||||
|
||||
- Complexo para criar por si mesmo: Implementações ingênuas de estruturas de dados imutáveis e suas operações podem resultar em desempenho extremamente pobre porque novos objetos são criados cada vez. É recomendado o uso de bibliotecas para estruturas de dados imutáveis e operações eficientes que utilizam compartilhamento estrutural.
|
||||
- Potencial impacto negativo na performance: Alocação (e desalocação) de muitos objetos pequenos ao invés de modificar objetos existentes pode causar um impacto na performance. A complexidade do alocador ou do coletor de lixo geralmente depende do número de objetos no heap.
|
||||
- Complexidade para estruturas de dados cíclicas: estruturas de dados cíclicas como grafos são difíceis de construir. Se você tiver dois objetos que não podem ser modificados após a inicialização, como você pode fazer com que eles apontem um para o outro?
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
---
|
||||
title: 解释可变和不可变对象之间的差异
|
||||
---
|
||||
|
||||
不可变性是函数式编程的一个核心原则，对面向对象的程序也有很多好处。 可变对象是一个可以在创建后修改状态的对象。 不可变对象是一个在创建后无法修改状态的对象。
|
||||
|
||||
## JavaScript中有什么是不可变对象的例子？
|
||||
|
||||
在 JavaScript 中，一些内置类型 (数字，字符串) 是不可变的，但自定义对象通常是可变的。
|
||||
|
||||
一些内置不可变的 JavaScript 对象是 `Math`, `Date`。
|
||||
|
||||
这里有几种方法在普通JavaScript对象上添加/模拟不可变性。
|
||||
|
||||
### 对象常量属性
|
||||
|
||||
通过将`writable: false` 和 `configurable: false`, 你基本上可以创建一个不变值(无法更改, 重新定义或删除) 作为对象属性, 例如:
|
||||
|
||||
```js
|
||||
let myObject = {};
|
||||
Object.defineProperty(myObject, 'number', {
|
||||
value: 42,
|
||||
writable: false,
|
||||
configurable: false,
|
||||
});
|
||||
console.log(myObject.number); // 42
|
||||
myObject.number = 43;
|
||||
console.log(myObject.number); // 42
|
||||
```
|
||||
|
||||
### 防止扩展
|
||||
|
||||
如果你想阻止一个对象被添加新的属性，但在其他方面不影响该对象的其他属性，可以调用`Object.preventExtensions(...)`：
|
||||
|
||||
```js
|
||||
let myObject = {
|
||||
a: 2,
|
||||
};
|
||||
|
||||
Object.preventExtensions(myObject);
|
||||
|
||||
myObject.b = 3;
|
||||
myObject.b; // undefined
|
||||
```
|
||||
|
||||
在非严格模式下，`b`的创建静默失败了。 在严格模式下，它会抛出一个 `TypeError` 。
|
||||
|
||||
### 密封
|
||||
|
||||
`Object.seal()`创建一个 "密封 "的对象，这意味着它采用一个现有的对象，并基本上对其调用`Object.preventExtensions()`，但也将其所有现有属性标记为 `configurable: false`。
|
||||
|
||||
因此，你不仅不能再添加任何属性，而且也不能重新配置或删除任何现有的属性（尽管你仍然可以修改其值）。
|
||||
|
||||
### 冻结
|
||||
|
||||
`Object.freeze()`创建一个冻结的对象，这意味着它采用一个现有的对象，并基本上对其调用`Object.seal()`，但它也将所有 "数据访问器 "属性标记为`writable: false` ，所以它们的值不能被改变。
|
||||
|
||||
这种方法是你对一个对象本身所能达到的最高级别的不变性，因为它可以防止对该对象或其任何直接属性的任何改变（尽管如上所述，任何被引用的其他对象的内容都不会受到影响）。
|
||||
|
||||
```js
|
||||
let immutableObject = Object.freeze({});
|
||||
```
|
||||
|
||||
冻结对象不允许将新属性添加到对象中，并阻止用户删除或更改现有属性。 `Object.freeze()`保留了对象的可枚举性、可配置性、可写入性和原型。 它返回传递的对象（第一个参数），不会创建一个冻结的副本。
|
||||
|
||||
## 不可变性的利弊是什么？
|
||||
|
||||
### 优点
|
||||
|
||||
- 更容易的变化检测：对象的平等性可以通过一种高效和简单的方式即引用的平等性来确定。 这有助于 React 和 Redux 中比较对象的差异。
|
||||
- 复杂程度较低：具有不可变对象的方案不那么复杂而难以思考， 因为你不需要担心一个对象可能会随着时间而演变。
|
||||
- 通过引用轻松共享：一个对象的一个副本和另一个一样好，所以你可以缓存对象或多次重复使用同一个对象。
|
||||
- 线程安全：在多线程环境中，可以安全地在线程之间使用不可变的对象，因为在其他同时运行的线程中不存在修改这些对象的风险。
|
||||
- 需要更少的内存：使用库，例如 [Immer](https://immerjs.github.io/immer/) 和 [Immutable.js](https://immutable-js), 对象是使用结构共享进行修改, 具有相似结构的多个对象需要较少内存。
|
||||
- 不需要防御性拷贝：当不可变的对象从函数中返回或传递给函数时，不再需要防御性拷贝，因为不可变的对象不可能被它所修改。
|
||||
|
||||
### 缺点
|
||||
|
||||
- 复杂，要自己创建：对不可变的数据结构及其操作的天真实现会导致性能极差，因为每次都要创建新的对象。 建议利用库来建立高效的不可改变的数据结构和运作，从而对结构共享产生影响。
|
||||
- 潜在的负面性能：分配（和减少分配）许多小对象，而不是修改现有对象，可能会对性能产生影响。 内存分配器或垃圾收集器的复杂性通常取决于堆上对象的数量。
|
||||
- 循环数据结构的复杂性：像图表这样的循环数据结构难以构建。 如果您有两个在初始化后无法修改的对象，如何让它们指向对方？
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Explique a diferença entre funções síncronas e assíncronas
|
||||
---
|
||||
|
||||
Funções síncronas são bloqueadoras enquanto funções assíncronas não são. Em funções síncronas, as instruções são concluídas antes que a próxima instrução seja executada. Nesse caso, o programa é avaliado exatamente na ordem das instruções, e a execução do programa é pausada se uma das instruções demorar muito tempo.
|
||||
|
||||
Funções assíncronas geralmente aceitam uma função de retorno de chamada como parâmetro e a execução continua na próxima linha imediatamente após a invocação da função assíncrona. A callback só é invocada quando a operação assíncrona é concluída e a pilha de chamadas está vazia. Operações pesadas, como carregar dados de um servidor web ou consultar um banco de dados, devem ser feitas de forma assíncrona para que a thread principal possa continuar executando outras operações em vez de bloquear até que aquela operação longa seja concluída (no caso dos navegadores, a interface do usuário ficará congelada).
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: 解释同步函数和异步函数之间的差异
|
||||
---
|
||||
|
||||
同步函数是阻塞的，而异步函数则不是。 在同步函数中，语句在运行下一个语句之前完成。 在这种情况下， 该程序正是按照语句的顺序进行执行，如果其中一个语句需要很长时间，则该程序的执行将暂停。
|
||||
|
||||
异步函数通常接受回调作为参数，并在调用异步函数后立即在下一行继续执行。 回调只有在异步操作完成且调用栈为空时才会被调用。 重型操作，例如从网络服务器上加载数据或查询数据库应该异步进行，以便主线程能够继续执行其他操作，而不是等到那个漫长的阻塞操作完成(在浏览器的情况下，界面将冻结)。
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
title: Explique as diferenças no uso de `foo` entre `function foo() {}` e `var foo = function() {}`
|
||||
---
|
||||
|
||||
O primeiro é uma declaração de funções, enquanto o segundo é uma expressão de funções. A diferença chave é que as declarações de funções tem seu corpo hoisted, mas os corpos das expressões de função não são (elas têm o mesmo comportamento hoisting que as variáveis). Para obter mais explicações sobre o hoisting, consulte a pergunta sobre [hoisting](/questions/quiz/explain-hoisting). Se você tentar invocar uma expressão de função antes de ela ser definida, você receberá um erro `Uncaught TypeError: XXX não é um erro de função`.
|
||||
|
||||
## Declaração de Função
|
||||
|
||||
```js
|
||||
foo(); // 'FOOOO'
|
||||
function foo() {
|
||||
console.log('FOOOOO');
|
||||
}
|
||||
```
|
||||
|
||||
## Expressão de Função
|
||||
|
||||
```js
|
||||
foo(); // Uncaught TypeError: foo não é uma função
|
||||
var foo = function () {
|
||||
console.log('FOOOOO');
|
||||
};
|
||||
```
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
title: 解释`function foo() {}` 和 `var foo = function() {}` 之间在`foo` 使用方法上的差异
|
||||
---
|
||||
|
||||
前者是一个函数声明，而后者是一个函数表达式。 关键的区别是，函数声明会使它的主体被提升，但函数表达式的主体没有被提升（它们有和变量一样的提升行为）。 想要了解更多关于提升的解释，请参阅 [提升](/questions/quiz/explanin-hoisting)。 如果你试图在定义之前调用函数表达式，你将会得到一个 `Uncaught TypeError: XXX is not a function` 。
|
||||
|
||||
## 函数声明
|
||||
|
||||
```js
|
||||
foo(); // 'FOOOOO'
|
||||
function foo() {
|
||||
console.log('FOOOOO');
|
||||
}
|
||||
```
|
||||
|
||||
## 函数表达式
|
||||
|
||||
```js
|
||||
foo(); // Uncaught TypeError: foo is not a function
|
||||
var foo = function () {
|
||||
console.log('FOOOOO');
|
||||
};
|
||||
```
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Explique a política de mesma origem em relação ao JavaScript
|
||||
---
|
||||
|
||||
A política de mesma origem impede o JavaScript de fazer solicitações além dos limites de domínio. Uma origem é definida como uma combinação de esquema URI, nome do host e número da porta. Essa política impede que um script malicioso em uma página obtenha acesso a dados sensíveis em outra página da web por meio do Document Object Model dessa página.
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: 解释与JavaScript有关的同源策略。
|
||||
---
|
||||
|
||||
同源策略阻止JavaScript跨域发出请求。 一个源被定义为URI 协议、主机名和端口号的组合。 这项政策防止一个页面上的恶意脚本通过该页面的文档对象模型访问另一个网页上的敏感数据。
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
---
|
||||
title: Explique o que é um aplicativo de página única e como torná-lo amigável para SEO
|
||||
---
|
||||
|
||||
Os desenvolvedores web atualmente se referem aos produtos que constroem como aplicativos web, em vez de sites. Embora não haja uma diferença estrita entre os dois termos, os aplicativos web tendem a ser altamente interativos e dinâmicos, permitindo que o usuário execute ações e receba uma resposta para sua ação. Tradicionalmente, o navegador recebe o HTML do servidor e o renderiza. Quando o usuário navegar para outra URL, é necessária uma atualização de página inteira e o servidor envia novo HTML para a nova página. Isso é chamado de renderização no lado do servidor.
|
||||
|
||||
No entanto, em SPAs modernas, é usado o rendering no lado do cliente (client-side rendering) em vez disso. O navegador carrega a página inicial do servidor, juntamente com os scripts (frameworks, bibliotecas, código do aplicativo) e folhas de estilo necessárias para todo o aplicativo. Quando o usuário navega para outras páginas, uma atualização de página não é acionada. A URL da página é atualizada através da [API Histórico HTML5](https://developer.mozilla.org/en-US/docs/Web/API/History_API). Novos dados necessários para a nova página, geralmente no formato JSON, são recuperados pelo navegador via [AJAX](https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started) pedidos ao servidor. O SPA, em seguida, atualiza dinamicamente a página com dados via JavaScript, que já foi baixado na carga inicial da página. Esse modelo é semelhante a como os aplicativos nativos dos dispositivos móveis funcionam.
|
||||
|
||||
## Prós
|
||||
|
||||
- O aplicativo parece mais responsivo e os usuários não veem o flash entre as navegações de página devido às atualizações completas da página.
|
||||
- São feitas menos solicitações HTTP ao servidor, pois os mesmos recursos não precisam ser baixados novamente a cada carga de página.
|
||||
- Há uma clara separação das responsabilidades entre o cliente e o servidor, permitindo a fácil construção de novos clientes para diferentes plataformas (por exemplo, dispositivos móveis, chatbots, relógios inteligentes) sem precisar modificar o código do servidor. Você também pode modificar a pilha de tecnologia no cliente e no servidor independentemente, desde que o contrato da API não seja quebrado.
|
||||
|
||||
## Contras
|
||||
|
||||
- Há uma carga inicial de página mais pesada devido ao carregamento do framework, código do aplicativo e recursos necessários para várias páginas.
|
||||
- Há uma etapa adicional a ser feita no seu servidor, que é configurá-lo para rotear todas as solicitações para um único ponto de entrada e permitir que o roteamento do lado do cliente assuma a partir daí.
|
||||
- As SPAs dependem do JavaScript para renderizar conteúdo, mas nem todos os mecanismos de pesquisa executam JavaScript durante a rastreamento e podem ver conteúdo vazio em sua página. Isso prejudica inadvertidamente a otimização de mecanismos de pesquisa (SEO) do seu aplicativo. No entanto, na maioria das vezes, ao construir aplicativos, o SEO não é o fator mais importante, pois nem todo o conteúdo precisa ser indexável pelos mecanismos de pesquisa. Para contornar esse problema, você pode renderizar seu aplicativo no servidor ou usar serviços como [Prerender](https://prerender.io/) para "renderizar seu JavaScript em um navegador, salvar o HTML estático e retorná-lo aos crawlers".
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
---
|
||||
title: 解释一个单页应用程序是什么以及如何优化SEO
|
||||
---
|
||||
|
||||
当代的网络开发者指出他们构建的产品是网页应用，而不是网站。 虽然这两个词之间没有严格区别，但网络应用往往具有高度的互动性和动态， 允许用户执行操作并收到对其操作的响应。 通常情况下，浏览器从服务器接收HTML并渲染它。 当用户导航到另一个URL时，需要全页刷新，服务器将新的 HTML 发送到新页面。 这被称为服务器端渲染。
|
||||
|
||||
然而，在现代SPA中，则使用客户端渲染。 浏览器从服务器加载初始页面，以及整个应用程序所需的脚本(框架、库、应用代码) 和样式表。 当用户导航到其他页面时，不会触发页面刷新。 页面的 URL 通过[HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API)更新。 新页面所需的新数据，通常使用 JSON 格式，由浏览器通过 [AJAX](https://developer.mozilla.org/en-US/docs/AJAX/Getting_Start) 向服务器检索. SPA 然后通过JavaScript动态地更新页面数据，它已经在初始页面加载中下载好了。 此模型类似于本地移动应用的工作方式。
|
||||
|
||||
## 优点
|
||||
|
||||
- 由于全页刷新，应用感觉更加敏捷，用户没有看到页面导航之间的闪烁。
|
||||
- 服务器收到的HTTP请求较少，因为同一个资源不必在每个页面加载时再次下载。
|
||||
- 客户端和服务器之间的关注点明确分离；你可以很容易地为不同的平台（如手机、聊天机器人、智能手表）建立新的客户端，而不必修改服务器代码。 只要API约定未被损坏，您也可以独立修改客户端和服务器上的技术堆栈。
|
||||
|
||||
## 缺点
|
||||
|
||||
- 由于加载框架、应用程序代码和多个页面所需的资产，初始页面负载较重。
|
||||
- 在您的服务器上还有一个步骤要做，即配置它来将所有请求路由到一个单一的入口点，并允许客户端路由从那里接管。
|
||||
- SPA依赖JavaScript来呈现内容，但并非所有的搜索引擎在抓取过程中都会执行JavaScript，它们可能会在你的页面上看到空的内容。 这无意中伤害了您的应用程序的SEO（搜索引擎优化）。 然而，在大多数情况下，当你正在建造应用软件时，SEO并不是最重要的因素， 因为并非所有内容都需要通过搜索引擎索引。 为了克服这个问题，你可以在服务器端渲染你的应用程序，或者使用[Plerender](https://prerender.io/)等服务来 "在浏览器中渲染你的JavaScript，保存静态HTML，并将其返回给爬虫"。
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
title: "Explique porque o seguinte não funciona como um IIFE: `function foo(){ }();`. O que precisa ser alterado para torná-lo corretamente um IIFE?"
|
||||
---
|
||||
|
||||
IIFE significa expressões de função imediatamente invocadas. O interpretador JavaScript lê `function foo(){ }(); como `function foo(){ }` e ();`, onde o primeiro é uma declaração de função e o último (um par de parênteses) é uma tentativa de chamar uma função, mas não há nome especificado, portanto, ele retorna `Uncaught SyntaxError: Unexpected token )`.
|
||||
|
||||
Aqui estão duas maneiras de corrigir que envolve a adição de mais parênteses: `(function foo(){ })()` e `(function foo(){ }())`. Declarações que começam com `function` são consideradas como _function declarations_ ao envolver essa função dentro de `()`, ela se torna uma _function expression_ que pode ser executada com o `()` subsequente. Essas funções não são expostas no escopo global e você pode até omitir o nome delas se não precisar fazer referência a si mesmas dentro do corpo.
|
||||
|
||||
Você também pode usar o operador `void`: `void function foo(){ }();`. Infelizmente, há um problema com essa abordagem. A avaliação da expressão fornecida é sempre undefined, então, se sua função IIFE retornar algo, você não poderá usá-la. Um exemplo:
|
||||
|
||||
```js
|
||||
const foo = void (function bar() {
|
||||
return 'foo';
|
||||
})();
|
||||
|
||||
console.log(foo); // indefinido
|
||||
```
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
title: "解释这为什么不能以IIFE工作: `function foo(){ }();`. 为了使它成为一个IIFE，需要作出哪些改变？"
|
||||
---
|
||||
|
||||
IIFE是Immediately Invoked Function Expressions的缩写，即立即调用函数表达式。 JavaScript 解析器读取`function foo(){ }();` 作为 `function foo(){ }` 和 `(); , 如果前者是一个 _函数声明_, 而后者是一对括号, 则试图调用函数, 但没有指定名称, 因此，它抛出`Uncaught SyntaxError: Unexpected token )\`。
|
||||
|
||||
这里有两种方法修复它，涉及添加更多括号：`(function foo(){ })()` 和 `(function foo(){ }())` 以 "function "开头的语句被认为是_函数声明_；通过将这个函数包裹在"() "中，它成为一个_函数表达式_，然后可以用后面的"() "执行。 这些函数不会在全局范围内暴露，如果你不需要在代码里提及，你甚至可以省略它的名称。
|
||||
|
||||
您也可以使用 `void` 操作符：`void function foo(){ }();`. 不幸的是，这种做法有一个问题。 对给定表达式的执行结果总是\`undefined'，所以如果你的 IIFE 函数返回任何东西，你就不能使用它。 举个例子：
|
||||
|
||||
```js
|
||||
const foo = void (function bar() {
|
||||
return 'foo';
|
||||
})();
|
||||
|
||||
console.log(foo); // undefined
|
||||
```
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
---
|
||||
title: Explique sua compreensão do modelo de caixa e como você diria ao navegador em CSS para renderizar seu layout em diferentes modelos de caixa.
|
||||
---
|
||||
|
||||
O modelo de caixa CSS descreve as caixas retangulares que são geradas para os elementos na árvore de documentos e dispostas de acordo com o modelo de formatação visual. Cada caixa tem uma área de conteúdo (por exemplo, texto, uma imagem, etc.) e áreas opcionais dos `padding`, `border`, e `margin`.
|
||||
|
||||
O modelo da caixa CSS é responsável por calcular:
|
||||
|
||||
- O espaço que um elemento de bloco ocupa.
|
||||
- Se as bordas e/ou margens se sobrepõem ou se colapsam.
|
||||
- Dimensões de uma caixa.
|
||||
|
||||
## Regras do Modelo da Caixa
|
||||
|
||||
- As dimensões de um elemento de bloco são calculadas por meio de `width`, `height`, `padding`s e `border`s.
|
||||
- Se nenhum `height` for especificado, um elemento do bloco será tão alto quanto o conteúdo que ele contém, mais `padding` (a menos que existam floats, para quem, veja [descreva flutuantes e como funcionam](/questions/quiz/describe-floats-and-how-they-work)).
|
||||
- Se nenhum `width` for especificado, um elemento não-`float` do bloco será expandido para caber a largura do seu pai menos o `padding`, a não ser que tenha uma propriedade definida para 'max-width', neste caso não será maior do que a largura máxima especificada.
|
||||
- Alguns elementos de nível de bloco (por exemplo, `table`, `figure` e `input`) têm valores de largura inerentes ou padrão, e podem não expandir para preencher a largura total do seu recipiente pai.
|
||||
- Nota: `span` é um elemento em nível inline e não tem largura padrão, então ele não se expandirá para se ajustar.
|
||||
- O `height` de um elemento é calculado pela `height` do conteúdo.
|
||||
- A `width` de um elemento é calculada pela `width` do conteúdo.
|
||||
- Por padrão (`box-sizing: content-box`), `padding`s e `border`s não fazem parte da `width` e `height` de um elemento.
|
||||
|
||||
Note que `margin`s não são contados para o tamanho real da caixa. Isso afeta o espaço total que a caixa ocupará na página, mas apenas o espaço fora da caixa. A área da caixa para no `border` — ela não se estende até a `margin`.
|
||||
|
||||
## Extra
|
||||
|
||||
A propriedade box-sizing, que define como as dimensões totais largura e altura de um elemento são calculadas.
|
||||
|
||||
- `box-sizing: content-box`: Este é o valor padrão de `box-sizing` e segue as regras mencionadas acima.
|
||||
- `box-sizing: border-box`: A `width` e a `height` incluirão o conteúdo, padding e borda, mas não incluirão a margin. Esta é uma maneira muito mais intuitiva de pensar em caixas e, portanto, muitos frameworks CSS (por exemplo, Bootstrap, Tailwind, Bulma) definem `* { box-sizing: border-box; }` globalmente, para que todos os elementos usem esse modelo de caixa por padrão. Veja a [pergunta sobre o 'box-sizing: border-box'](/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages) para mais informações.
|
||||
|
||||
## Referências
|
||||
|
||||
- [O modelo de caixa ct, MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#the_standard_css_box_model)
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
---
|
||||
title: 解释您对盒模型的理解，以及您如何告诉浏览器在 CSS 中渲染您在不同盒模型中的布局。
|
||||
---
|
||||
|
||||
CSS 盒模型描述了为文档树中的元素生成的矩形方形盒，并根据视觉格式模型显示。 每个盒都有一个内容区域(例如文本、图片等) 和可选的 `padding`、`border`、`border`和`margin `区域。
|
||||
|
||||
CSS 盒模型负责计算：
|
||||
|
||||
- 一个块级元素占用多少空间。
|
||||
- 边框和/或外边距是否重叠，或折叠。
|
||||
- 盒子的尺寸
|
||||
|
||||
## 盒模型规则
|
||||
|
||||
- 块级元素的尺寸用`width`、`height `、`padding`和`border`来计算。
|
||||
- 如果没有指定 `height` ，块元素将会像它所包含的内容那么高，加上`padding` (除非有浮点，见[描述浮点及其工作方式]\(/questions/quiz/design-floats-and-how -they-work))。
|
||||
- 如果没有指定`width`，则非`float` 块级元素将展开以适应其父元素缩减`padding`的宽度， 除非它有一个 `max-width` 属性设置，在这种情况下，它不会大于指定的最大宽度。
|
||||
- 某些块级元素 (例如“table”、“figure”和“input”)具有内在或默认的宽限值，不能扩展到填充其母容器的全宽。
|
||||
- 注意：`spring` 是一个内联元素，没有默认宽度，所以它不会扩展到合适的宽度。
|
||||
- 元素的`height `是由内容的`height `计算的。
|
||||
- 元素的 `width` 是由内容的 `width` 计算的。
|
||||
- 默认情况(`box-sizing: content-box`), `padding` 和 `border` 都不是元素`width`和`height`的一部分。
|
||||
|
||||
请注意，`margin`不算在盒子的实际尺寸中。 它影响盒子在页面上所占的总空间，但只影响盒子外的空间。 盒子的区域止于 `border`，它不延伸到`margin`。
|
||||
|
||||
## 其他
|
||||
|
||||
查找`box-sizing`属性，它会影响元素的总高度和宽度。
|
||||
|
||||
- `box-sizing: content-box`：这是`box-sizing`的默认值，并遵守上面的规则。
|
||||
- `box-sizing: border-box`: `width` 和 `height` 将包括内容、内边距和边框，但不包括外边距。 这是一种更直观的思考盒子的方式，因此许多CSS框架（例如Bootstrap、Tailwind、Bulma）在全局范围内设置`* { box-sizing: border-box; }`，以便所有元素默认使用这种盒子模型。 请参阅[关于`box-sizing: border-box`的问题](/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages) 了解更多信息。
|
||||
|
||||
## 参考资料
|
||||
|
||||
- [盒模型 | MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#the_standard_css_box_model)
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Você já usou um sistema de grid e, se sim, o que você prefere?
|
||||
---
|
||||
|
||||
Antes de Flex se tornar popular (por volta de 2014), o sistema de grid baseado em `float` era o mais confiável porque ainda tem maior suporte dos navegadores entre os sistemas alternativos (flex, grid). Bootstrap estava usando a abordagem `float` até o Bootstrap 4 que mudou para a abordagem `flex`.
|
||||
|
||||
Hoje, `flex` é a abordagem recomendada para construir sistemas de grid e tem [suporte bom para os navegadores (99.64%)](https://caniuse.com/#search=flex).
|
||||
|
||||
Para os aventureiros, vocês podem dar uma olhada no [CSS Grid Layout](https://css-tricks.com/snippets/css/complete-guide-grid-/), que usa a mais nova propriedade `grid`. Grid é um sistema de layout bidimensional baseado em grade, em comparação com o Flexbox, que é unidimensional.
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: 您是否曾经使用过网格系统，如果使用的话，您喜欢什么？
|
||||
---
|
||||
|
||||
在Flex开始流行之前（大约在2014年），基于`float`的网格系统是最可靠的，因为在现有的替代系统（flex、grid）中，它仍然拥有最多的浏览器支持。 Bootstrap 一直在使用“Float”方法，直到Bootstrap 4转而采用“Flex”方法。
|
||||
|
||||
今天，`flex` 是建立网格系统的推荐方法，它有[体面的浏览器支持 (99.64%)](https://caniuse.com/#search=flex)。
|
||||
|
||||
对于喜欢冒险的人来说，他们可以看看[CSS Grid Layout](https://css-tricks.com/snippets/css/complete-guide-grid/)，它使用闪亮的新`grid`属性。 Grid是一个二维网格布局系统，而Flexbox则是一个一维的系统。
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
---
|
||||
title: Você já trabalhou com gráficos de retina?
|
||||
subtitle: Em caso afirmativo, quando e que técnicas utilizou?
|
||||
---
|
||||
|
||||
_Retina_ é apenas um termo de marketing usado para se referir a telas de alta resolução com uma proporção de pixels maior do que 1. O ponto chave a saber é que o uso de uma taxa de pixels significa que essas telas estão emulando uma tela de resolução mais baixa para mostrar elementos com o mesmo tamanho. Hoje em dia, consideramos todos os dispositivos móveis _retina_ por padrão.
|
||||
|
||||
Os navegadores, por padrão, renderizam elementos do DOM de acordo com a resolução do dispositivo, exceto para imagens.
|
||||
|
||||
Para ter gráficos nítidos e com boa aparência que aproveitem ao máximo as telas retina, precisamos usar imagens de alta resolução sempre que possível. No entanto, usar sempre imagens com a maior resolução terá um impacto no desempenho, já que mais bytes precisarão ser enviados pela rede.
|
||||
|
||||
Para superar esse problema, podemos usar imagens responsivas, como especificado no HTML5. Ele requer disponibilizar diferentes arquivos de resolução da mesma imagem para o navegador e deixá-lo decidir qual imagem é a melhor, usando o atributo html `srcset` e opcionalmente `sizes`, por exemplo:
|
||||
|
||||
```html
|
||||
<div responsive-background-image>
|
||||
<img
|
||||
src="/images/test-1600.jpg"
|
||||
sizes="
|
||||
(min-width: 768px) 50vw,
|
||||
(min-width: 1024px) 66vw,
|
||||
100vw"
|
||||
srcset="
|
||||
/images/test-400.jpg 400w,
|
||||
/images/test-800.jpg 800w,
|
||||
/images/test-1200.jpg 1200w
|
||||
" />
|
||||
</div>
|
||||
```
|
||||
|
||||
É importante notar que os navegadores que não suportam o `srcset` do HTML5 (ou seja, IE11) vão ignorá-lo e usar o `src` em vez disso. Se realmente precisarmos oferecer suporte ao IE11 e quisermos fornecer esse recurso por motivos de desempenho, podemos usar um polyfill JavaScript, como o Picturefill (link nas referências).
|
||||
|
||||
Para ícones, é recomendado usar SVGs sempre que possível, pois eles são renderizados com muita nitidez independentemente da resolução.
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
---
|
||||
title: 您是否曾使用视网膜屏幕工作过？
|
||||
subtitle: 如果是这样，你是在什么时候使用的，使用了什么技术？
|
||||
---
|
||||
|
||||
视网膜 （_Retina_） 只是一个营销术语，指的是高分辨率屏幕，像素比大于1。 需要了解的关键是使用像素比值表示这些屏幕正在模拟低分辨率屏幕以显示大小相同的元素。 如今，我们认为所有的移动设备都是事实上的视网膜屏幕。
|
||||
|
||||
浏览器默认根据设备分辨率渲染DOM元素，但图片除外。
|
||||
|
||||
为了有最佳视网膜显示的精彩图形，我们需要尽可能使用高分辨率图像。 然而，使用最高分辨率图像将会对性能产生影响，因为更多的字节需要在网络上发送。
|
||||
|
||||
为了克服这个问题，我们可以使用HTML5中指定的响应式图像。 它需要在浏览器中提供同一图像的不同分辨率文件，并让它决定哪个图像是最佳的图像， 使用 html 属性 `srcset` 和可选的 `sizes` ，比如：
|
||||
|
||||
```html
|
||||
<div responsive-background-image>
|
||||
<img
|
||||
src="/images/test-1600.jpg"
|
||||
sizes="
|
||||
(min-width: 768px) 50vw,
|
||||
(min-width: 1024px) 66vw,
|
||||
100vw"
|
||||
srcset="
|
||||
/images/test-400.jpg 400w,
|
||||
/images/test-800.jpg 800w,
|
||||
/images/test-1200.jpg 1200w
|
||||
" />
|
||||
</div>
|
||||
```
|
||||
|
||||
必须注意，不支持 HTML5 的 `srcset` (即IE11) 的浏览器会忽略它，而使用 `src` 。 如果我们真的需要支持 IE11 并且我们想要为性能原因提供此功能，我们可以使用 JavaScript polyfill。 例如：Picturefill(引用中的链接)。
|
||||
|
||||
对于图标，尽可能使用SVG，因为无论分辨率如何，它们都会呈现得非常清晰。
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Você já experimentou as novas especificações CSS Flexbox ou Grid?
|
||||
---
|
||||
|
||||
Flexbox é destinado principalmente para layouts unidimensionais, enquanto Grid é destinado para layouts bidimensionais.
|
||||
|
||||
Flexbox resolve muitos problemas comuns no CSS, como centralização vertical de elementos dentro de um contêiner, rodapé fixo, etc. Frameworks CSS famosos como Bootstrap e Bulma são baseados em Flexbox, e Flexbox ainda é a maneira testada e comprovada de criar layouts.
|
||||
|
||||
Grid é, de longe, a abordagem mais intuitiva para criar layouts baseados em grade, mas o suporte dos navegadores ainda não é tão amplo no momento. Muitos problemas de layout já podem ser resolvidos com Flexbox, então não há uma grande necessidade do Grid.
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: 你玩过新的CSS Flexbox或Grid规范吗？
|
||||
---
|
||||
|
||||
Flexbox 主要用于1维布局，而网格则用于2维布局。
|
||||
|
||||
Flexbox 解决了CSS 中的许多常见问题，例如在容器内的元素垂直切入、粘滞脚等。 著名的 CSS 框架，例如Bootstrap和Bulma 是基于 Flexbox，而 Flexbox 仍然是创建布局的经过测试和验证的方式。
|
||||
|
||||
Grid 是创建网格布局的最直观的方法，但浏览器支持目前并不广泛。 许多布局问题已经可以通过 Flexbox 解决，因此并没有对Grid的巨大需求。
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Você usou ou implementou consultas de mídia ou layouts/CSS específicos para dispositivos móveis?
|
||||
---
|
||||
|
||||
Um exemplo seria transformar uma navegação em forma de pilha em uma navegação de abas fixas na parte inferior, além de um determinado ponto de interrupção.
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: 你是否使用或配置过媒体查询或移动端专用布局/CSS？
|
||||
---
|
||||
|
||||
一个例子是，在某个断点之后，将一个堆叠的胶囊导航转变为固定底部的标签导航。
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
title: Como você pode compartilhar código entre arquivos?
|
||||
---
|
||||
|
||||
This depends on the JavaScript environment.
|
||||
|
||||
No cliente (ambiente do navegador), desde que as variáveis/funções sejam declaradas no escopo global (`window`), todos os scripts podem se referir a elas. Alternativamente, adote a Definição de Módulo Assíncrono (AMD) por meio do RequireJS para uma abordagem mais modular.
|
||||
|
||||
No servidor (Node.js), a maneira comum tem sido usar o CommonJS. Cada arquivo é tratado como um módulo e pode exportar variáveis e funções anexando-os ao objeto `module.exports`.
|
||||
|
||||
ES2015 define uma sintaxe de módulo que visa substituir tanto o AMD quanto o CommonJS. Isso eventualmente será suportado em ambos os ambientes de navegador e Node.
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
title: 如何在文件之间共享代码？
|
||||
---
|
||||
|
||||
这取决于JavaScript环境。
|
||||
|
||||
在客户端上(浏览器环境)，只要变量/函数在全局范围(`window`) 内声明，所有脚本都可以引用它们。 另一种办法是通过RequireJS采用异步模块定义（AMD）以获取更多模块化方法。
|
||||
|
||||
在服务器 (Node.js) 上，通用的方法是使用 CommonJS。 每个文件被当作模块处理，它可以将变量和函数导出到`module.exports`对象。
|
||||
|
||||
ES2015 定义了一个模块语法，旨在替换AMD和CommonJS。 这最终将在浏览器和Nodejs环境中得到支持。
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: Como você organiza seu código?
|
||||
subtitle: Você usa o pattern de modulo, herança clássica, algo mais?
|
||||
---
|
||||
|
||||
No passado, os desenvolvedores usavam o Backbone para os meus modelos, que incentivava uma abordagem mais OOP, criando modelos Backbone e anexando métodos a eles.
|
||||
|
||||
O padrão de módulo ainda é ótimo, mas nos dias de hoje, os desenvolvedores preferem usar o React/Redux, que utiliza um fluxo de dados unidirecional baseado na arquitetura Flux. Agora é comum representar o modelo de dados de um aplicativo usando objetos simples e escrever funções puras de utilidade para manipular esses objetos. O State é manipulado usando ações e redutores como em qualquer outra aplicação Redux.
|
||||
|
||||
Evite usar herança clássica sempre que possível. Quando e se tiver, mantenha [estas regras](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4).
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: 您如何组织您的代码？
|
||||
subtitle: 你是否使用模块模式，经典的继承，还是其他什么？
|
||||
---
|
||||
|
||||
在过去，开发人员使用Backbone来做OOP（面向对象编程），这鼓励了更多的OOP方法，创建Backbone模型并为其附加方法。
|
||||
|
||||
模块模式仍然很好，但现在，开发者更喜欢使用React/Redux，它利用基于Flux架构的单方向数据流。 现在通常使用普通对象来表示一个应用的数据模型，并编写纯函数来操作这些对象。 像其他Redux应用程序一样，使用actions和reducers对状态进行操作。
|
||||
|
||||
尽可能避免使用传统继承。 如果您确实如此，请坚持[这些规则](https://med.com/@dan_abramov/howto-use-classes-and-sleep-at-9af8de78ccb4)。
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
title: Como se serve uma página com conteúdo em vários idiomas?
|
||||
---
|
||||
|
||||
> Suposição: A pergunta é sobre como servir uma página com conteúdo disponível em vários idiomas e o conteúdo dentro da página deve ser exibido apenas em um idioma consistente.
|
||||
|
||||
Servir uma página em diferentes idiomas é um dos aspectos da internacionalização (i18n).
|
||||
|
||||
Quando uma solicitação HTTP é feita para um servidor, o agente de usuário que faz a solicitação geralmente envia informações sobre as preferências de idioma, como no cabeçalho `Accept-Language`. O servidor pode então usar essa informação para retornar uma versão do documento no idioma apropriado se tal alternativa estiver disponível. O documento HTML retornado também deve declarar o atributo lang na tag `<html>,` como por exemplo `<html lang="en">...</html>`.
|
||||
|
||||
Para permitir que um mecanismo de busca saiba que o mesmo conteúdo está disponível em diferentes idiomas, as tags `<link>` com os atributos `rel="alternate"` e `hreflang="..."` devem ser usadas. Ex. `<link rel="alternate" hreflang="de" href="http://de.example.com/page.html" />`.
|
||||
|
||||
## Renderização
|
||||
|
||||
- **Renderização no servidor:** O HTML conterá espaços reservados para strings e o conteúdo para o idioma específico será obtido a partir de configurações no código ou de um serviço de tradução. O servidor então gera dinamicamente a página HTML com o conteúdo nesse idioma específico.
|
||||
- **Renderização do lado cliente:** As strings de localização apropriadas serão obtidas e combinadas com as visualizações baseadas em JavaScript.
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
title: 你如何提供一个有多国语言内容的页面？
|
||||
---
|
||||
|
||||
> 假设：问题是关于如何为一个有多种语言内容的页面提供服务，而页面内的内容应该只以一种一致的语言显示。
|
||||
|
||||
以不同语言提供页面是国际化（i18n）的一个方面。
|
||||
|
||||
当向服务器发出HTTP请求时，请求的用户代理（浏览器等）通常发送有关语言首选项的信息，例如在 `Accept-Language ` 标题中。 然后，服务器可以使用这些信息来返回一个适当语言版本的文件，如果有这样的替代品的话。 返回的HTML文档还应该声明`<html>`标签中的`lang`属性，例如`<html lang="en">...</html>`。
|
||||
|
||||
若要让搜索引擎知道不同语言的内容相同，应该使用带有`rel="alternate"` and `hreflang="..."` 属性的的 `<link>` 标签 。 例如， `<link rel="alternate" hreflang="de" href="http://de.example.com/page.html" />`.
|
||||
|
||||
## 渲染
|
||||
|
||||
- **服务器端渲染：** HTML标记将包含字符串占位符，特定语言的内容将从代码或翻译服务的配置中获取。 服务器然后动态生成带有特定语言内容的 HTML 页面。
|
||||
- **客户端渲染：** 将获取相应的地域字符串，并与 JavaScript 合并视图。
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
title: Como você serve suas páginas para navegadores com limitações de recursos?
|
||||
subtitle: Quais técnicas/processos você usa?
|
||||
---
|
||||
|
||||
## Técnicas
|
||||
|
||||
- Degradação graciosa: A prática de construir uma aplicação para navegadores modernos, garantindo que ela permaneça funcional em navegadores mais antigos.
|
||||
- Aprimoramento progressivo: A prática de construir uma aplicação para um nível base de experiência do usuário, mas adicionar aprimoramentos funcionais quando um navegador a suporta.
|
||||
- Use [caniuse.com](https://caniuse.com/) para verificar o suporte de recursos.
|
||||
- Autoprefixer para inserção automática de prefixo do fornecedor.
|
||||
- Detecção de recursos usando [Modernizr](https://modernizr.com/).
|
||||
- Use as consultas CSS de recursos via [\`@support\`\`](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
title: 你如何为功能受限的浏览器提供你的网页？
|
||||
subtitle: 您使用了什么技术/程序？
|
||||
---
|
||||
|
||||
## 技术
|
||||
|
||||
- 优雅降级：为现代浏览器建立一个应用程序，同时确保它在旧的浏览器中保持功能的做法。
|
||||
- 渐进增强：构建一个基本用户体验应用程序的做法，但在浏览器支持时添加功能增强。
|
||||
- 使用 [caniuse.com](https://caniuse.com/) 来检查功能支持情况。
|
||||
- 自动填充供应商前缀的自动修复程序。
|
||||
- 使用 [Modernizr](https://moderationr.com/)来检测功能。
|
||||
- 使用 CSS 特性查询 [`@support`](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
title: Como o design responsivo é diferente do design adaptável?
|
||||
---
|
||||
|
||||
Tanto o design responsivo quanto o design adaptável tentam otimizar a experiência do usuário em diferentes dispositivos, ajustando-se a diferentes tamanhos de viewport, resoluções, contextos de uso, mecanismos de controle e assim por diante.
|
||||
|
||||
O design responsivo funciona com base no princípio da flexibilidade - um único site fluido que pode ter uma boa aparência em qualquer dispositivo. Sites responsivos usam consultas de mídia, grades flexíveis e imagens responsivas para criar uma experiência do usuário que se flexiona e muda com base em uma infinidade de fatores. Como uma bola única que cresce ou diminui para se ajustar a vários aros diferentes.
|
||||
|
||||
O design adaptável é mais parecido com a definição moderna de aprimoramento progressivo. Em vez de um design flexível, o design adaptável detecta o dispositivo e outras características e, em seguida, fornece o recurso e layout apropriados com base em um conjunto predefinido de tamanhos de viewport e outras características. O site detecta o tipo de dispositivo utilizado e fornece o layout pré-configurado para esse dispositivo. Em vez de uma única bola passando por aros de tamanhos diferentes, você teria várias bolas diferentes para usar dependendo do tamanho do aro.
|
||||
|
||||
Ambos esses métodos têm alguns problemas que precisam ser avaliados:
|
||||
|
||||
- O design responsivo pode ser bastante desafiador, pois você está essencialmente usando um único layout, embora responsivo, para se adequar a todas as situações. Definir os pontos de interrupção de consulta de mídia é um desses desafios. Você usa valores padronizados de ponto de quebra? Ou, você utiliza pontos de interrupção que fazem sentido para o layout específico do seu site? E se o layout mudar?
|
||||
- O design adaptável geralmente requer a detecção de agente do usuário ou detecção de DPI, etc., todos os quais podem se mostrar pouco confiáveis.
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
title: 响应设计与自适应设计有何不同？
|
||||
---
|
||||
|
||||
响应式设计和自适应设计都试图在不同的设备上优化用户体验，针对不同的视口尺寸、分辨率、使用环境、控制机制等进行调整。
|
||||
|
||||
响应式设计以灵活性原则为基础――一个能够在任何设备上看起来都很好的流畅的网站。 响应式网站使用媒体查询、灵活的网格和响应性图像来创造一个基于多种因素的弹性和变化的用户体验。 就像一个球在成长或缩小以适应几个不同的环。
|
||||
|
||||
自适应设计更像是渐进式增强的现代定义。 自适应设计不是一个灵活的设计，而是检测设备和其他特征，然后根据一组预定的视口尺寸和其他特征提供适当的特征和布局。 站点检测所使用的设备类型，并为该设备提供预设布局。 你有几个不同尺寸的球，而不是一个球来穿过几个不同尺寸的环，而是有几个不同的球来使用，这取决于环的大小。
|
||||
|
||||
这两种方法都有一些需要加以权衡的问题：
|
||||
|
||||
- 响应式设计可能是相当具有挑战性的，因为你基本上是在使用一个尽管是响应式的布局来适应所有情况。 如何设置媒体查询断点就是这样一个挑战。 您是否使用标准化断点值？ 或者，您是否使用对您的特定布局有意义的断点？ 如果这种布局改变怎么办？
|
||||
- 自适应设计通常需要用户代理嗅探，或DPI检测等，所有这些都被证明是不可靠的。
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Como você abordaria a correção de problemas de estilo específicos de navegador?
|
||||
---
|
||||
|
||||
- Depois de identificar o problema e o navegador problemático, use uma folha de estilo separada que só é carregada quando aquele navegador específico está sendo usado. Essa técnica requer renderização do lado do servidor.
|
||||
- Use bibliotecas como Bootstrap que já lidam com esses problemas de estilo para você.
|
||||
- Use o `autoprefixer` para adicionar automaticamente prefixos de fornecedores ao seu código.
|
||||
- Use Reset CSS or Normalize.css.
|
||||
- Se você estiver usando o PostCSS (ou uma biblioteca semelhante de transpilação CSS), pode haver plugins que permitam que você opte por usar a sintaxe CSS moderna (e até mesmo as propostas W3C) que transformará aquelas seções do seu código em código compatível com versões anteriores que funcionarão nos destinos que você definiu.
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: 您将如何解决特定浏览器特有的样式问题？
|
||||
---
|
||||
|
||||
- 在确定问题和出问题的浏览器后，使用一个单独的样式表，只在使用该特定浏览器时加载。 这种技术需要服务器端渲染。
|
||||
- 使用像Bootstrap这样的库，已经为您处理这些样式问题。
|
||||
- 使用 `autoprefixer` 将供应商前缀自动添加到您的代码中。
|
||||
- 使用 Reset CSS 或 Normalize.css.
|
||||
- 如果您正在使用 PostCSS (或类似的 CSS 转换库)， 可能有一些插件允许您选择使用现代的 CSS 语法(甚至是W3C 提议)，这些插件将把您代码中的这些部分转换成对应的与后向兼容的代码，这将适用于您使用的目标。
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
title: Considere HTML5 como uma plataforma web aberta. Quais são os blocos de construção do HTML5?
|
||||
---
|
||||
|
||||
- **Semantics**: As tags HTML descrevem o conteúdo.
|
||||
- **Estilização**: Personalizando a aparência das tags HTML
|
||||
- **Conectividade**: Comunique-se com o servidor de maneiras novas e inovadoras.
|
||||
- **Offline e armazenamento**: Permite que as páginas da web armazenem dados localmente no lado do cliente e funcionem offline de maneira mais eficiente.
|
||||
- **Multimídia**: Torna o vídeo e o áudio cidadãos de primeira classe na Web Aberta.
|
||||
- **Gráficos e efeitos 2D/3D**: Permite uma gama muito mais diversa de opções de apresentação.
|
||||
- **Desempenho** e integração: Fornece uma otimização de velocidade maior e melhor uso do hardware do computador.
|
||||
- **Acesso a dispositivos**: Permite o uso de vários dispositivos de entrada e saída.
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
title: 将 HTML5 视为一个开放的网络平台。 HTML5 由哪些东西构成？
|
||||
---
|
||||
|
||||
- **语义**：HTML标签描述内容。
|
||||
- **样式**：自定义HTML标签外观
|
||||
- **连接**：以新的和创新的方式与服务器通信。
|
||||
- **离线和存储**：允许网页在客户端本地存储数据并更有效地离线操作。
|
||||
- **多媒体**：使视频和音频成为开放网络中的一等公民。
|
||||
- **2D/3D 图形和特效**: 允许更多不同范围的演示选项。
|
||||
- **性能** 和集成：提供更高的速度优化和更好地使用计算机硬件。
|
||||
- **设备访问**：允许使用各种输入和输出设备。
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Existe alguma razão para você querer usar `translate()` ao invés de posicionamento `absolute`, ou vice-versa? E por quê?
|
||||
---
|
||||
|
||||
`translate()` é um valor possível da propriedade CSS `transform`. Ao usar `traduzir()`, o elemento ainda ocupa seu espaço original (mais ou menos como o `position: relative`). Mas ao mudar o posicionamento absoluto dos elementos, os elementos são removidos do fluxo da página e o posicionamento dos elementos ao redor será afetado. Portanto, o layout da página terá que ser recalculado.
|
||||
|
||||
Mudar `transform` ou `opacity` não aciona reflows ou repaints no navegador, mas aciona composições; Por outro lado, mudar o posicionamento absoluto aciona um `reflow`. `transform` faz com que o navegador crie uma camada GPU para o elemento, mas mudar as propriedades de posicionamento absoluto usa a CPU. Portanto, `translate()` é mais eficiente e resultará em tempos de pintura mais curtos para animações mais suaves.
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: 您是否有任何理由想使用 `translate()` 而不是 `absolute` 定位，或反之亦然？ 为什么？
|
||||
---
|
||||
|
||||
`translate()` 是CSS `transform`属性的一个可能值。 当使用 `translate()`时，该元素仍占用其原有空间(类似\`position: relative')。 但是当改变元素的绝对定位时，这些元素会从页面的流程中被移除，周围元素的定位也会受到影响。 因此必须重新计算页面布局。
|
||||
|
||||
更改 `transform` 或 `opacity` 并不会触发浏览器的回流或重绘，而是会触发组合。 另一方面，改变绝对定位触发器`回流`。 `transform` 导致浏览器为元素创建一个 GPU 层，但改变绝对定位属性使用 CPU 。 因此，`translate()`是更有效的，并将导致更短的绘制时间，以实现更平滑的动画。
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
---
|
||||
title: Qual é a vantagem de usar a sintaxe de seta para um método em um constructor?
|
||||
---
|
||||
|
||||
A principal vantagem de usar uma arrow function como um método dentro de um construtor é que o valor de `this` é definido no momento da criação da função e não pode mudar depois disso. Então, quando o construtor é usado para criar um novo objeto, `this` sempre irá referir-se ao objeto. Por exemplo, digamos que temos um construtor `Person` que toma o primeiro nome como um argumento tem dois métodos para `console. og` esse nome, um como uma função normal e um como uma função de seta:
|
||||
|
||||
```js
|
||||
const Person = function (firstName) {
|
||||
isto. irstName = firstName;
|
||||
this.sayName1 = function () {
|
||||
console. og(this.firstName);
|
||||
};
|
||||
this.sayName2 = () => {
|
||||
console.log(isto. irstName);
|
||||
};
|
||||
};
|
||||
|
||||
const john = new Person('John');
|
||||
const dave = new Person('Dave');
|
||||
|
||||
john.sayName1(); // João
|
||||
john. ayName2(); // João
|
||||
|
||||
// A função regular pode ter seu valor 'this' alterado, mas a arrow function não pode
|
||||
john.sayName1. all(dave); // Dave (porque "this" é agora o objeto dave)
|
||||
john.sayName2.call(dave); // John
|
||||
|
||||
john. ayName1.apply(dave); // Dave (porque 'this' é agora o objeto dave)
|
||||
john. ayName2.apply(dave); // João
|
||||
|
||||
john.sayName1.bind(dave)(); // Dave (porque 'this' é agora o dave object)
|
||||
john. ayName2.bind(dave)(); // João
|
||||
|
||||
var dizNameFromWindow1 = john. ayName1;
|
||||
sayNameFromWindow1(); // indefinido (porque 'this' agora é o objeto da janela)
|
||||
|
||||
var sayNameFromWindow2 = john.sayName2;
|
||||
sayNameFromWindow2(); // John
|
||||
```
|
||||
|
||||
O principal tirada aqui é que \`this pode ser alterado para uma função normal, mas o contexto sempre permanece o mesmo para uma arrow function. Então, mesmo que você esteja passando pela arrow function para diferentes partes do seu aplicativo, você não precisaria se preocupar com a mudança de contexto.
|
||||
|
||||
Isso pode ser particularmente útil em componentes de classe React. Se você definir um método de classe para algo como um manipulador de cliques usando uma função normal, e, em seguida, você passa que clica manipulando em um componente filho como uma propriedade, você também precisará vincular o `this` no construtor do componente pai. Se você ao invés disso usar uma arrow function, não há necessidade de vincular também "this", como o método irá automaticamente obter seu valor "this" no contexto léxico que está encapsulado. (Veja esse artigo para uma excelente demonstração e código de amostra: https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb)
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
---
|
||||
title: 在构造函数中对方法使用箭头语法有什么好处？
|
||||
---
|
||||
|
||||
使用箭头函数作为构造函数内的一种方法的主要优点是，`this`的值在函数创建时被设置，之后无法更改。 因此，当构造函数用于创建一个新对象时，`this` 总是指该对象。 例如，假设我们有一个`Person`构造函数，以名字作为参数，有两个方法来`console.log`这个名字，一个是普通函数，一个是箭头函数：
|
||||
|
||||
```js
|
||||
const Person = function (firstName) {
|
||||
this.firstName = firstName;
|
||||
this.sayName1 = function () {
|
||||
console.log(this.firstName);
|
||||
};
|
||||
this.sayName2 = () => {
|
||||
console.log(this.firstName);
|
||||
};
|
||||
};
|
||||
|
||||
const john = new Person('John');
|
||||
const dave = new Person('Dave');
|
||||
|
||||
john.sayName1(); // John
|
||||
john.sayName2(); // John
|
||||
|
||||
// The regular function can have its 'this' value changed, but the arrow function cannot
|
||||
john.sayName1.call(dave); // Dave (because "this" is now the dave object)
|
||||
john.sayName2.call(dave); // John
|
||||
|
||||
john.sayName1.apply(dave); // Dave (because 'this' is now the dave object)
|
||||
john.sayName2.apply(dave); // John
|
||||
|
||||
john.sayName1.bind(dave)(); // Dave (because 'this' is now the dave object)
|
||||
john.sayName2.bind(dave)(); // John
|
||||
|
||||
var sayNameFromWindow1 = john.sayName1;
|
||||
sayNameFromWindow1(); // undefined (because 'this' is now the window object)
|
||||
|
||||
var sayNameFromWindow2 = john.sayName2;
|
||||
sayNameFromWindow2(); // John
|
||||
```
|
||||
|
||||
这里的主要启示是，对于普通函数\`this'可以改变，但对于箭头函数，上下文始终保持不变。 所以，即使你将箭头函数传递到应用程序的不同部分，你也不必担心上下文会发生变化。
|
||||
|
||||
这对React类组件特别有用。 如果你定义了一个类方法，例如使用普通函数的点击处理程序，然后你把这个点击处理程序作为一个道具传递给子组件，你将需要在父组件的构造函数中绑定`this`。 如果你使用一个箭头函数，就不需要同时绑定 "this"，因为方法会自动从其包围的词法上下文中获得 "this "值。 (关于优秀演示和样本代码：https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb)
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue