[qns] quiz: update + regenerate
This commit is contained in:
Yangshun
parent
4346b4f06a
commit
819c040dd0
|
|
@ -27,5 +27,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/are-you-familiar-with-styling-svg/en-US.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var i in e)a(t,i,{get:e[i],enumerable:!0})},r=(t,e,i,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of p(e))!f.call(t,s)&&s!==i&&a(t,s,{get:()=>e[s],enumerable:!(l=u(e,s))||l.enumerable});return t};var y=(t,e,i)=>(i=t!=null?h(b(t)):{},r(e||!t||!t.__esModule?a(i,\"default\",{value:t,enumerable:!0}):i,t)),S=t=>r(a({},\"__esModule\",{value:!0}),t);var c=m((C,o)=>{o.exports=_jsx_runtime});var j={};g(j,{default:()=>w,frontmatter:()=>x});var n=y(c()),x={title:\"Are you familiar with styling SVG?\"};function d(t){let e=Object.assign({p:\"p\",code:\"code\",pre:\"pre\",em:\"em\",a:\"a\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"There are several ways to color shapes (including specifying attributes on the object) using inline CSS, an embedded CSS section, or an external CSS file. Most SVGs you find on the web uses inline CSS, but there are advantages and disadvantages associated with each type.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Basic coloring can be done by setting two attributes on the node: \",(0,n.jsx)(e.code,{children:\"fill\"}),\" and \",(0,n.jsx)(e.code,{children:\"stroke\"}),\". \",(0,n.jsx)(e.code,{children:\"fill\"}),\" sets the color inside the object and \",(0,n.jsx)(e.code,{children:\"stroke\"}),\" sets the color of the line drawn around the object. You can use the same CSS color naming schemes that you use in HTML, whether that's color names (that is \",(0,n.jsx)(e.code,{children:\"red\"}),\"), RGB values (that is \",(0,n.jsx)(e.code,{children:\"rgb(255,0,0)\"}),\"), Hex values, RGBA values, etc.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<rect\n x=\"10\"\n y=\"10\"\n width=\"100\"\n height=\"100\"\n stroke=\"blue\"\n fill=\"purple\"\n fill-opacity=\"0.5\"\n stroke-opacity=\"0.8\" />\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The above \",(0,n.jsx)(e.code,{children:'fill=\"purple\"'}),\" is an example of a \",(0,n.jsx)(e.em,{children:\"presentational attribute\"}),\". Interestingly, and unlike inline styles like \",(0,n.jsx)(e.code,{children:'style=\"fill: purple\"'}),\" which also happens to be an attribute, presentational attributes can be \",(0,n.jsx)(e.a,{href:\"https://css-tricks.com/presentation-attributes-vs-inline-styles/\",children:\"overridden by CSS\"}),\" styles defined in a stylesheet. Hence if you did something like \",(0,n.jsx)(e.code,{children:\"svg { fill: blue; }\"}),\" it will override the purple fill that has been defined.\"]})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var w=v;return S(j);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var i in e)l(t,i,{get:e[i],enumerable:!0})},a=(t,e,i,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of f(e))!b.call(t,s)&&s!==i&&l(t,s,{get:()=>e[s],enumerable:!(r=p(e,s))||r.enumerable});return t};var S=(t,e,i)=>(i=t!=null?u(m(t)):{},a(e||!t||!t.__esModule?l(i,\"default\",{value:t,enumerable:!0}):i,t)),x=t=>a(l({},\"__esModule\",{value:!0}),t);var c=y((k,o)=>{o.exports=_jsx_runtime});var w={};g(w,{default:()=>h,frontmatter:()=>v});var n=S(c()),v={title:\"Are you familiar with styling SVG?\"};function d(t){let e={a:\"a\",code:\"code\",em:\"em\",p:\"p\",pre:\"pre\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"There are several ways to color shapes (including specifying attributes on the object) using inline CSS, an embedded CSS section, or an external CSS file. Most SVGs you find on the web uses inline CSS, but there are advantages and disadvantages associated with each type.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Basic coloring can be done by setting two attributes on the node: \",(0,n.jsx)(e.code,{children:\"fill\"}),\" and \",(0,n.jsx)(e.code,{children:\"stroke\"}),\". \",(0,n.jsx)(e.code,{children:\"fill\"}),\" sets the color inside the object and \",(0,n.jsx)(e.code,{children:\"stroke\"}),\" sets the color of the line drawn around the object. You can use the same CSS color naming schemes that you use in HTML, whether that's color names (that is \",(0,n.jsx)(e.code,{children:\"red\"}),\"), RGB values (that is \",(0,n.jsx)(e.code,{children:\"rgb(255,0,0)\"}),\"), Hex values, RGBA values, etc.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<rect\n x=\"10\"\n y=\"10\"\n width=\"100\"\n height=\"100\"\n stroke=\"blue\"\n fill=\"purple\"\n fill-opacity=\"0.5\"\n stroke-opacity=\"0.8\" />\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The above \",(0,n.jsx)(e.code,{children:'fill=\"purple\"'}),\" is an example of a \",(0,n.jsx)(e.em,{children:\"presentational attribute\"}),\". Interestingly, and unlike inline styles like \",(0,n.jsx)(e.code,{children:'style=\"fill: purple\"'}),\" which also happens to be an attribute, presentational attributes can be \",(0,n.jsx)(e.a,{href:\"https://css-tricks.com/presentation-attributes-vs-inline-styles/\",children:\"overridden by CSS\"}),\" styles defined in a stylesheet. Hence if you did something like \",(0,n.jsx)(e.code,{children:\"svg { fill: blue; }\"}),\" it will override the purple fill that has been defined.\"]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}return x(w);})();\n;return Component;"
|
||||
}
|
||||
|
|
@ -27,5 +27,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/are-you-familiar-with-styling-svg/pt-BR.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var r in e)a(o,r,{get:e[r],enumerable:!0})},i=(o,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of p(e))!f.call(o,t)&&t!==r&&a(o,t,{get:()=>e[t],enumerable:!(s=u(e,t))||s.enumerable});return o};var g=(o,e,r)=>(r=o!=null?m(h(o)):{},i(e||!o||!o.__esModule?a(r,\"default\",{value:o,enumerable:!0}):r,o)),v=o=>i(a({},\"__esModule\",{value:!0}),o);var d=b((_,c)=>{c.exports=_jsx_runtime});var y={};x(y,{default:()=>q,frontmatter:()=>S});var n=g(d()),S={title:\"Voc\\xEA conhece o estilo SVG?\"};function l(o){let e=Object.assign({p:\"p\",code:\"code\",pre:\"pre\",em:\"em\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Se voc\\xEA usa alguma ferramenta de an\\xE1lise est\\xE1tica em seu fluxo de trabalho (por exemplo, ESLint, TypeScript Compiler), geralmente ela tamb\\xE9m pode verificar se voc\\xEA est\\xE1 referenciando vari\\xE1veis n\\xE3o declaradas. A maioria dos SVGs que voc\\xEA encontra na web usa CSS inline, mas existem vantagens e desvantagens associadas a cada tipo.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A colora\\xE7\\xE3o b\\xE1sica pode ser feita definindo dois atributos no n\\xF3: \",(0,n.jsx)(e.code,{children:\"fill\"}),\" e \",(0,n.jsx)(e.code,{children:\"stroke\"}),\". \",(0,n.jsx)(e.code,{children:\"fill\"}),\" define a cor dentro do objeto e \",(0,n.jsx)(e.code,{children:\"stroke\"}),\" define a cor da linha desenhada ao redor do objeto. Voc\\xEA pode usar os mesmos esquemas de nomenclatura de cores CSS que voc\\xEA usa em HTML, independentemente de serem nomes de cores (que \\xE9 \",(0,n.jsx)(e.code,{children:\"red\"}),\"), Valores RGB (que s\\xE3o \",(0,n.jsx)(e.code,{children:\"rgb(255,0,0)\"}),\"), valores de Hex, valores RGBA, etc.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<rect\n x=\"10\"\n y=\"10\"\n width=\"100\"\n height=\"100\"\n stroke=\"blue\"\n fill=\"purple\"\n fill-opacity=\"0.5\"\n stroke-opacity=\"0.8\" />\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"O \",(0,n.jsx)(e.code,{children:'fill=\"purple\"'}),\" acima \\xE9 um exemplo de um \",(0,n.jsx)(e.em,{children:\"atributo apresentacional\"}),\". Curiosamente, e ao contr\\xE1rio de estilos embutidos como \",(0,n.jsx)(e.code,{children:'style=\"fill: purple\"'}),\" que tamb\\xE9m \\xE9 um atributo, os atributos de apresenta\\xE7\\xE3o podem ser \",(0,n.jsx)(e.a,{href:\"https://css-tricks.com/presentation-attributes-vs-inline-styles/\",children:\"sobrescritos pelo CSS\"}),\" definidos em uma folha de estilos. Da\\xED se voc\\xEA fez algo como \",(0,n.jsx)(e.code,{children:\"svg { fill: blue; }\"}),\" ele ir\\xE1 substituir o preenchimento roxo que foi definido.\"]})]})}function j(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(l,o)})):l(o)}var q=j;return v(y);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var x=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),v=(o,e)=>{for(var r in e)a(o,r,{get:e[r],enumerable:!0})},i=(o,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of h(e))!b.call(o,t)&&t!==r&&a(o,t,{get:()=>e[t],enumerable:!(s=p(e,t))||s.enumerable});return o};var g=(o,e,r)=>(r=o!=null?u(f(o)):{},i(e||!o||!o.__esModule?a(r,\"default\",{value:o,enumerable:!0}):r,o)),S=o=>i(a({},\"__esModule\",{value:!0}),o);var d=x((C,c)=>{c.exports=_jsx_runtime});var q={};v(q,{default:()=>m,frontmatter:()=>j});var n=g(d()),j={title:\"Voc\\xEA conhece o estilo SVG?\"};function l(o){let e={a:\"a\",code:\"code\",em:\"em\",p:\"p\",pre:\"pre\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Se voc\\xEA usa alguma ferramenta de an\\xE1lise est\\xE1tica em seu fluxo de trabalho (por exemplo, ESLint, TypeScript Compiler), geralmente ela tamb\\xE9m pode verificar se voc\\xEA est\\xE1 referenciando vari\\xE1veis n\\xE3o declaradas. A maioria dos SVGs que voc\\xEA encontra na web usa CSS inline, mas existem vantagens e desvantagens associadas a cada tipo.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"A colora\\xE7\\xE3o b\\xE1sica pode ser feita definindo dois atributos no n\\xF3: \",(0,n.jsx)(e.code,{children:\"fill\"}),\" e \",(0,n.jsx)(e.code,{children:\"stroke\"}),\". \",(0,n.jsx)(e.code,{children:\"fill\"}),\" define a cor dentro do objeto e \",(0,n.jsx)(e.code,{children:\"stroke\"}),\" define a cor da linha desenhada ao redor do objeto. Voc\\xEA pode usar os mesmos esquemas de nomenclatura de cores CSS que voc\\xEA usa em HTML, independentemente de serem nomes de cores (que \\xE9 \",(0,n.jsx)(e.code,{children:\"red\"}),\"), Valores RGB (que s\\xE3o \",(0,n.jsx)(e.code,{children:\"rgb(255,0,0)\"}),\"), valores de Hex, valores RGBA, etc.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<rect\n x=\"10\"\n y=\"10\"\n width=\"100\"\n height=\"100\"\n stroke=\"blue\"\n fill=\"purple\"\n fill-opacity=\"0.5\"\n stroke-opacity=\"0.8\" />\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"O \",(0,n.jsx)(e.code,{children:'fill=\"purple\"'}),\" acima \\xE9 um exemplo de um \",(0,n.jsx)(e.em,{children:\"atributo apresentacional\"}),\". Curiosamente, e ao contr\\xE1rio de estilos embutidos como \",(0,n.jsx)(e.code,{children:'style=\"fill: purple\"'}),\" que tamb\\xE9m \\xE9 um atributo, os atributos de apresenta\\xE7\\xE3o podem ser \",(0,n.jsx)(e.a,{href:\"https://css-tricks.com/presentation-attributes-vs-inline-styles/\",children:\"sobrescritos pelo CSS\"}),\" definidos em uma folha de estilos. Da\\xED se voc\\xEA fez algo como \",(0,n.jsx)(e.code,{children:\"svg { fill: blue; }\"}),\" ele ir\\xE1 substituir o preenchimento roxo que foi definido.\"]})]})}function m(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(l,{...o})}):l(o)}return S(q);})();\n;return Component;"
|
||||
}
|
||||
|
|
@ -27,5 +27,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/are-you-familiar-with-styling-svg/zh-CN.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var a=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),x=(n,e)=>{for(var r in e)l(n,r,{get:e[r],enumerable:!0})},o=(n,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!S.call(n,c)&&c!==r&&l(n,c,{get:()=>e[c],enumerable:!(i=p(e,c))||i.enumerable});return n};var g=(n,e,r)=>(r=n!=null?a(u(n)):{},o(e||!n||!n.__esModule?l(r,\"default\",{value:n,enumerable:!0}):r,n)),C=n=>o(l({},\"__esModule\",{value:!0}),n);var d=f((G,s)=>{s.exports=_jsx_runtime});var y={};x(y,{default:()=>b,frontmatter:()=>j});var t=g(d()),j={title:\"\\u4F60\\u719F\\u6089 SVG \\u7684\\u6837\\u5F0F\\u8BBE\\u7F6E\\u5417\\uFF1F\"};function h(n){let e=Object.assign({p:\"p\",code:\"code\",pre:\"pre\",em:\"em\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.p,{children:\"\\u6709\\u51E0\\u79CD\\u65B9\\u6CD5\\u53EF\\u4EE5\\u4E3A\\u5F62\\u72B6\\u7740\\u8272\\uFF08\\u5305\\u62EC\\u5728\\u5BF9\\u8C61\\u4E0A\\u6307\\u5B9A\\u5C5E\\u6027\\uFF09\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u5185\\u8054 CSS\\u3001\\u5D4C\\u5165\\u5F0F CSS \\u90E8\\u5206\\u6216\\u5916\\u90E8 CSS \\u6587\\u4EF6\\u3002 \\u60A8\\u5728\\u7F51\\u7EDC\\u4E0A\\u627E\\u5230\\u7684\\u5927\\u591A\\u6570 SVG \\u90FD\\u4F7F\\u7528\\u5185\\u8054 CSS\\uFF0C\\u4F46\\u6BCF\\u79CD\\u7C7B\\u578B\\u90FD\\u6709\\u5176\\u4F18\\u70B9\\u548C\\u7F3A\\u70B9\\u3002\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728\\u8282\\u70B9\\u4E0A\\u8BBE\\u7F6E\\u4E24\\u4E2A\\u5C5E\\u6027\\u6765\\u5B8C\\u6210\\u57FA\\u672C\\u7740\\u8272\\uFF1A\",(0,t.jsx)(e.code,{children:\"fill\"}),\" \\u548C \",(0,t.jsx)(e.code,{children:\"stroke\"}),\"\\u3002 \",(0,t.jsx)(e.code,{children:\"fill\"}),\" \\u8BBE\\u7F6E\\u5BF9\\u8C61\\u5185\\u90E8\\u7684\\u989C\\u8272\\uFF0C\",(0,t.jsx)(e.code,{children:\"stroke\"}),\" \\u8BBE\\u7F6E\\u7ED8\\u5236\\u5728\\u5BF9\\u8C61\\u5468\\u56F4\\u7684\\u7EBF\\u6761\\u7684\\u989C\\u8272\\u3002 \\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5728 HTML \\u4E2D\\u4F7F\\u7528\\u7684\\u76F8\\u540C CSS \\u989C\\u8272\\u547D\\u540D\\u65B9\\u6848\\uFF0C\\u65E0\\u8BBA\\u662F\\u989C\\u8272\\u540D\\u79F0\\uFF08\\u5373 \",(0,t.jsx)(e.code,{children:\"red\"}),\"\\uFF09\\u3001RGB \\u503C\\uFF08\\u5373 \",(0,t.jsx)(e.code,{children:\"rgb(255,0,0)\"}),\"\\uFF09\\u3001\\u5341\\u516D\\u8FDB\\u5236\\u503C\\u3001RGBA \\u503C\\u7B49\\u3002\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-html\",children:`<rect\n x=\"10\"\n y=\"10\"\n width=\"100\"\n height=\"100\"\n stroke=\"blue\"\n fill=\"purple\"\n fill-opacity=\"0.5\"\n stroke-opacity=\"0.8\" />\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u4E0A\\u9762\\u7684 \",(0,t.jsx)(e.code,{children:'fill=\"purple\"'}),\" \\u662F\",(0,t.jsx)(e.em,{children:\"\\u8868\\u73B0\\u5C5E\\u6027\"}),\"\\u7684\\u4E00\\u4E2A\\u4F8B\\u5B50\\u3002 \\u6709\\u8DA3\\u7684\\u662F\\uFF0C\\u4E0E \",(0,t.jsx)(e.code,{children:'style=\"fill: purple\"'}),\" \\u8FD9\\u6837\\u7684\\u5185\\u8054\\u6837\\u5F0F\\uFF08\\u5B83\\u4E5F\\u6070\\u597D\\u662F\\u4E00\\u4E2A\\u5C5E\\u6027\\uFF09\\u4E0D\\u540C\\uFF0C\\u8868\\u73B0\\u5C5E\\u6027\\u53EF\\u4EE5\\u88AB\\u6837\\u5F0F\\u8868\\u4E2D\\u5B9A\\u4E49\\u7684 \",(0,t.jsx)(e.a,{href:\"https://css-tricks.com/presentation-attributes-vs-inline-styles/\",children:\"CSS \\u6837\\u5F0F\\u8986\\u76D6\"}),\"\\u3002 \\u56E0\\u6B64\\uFF0C\\u5982\\u679C\\u60A8\\u6267\\u884C\\u7C7B\\u4F3C \",(0,t.jsx)(e.code,{children:\"svg { fill: blue; }\"}),\" \\u7684\\u64CD\\u4F5C\\uFF0C\\u5B83\\u5C06\\u8986\\u76D6\\u5DF2\\u5B9A\\u4E49\\u7684\\u7D2B\\u8272\\u586B\\u5145\\u3002\"]})]})}function _(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var b=_;return C(y);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),C=(n,e)=>{for(var t in e)l(n,t,{get:e[t],enumerable:!0})},o=(n,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of u(e))!f.call(n,c)&&c!==t&&l(n,c,{get:()=>e[c],enumerable:!(i=m(e,c))||i.enumerable});return n};var g=(n,e,t)=>(t=n!=null?p(S(n)):{},o(e||!n||!n.__esModule?l(t,\"default\",{value:n,enumerable:!0}):t,n)),_=n=>o(l({},\"__esModule\",{value:!0}),n);var s=x((b,d)=>{d.exports=_jsx_runtime});var j={};C(j,{default:()=>a,frontmatter:()=>y});var r=g(s()),y={title:\"\\u4F60\\u719F\\u6089 SVG \\u7684\\u6837\\u5F0F\\u8BBE\\u7F6E\\u5417\\uFF1F\"};function h(n){let e={a:\"a\",code:\"code\",em:\"em\",p:\"p\",pre:\"pre\",...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.p,{children:\"\\u6709\\u51E0\\u79CD\\u65B9\\u6CD5\\u53EF\\u4EE5\\u4E3A\\u5F62\\u72B6\\u7740\\u8272\\uFF08\\u5305\\u62EC\\u5728\\u5BF9\\u8C61\\u4E0A\\u6307\\u5B9A\\u5C5E\\u6027\\uFF09\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u5185\\u8054 CSS\\u3001\\u5D4C\\u5165\\u5F0F CSS \\u90E8\\u5206\\u6216\\u5916\\u90E8 CSS \\u6587\\u4EF6\\u3002 \\u60A8\\u5728\\u7F51\\u7EDC\\u4E0A\\u627E\\u5230\\u7684\\u5927\\u591A\\u6570 SVG \\u90FD\\u4F7F\\u7528\\u5185\\u8054 CSS\\uFF0C\\u4F46\\u6BCF\\u79CD\\u7C7B\\u578B\\u90FD\\u6709\\u5176\\u4F18\\u70B9\\u548C\\u7F3A\\u70B9\\u3002\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728\\u8282\\u70B9\\u4E0A\\u8BBE\\u7F6E\\u4E24\\u4E2A\\u5C5E\\u6027\\u6765\\u5B8C\\u6210\\u57FA\\u672C\\u7740\\u8272\\uFF1A\",(0,r.jsx)(e.code,{children:\"fill\"}),\" \\u548C \",(0,r.jsx)(e.code,{children:\"stroke\"}),\"\\u3002 \",(0,r.jsx)(e.code,{children:\"fill\"}),\" \\u8BBE\\u7F6E\\u5BF9\\u8C61\\u5185\\u90E8\\u7684\\u989C\\u8272\\uFF0C\",(0,r.jsx)(e.code,{children:\"stroke\"}),\" \\u8BBE\\u7F6E\\u7ED8\\u5236\\u5728\\u5BF9\\u8C61\\u5468\\u56F4\\u7684\\u7EBF\\u6761\\u7684\\u989C\\u8272\\u3002 \\u60A8\\u53EF\\u4EE5\\u4F7F\\u7528\\u5728 HTML \\u4E2D\\u4F7F\\u7528\\u7684\\u76F8\\u540C CSS \\u989C\\u8272\\u547D\\u540D\\u65B9\\u6848\\uFF0C\\u65E0\\u8BBA\\u662F\\u989C\\u8272\\u540D\\u79F0\\uFF08\\u5373 \",(0,r.jsx)(e.code,{children:\"red\"}),\"\\uFF09\\u3001RGB \\u503C\\uFF08\\u5373 \",(0,r.jsx)(e.code,{children:\"rgb(255,0,0)\"}),\"\\uFF09\\u3001\\u5341\\u516D\\u8FDB\\u5236\\u503C\\u3001RGBA \\u503C\\u7B49\\u3002\"]}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-html\",children:`<rect\n x=\"10\"\n y=\"10\"\n width=\"100\"\n height=\"100\"\n stroke=\"blue\"\n fill=\"purple\"\n fill-opacity=\"0.5\"\n stroke-opacity=\"0.8\" />\n`})}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u4E0A\\u9762\\u7684 \",(0,r.jsx)(e.code,{children:'fill=\"purple\"'}),\" \\u662F\",(0,r.jsx)(e.em,{children:\"\\u8868\\u73B0\\u5C5E\\u6027\"}),\"\\u7684\\u4E00\\u4E2A\\u4F8B\\u5B50\\u3002 \\u6709\\u8DA3\\u7684\\u662F\\uFF0C\\u4E0E \",(0,r.jsx)(e.code,{children:'style=\"fill: purple\"'}),\" \\u8FD9\\u6837\\u7684\\u5185\\u8054\\u6837\\u5F0F\\uFF08\\u5B83\\u4E5F\\u6070\\u597D\\u662F\\u4E00\\u4E2A\\u5C5E\\u6027\\uFF09\\u4E0D\\u540C\\uFF0C\\u8868\\u73B0\\u5C5E\\u6027\\u53EF\\u4EE5\\u88AB\\u6837\\u5F0F\\u8868\\u4E2D\\u5B9A\\u4E49\\u7684 \",(0,r.jsx)(e.a,{href:\"https://css-tricks.com/presentation-attributes-vs-inline-styles/\",children:\"CSS \\u6837\\u5F0F\\u8986\\u76D6\"}),\"\\u3002 \\u56E0\\u6B64\\uFF0C\\u5982\\u679C\\u60A8\\u6267\\u884C\\u7C7B\\u4F3C \",(0,r.jsx)(e.code,{children:\"svg { fill: blue; }\"}),\" \\u7684\\u64CD\\u4F5C\\uFF0C\\u5B83\\u5C06\\u8986\\u76D6\\u5DF2\\u5B9A\\u4E49\\u7684\\u7D2B\\u8272\\u586B\\u5145\\u3002\"]})]})}function a(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(h,{...n})}):h(n)}return _(j);})();\n;return Component;"
|
||||
}
|
||||
|
|
@ -27,5 +27,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/en-US.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),x=(n,e)=>{for(var t in e)a(n,t,{get:e[t],enumerable:!0})},l=(n,e,t,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of p(e))!f.call(n,i)&&i!==t&&a(n,i,{get:()=>e[i],enumerable:!(r=h(e,i))||r.enumerable});return n};var v=(n,e,t)=>(t=n!=null?m(u(n)):{},l(e||!n||!n.__esModule?a(t,\"default\",{value:n,enumerable:!0}):t,n)),b=n=>l(a({},\"__esModule\",{value:!0}),n);var c=g((M,o)=>{o.exports=_jsx_runtime});var z={};x(z,{default:()=>j,frontmatter:()=>y});var s=v(c()),y={title:\"Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy?\"};function d(n){let e=Object.assign({p:\"p\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\"},n.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.p,{children:\"These two approaches are not mutually exclusive. Making a website responsive means that some elements will respond by adapting its size or other functionality according to the device's screen size, typically the viewport width, through CSS media queries, for example, making the font size smaller on smaller devices.\"}),`\n`,(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:\"language-css\",children:`@media (min-width: 768px) {\n .my-class {\n font-size: 24px;\n }\n}\n\n@media (max-width: 767px) {\n .my-class {\n font-size: 12px;\n }\n}\n`})}),`\n`,(0,s.jsx)(e.p,{children:\"A mobile-first strategy is also responsive, however it agrees we should default and define all the styles for mobile devices, and only add specific responsive rules to other devices later. Following the previous example:\"}),`\n`,(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:\"language-css\",children:`.my-class {\n font-size: 12px;\n}\n\n@media (min-width: 768px) {\n .my-class {\n font-size: 24px;\n }\n}\n`})}),`\n`,(0,s.jsx)(e.p,{children:\"A mobile-first strategy has the following main advantages:\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsx)(e.li,{children:\"It's more performant on mobile devices, since all the rules applied for them don't have to be validated against any media queries.\"}),`\n`,(0,s.jsx)(e.li,{children:\"Mobile-first designs are more likely to be usable on larger devices (will just appear more stretched, but still usable). However, the reverse is not the case.\"}),`\n`]})]})}function w(n={}){let{wrapper:e}=n.components||{};return e?(0,s.jsx)(e,Object.assign({},n,{children:(0,s.jsx)(d,n)})):d(n)}var j=w;return b(z);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var t in e)a(n,t,{get:e[t],enumerable:!0})},l=(n,e,t,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!g.call(n,i)&&i!==t&&a(n,i,{get:()=>e[i],enumerable:!(r=p(e,i))||r.enumerable});return n};var y=(n,e,t)=>(t=n!=null?h(f(n)):{},l(e||!n||!n.__esModule?a(t,\"default\",{value:n,enumerable:!0}):t,n)),w=n=>l(a({},\"__esModule\",{value:!0}),n);var c=x((j,o)=>{o.exports=_jsx_runtime});var z={};v(z,{default:()=>m,frontmatter:()=>b});var s=y(c()),b={title:\"Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy?\"};function d(n){let e={code:\"code\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.p,{children:\"These two approaches are not mutually exclusive. Making a website responsive means that some elements will respond by adapting its size or other functionality according to the device's screen size, typically the viewport width, through CSS media queries, for example, making the font size smaller on smaller devices.\"}),`\n`,(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:\"language-css\",children:`@media (min-width: 768px) {\n .my-class {\n font-size: 24px;\n }\n}\n\n@media (max-width: 767px) {\n .my-class {\n font-size: 12px;\n }\n}\n`})}),`\n`,(0,s.jsx)(e.p,{children:\"A mobile-first strategy is also responsive, however it agrees we should default and define all the styles for mobile devices, and only add specific responsive rules to other devices later. Following the previous example:\"}),`\n`,(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:\"language-css\",children:`.my-class {\n font-size: 12px;\n}\n\n@media (min-width: 768px) {\n .my-class {\n font-size: 24px;\n }\n}\n`})}),`\n`,(0,s.jsx)(e.p,{children:\"A mobile-first strategy has the following main advantages:\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsx)(e.li,{children:\"It's more performant on mobile devices, since all the rules applied for them don't have to be validated against any media queries.\"}),`\n`,(0,s.jsx)(e.li,{children:\"Mobile-first designs are more likely to be usable on larger devices (will just appear more stretched, but still usable). However, the reverse is not the case.\"}),`\n`]})]})}function m(n={}){let{wrapper:e}=n.components||{};return e?(0,s.jsx)(e,{...n,children:(0,s.jsx)(d,{...n})}):d(n)}return w(z);})();\n;return Component;"
|
||||
}
|
||||
|
|
@ -27,5 +27,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/pt-BR.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(s,e)=>()=>(e||s((e={exports:{}}).exports,e),e.exports),h=(s,e)=>{for(var n in e)o(s,n,{get:e[n],enumerable:!0})},t=(s,e,n,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!g.call(s,i)&&i!==n&&o(s,i,{get:()=>e[i],enumerable:!(r=l(e,i))||r.enumerable});return s};var v=(s,e,n)=>(n=s!=null?p(f(s)):{},t(e||!s||!s.__esModule?o(n,\"default\",{value:s,enumerable:!0}):n,s)),b=s=>t(o({},\"__esModule\",{value:!0}),s);var d=x((q,m)=>{m.exports=_jsx_runtime});var w={};h(w,{default:()=>z,frontmatter:()=>j});var a=v(d()),j={title:\"Voc\\xEA pode explicar a diferen\\xE7a entre codificar um site para ser responsivo e usar uma estrat\\xE9gia mobile-first?\"};function c(s){let e=Object.assign({p:\"p\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\"},s.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.p,{children:\"Estas duas abordagens n\\xE3o se excluem mutuamente. Tornar um site responsivo significa que alguns elementos ir\\xE3o responder adaptando seu tamanho ou outras funcionalidades de acordo com o tamanho da tela do dispositivo, normalmente a largura da viewport, atrav\\xE9s de media queries CSS, por exemplo, tornando o tamanho da fonte menor em dispositivos menores.\"}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-css\",children:`@media (min-width: 768px) {\n . y-class {\n font-size: 24px;\n }\n}\n\n@media (max-width: 767px) {\n . y-class {\n font-size: 12px;\n }\n}\n`})}),`\n`,(0,a.jsx)(e.p,{children:\"Uma estrat\\xE9gia mobile-first tamb\\xE9m \\xE9 responsiva, no entanto, ela define todos os estilos para dispositivos m\\xF3veis como padr\\xE3o e adiciona regras espec\\xEDficas para dispositivos maiores posteriormente. Seguindo o exemplo anterior:\"}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-css\",children:`.min-classe {\n font-size: 12px;\n}\n\n@media (min-width: 768px) {\n .my-class {\n font-size: 24px;\n }\n`})}),`\n`,(0,a.jsx)(e.p,{children:\"Uma estrat\\xE9gia mobile-first tem as seguintes principais vantagens:\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:\"\\xC9 mais perform\\xE1tico em dispositivos m\\xF3veis, j\\xE1 que todas as regras aplicadas para eles n\\xE3o precisam ser validadas em rela\\xE7\\xE3o a nenhuma media query.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Designs mobile-first s\\xE3o mais propensos a ser utiliz\\xE1veis em dispositivos maiores (apenas aparecer\\xE3o mais esticados, mas ainda utiliz\\xE1veis). No entanto, o inverso n\\xE3o \\xE9 verdadeiro.\"}),`\n`]})]})}function _(s={}){let{wrapper:e}=s.components||{};return e?(0,a.jsx)(e,Object.assign({},s,{children:(0,a.jsx)(c,s)})):c(s)}var z=_;return b(w);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var l=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var h=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),v=(a,e)=>{for(var n in e)o(a,n,{get:e[n],enumerable:!0})},t=(a,e,n,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of f(e))!g.call(a,i)&&i!==n&&o(a,i,{get:()=>e[i],enumerable:!(r=u(e,i))||r.enumerable});return a};var _=(a,e,n)=>(n=a!=null?l(x(a)):{},t(e||!a||!a.__esModule?o(n,\"default\",{value:a,enumerable:!0}):n,a)),b=a=>t(o({},\"__esModule\",{value:!0}),a);var d=h((y,m)=>{m.exports=_jsx_runtime});var z={};v(z,{default:()=>p,frontmatter:()=>j});var s=_(d()),j={title:\"Voc\\xEA pode explicar a diferen\\xE7a entre codificar um site para ser responsivo e usar uma estrat\\xE9gia mobile-first?\"};function c(a){let e={code:\"code\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...a.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.p,{children:\"Estas duas abordagens n\\xE3o se excluem mutuamente. Tornar um site responsivo significa que alguns elementos ir\\xE3o responder adaptando seu tamanho ou outras funcionalidades de acordo com o tamanho da tela do dispositivo, normalmente a largura da viewport, atrav\\xE9s de media queries CSS, por exemplo, tornando o tamanho da fonte menor em dispositivos menores.\"}),`\n`,(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:\"language-css\",children:`@media (min-width: 768px) {\n . y-class {\n font-size: 24px;\n }\n}\n\n@media (max-width: 767px) {\n . y-class {\n font-size: 12px;\n }\n}\n`})}),`\n`,(0,s.jsx)(e.p,{children:\"Uma estrat\\xE9gia mobile-first tamb\\xE9m \\xE9 responsiva, no entanto, ela define todos os estilos para dispositivos m\\xF3veis como padr\\xE3o e adiciona regras espec\\xEDficas para dispositivos maiores posteriormente. Seguindo o exemplo anterior:\"}),`\n`,(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:\"language-css\",children:`.min-classe {\n font-size: 12px;\n}\n\n@media (min-width: 768px) {\n .my-class {\n font-size: 24px;\n }\n`})}),`\n`,(0,s.jsx)(e.p,{children:\"Uma estrat\\xE9gia mobile-first tem as seguintes principais vantagens:\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsx)(e.li,{children:\"\\xC9 mais perform\\xE1tico em dispositivos m\\xF3veis, j\\xE1 que todas as regras aplicadas para eles n\\xE3o precisam ser validadas em rela\\xE7\\xE3o a nenhuma media query.\"}),`\n`,(0,s.jsx)(e.li,{children:\"Designs mobile-first s\\xE3o mais propensos a ser utiliz\\xE1veis em dispositivos maiores (apenas aparecer\\xE3o mais esticados, mas ainda utiliz\\xE1veis). No entanto, o inverso n\\xE3o \\xE9 verdadeiro.\"}),`\n`]})]})}function p(a={}){let{wrapper:e}=a.components||{};return e?(0,s.jsx)(e,{...a,children:(0,s.jsx)(c,{...a})}):c(a)}return b(z);})();\n;return Component;"
|
||||
}
|
||||
|
|
@ -27,5 +27,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/zh-CN.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var f=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),g=(e,n)=>{for(var t in n)i(e,t,{get:n[t],enumerable:!0})},l=(e,n,t,r)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of x(n))!u.call(e,c)&&c!==t&&i(e,c,{get:()=>n[c],enumerable:!(r=p(n,c))||r.enumerable});return e};var j=(e,n,t)=>(t=e!=null?m(h(e)):{},l(n||!e||!e.__esModule?i(t,\"default\",{value:e,enumerable:!0}):t,e)),_=e=>l(i({},\"__esModule\",{value:!0}),e);var o=f((b,a)=>{a.exports=_jsx_runtime});var C={};g(C,{default:()=>z,frontmatter:()=>y});var s=j(o()),y={title:\"\\u4F60\\u80FD\\u89E3\\u91CA\\u4E00\\u4E0B\\u7F16\\u5199\\u54CD\\u5E94\\u5F0F\\u7F51\\u7AD9\\u4E0E\\u4F7F\\u7528\\u79FB\\u52A8\\u4F18\\u5148\\u7B56\\u7565\\u7684\\u533A\\u522B\\u5417\\uFF1F\"};function d(e){let n=Object.assign({p:\"p\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\"},e.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.p,{children:\"\\u8FD9\\u4E24\\u79CD\\u65B9\\u6CD5\\u5E76\\u975E\\u76F8\\u4E92\\u6392\\u65A5\\u3002\\u4F7F\\u7F51\\u7AD9\\u5177\\u6709\\u54CD\\u5E94\\u6027\\u610F\\u5473\\u7740\\u67D0\\u4E9B\\u5143\\u7D20\\u5C06\\u901A\\u8FC7\\u8C03\\u6574\\u5176\\u5927\\u5C0F\\u6216\\u5176\\u4ED6\\u529F\\u80FD\\u6765\\u54CD\\u5E94\\uFF0C\\u5177\\u4F53\\u53D6\\u51B3\\u4E8E\\u8BBE\\u5907\\u7684\\u5C4F\\u5E55\\u5C3A\\u5BF8\\uFF0C\\u901A\\u5E38\\u662F\\u89C6\\u53E3\\u5BBD\\u5EA6\\uFF0C\\u4F8B\\u5982\\u901A\\u8FC7 CSS \\u5A92\\u4F53\\u67E5\\u8BE2\\uFF0C\\u4F8B\\u5982\\uFF0C\\u5728\\u8F83\\u5C0F\\u7684\\u8BBE\\u5907\\u4E0A\\u51CF\\u5C0F\\u5B57\\u4F53\\u5927\\u5C0F\\u3002\"}),`\n`,(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:\"language-css\",children:`@media (min-width: 768px) {\n .my-class {\n font-size: 24px;\n }\n}\n\n@media (max-width: 767px) {\n .my-class {\n font-size: 12px;\n }\n}\n`})}),`\n`,(0,s.jsx)(n.p,{children:\"\\u79FB\\u52A8\\u4F18\\u5148\\u7B56\\u7565\\u4E5F\\u5177\\u6709\\u54CD\\u5E94\\u6027\\uFF0C\\u4F46\\u662F\\u5B83\\u540C\\u610F\\u6211\\u4EEC\\u5E94\\u8BE5\\u4E3A\\u79FB\\u52A8\\u8BBE\\u5907\\u8BBE\\u7F6E\\u9ED8\\u8BA4\\u503C\\u5E76\\u5B9A\\u4E49\\u6240\\u6709\\u6837\\u5F0F\\uFF0C\\u5E76\\u4E14\\u7A0D\\u540E\\u4EC5\\u4E3A\\u5176\\u4ED6\\u8BBE\\u5907\\u6DFB\\u52A0\\u7279\\u5B9A\\u7684\\u54CD\\u5E94\\u5F0F\\u89C4\\u5219\\u3002 \\u9075\\u5FAA\\u524D\\u9762\\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:\"language-css\",children:`.my-class {\n font-size: 12px;\n}\n\n@media (min-width: 768px) {\n .my-class {\n font-size: 24px;\n }\n}\n`})}),`\n`,(0,s.jsx)(n.p,{children:\"\\u79FB\\u52A8\\u4F18\\u5148\\u7B56\\u7565\\u5177\\u6709\\u4EE5\\u4E0B\\u4E3B\\u8981\\u4F18\\u70B9\\uFF1A\"}),`\n`,(0,s.jsxs)(n.ul,{children:[`\n`,(0,s.jsx)(n.li,{children:\"\\u5B83\\u5728\\u79FB\\u52A8\\u8BBE\\u5907\\u4E0A\\u5177\\u6709\\u66F4\\u9AD8\\u7684\\u6027\\u80FD\\uFF0C\\u56E0\\u4E3A\\u5E94\\u7528\\u4E8E\\u5B83\\u4EEC\\u7684\\u89C4\\u5219\\u4E0D\\u5FC5\\u9488\\u5BF9\\u4EFB\\u4F55\\u5A92\\u4F53\\u67E5\\u8BE2\\u8FDB\\u884C\\u9A8C\\u8BC1\\u3002\"}),`\n`,(0,s.jsx)(n.li,{children:\"\\u79FB\\u52A8\\u4F18\\u5148\\u8BBE\\u8BA1\\u66F4\\u6709\\u53EF\\u80FD\\u5728\\u66F4\\u5927\\u7684\\u8BBE\\u5907\\u4E0A\\u4F7F\\u7528\\uFF08\\u53EA\\u4F1A\\u663E\\u5F97\\u66F4\\u62C9\\u4F38\\uFF0C\\u4F46\\u4ECD\\u7136\\u53EF\\u7528\\uFF09\\u3002 \\u4F46\\u662F\\uFF0C\\u53CD\\u4E4B\\u5219\\u4E0D\\u7136\\u3002\"}),`\n`]})]})}function w(e={}){let{wrapper:n}=e.components||{};return n?(0,s.jsx)(n,Object.assign({},e,{children:(0,s.jsx)(d,e)})):d(e)}var z=w;return _(C);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var _=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),g=(e,n)=>{for(var s in n)i(e,s,{get:n[s],enumerable:!0})},l=(e,n,s,r)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of h(n))!f.call(e,c)&&c!==s&&i(e,c,{get:()=>n[c],enumerable:!(r=x(n,c))||r.enumerable});return e};var j=(e,n,s)=>(s=e!=null?p(u(e)):{},l(n||!e||!e.__esModule?i(s,\"default\",{value:e,enumerable:!0}):s,e)),y=e=>l(i({},\"__esModule\",{value:!0}),e);var o=_((M,a)=>{a.exports=_jsx_runtime});var z={};g(z,{default:()=>m,frontmatter:()=>w});var t=j(o()),w={title:\"\\u4F60\\u80FD\\u89E3\\u91CA\\u4E00\\u4E0B\\u7F16\\u5199\\u54CD\\u5E94\\u5F0F\\u7F51\\u7AD9\\u4E0E\\u4F7F\\u7528\\u79FB\\u52A8\\u4F18\\u5148\\u7B56\\u7565\\u7684\\u533A\\u522B\\u5417\\uFF1F\"};function d(e){let n={code:\"code\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:\"\\u8FD9\\u4E24\\u79CD\\u65B9\\u6CD5\\u5E76\\u975E\\u76F8\\u4E92\\u6392\\u65A5\\u3002\\u4F7F\\u7F51\\u7AD9\\u5177\\u6709\\u54CD\\u5E94\\u6027\\u610F\\u5473\\u7740\\u67D0\\u4E9B\\u5143\\u7D20\\u5C06\\u901A\\u8FC7\\u8C03\\u6574\\u5176\\u5927\\u5C0F\\u6216\\u5176\\u4ED6\\u529F\\u80FD\\u6765\\u54CD\\u5E94\\uFF0C\\u5177\\u4F53\\u53D6\\u51B3\\u4E8E\\u8BBE\\u5907\\u7684\\u5C4F\\u5E55\\u5C3A\\u5BF8\\uFF0C\\u901A\\u5E38\\u662F\\u89C6\\u53E3\\u5BBD\\u5EA6\\uFF0C\\u4F8B\\u5982\\u901A\\u8FC7 CSS \\u5A92\\u4F53\\u67E5\\u8BE2\\uFF0C\\u4F8B\\u5982\\uFF0C\\u5728\\u8F83\\u5C0F\\u7684\\u8BBE\\u5907\\u4E0A\\u51CF\\u5C0F\\u5B57\\u4F53\\u5927\\u5C0F\\u3002\"}),`\n`,(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:\"language-css\",children:`@media (min-width: 768px) {\n .my-class {\n font-size: 24px;\n }\n}\n\n@media (max-width: 767px) {\n .my-class {\n font-size: 12px;\n }\n}\n`})}),`\n`,(0,t.jsx)(n.p,{children:\"\\u79FB\\u52A8\\u4F18\\u5148\\u7B56\\u7565\\u4E5F\\u5177\\u6709\\u54CD\\u5E94\\u6027\\uFF0C\\u4F46\\u662F\\u5B83\\u540C\\u610F\\u6211\\u4EEC\\u5E94\\u8BE5\\u4E3A\\u79FB\\u52A8\\u8BBE\\u5907\\u8BBE\\u7F6E\\u9ED8\\u8BA4\\u503C\\u5E76\\u5B9A\\u4E49\\u6240\\u6709\\u6837\\u5F0F\\uFF0C\\u5E76\\u4E14\\u7A0D\\u540E\\u4EC5\\u4E3A\\u5176\\u4ED6\\u8BBE\\u5907\\u6DFB\\u52A0\\u7279\\u5B9A\\u7684\\u54CD\\u5E94\\u5F0F\\u89C4\\u5219\\u3002 \\u9075\\u5FAA\\u524D\\u9762\\u7684\\u793A\\u4F8B\\uFF1A\"}),`\n`,(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:\"language-css\",children:`.my-class {\n font-size: 12px;\n}\n\n@media (min-width: 768px) {\n .my-class {\n font-size: 24px;\n }\n}\n`})}),`\n`,(0,t.jsx)(n.p,{children:\"\\u79FB\\u52A8\\u4F18\\u5148\\u7B56\\u7565\\u5177\\u6709\\u4EE5\\u4E0B\\u4E3B\\u8981\\u4F18\\u70B9\\uFF1A\"}),`\n`,(0,t.jsxs)(n.ul,{children:[`\n`,(0,t.jsx)(n.li,{children:\"\\u5B83\\u5728\\u79FB\\u52A8\\u8BBE\\u5907\\u4E0A\\u5177\\u6709\\u66F4\\u9AD8\\u7684\\u6027\\u80FD\\uFF0C\\u56E0\\u4E3A\\u5E94\\u7528\\u4E8E\\u5B83\\u4EEC\\u7684\\u89C4\\u5219\\u4E0D\\u5FC5\\u9488\\u5BF9\\u4EFB\\u4F55\\u5A92\\u4F53\\u67E5\\u8BE2\\u8FDB\\u884C\\u9A8C\\u8BC1\\u3002\"}),`\n`,(0,t.jsx)(n.li,{children:\"\\u79FB\\u52A8\\u4F18\\u5148\\u8BBE\\u8BA1\\u66F4\\u6709\\u53EF\\u80FD\\u5728\\u66F4\\u5927\\u7684\\u8BBE\\u5907\\u4E0A\\u4F7F\\u7528\\uFF08\\u53EA\\u4F1A\\u663E\\u5F97\\u66F4\\u62C9\\u4F38\\uFF0C\\u4F46\\u4ECD\\u7136\\u53EF\\u7528\\uFF09\\u3002 \\u4F46\\u662F\\uFF0C\\u53CD\\u4E4B\\u5219\\u4E0D\\u7136\\u3002\"}),`\n`]})]})}function m(e={}){let{wrapper:n}=e.components||{};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}return y(z);})();\n;return Component;"
|
||||
}
|
||||
|
|
@ -27,5 +27,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/en-US.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var c in e)i(n,c,{get:e[c],enumerable:!0})},l=(n,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of m(e))!f.call(n,t)&&t!==c&&i(n,t,{get:()=>e[t],enumerable:!(o=h(e,t))||o.enumerable});return n};var j=(n,e,c)=>(c=n!=null?p(u(n)):{},l(e||!n||!n.__esModule?i(c,\"default\",{value:n,enumerable:!0}):c,n)),y=n=>l(i({},\"__esModule\",{value:!0}),n);var s=x((D,d)=>{d.exports=_jsx_runtime});var M={};g(M,{default:()=>C,frontmatter:()=>_});var r=j(s()),_={title:\"Can you give an example of an `@media` property other than `screen`?\"};function a(n){let e=Object.assign({p:\"p\",code:\"code\",ul:\"ul\",li:\"li\",pre:\"pre\"},n.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.p,{children:[\"There are four types of \",(0,r.jsx)(e.code,{children:\"@media\"}),\" properties (including \",(0,r.jsx)(e.code,{children:\"screen\"}),\"):\"]}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"all\"}),\": for all media type devices\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"print\"}),\": for printers\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"speech\"}),': for screen readers that \"reads\" the page out loud']}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"screen\"}),\": for computer screens, tablets, smart-phones etc.\"]}),`\n`]}),`\n`,(0,r.jsxs)(e.p,{children:[\"Here is an example of \",(0,r.jsx)(e.code,{children:\"print\"}),\" media type's usage:\"]}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-css\",children:`@media print {\n body {\n color: black;\n }\n}\n`})})]})}function b(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,Object.assign({},n,{children:(0,r.jsx)(a,n)})):a(n)}var C=b;return y(M);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),y=(n,e)=>{for(var c in e)o(n,c,{get:e[c],enumerable:!0})},l=(n,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of u(e))!x.call(n,t)&&t!==c&&o(n,t,{get:()=>e[t],enumerable:!(i=m(e,t))||i.enumerable});return n};var _=(n,e,c)=>(c=n!=null?h(f(n)):{},l(e||!n||!n.__esModule?o(c,\"default\",{value:n,enumerable:!0}):c,n)),j=n=>l(o({},\"__esModule\",{value:!0}),n);var a=g((v,d)=>{d.exports=_jsx_runtime});var C={};y(C,{default:()=>p,frontmatter:()=>b});var r=_(a()),b={title:\"Can you give an example of an `@media` property other than `screen`?\"};function s(n){let e={code:\"code\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.p,{children:[\"There are four types of \",(0,r.jsx)(e.code,{children:\"@media\"}),\" properties (including \",(0,r.jsx)(e.code,{children:\"screen\"}),\"):\"]}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"all\"}),\": for all media type devices\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"print\"}),\": for printers\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"speech\"}),': for screen readers that \"reads\" the page out loud']}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"screen\"}),\": for computer screens, tablets, smart-phones etc.\"]}),`\n`]}),`\n`,(0,r.jsxs)(e.p,{children:[\"Here is an example of \",(0,r.jsx)(e.code,{children:\"print\"}),\" media type's usage:\"]}),`\n`,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:\"language-css\",children:`@media print {\n body {\n color: black;\n }\n}\n`})})]})}function p(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(s,{...n})}):s(n)}return j(C);})();\n;return Component;"
|
||||
}
|
||||
|
|
@ -27,5 +27,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/pt-BR.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),j=(n,e)=>{for(var r in e)o(n,r,{get:e[r],enumerable:!0})},c=(n,e,r,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of h(e))!x.call(n,i)&&i!==r&&o(n,i,{get:()=>e[i],enumerable:!(t=m(e,i))||t.enumerable});return n};var _=(n,e,r)=>(r=n!=null?p(u(n)):{},c(e||!n||!n.__esModule?o(r,\"default\",{value:n,enumerable:!0}):r,n)),f=n=>c(o({},\"__esModule\",{value:!0}),n);var l=g((C,a)=>{a.exports=_jsx_runtime});var v={};j(v,{default:()=>M,frontmatter:()=>b});var d=_(l()),b={title:\"Voc\\xEA pode dar um exemplo de uma propriedade `@media` diferente de `tela`?\"};function s(n){let e=Object.assign({p:\"p\",code:\"code\",ul:\"ul\",li:\"li\",pre:\"pre\"},n.components);return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)(e.p,{children:[\"Existem quatro tipos de propriedades \",(0,d.jsx)(e.code,{children:\"@media\"}),\" (incluindo \",(0,d.jsx)(e.code,{children:\"screen\"}),\"):\"]}),`\n`,(0,d.jsxs)(e.ul,{children:[`\n`,(0,d.jsxs)(e.li,{children:[(0,d.jsx)(e.code,{children:\"all\"}),\": para todos os dispositivos de tipo de m\\xEDdia\"]}),`\n`,(0,d.jsxs)(e.li,{children:[(0,d.jsx)(e.code,{children:\"print\"}),\": para impressoras\"]}),`\n`,(0,d.jsxs)(e.li,{children:[(0,d.jsx)(e.code,{children:\"speech\"}),': para leitores de tela que \"l\\xEAem\" a p\\xE1gina em voz alta']}),`\n`,(0,d.jsxs)(e.li,{children:[(0,d.jsx)(e.code,{children:\"screen\"}),\": para telas de computadores, tablets, smartphones, etc.\"]}),`\n`]}),`\n`,(0,d.jsxs)(e.p,{children:[\"Aqui est\\xE1 um exemplo de uso do tipo de m\\xEDdia \",(0,d.jsx)(e.code,{children:\"print\"}),\":\"]}),`\n`,(0,d.jsx)(e.pre,{children:(0,d.jsx)(e.code,{className:\"language-css\",children:`@media print {\n body {\n color: black;\n }\n}\n`})})]})}function q(n={}){let{wrapper:e}=n.components||{};return e?(0,d.jsx)(e,Object.assign({},n,{children:(0,d.jsx)(s,n)})):s(n)}var M=q;return f(v);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var r in e)i(n,r,{get:e[r],enumerable:!0})},c=(n,e,r,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!_.call(n,o)&&o!==r&&i(n,o,{get:()=>e[o],enumerable:!(t=h(e,o))||t.enumerable});return n};var j=(n,e,r)=>(r=n!=null?m(x(n)):{},c(e||!n||!n.__esModule?i(r,\"default\",{value:n,enumerable:!0}):r,n)),b=n=>c(i({},\"__esModule\",{value:!0}),n);var l=f((y,a)=>{a.exports=_jsx_runtime});var M={};g(M,{default:()=>p,frontmatter:()=>q});var d=j(l()),q={title:\"Voc\\xEA pode dar um exemplo de uma propriedade `@media` diferente de `tela`?\"};function s(n){let e={code:\"code\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)(e.p,{children:[\"Existem quatro tipos de propriedades \",(0,d.jsx)(e.code,{children:\"@media\"}),\" (incluindo \",(0,d.jsx)(e.code,{children:\"screen\"}),\"):\"]}),`\n`,(0,d.jsxs)(e.ul,{children:[`\n`,(0,d.jsxs)(e.li,{children:[(0,d.jsx)(e.code,{children:\"all\"}),\": para todos os dispositivos de tipo de m\\xEDdia\"]}),`\n`,(0,d.jsxs)(e.li,{children:[(0,d.jsx)(e.code,{children:\"print\"}),\": para impressoras\"]}),`\n`,(0,d.jsxs)(e.li,{children:[(0,d.jsx)(e.code,{children:\"speech\"}),': para leitores de tela que \"l\\xEAem\" a p\\xE1gina em voz alta']}),`\n`,(0,d.jsxs)(e.li,{children:[(0,d.jsx)(e.code,{children:\"screen\"}),\": para telas de computadores, tablets, smartphones, etc.\"]}),`\n`]}),`\n`,(0,d.jsxs)(e.p,{children:[\"Aqui est\\xE1 um exemplo de uso do tipo de m\\xEDdia \",(0,d.jsx)(e.code,{children:\"print\"}),\":\"]}),`\n`,(0,d.jsx)(e.pre,{children:(0,d.jsx)(e.code,{className:\"language-css\",children:`@media print {\n body {\n color: black;\n }\n}\n`})})]})}function p(n={}){let{wrapper:e}=n.components||{};return e?(0,d.jsx)(e,{...n,children:(0,d.jsx)(s,{...n})}):s(n)}return b(M);})();\n;return Component;"
|
||||
}
|
||||
|
|
@ -27,5 +27,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/zh-CN.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var j=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),_=(n,e)=>{for(var r in e)l(n,r,{get:e[r],enumerable:!0})},t=(n,e,r,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of m(e))!x.call(n,i)&&i!==r&&l(n,i,{get:()=>e[i],enumerable:!(d=p(e,i))||d.enumerable});return n};var g=(n,e,r)=>(r=n!=null?h(u(n)):{},t(e||!n||!n.__esModule?l(r,\"default\",{value:n,enumerable:!0}):r,n)),f=n=>t(l({},\"__esModule\",{value:!0}),n);var s=j((F,o)=>{o.exports=_jsx_runtime});var C={};_(C,{default:()=>y,frontmatter:()=>b});var c=g(s()),b={title:\"\\u4F60\\u80FD\\u4E3E\\u4E00\\u4E2A\\u9664\\u4E86`screen`\\u4E4B\\u5916\\u7684`@media`\\u5C5E\\u6027\\u7684\\u4F8B\\u5B50\\u5417\\uFF1F\"};function a(n){let e=Object.assign({p:\"p\",code:\"code\",ul:\"ul\",li:\"li\",pre:\"pre\"},n.components);return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(e.p,{children:[\"\\u6709\\u56DB\\u79CD\\u7C7B\\u578B\\u7684\",(0,c.jsx)(e.code,{children:\"@media\"}),\"\\u5C5E\\u6027\\uFF08\\u5305\\u62EC\",(0,c.jsx)(e.code,{children:\"screen\"}),\"\\uFF09\\uFF1A\"]}),`\n`,(0,c.jsxs)(e.ul,{children:[`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"all\"}),\"\\uFF1A\\u9002\\u7528\\u4E8E\\u6240\\u6709\\u5A92\\u4F53\\u7C7B\\u578B\\u8BBE\\u5907\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"print\"}),\"\\uFF1A\\u9002\\u7528\\u4E8E\\u6253\\u5370\\u673A\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"speech\"}),\"\\uFF1A\\u9002\\u7528\\u4E8E\\u201C\\u6717\\u8BFB\\u201D\\u9875\\u9762\\u7684\\u5C4F\\u5E55\\u9605\\u8BFB\\u5668\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"screen\"}),\"\\uFF1A\\u9002\\u7528\\u4E8E\\u7535\\u8111\\u5C4F\\u5E55\\u3001\\u5E73\\u677F\\u7535\\u8111\\u3001\\u667A\\u80FD\\u624B\\u673A\\u7B49\\u3002\"]}),`\n`]}),`\n`,(0,c.jsxs)(e.p,{children:[\"\\u4EE5\\u4E0B\\u662F\",(0,c.jsx)(e.code,{children:\"print\"}),\"\\u5A92\\u4F53\\u7C7B\\u578B\\u7528\\u6CD5\\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,c.jsx)(e.pre,{children:(0,c.jsx)(e.code,{className:\"language-css\",children:`@media print {\n body {\n color: black;\n }\n}\n`})})]})}function M(n={}){let{wrapper:e}=n.components||{};return e?(0,c.jsx)(e,Object.assign({},n,{children:(0,c.jsx)(a,n)})):a(n)}var y=M;return f(C);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),j=(n,e)=>{for(var r in e)l(n,r,{get:e[r],enumerable:!0})},t=(n,e,r,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!_.call(n,i)&&i!==r&&l(n,i,{get:()=>e[i],enumerable:!(d=m(e,i))||d.enumerable});return n};var g=(n,e,r)=>(r=n!=null?p(x(n)):{},t(e||!n||!n.__esModule?l(r,\"default\",{value:n,enumerable:!0}):r,n)),M=n=>t(l({},\"__esModule\",{value:!0}),n);var s=f((D,o)=>{o.exports=_jsx_runtime});var y={};j(y,{default:()=>h,frontmatter:()=>b});var c=g(s()),b={title:\"\\u4F60\\u80FD\\u4E3E\\u4E00\\u4E2A\\u9664\\u4E86`screen`\\u4E4B\\u5916\\u7684`@media`\\u5C5E\\u6027\\u7684\\u4F8B\\u5B50\\u5417\\uFF1F\"};function a(n){let e={code:\"code\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(e.p,{children:[\"\\u6709\\u56DB\\u79CD\\u7C7B\\u578B\\u7684\",(0,c.jsx)(e.code,{children:\"@media\"}),\"\\u5C5E\\u6027\\uFF08\\u5305\\u62EC\",(0,c.jsx)(e.code,{children:\"screen\"}),\"\\uFF09\\uFF1A\"]}),`\n`,(0,c.jsxs)(e.ul,{children:[`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"all\"}),\"\\uFF1A\\u9002\\u7528\\u4E8E\\u6240\\u6709\\u5A92\\u4F53\\u7C7B\\u578B\\u8BBE\\u5907\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"print\"}),\"\\uFF1A\\u9002\\u7528\\u4E8E\\u6253\\u5370\\u673A\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"speech\"}),\"\\uFF1A\\u9002\\u7528\\u4E8E\\u201C\\u6717\\u8BFB\\u201D\\u9875\\u9762\\u7684\\u5C4F\\u5E55\\u9605\\u8BFB\\u5668\"]}),`\n`,(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.code,{children:\"screen\"}),\"\\uFF1A\\u9002\\u7528\\u4E8E\\u7535\\u8111\\u5C4F\\u5E55\\u3001\\u5E73\\u677F\\u7535\\u8111\\u3001\\u667A\\u80FD\\u624B\\u673A\\u7B49\\u3002\"]}),`\n`]}),`\n`,(0,c.jsxs)(e.p,{children:[\"\\u4EE5\\u4E0B\\u662F\",(0,c.jsx)(e.code,{children:\"print\"}),\"\\u5A92\\u4F53\\u7C7B\\u578B\\u7528\\u6CD5\\u7684\\u793A\\u4F8B\\uFF1A\"]}),`\n`,(0,c.jsx)(e.pre,{children:(0,c.jsx)(e.code,{className:\"language-css\",children:`@media print {\n body {\n color: black;\n }\n}\n`})})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,c.jsx)(e,{...n,children:(0,c.jsx)(a,{...n})}):a(n)}return M(y);})();\n;return Component;"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -27,5 +27,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/en-US.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var m=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),u=(o,e)=>{for(var i in e)l(o,i,{get:e[i],enumerable:!0})},a=(o,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of f(e))!p.call(o,t)&&t!==i&&l(o,t,{get:()=>e[t],enumerable:!(c=g(e,t))||c.enumerable});return o};var x=(o,e,i)=>(i=o!=null?h(b(o)):{},a(e||!o||!o.__esModule?l(i,\"default\",{value:o,enumerable:!0}):i,o)),w=o=>a(l({},\"__esModule\",{value:!0}),o);var d=m((B,r)=>{r.exports=_jsx_runtime});var k={};u(k,{default:()=>C,frontmatter:()=>_});var n=x(d()),_={title:\"Describe Block Formatting Context (BFC) and how it works.\"};function s(o){let e=Object.assign({p:\"p\",code:\"code\",a:\"a\",ul:\"ul\",li:\"li\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"A Block Formatting Context (BFC) is part of the visual CSS rendering of a web page in which block boxes are laid out. Floats, absolutely positioned elements, \",(0,n.jsx)(e.code,{children:\"inline-blocks\"}),\", \",(0,n.jsx)(e.code,{children:\"table-cells\"}),\", \",(0,n.jsx)(e.code,{children:\"table-caption\"}),\"s, and elements with \",(0,n.jsx)(e.code,{children:\"overflow\"}),\" other than \",(0,n.jsx)(e.code,{children:\"visible\"}),\" (except when that value has been propagated to the viewport) establish new block formatting contexts.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Knowing how to establish a block formatting context is important, because without doing so, the containing box will not \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height\",children:\"contain floated children\"}),\". This is similar to collapsing margins, but more insidious as you will find entire boxes collapsing in odd ways.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"A BFC is an HTML box that satisfies at least one of the following conditions:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The value of \",(0,n.jsx)(e.code,{children:\"float\"}),\" is not \",(0,n.jsx)(e.code,{children:\"none\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The value of \",(0,n.jsx)(e.code,{children:\"position\"}),\" is neither \",(0,n.jsx)(e.code,{children:\"static\"}),\" nor \",(0,n.jsx)(e.code,{children:\"relative\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The value of \",(0,n.jsx)(e.code,{children:\"display\"}),\" is \",(0,n.jsx)(e.code,{children:\"table-cell\"}),\", \",(0,n.jsx)(e.code,{children:\"table-caption\"}),\", \",(0,n.jsx)(e.code,{children:\"inline-block\"}),\", \",(0,n.jsx)(e.code,{children:\"flex\"}),\", or \",(0,n.jsx)(e.code,{children:\"inline-flex\"}),\", \",(0,n.jsx)(e.code,{children:\"grid\"}),\", or \",(0,n.jsx)(e.code,{children:\"inline-grid\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The value of \",(0,n.jsx)(e.code,{children:\"overflow\"}),\" is not \",(0,n.jsx)(e.code,{children:\"visible\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"In a BFC, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Vertical margins between adjacent block-level boxes within the same BFC can collapse, but a BFC prevents margin collapsing with elements outside of it. Read more on \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\",children:\"collapsing margins\"}),\".\"]})]})}function v(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(s,o)})):s(o)}var C=v;return w(k);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var g=Object.create;var l=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var u=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var i in e)l(o,i,{get:e[i],enumerable:!0})},r=(o,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of p(e))!m.call(o,t)&&t!==i&&l(o,t,{get:()=>e[t],enumerable:!(c=f(e,t))||c.enumerable});return o};var w=(o,e,i)=>(i=o!=null?g(b(o)):{},r(e||!o||!o.__esModule?l(i,\"default\",{value:o,enumerable:!0}):i,o)),_=o=>r(l({},\"__esModule\",{value:!0}),o);var d=u((F,a)=>{a.exports=_jsx_runtime});var C={};x(C,{default:()=>h,frontmatter:()=>v});var n=w(d()),v={title:\"Describe Block Formatting Context (BFC) and how it works.\"};function s(o){let e={a:\"a\",code:\"code\",li:\"li\",p:\"p\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"A Block Formatting Context (BFC) is part of the visual CSS rendering of a web page in which block boxes are laid out. Floats, absolutely positioned elements, \",(0,n.jsx)(e.code,{children:\"inline-blocks\"}),\", \",(0,n.jsx)(e.code,{children:\"table-cells\"}),\", \",(0,n.jsx)(e.code,{children:\"table-caption\"}),\"s, and elements with \",(0,n.jsx)(e.code,{children:\"overflow\"}),\" other than \",(0,n.jsx)(e.code,{children:\"visible\"}),\" (except when that value has been propagated to the viewport) establish new block formatting contexts.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Knowing how to establish a block formatting context is important, because without doing so, the containing box will not \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height\",children:\"contain floated children\"}),\". This is similar to collapsing margins, but more insidious as you will find entire boxes collapsing in odd ways.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"A BFC is an HTML box that satisfies at least one of the following conditions:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"The value of \",(0,n.jsx)(e.code,{children:\"float\"}),\" is not \",(0,n.jsx)(e.code,{children:\"none\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The value of \",(0,n.jsx)(e.code,{children:\"position\"}),\" is neither \",(0,n.jsx)(e.code,{children:\"static\"}),\" nor \",(0,n.jsx)(e.code,{children:\"relative\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The value of \",(0,n.jsx)(e.code,{children:\"display\"}),\" is \",(0,n.jsx)(e.code,{children:\"table-cell\"}),\", \",(0,n.jsx)(e.code,{children:\"table-caption\"}),\", \",(0,n.jsx)(e.code,{children:\"inline-block\"}),\", \",(0,n.jsx)(e.code,{children:\"flex\"}),\", or \",(0,n.jsx)(e.code,{children:\"inline-flex\"}),\", \",(0,n.jsx)(e.code,{children:\"grid\"}),\", or \",(0,n.jsx)(e.code,{children:\"inline-grid\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"The value of \",(0,n.jsx)(e.code,{children:\"overflow\"}),\" is not \",(0,n.jsx)(e.code,{children:\"visible\"}),\".\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"In a BFC, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Vertical margins between adjacent block-level boxes within the same BFC can collapse, but a BFC prevents margin collapsing with elements outside of it. Read more on \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\",children:\"collapsing margins\"}),\".\"]})]})}function h(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(s,{...o})}):s(o)}return _(C);})();\n;return Component;"
|
||||
}
|
||||
|
|
@ -27,5 +27,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/pt-BR.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var m=Object.create;var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),x=(n,e)=>{for(var a in e)d(n,a,{get:e[a],enumerable:!0})},r=(n,e,a,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!b.call(n,c)&&c!==a&&d(n,c,{get:()=>e[c],enumerable:!(i=h(e,c))||i.enumerable});return n};var g=(n,e,a)=>(a=n!=null?m(u(n)):{},r(e||!n||!n.__esModule?d(a,\"default\",{value:n,enumerable:!0}):a,n)),_=n=>r(d({},\"__esModule\",{value:!0}),n);var t=f((F,l)=>{l.exports=_jsx_runtime});var j={};x(j,{default:()=>S,frontmatter:()=>v});var o=g(t()),v={title:\"Descrever o contexto de formata\\xE7\\xE3o de bloco (BFC) e como ele funciona.\"};function s(n){let e=Object.assign({p:\"p\",code:\"code\",a:\"a\",ul:\"ul\",li:\"li\"},n.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Um Contexto de Formata\\xE7\\xE3o de Bloco (BFC) \\xE9 parte da renderiza\\xE7\\xE3o visual do CSS em uma p\\xE1gina da web, no qual os blocos s\\xE3o organizados. Elementos flutuantes, posicionados absolutamente, \",(0,o.jsx)(e.code,{children:\"inline-blocks\"}),\", \",(0,o.jsx)(e.code,{children:\"table-cells\"}),\", \",(0,o.jsx)(e.code,{children:\"table-captions\"}),\" e elementos com \",(0,o.jsx)(e.code,{children:\"overflow\"}),\" diferente de \",(0,o.jsx)(e.code,{children:\"visible\"}),\" (exceto quando esse valor foi propagado para a \\xE1rea vis\\xEDvel) estabelecem novos contextos de formata\\xE7\\xE3o de bloco.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Saber estabelecer um contexto de formata\\xE7\\xE3o de blocos \\xE9 importante, porque sem fazer isso, a caixa de conten\\xE7\\xE3o n\\xE3o \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height\",children:\"conter\\xE1 filhos floated\"}),\". Isso \\xE9 semelhante ao colapso das margens, mas mais insidioso, pois voc\\xEA encontrar\\xE1 caixas inteiras colapsando de maneiras estranhas.\"]}),`\n`,(0,o.jsx)(e.p,{children:\"Um BFC \\xE9 uma caixa HTML que atende pelo menos uma das seguintes condi\\xE7\\xF5es:\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[\"O valor de \",(0,o.jsx)(e.code,{children:\"float\"}),\" n\\xE3o \\xE9 \",(0,o.jsx)(e.code,{children:\"none\"}),\".\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"O valor de \",(0,o.jsx)(e.code,{children:\"posi\\xE7\\xE3o\"}),\" n\\xE3o \\xE9 \",(0,o.jsx)(e.code,{children:\"static\"}),\" nem \",(0,o.jsx)(e.code,{children:\"relative\"}),\".\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"O valor de \",(0,o.jsx)(e.code,{children:\"display\"}),\" \\xE9 \",(0,o.jsx)(e.code,{children:\"table-cell\"}),\", \",(0,o.jsx)(e.code,{children:\"table-caption\"}),\", \",(0,o.jsx)(e.code,{children:\"inline-block\"}),\", \",(0,o.jsx)(e.code,{children:\"flex\"}),\", or \",(0,o.jsx)(e.code,{children:\"inline-flex\"}),\", \",(0,o.jsx)(e.code,{children:\"grid\"}),\", or \",(0,o.jsx)(e.code,{children:\"inline-grid\"}),\".\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"O valor de \",(0,o.jsx)(e.code,{children:\"float\"}),\" n\\xE3o \\xE9 \",(0,o.jsx)(e.code,{children:\"none\"}),\".\"]}),`\n`]}),`\n`,(0,o.jsx)(e.p,{children:\"Em um BFC, a borda externa esquerda de cada caixa toca a borda esquerda do bloco cont\\xEAiner (para formata\\xE7\\xE3o da direita para a esquerda, as bordas direitas se tocam).\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"As margens verticais entre caixas adjacentes de n\\xEDvel de bloco em um BFC colapsam. Leia mais em \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\",children:\"margens de recolhimento\"}),\".\"]})]})}function C(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(s,n)})):s(n)}var S=C;return _(j);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var h=Object.create;var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var b=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),_=(n,e)=>{for(var a in e)d(n,a,{get:e[a],enumerable:!0})},i=(n,e,a,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of u(e))!x.call(n,c)&&c!==a&&d(n,c,{get:()=>e[c],enumerable:!(r=p(e,c))||r.enumerable});return n};var g=(n,e,a)=>(a=n!=null?h(f(n)):{},i(e||!n||!n.__esModule?d(a,\"default\",{value:n,enumerable:!0}):a,n)),v=n=>i(d({},\"__esModule\",{value:!0}),n);var t=b((F,l)=>{l.exports=_jsx_runtime});var S={};_(S,{default:()=>m,frontmatter:()=>C});var o=g(t()),C={title:\"Descrever o contexto de formata\\xE7\\xE3o de bloco (BFC) e como ele funciona.\"};function s(n){let e={a:\"a\",code:\"code\",li:\"li\",p:\"p\",ul:\"ul\",...n.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Um Contexto de Formata\\xE7\\xE3o de Bloco (BFC) \\xE9 parte da renderiza\\xE7\\xE3o visual do CSS em uma p\\xE1gina da web, no qual os blocos s\\xE3o organizados. Elementos flutuantes, posicionados absolutamente, \",(0,o.jsx)(e.code,{children:\"inline-blocks\"}),\", \",(0,o.jsx)(e.code,{children:\"table-cells\"}),\", \",(0,o.jsx)(e.code,{children:\"table-captions\"}),\" e elementos com \",(0,o.jsx)(e.code,{children:\"overflow\"}),\" diferente de \",(0,o.jsx)(e.code,{children:\"visible\"}),\" (exceto quando esse valor foi propagado para a \\xE1rea vis\\xEDvel) estabelecem novos contextos de formata\\xE7\\xE3o de bloco.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Saber estabelecer um contexto de formata\\xE7\\xE3o de blocos \\xE9 importante, porque sem fazer isso, a caixa de conten\\xE7\\xE3o n\\xE3o \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height\",children:\"conter\\xE1 filhos floated\"}),\". Isso \\xE9 semelhante ao colapso das margens, mas mais insidioso, pois voc\\xEA encontrar\\xE1 caixas inteiras colapsando de maneiras estranhas.\"]}),`\n`,(0,o.jsx)(e.p,{children:\"Um BFC \\xE9 uma caixa HTML que atende pelo menos uma das seguintes condi\\xE7\\xF5es:\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[\"O valor de \",(0,o.jsx)(e.code,{children:\"float\"}),\" n\\xE3o \\xE9 \",(0,o.jsx)(e.code,{children:\"none\"}),\".\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"O valor de \",(0,o.jsx)(e.code,{children:\"posi\\xE7\\xE3o\"}),\" n\\xE3o \\xE9 \",(0,o.jsx)(e.code,{children:\"static\"}),\" nem \",(0,o.jsx)(e.code,{children:\"relative\"}),\".\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"O valor de \",(0,o.jsx)(e.code,{children:\"display\"}),\" \\xE9 \",(0,o.jsx)(e.code,{children:\"table-cell\"}),\", \",(0,o.jsx)(e.code,{children:\"table-caption\"}),\", \",(0,o.jsx)(e.code,{children:\"inline-block\"}),\", \",(0,o.jsx)(e.code,{children:\"flex\"}),\", or \",(0,o.jsx)(e.code,{children:\"inline-flex\"}),\", \",(0,o.jsx)(e.code,{children:\"grid\"}),\", or \",(0,o.jsx)(e.code,{children:\"inline-grid\"}),\".\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"O valor de \",(0,o.jsx)(e.code,{children:\"float\"}),\" n\\xE3o \\xE9 \",(0,o.jsx)(e.code,{children:\"none\"}),\".\"]}),`\n`]}),`\n`,(0,o.jsx)(e.p,{children:\"Em um BFC, a borda externa esquerda de cada caixa toca a borda esquerda do bloco cont\\xEAiner (para formata\\xE7\\xE3o da direita para a esquerda, as bordas direitas se tocam).\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"As margens verticais entre caixas adjacentes de n\\xEDvel de bloco em um BFC colapsam. Leia mais em \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\",children:\"margens de recolhimento\"}),\".\"]})]})}function m(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(s,{...n})}):s(n)}return v(S);})();\n;return Component;"
|
||||
}
|
||||
|
|
@ -27,5 +27,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/zh-CN.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var s=Object.create;var d=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),C=(c,e)=>{for(var l in e)d(c,l,{get:e[l],enumerable:!0})},r=(c,e,l,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of p(e))!g.call(c,i)&&i!==l&&d(c,i,{get:()=>e[i],enumerable:!(o=_(e,i))||o.enumerable});return c};var x=(c,e,l)=>(l=c!=null?s(f(c)):{},r(e||!c||!c.__esModule?d(l,\"default\",{value:c,enumerable:!0}):l,c)),b=c=>r(d({},\"__esModule\",{value:!0}),c);var h=m((v,t)=>{t.exports=_jsx_runtime});var S={};C(S,{default:()=>F,frontmatter:()=>u});var n=x(h()),u={title:\"\\u63CF\\u8FF0\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587 (BFC) \\u53CA\\u5176\\u5DE5\\u4F5C\\u539F\\u7406\\u3002\"};function a(c){let e=Object.assign({p:\"p\",code:\"code\",a:\"a\",ul:\"ul\",li:\"li\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587 (BFC) \\u662F\\u7F51\\u9875\\u89C6\\u89C9 CSS \\u6E32\\u67D3\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u5176\\u4E2D\\u4F1A\\u5E03\\u5C40\\u5757\\u7EA7\\u76D2\\u5B50\\u3002\\u6D6E\\u52A8\\u3001\\u7EDD\\u5BF9\\u5B9A\\u4F4D\\u7684\\u5143\\u7D20\\u3001\",(0,n.jsx)(e.code,{children:\"inline-blocks\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"table-cells\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"table-caption\"}),\" \\u4EE5\\u53CA \",(0,n.jsx)(e.code,{children:\"overflow\"}),\" \\u503C\\u4E0D\\u4E3A \",(0,n.jsx)(e.code,{children:\"visible\"}),\" \\u7684\\u5143\\u7D20\\uFF08\\u9664\\u975E\\u8BE5\\u503C\\u5DF2\\u4F20\\u64AD\\u5230\\u89C6\\u53E3\\uFF09\\u4F1A\\u5EFA\\u7ACB\\u65B0\\u7684\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E86\\u89E3\\u5982\\u4F55\\u5EFA\\u7ACB\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587\\u975E\\u5E38\\u91CD\\u8981\\uFF0C\\u56E0\\u4E3A\\u5982\\u679C\\u4E0D\\u8FD9\\u6837\\u505A\\uFF0C\\u5305\\u542B\\u6846\\u5C06\\u65E0\\u6CD5\",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height\",children:\"\\u5305\\u542B\\u6D6E\\u52A8\\u5B50\\u5143\\u7D20\"}),\"\\u3002\\u8FD9\\u7C7B\\u4F3C\\u4E8E\\u6298\\u53E0\\u5916\\u8FB9\\u8DDD\\uFF0C\\u4F46\\u66F4\\u9690\\u853D\\uFF0C\\u56E0\\u4E3A\\u60A8\\u4F1A\\u53D1\\u73B0\\u6574\\u4E2A\\u76D2\\u5B50\\u4EE5\\u5947\\u602A\\u7684\\u65B9\\u5F0F\\u6298\\u53E0\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"BFC \\u662F\\u6EE1\\u8DB3\\u4EE5\\u4E0B\\u81F3\\u5C11\\u4E00\\u4E2A\\u6761\\u4EF6\\u7684 HTML \\u76D2\\u5B50\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"float\"}),\" \\u7684\\u503C\\u4E0D\\u4E3A \",(0,n.jsx)(e.code,{children:\"none\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"position\"}),\" \\u7684\\u503C\\u65E2\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"static\"}),\" \\u4E5F\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"relative\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"display\"}),\" \\u7684\\u503C\\u4E3A \",(0,n.jsx)(e.code,{children:\"table-cell\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"table-caption\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"inline-block\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"flex\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"inline-flex\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"grid\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"inline-grid\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"overflow\"}),\" \\u7684\\u503C\\u4E0D\\u4E3A \",(0,n.jsx)(e.code,{children:\"visible\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 BFC \\u4E2D\\uFF0C\\u6BCF\\u4E2A\\u76D2\\u5B50\\u7684\\u5DE6\\u5916\\u8FB9\\u7F18\\u90FD\\u4E0E\\u5305\\u542B\\u5757\\u7684\\u5DE6\\u8FB9\\u7F18\\u63A5\\u89E6\\uFF08\\u5BF9\\u4E8E\\u4ECE\\u53F3\\u5230\\u5DE6\\u7684\\u683C\\u5F0F\\uFF0C\\u53F3\\u8FB9\\u7F18\\u63A5\\u89E6\\uFF09\\u3002\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u540C\\u4E00\\u4E2A BFC \\u5185\\u7684\\u76F8\\u90BB\\u5757\\u7EA7\\u76D2\\u5B50\\u4E4B\\u95F4\\u7684\\u5782\\u76F4\\u5916\\u8FB9\\u8DDD\\u53EF\\u4EE5\\u6298\\u53E0\\uFF0C\\u4F46\\u662F BFC \\u963B\\u6B62\\u4E86\\u5B83\\u4E0E\\u5916\\u90E8\\u5143\\u7D20\\u7684\\u8FB9\\u8DDD\\u6298\\u53E0\\u3002 \\u8FDB\\u4E00\\u6B65\\u9605\\u8BFB \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\",children:\"\\u5916\\u8FB9\\u8DDD\\u6298\\u53E0\"}),\"\\u3002\"]})]})}function B(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(a,c)})):a(c)}var F=B;return b(S);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var _=Object.create;var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var x=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),g=(l,e)=>{for(var c in e)d(l,c,{get:e[c],enumerable:!0})},r=(l,e,c,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of f(e))!C.call(l,i)&&i!==c&&d(l,i,{get:()=>e[i],enumerable:!(o=p(e,i))||o.enumerable});return l};var u=(l,e,c)=>(c=l!=null?_(m(l)):{},r(e||!l||!l.__esModule?d(c,\"default\",{value:l,enumerable:!0}):c,l)),b=l=>r(d({},\"__esModule\",{value:!0}),l);var h=x((v,t)=>{t.exports=_jsx_runtime});var F={};g(F,{default:()=>s,frontmatter:()=>B});var n=u(h()),B={title:\"\\u63CF\\u8FF0\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587 (BFC) \\u53CA\\u5176\\u5DE5\\u4F5C\\u539F\\u7406\\u3002\"};function a(l){let e={a:\"a\",code:\"code\",li:\"li\",p:\"p\",ul:\"ul\",...l.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587 (BFC) \\u662F\\u7F51\\u9875\\u89C6\\u89C9 CSS \\u6E32\\u67D3\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u5176\\u4E2D\\u4F1A\\u5E03\\u5C40\\u5757\\u7EA7\\u76D2\\u5B50\\u3002\\u6D6E\\u52A8\\u3001\\u7EDD\\u5BF9\\u5B9A\\u4F4D\\u7684\\u5143\\u7D20\\u3001\",(0,n.jsx)(e.code,{children:\"inline-blocks\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"table-cells\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"table-caption\"}),\" \\u4EE5\\u53CA \",(0,n.jsx)(e.code,{children:\"overflow\"}),\" \\u503C\\u4E0D\\u4E3A \",(0,n.jsx)(e.code,{children:\"visible\"}),\" \\u7684\\u5143\\u7D20\\uFF08\\u9664\\u975E\\u8BE5\\u503C\\u5DF2\\u4F20\\u64AD\\u5230\\u89C6\\u53E3\\uFF09\\u4F1A\\u5EFA\\u7ACB\\u65B0\\u7684\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u4E86\\u89E3\\u5982\\u4F55\\u5EFA\\u7ACB\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587\\u975E\\u5E38\\u91CD\\u8981\\uFF0C\\u56E0\\u4E3A\\u5982\\u679C\\u4E0D\\u8FD9\\u6837\\u505A\\uFF0C\\u5305\\u542B\\u6846\\u5C06\\u65E0\\u6CD5\",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height\",children:\"\\u5305\\u542B\\u6D6E\\u52A8\\u5B50\\u5143\\u7D20\"}),\"\\u3002\\u8FD9\\u7C7B\\u4F3C\\u4E8E\\u6298\\u53E0\\u5916\\u8FB9\\u8DDD\\uFF0C\\u4F46\\u66F4\\u9690\\u853D\\uFF0C\\u56E0\\u4E3A\\u60A8\\u4F1A\\u53D1\\u73B0\\u6574\\u4E2A\\u76D2\\u5B50\\u4EE5\\u5947\\u602A\\u7684\\u65B9\\u5F0F\\u6298\\u53E0\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"BFC \\u662F\\u6EE1\\u8DB3\\u4EE5\\u4E0B\\u81F3\\u5C11\\u4E00\\u4E2A\\u6761\\u4EF6\\u7684 HTML \\u76D2\\u5B50\\uFF1A\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"float\"}),\" \\u7684\\u503C\\u4E0D\\u4E3A \",(0,n.jsx)(e.code,{children:\"none\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"position\"}),\" \\u7684\\u503C\\u65E2\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"static\"}),\" \\u4E5F\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"relative\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"display\"}),\" \\u7684\\u503C\\u4E3A \",(0,n.jsx)(e.code,{children:\"table-cell\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"table-caption\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"inline-block\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"flex\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"inline-flex\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\"grid\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"inline-grid\"}),\"\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"overflow\"}),\" \\u7684\\u503C\\u4E0D\\u4E3A \",(0,n.jsx)(e.code,{children:\"visible\"}),\"\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5728 BFC \\u4E2D\\uFF0C\\u6BCF\\u4E2A\\u76D2\\u5B50\\u7684\\u5DE6\\u5916\\u8FB9\\u7F18\\u90FD\\u4E0E\\u5305\\u542B\\u5757\\u7684\\u5DE6\\u8FB9\\u7F18\\u63A5\\u89E6\\uFF08\\u5BF9\\u4E8E\\u4ECE\\u53F3\\u5230\\u5DE6\\u7684\\u683C\\u5F0F\\uFF0C\\u53F3\\u8FB9\\u7F18\\u63A5\\u89E6\\uFF09\\u3002\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u540C\\u4E00\\u4E2A BFC \\u5185\\u7684\\u76F8\\u90BB\\u5757\\u7EA7\\u76D2\\u5B50\\u4E4B\\u95F4\\u7684\\u5782\\u76F4\\u5916\\u8FB9\\u8DDD\\u53EF\\u4EE5\\u6298\\u53E0\\uFF0C\\u4F46\\u662F BFC \\u963B\\u6B62\\u4E86\\u5B83\\u4E0E\\u5916\\u90E8\\u5143\\u7D20\\u7684\\u8FB9\\u8DDD\\u6298\\u53E0\\u3002 \\u8FDB\\u4E00\\u6B65\\u9605\\u8BFB \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\",children:\"\\u5916\\u8FB9\\u8DDD\\u6298\\u53E0\"}),\"\\u3002\"]})]})}function s(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(a,{...l})}):a(l)}return b(F);})();\n;return Component;"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -28,5 +28,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-event-bubbling/pt-BR.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var a in e)i(n,a,{get:e[a],enumerable:!0})},s=(n,e,a,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of u(e))!v.call(n,t)&&t!==a&&i(n,t,{get:()=>e[t],enumerable:!(d=m(e,t))||d.enumerable});return n};var b=(n,e,a)=>(a=n!=null?p(h(n)):{},s(e||!n||!n.__esModule?i(a,\"default\",{value:n,enumerable:!0}):a,n)),q=n=>s(i({},\"__esModule\",{value:!0}),n);var l=g((O,r)=>{r.exports=_jsx_runtime});var M={};f(M,{default:()=>j,frontmatter:()=>D});var o=b(l()),D={title:\"Descreva a propaga\\xE7\\xE3o de eventos\"};function c(n){let e=Object.assign({p:\"p\",h2:\"h2\",pre:\"pre\",code:\"code\",ul:\"ul\",li:\"li\",a:\"a\"},n.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.p,{children:\"A propaga\\xE7\\xE3o de eventos \\xE9 um mecanismo na DOM (Modelo de Objetos do Documento) em que um evento, como um clique ou um evento de teclado, \\xE9 primeiro acionado no elemento de destino que iniciou o evento e, em seguida, se propaga para cima (bolhas) pela \\xE1rvore da DOM at\\xE9 a raiz do documento.\"}),`\n`,(0,o.jsx)(e.h2,{children:\"Fase de bolha\"}),`\n`,(0,o.jsx)(e.p,{children:\"Durante a fase de bolha, o evento come\\xE7a no elemento de destino e se propaga pelos seus ancestrais na hierarquia da DOM. Isso significa que os manipuladores de eventos associados ao elemento de destino e aos seus ancestrais podem potencialmente receber e responder ao evento.\"}),`\n`,(0,o.jsx)(e.p,{children:\"Aqui est\\xE1 um exemplo usando a sintaxe moderna do ES6 para demonstrar a propaga\\xE7\\xE3o de eventos:\"}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"pai\">\n// <button id=\"filho\">Clique em mim!</button>\n// </div>\n\nconst pai = document.getElementById('pai');\nconst filho = document.getElementById('filho');\n\npai.addEventListener('click', () => {\n console.log('Cliquei no elemento pai');\n});\n\nfilho.addEventListener('click', () => {\n console.log('Cliquei no elemento filho');\n});\n`})}),`\n`,(0,o.jsx)(e.p,{children:'Quando voc\\xEA clica no bot\\xE3o \"Clique em mim!\", devido \\xE0 propaga\\xE7\\xE3o de eventos, os manipuladores de eventos do filho e do pai ser\\xE3o acionados.'}),`\n`,(0,o.jsx)(e.h2,{children:\"Parando a propaga\\xE7\\xE3o\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"A propaga\\xE7\\xE3o de eventos pode ser interrompida durante a fase de bolha usando o m\\xE9todo \",(0,o.jsx)(e.code,{children:\"stopPropagation()\"}),\". Se um manipulador de eventos chamar \",(0,o.jsx)(e.code,{children:\"stopPropagation()\"}),\", ele impedir\\xE1 que o evento continue a se propagar pela \\xE1rvore da DOM, garantindo que apenas os manipuladores dos elementos at\\xE9 aquele ponto na hierarquia sejam executados.\"]}),`\n`,(0,o.jsx)(e.h2,{children:\"Delega\\xE7\\xE3o de eventos\"}),`\n`,(0,o.jsx)(e.p,{children:'A propaga\\xE7\\xE3o de eventos \\xE9 a base para uma t\\xE9cnica chamada \"delega\\xE7\\xE3o de eventos\", onde voc\\xEA anexa um \\xFAnico manipulador de eventos a um ancestral comum de v\\xE1rios elementos e usa a delega\\xE7\\xE3o de eventos para lidar eficientemente com os eventos desses elementos. Isso \\xE9 particularmente \\xFAtil quando voc\\xEA tem um grande n\\xFAmero de elementos semelhantes, como uma lista de itens, e deseja evitar a adi\\xE7\\xE3o de manipuladores de eventos individuais a cada item.'}),`\n`,(0,o.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/pt-BR/docs/Web/API/Event/stopPropagation\",children:\"MDN Web Docs sobre Propaga\\xE7\\xE3o de Eventos\"})}),`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://javascript.info/bubbling-and-capturing\",children:\"JavaScript.info - Bolhas e Captura\"})}),`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://www.w3.org/TR/DOM-Level-3-Events/#event-flow\",children:\"Especifica\\xE7\\xE3o de Eventos do W3C DOM N\\xEDvel 3\"})}),`\n`]})]})}function x(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(c,n)})):c(n)}var j=x;return q(M);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var a in e)i(n,a,{get:e[a],enumerable:!0})},s=(n,e,a,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of h(e))!g.call(n,t)&&t!==a&&i(n,t,{get:()=>e[t],enumerable:!(d=u(e,t))||d.enumerable});return n};var q=(n,e,a)=>(a=n!=null?m(v(n)):{},s(e||!n||!n.__esModule?i(a,\"default\",{value:n,enumerable:!0}):a,n)),D=n=>s(i({},\"__esModule\",{value:!0}),n);var l=f((E,r)=>{r.exports=_jsx_runtime});var M={};b(M,{default:()=>p,frontmatter:()=>x});var o=q(l()),x={title:\"Descreva a propaga\\xE7\\xE3o de eventos\"};function c(n){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.p,{children:\"A propaga\\xE7\\xE3o de eventos \\xE9 um mecanismo na DOM (Modelo de Objetos do Documento) em que um evento, como um clique ou um evento de teclado, \\xE9 primeiro acionado no elemento de destino que iniciou o evento e, em seguida, se propaga para cima (bolhas) pela \\xE1rvore da DOM at\\xE9 a raiz do documento.\"}),`\n`,(0,o.jsx)(e.h2,{children:\"Fase de bolha\"}),`\n`,(0,o.jsx)(e.p,{children:\"Durante a fase de bolha, o evento come\\xE7a no elemento de destino e se propaga pelos seus ancestrais na hierarquia da DOM. Isso significa que os manipuladores de eventos associados ao elemento de destino e aos seus ancestrais podem potencialmente receber e responder ao evento.\"}),`\n`,(0,o.jsx)(e.p,{children:\"Aqui est\\xE1 um exemplo usando a sintaxe moderna do ES6 para demonstrar a propaga\\xE7\\xE3o de eventos:\"}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <div id=\"pai\">\n// <button id=\"filho\">Clique em mim!</button>\n// </div>\n\nconst pai = document.getElementById('pai');\nconst filho = document.getElementById('filho');\n\npai.addEventListener('click', () => {\n console.log('Cliquei no elemento pai');\n});\n\nfilho.addEventListener('click', () => {\n console.log('Cliquei no elemento filho');\n});\n`})}),`\n`,(0,o.jsx)(e.p,{children:'Quando voc\\xEA clica no bot\\xE3o \"Clique em mim!\", devido \\xE0 propaga\\xE7\\xE3o de eventos, os manipuladores de eventos do filho e do pai ser\\xE3o acionados.'}),`\n`,(0,o.jsx)(e.h2,{children:\"Parando a propaga\\xE7\\xE3o\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"A propaga\\xE7\\xE3o de eventos pode ser interrompida durante a fase de bolha usando o m\\xE9todo \",(0,o.jsx)(e.code,{children:\"stopPropagation()\"}),\". Se um manipulador de eventos chamar \",(0,o.jsx)(e.code,{children:\"stopPropagation()\"}),\", ele impedir\\xE1 que o evento continue a se propagar pela \\xE1rvore da DOM, garantindo que apenas os manipuladores dos elementos at\\xE9 aquele ponto na hierarquia sejam executados.\"]}),`\n`,(0,o.jsx)(e.h2,{children:\"Delega\\xE7\\xE3o de eventos\"}),`\n`,(0,o.jsx)(e.p,{children:'A propaga\\xE7\\xE3o de eventos \\xE9 a base para uma t\\xE9cnica chamada \"delega\\xE7\\xE3o de eventos\", onde voc\\xEA anexa um \\xFAnico manipulador de eventos a um ancestral comum de v\\xE1rios elementos e usa a delega\\xE7\\xE3o de eventos para lidar eficientemente com os eventos desses elementos. Isso \\xE9 particularmente \\xFAtil quando voc\\xEA tem um grande n\\xFAmero de elementos semelhantes, como uma lista de itens, e deseja evitar a adi\\xE7\\xE3o de manipuladores de eventos individuais a cada item.'}),`\n`,(0,o.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/pt-BR/docs/Web/API/Event/stopPropagation\",children:\"MDN Web Docs sobre Propaga\\xE7\\xE3o de Eventos\"})}),`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://javascript.info/bubbling-and-capturing\",children:\"JavaScript.info - Bolhas e Captura\"})}),`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://www.w3.org/TR/DOM-Level-3-Events/#event-flow\",children:\"Especifica\\xE7\\xE3o de Eventos do W3C DOM N\\xEDvel 3\"})}),`\n`]})]})}function p(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(c,{...n})}):c(n)}return D(M);})();\n;return Component;"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -27,5 +27,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-floats-and-how-they-work/en-US.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var s=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var b=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var o in e)l(n,o,{get:e[o],enumerable:!0})},a=(n,e,o,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of f(e))!u.call(n,i)&&i!==o&&l(n,i,{get:()=>e[i],enumerable:!(r=p(e,i))||r.enumerable});return n};var w=(n,e,o)=>(o=n!=null?s(m(n)):{},a(e||!n||!n.__esModule?l(o,\"default\",{value:n,enumerable:!0}):o,n)),x=n=>a(l({},\"__esModule\",{value:!0}),n);var h=b((j,c)=>{c.exports=_jsx_runtime});var C={};g(C,{default:()=>S,frontmatter:()=>y});var t=w(h()),y={title:\"Describe `float`s and how they work.\"};function d(n){let e=Object.assign({p:\"p\",code:\"code\",h2:\"h2\",a:\"a\",pre:\"pre\",ul:\"ul\",li:\"li\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[\"Float is a CSS positioning property. Floated elements remain a part of the flow of the page, and will affect the positioning of other elements (e.g. text will flow around floated elements), unlike \",(0,t.jsx)(e.code,{children:\"position: absolute\"}),\" elements, which are removed from the flow of the page.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"The CSS \",(0,t.jsx)(e.code,{children:\"clear\"}),\" property can be used to be positioned below \",(0,t.jsx)(e.code,{children:\"left\"}),\"/\",(0,t.jsx)(e.code,{children:\"right\"}),\"/\",(0,t.jsx)(e.code,{children:\"both\"}),\" floated elements.\"]}),`\n`,(0,t.jsx)(e.p,{children:\"If a parent element contains nothing but floated elements, its height will be collapsed to nothing. It can be fixed by clearing the float after the floated elements in the container but before the close of the container.\"}),`\n`,(0,t.jsx)(e.h2,{children:\"Clearfix hack\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The \",(0,t.jsx)(e.code,{children:\".clearfix\"}),\" hack uses a clever CSS \",(0,t.jsx)(e.a,{href:\"/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for\",children:\"pseudo-element\"}),\" (\",(0,t.jsx)(e.code,{children:\"::after\"}),\") to clear floats. Rather than setting the overflow on the parent, you apply an additional class \",(0,t.jsx)(e.code,{children:\"clearfix\"}),\" to it. Then apply this CSS:\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-css\",children:`.clearfix::after {\n content: ' ';\n visibility: hidden;\n display: block;\n height: 0;\n clear: both;\n}\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"Alternatively, give \",(0,t.jsx)(e.code,{children:\"overflow: auto\"}),\" or \",(0,t.jsx)(e.code,{children:\"overflow: hidden\"}),\" property to the parent element which will establish a new block formatting context inside the children and it will expand to contain its children.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"Trivia\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"In the good old days, CSS frameworks such as Bootstrap 2 used the \",(0,t.jsx)(e.code,{children:\"float\"}),\" property to implement its grid system. However with CSS Flexbox and Grid these days, there is no longer much need to use the \",(0,t.jsx)(e.code,{children:\"float\"}),\" property.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"References\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/\",children:\"Clearfix: A Lesson In Web Development Evolution\"})}),`\n`]})]})}function v(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(d,n)})):d(n)}var S=v;return x(C);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var b=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var o in e)i(n,o,{get:e[o],enumerable:!0})},a=(n,e,o,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of m(e))!w.call(n,l)&&l!==o&&i(n,l,{get:()=>e[l],enumerable:!(r=f(e,l))||r.enumerable});return n};var x=(n,e,o)=>(o=n!=null?p(u(n)):{},a(e||!n||!n.__esModule?i(o,\"default\",{value:n,enumerable:!0}):o,n)),y=n=>a(i({},\"__esModule\",{value:!0}),n);var h=b((k,c)=>{c.exports=_jsx_runtime});var S={};g(S,{default:()=>s,frontmatter:()=>v});var t=x(h()),v={title:\"Describe `float`s and how they work.\"};function d(n){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[\"Float is a CSS positioning property. Floated elements remain a part of the flow of the page, and will affect the positioning of other elements (e.g. text will flow around floated elements), unlike \",(0,t.jsx)(e.code,{children:\"position: absolute\"}),\" elements, which are removed from the flow of the page.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"The CSS \",(0,t.jsx)(e.code,{children:\"clear\"}),\" property can be used to be positioned below \",(0,t.jsx)(e.code,{children:\"left\"}),\"/\",(0,t.jsx)(e.code,{children:\"right\"}),\"/\",(0,t.jsx)(e.code,{children:\"both\"}),\" floated elements.\"]}),`\n`,(0,t.jsx)(e.p,{children:\"If a parent element contains nothing but floated elements, its height will be collapsed to nothing. It can be fixed by clearing the float after the floated elements in the container but before the close of the container.\"}),`\n`,(0,t.jsx)(e.h2,{children:\"Clearfix hack\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"The \",(0,t.jsx)(e.code,{children:\".clearfix\"}),\" hack uses a clever CSS \",(0,t.jsx)(e.a,{href:\"/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for\",children:\"pseudo-element\"}),\" (\",(0,t.jsx)(e.code,{children:\"::after\"}),\") to clear floats. Rather than setting the overflow on the parent, you apply an additional class \",(0,t.jsx)(e.code,{children:\"clearfix\"}),\" to it. Then apply this CSS:\"]}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:\"language-css\",children:`.clearfix::after {\n content: ' ';\n visibility: hidden;\n display: block;\n height: 0;\n clear: both;\n}\n`})}),`\n`,(0,t.jsxs)(e.p,{children:[\"Alternatively, give \",(0,t.jsx)(e.code,{children:\"overflow: auto\"}),\" or \",(0,t.jsx)(e.code,{children:\"overflow: hidden\"}),\" property to the parent element which will establish a new block formatting context inside the children and it will expand to contain its children.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"Trivia\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"In the good old days, CSS frameworks such as Bootstrap 2 used the \",(0,t.jsx)(e.code,{children:\"float\"}),\" property to implement its grid system. However with CSS Flexbox and Grid these days, there is no longer much need to use the \",(0,t.jsx)(e.code,{children:\"float\"}),\" property.\"]}),`\n`,(0,t.jsx)(e.h2,{children:\"References\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/\",children:\"Clearfix: A Lesson In Web Development Evolution\"})}),`\n`]})]})}function s(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(d,{...n})}):d(n)}return y(S);})();\n;return Component;"
|
||||
}
|
||||
|
|
@ -27,5 +27,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-floats-and-how-they-work/pt-BR.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var a in e)i(n,a,{get:e[a],enumerable:!0})},d=(n,e,a,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!f.call(n,r)&&r!==a&&i(n,r,{get:()=>e[r],enumerable:!(t=m(e,r))||t.enumerable});return n};var g=(n,e,a)=>(a=n!=null?u(h(n)):{},d(e||!n||!n.__esModule?i(a,\"default\",{value:n,enumerable:!0}):a,n)),v=n=>d(i({},\"__esModule\",{value:!0}),n);var s=x((k,l)=>{l.exports=_jsx_runtime});var _={};b(_,{default:()=>j,frontmatter:()=>S});var o=g(s()),S={title:\"Descreva os 'float' e como funcionam.\"};function c(n){let e=Object.assign({p:\"p\",code:\"code\",h2:\"h2\",a:\"a\",pre:\"pre\",ul:\"ul\",li:\"li\"},n.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Float \\xE9 uma propriedade CSS de posicionamento. Elementos flutuantes permanecem uma parte do fluxo da p\\xE1gina, e afetar\\xE3o o posicionamento de outros elementos (por exemplo, texto ir\\xE1 fluir em torno dos elementos flutuantes), ao contr\\xE1rio de \",(0,o.jsx)(e.code,{children:\"position: absolute\"}),\", que s\\xE3o removidos do fluxo da p\\xE1gina.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"A propriedade CSS \",(0,o.jsx)(e.code,{children:\"clear\"}),\" pode ser usada para ser posicionada abaixo de \",(0,o.jsx)(e.code,{children:\"left\"}),\"/\",(0,o.jsx)(e.code,{children:\"right\"}),\"/\",(0,o.jsx)(e.code,{children:\"both\"}),\" elementos flutuantes.\"]}),`\n`,(0,o.jsx)(e.p,{children:\"Se um elemento pai n\\xE3o conter nada al\\xE9m de elementos flutuantes, sua altura ser\\xE1 desmoronada a nada. Ele pode ser corrigido limpando o float ap\\xF3s os elementos flutuantes no cont\\xEAiner, mas antes do fechamento do container.\"}),`\n`,(0,o.jsx)(e.h2,{children:\"O hack do Clearfix\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"O hack \",(0,o.jsx)(e.code,{children:\".clearfix\"}),\" usa um CSS inteligente \",(0,o.jsx)(e.a,{href:\"/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for\",children:\"pseudo-element\"}),\" (\",(0,o.jsx)(e.code,{children:\"::after\"}),\") para limpar floats. Ao inv\\xE9s de definir o excesso de fluxo no pai, voc\\xEA aplica uma classe adicional \",(0,o.jsx)(e.code,{children:\"clearfix\"}),\" para ele. Em seguida, aplique este CSS:\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-css\",children:`.clearfix::after {\n content: ' ';\n visibility: hidden;\n display: block;\n height: 0;\n clear: both;\n}\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"Como alternativa, d\\xEA a propriedade \",(0,o.jsx)(e.code,{children:\"overflow: auto\"}),\" ou \",(0,o.jsx)(e.code,{children:\"overflow: hidden\"}),\" ao elemento pai que estabelecer\\xE1 um novo contexto de formata\\xE7\\xE3o de bloco dentro dos filhos e ele ser\\xE1 expandido para conter seus filhos.\"]}),`\n`,(0,o.jsx)(e.h2,{children:\"Tr\\xEDvia\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Nos bons dias antigos, o CSS frameworks como o Bootstrap 2 usou a propriedade \",(0,o.jsx)(e.code,{children:\"float\"}),\" para implementar seu sistema de grade. No entanto, com CSS Flexbox e Grid atualmente, n\\xE3o h\\xE1 muita necessidade de usar a propriedade \",(0,o.jsx)(e.code,{children:\"float\"}),\".\"]}),`\n`,(0,o.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://css-tricks.com/clearfix-a-lesson-web-development-evolution/\",children:\"Clearfix: Uma Li\\xE7\\xE3o em Desenvolvimento Web Evolu\\xE7\\xE3o\"})}),`\n`]})]})}function C(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(c,n)})):c(n)}var j=C;return v(_);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var a in e)i(n,a,{get:e[a],enumerable:!0})},d=(n,e,a,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of h(e))!x.call(n,r)&&r!==a&&i(n,r,{get:()=>e[r],enumerable:!(t=p(e,r))||t.enumerable});return n};var g=(n,e,a)=>(a=n!=null?m(f(n)):{},d(e||!n||!n.__esModule?i(a,\"default\",{value:n,enumerable:!0}):a,n)),S=n=>d(i({},\"__esModule\",{value:!0}),n);var s=v((j,l)=>{l.exports=_jsx_runtime});var _={};b(_,{default:()=>u,frontmatter:()=>C});var o=g(s()),C={title:\"Descreva os 'float' e como funcionam.\"};function c(n){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Float \\xE9 uma propriedade CSS de posicionamento. Elementos flutuantes permanecem uma parte do fluxo da p\\xE1gina, e afetar\\xE3o o posicionamento de outros elementos (por exemplo, texto ir\\xE1 fluir em torno dos elementos flutuantes), ao contr\\xE1rio de \",(0,o.jsx)(e.code,{children:\"position: absolute\"}),\", que s\\xE3o removidos do fluxo da p\\xE1gina.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"A propriedade CSS \",(0,o.jsx)(e.code,{children:\"clear\"}),\" pode ser usada para ser posicionada abaixo de \",(0,o.jsx)(e.code,{children:\"left\"}),\"/\",(0,o.jsx)(e.code,{children:\"right\"}),\"/\",(0,o.jsx)(e.code,{children:\"both\"}),\" elementos flutuantes.\"]}),`\n`,(0,o.jsx)(e.p,{children:\"Se um elemento pai n\\xE3o conter nada al\\xE9m de elementos flutuantes, sua altura ser\\xE1 desmoronada a nada. Ele pode ser corrigido limpando o float ap\\xF3s os elementos flutuantes no cont\\xEAiner, mas antes do fechamento do container.\"}),`\n`,(0,o.jsx)(e.h2,{children:\"O hack do Clearfix\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"O hack \",(0,o.jsx)(e.code,{children:\".clearfix\"}),\" usa um CSS inteligente \",(0,o.jsx)(e.a,{href:\"/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for\",children:\"pseudo-element\"}),\" (\",(0,o.jsx)(e.code,{children:\"::after\"}),\") para limpar floats. Ao inv\\xE9s de definir o excesso de fluxo no pai, voc\\xEA aplica uma classe adicional \",(0,o.jsx)(e.code,{children:\"clearfix\"}),\" para ele. Em seguida, aplique este CSS:\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-css\",children:`.clearfix::after {\n content: ' ';\n visibility: hidden;\n display: block;\n height: 0;\n clear: both;\n}\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"Como alternativa, d\\xEA a propriedade \",(0,o.jsx)(e.code,{children:\"overflow: auto\"}),\" ou \",(0,o.jsx)(e.code,{children:\"overflow: hidden\"}),\" ao elemento pai que estabelecer\\xE1 um novo contexto de formata\\xE7\\xE3o de bloco dentro dos filhos e ele ser\\xE1 expandido para conter seus filhos.\"]}),`\n`,(0,o.jsx)(e.h2,{children:\"Tr\\xEDvia\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Nos bons dias antigos, o CSS frameworks como o Bootstrap 2 usou a propriedade \",(0,o.jsx)(e.code,{children:\"float\"}),\" para implementar seu sistema de grade. No entanto, com CSS Flexbox e Grid atualmente, n\\xE3o h\\xE1 muita necessidade de usar a propriedade \",(0,o.jsx)(e.code,{children:\"float\"}),\".\"]}),`\n`,(0,o.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://css-tricks.com/clearfix-a-lesson-web-development-evolution/\",children:\"Clearfix: Uma Li\\xE7\\xE3o em Desenvolvimento Web Evolu\\xE7\\xE3o\"})}),`\n`]})]})}function u(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(c,{...n})}):c(n)}return S(_);})();\n;return Component;"
|
||||
}
|
||||
|
|
@ -27,5 +27,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-floats-and-how-they-work/zh-CN.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var s=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var m=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),S=(c,e)=>{for(var r in e)i(c,r,{get:e[r],enumerable:!0})},t=(c,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of p(e))!x.call(c,l)&&l!==r&&i(c,l,{get:()=>e[l],enumerable:!(o=f(e,l))||o.enumerable});return c};var b=(c,e,r)=>(r=c!=null?s(u(c)):{},t(e||!c||!c.__esModule?i(r,\"default\",{value:c,enumerable:!0}):r,c)),C=c=>t(i({},\"__esModule\",{value:!0}),c);var h=m((k,d)=>{d.exports=_jsx_runtime});var _={};S(_,{default:()=>j,frontmatter:()=>g});var n=b(h()),g={title:\"\\u63CF\\u8FF0 `float` \\u53CA\\u5176\\u5DE5\\u4F5C\\u539F\\u7406\\u3002\"};function a(c){let e=Object.assign({p:\"p\",code:\"code\",h2:\"h2\",a:\"a\",pre:\"pre\",ul:\"ul\",li:\"li\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"Float \\u662F\\u4E00\\u4E2A CSS \\u5B9A\\u4F4D\\u5C5E\\u6027\\u3002\\u6D6E\\u52A8\\u5143\\u7D20\\u4ECD\\u7136\\u662F\\u9875\\u9762\\u6D41\\u7A0B\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u5E76\\u5C06\\u5F71\\u54CD\\u5176\\u4ED6\\u5143\\u7D20\\u7684\\u4F4D\\u7F6E\\uFF08\\u4F8B\\u5982\\uFF0C\\u6587\\u672C\\u5C06\\u73AF\\u7ED5\\u6D6E\\u52A8\\u5143\\u7D20\\uFF09\\uFF0C\\u8FD9\\u4E0E \",(0,n.jsx)(e.code,{children:\"position: absolute\"}),\" \\u5143\\u7D20\\u4E0D\\u540C\\uFF0C\\u540E\\u8005\\u5C06\\u4ECE\\u9875\\u9762\\u6D41\\u7A0B\\u4E2D\\u79FB\\u9664\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"CSS \",(0,n.jsx)(e.code,{children:\"clear\"}),\" \\u5C5E\\u6027\\u53EF\\u7528\\u4E8E\\u5B9A\\u4F4D\\u5728 \",(0,n.jsx)(e.code,{children:\"left\"}),\"/\",(0,n.jsx)(e.code,{children:\"right\"}),\"/\",(0,n.jsx)(e.code,{children:\"both\"}),\" \\u6D6E\\u52A8\\u5143\\u7D20\\u4E0B\\u65B9\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5982\\u679C\\u7236\\u5143\\u7D20\\u53EA\\u5305\\u542B\\u6D6E\\u52A8\\u5143\\u7D20\\uFF0C\\u5219\\u5176\\u9AD8\\u5EA6\\u5C06\\u6298\\u53E0\\u4E3A\\u96F6\\u3002\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728\\u5BB9\\u5668\\u4E2D\\u6D6E\\u52A8\\u5143\\u7D20\\u4E4B\\u540E\\u4F46\\u5728\\u5BB9\\u5668\\u5173\\u95ED\\u4E4B\\u524D\\u6E05\\u9664\\u6D6E\\u52A8\\u6765\\u4FEE\\u590D\\u5B83\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Clearfix hack\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\".clearfix\"}),\" hack \\u4F7F\\u7528\\u5DE7\\u5999\\u7684 CSS \",(0,n.jsx)(e.a,{href:\"/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for\",children:\"\\u4F2A\\u5143\\u7D20\"}),\" (\",(0,n.jsx)(e.code,{children:\"::after\"}),\") \\u6765\\u6E05\\u9664\\u6D6E\\u52A8\\u3002\\u4E0E\\u5176\\u5728\\u7236\\u5143\\u7D20\\u4E0A\\u8BBE\\u7F6E overflow\\uFF0C\\u4E0D\\u5982\\u4E3A\\u5176\\u5E94\\u7528\\u4E00\\u4E2A\\u989D\\u5916\\u7684\\u7C7B \",(0,n.jsx)(e.code,{children:\"clearfix\"}),\"\\u3002\\u7136\\u540E\\u5E94\\u7528\\u6B64 CSS\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.clearfix::after {\n content: ' ';\n visibility: hidden;\n display: block;\n height: 0;\n clear: both;\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6216\\u8005\\uFF0C\\u7ED9\\u7236\\u5143\\u7D20 \",(0,n.jsx)(e.code,{children:\"overflow: auto\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"overflow: hidden\"}),\" \\u5C5E\\u6027\\uFF0C\\u5B83\\u5C06\\u5728\\u5B50\\u5143\\u7D20\\u5185\\u5EFA\\u7ACB\\u4E00\\u4E2A\\u65B0\\u7684\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587\\uFF0C\\u5B83\\u5C06\\u6269\\u5C55\\u4EE5\\u5305\\u542B\\u5176\\u5B50\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u7410\\u4E8B\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u8FC7\\u53BB\\u7684\\u65E5\\u5B50\\u91CC\\uFF0CCSS \\u6846\\u67B6\\uFF08\\u5982 Bootstrap 2\\uFF09\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"float\"}),\" \\u5C5E\\u6027\\u6765\\u5B9E\\u73B0\\u5176\\u7F51\\u683C\\u7CFB\\u7EDF\\u3002\\u7136\\u800C\\uFF0C\\u5982\\u4ECA\\u6709\\u4E86 CSS Flexbox \\u548C Grid\\uFF0C\\u4E0D\\u518D\\u9700\\u8981\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"float\"}),\" \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u53C2\\u8003\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/\",children:\"Clearfix: A Lesson In Web Development Evolution\"})}),`\n`]})]})}function v(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(a,c)})):a(c)}var j=v;return C(_);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var f=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var S=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),C=(c,e)=>{for(var r in e)o(c,r,{get:e[r],enumerable:!0})},t=(c,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of u(e))!m.call(c,l)&&l!==r&&o(c,l,{get:()=>e[l],enumerable:!(i=p(e,l))||i.enumerable});return c};var b=(c,e,r)=>(r=c!=null?f(x(c)):{},t(e||!c||!c.__esModule?o(r,\"default\",{value:c,enumerable:!0}):r,c)),v=c=>t(o({},\"__esModule\",{value:!0}),c);var h=S((j,d)=>{d.exports=_jsx_runtime});var g={};C(g,{default:()=>s,frontmatter:()=>_});var n=b(h()),_={title:\"\\u63CF\\u8FF0 `float` \\u53CA\\u5176\\u5DE5\\u4F5C\\u539F\\u7406\\u3002\"};function a(c){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"Float \\u662F\\u4E00\\u4E2A CSS \\u5B9A\\u4F4D\\u5C5E\\u6027\\u3002\\u6D6E\\u52A8\\u5143\\u7D20\\u4ECD\\u7136\\u662F\\u9875\\u9762\\u6D41\\u7A0B\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u5E76\\u5C06\\u5F71\\u54CD\\u5176\\u4ED6\\u5143\\u7D20\\u7684\\u4F4D\\u7F6E\\uFF08\\u4F8B\\u5982\\uFF0C\\u6587\\u672C\\u5C06\\u73AF\\u7ED5\\u6D6E\\u52A8\\u5143\\u7D20\\uFF09\\uFF0C\\u8FD9\\u4E0E \",(0,n.jsx)(e.code,{children:\"position: absolute\"}),\" \\u5143\\u7D20\\u4E0D\\u540C\\uFF0C\\u540E\\u8005\\u5C06\\u4ECE\\u9875\\u9762\\u6D41\\u7A0B\\u4E2D\\u79FB\\u9664\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"CSS \",(0,n.jsx)(e.code,{children:\"clear\"}),\" \\u5C5E\\u6027\\u53EF\\u7528\\u4E8E\\u5B9A\\u4F4D\\u5728 \",(0,n.jsx)(e.code,{children:\"left\"}),\"/\",(0,n.jsx)(e.code,{children:\"right\"}),\"/\",(0,n.jsx)(e.code,{children:\"both\"}),\" \\u6D6E\\u52A8\\u5143\\u7D20\\u4E0B\\u65B9\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u5982\\u679C\\u7236\\u5143\\u7D20\\u53EA\\u5305\\u542B\\u6D6E\\u52A8\\u5143\\u7D20\\uFF0C\\u5219\\u5176\\u9AD8\\u5EA6\\u5C06\\u6298\\u53E0\\u4E3A\\u96F6\\u3002\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728\\u5BB9\\u5668\\u4E2D\\u6D6E\\u52A8\\u5143\\u7D20\\u4E4B\\u540E\\u4F46\\u5728\\u5BB9\\u5668\\u5173\\u95ED\\u4E4B\\u524D\\u6E05\\u9664\\u6D6E\\u52A8\\u6765\\u4FEE\\u590D\\u5B83\\u3002\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Clearfix hack\"}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\".clearfix\"}),\" hack \\u4F7F\\u7528\\u5DE7\\u5999\\u7684 CSS \",(0,n.jsx)(e.a,{href:\"/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for\",children:\"\\u4F2A\\u5143\\u7D20\"}),\" (\",(0,n.jsx)(e.code,{children:\"::after\"}),\") \\u6765\\u6E05\\u9664\\u6D6E\\u52A8\\u3002\\u4E0E\\u5176\\u5728\\u7236\\u5143\\u7D20\\u4E0A\\u8BBE\\u7F6E overflow\\uFF0C\\u4E0D\\u5982\\u4E3A\\u5176\\u5E94\\u7528\\u4E00\\u4E2A\\u989D\\u5916\\u7684\\u7C7B \",(0,n.jsx)(e.code,{children:\"clearfix\"}),\"\\u3002\\u7136\\u540E\\u5E94\\u7528\\u6B64 CSS\\uFF1A\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.clearfix::after {\n content: ' ';\n visibility: hidden;\n display: block;\n height: 0;\n clear: both;\n}\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6216\\u8005\\uFF0C\\u7ED9\\u7236\\u5143\\u7D20 \",(0,n.jsx)(e.code,{children:\"overflow: auto\"}),\" \\u6216 \",(0,n.jsx)(e.code,{children:\"overflow: hidden\"}),\" \\u5C5E\\u6027\\uFF0C\\u5B83\\u5C06\\u5728\\u5B50\\u5143\\u7D20\\u5185\\u5EFA\\u7ACB\\u4E00\\u4E2A\\u65B0\\u7684\\u5757\\u683C\\u5F0F\\u5316\\u4E0A\\u4E0B\\u6587\\uFF0C\\u5B83\\u5C06\\u6269\\u5C55\\u4EE5\\u5305\\u542B\\u5176\\u5B50\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u7410\\u4E8B\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u8FC7\\u53BB\\u7684\\u65E5\\u5B50\\u91CC\\uFF0CCSS \\u6846\\u67B6\\uFF08\\u5982 Bootstrap 2\\uFF09\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"float\"}),\" \\u5C5E\\u6027\\u6765\\u5B9E\\u73B0\\u5176\\u7F51\\u683C\\u7CFB\\u7EDF\\u3002\\u7136\\u800C\\uFF0C\\u5982\\u4ECA\\u6709\\u4E86 CSS Flexbox \\u548C Grid\\uFF0C\\u4E0D\\u518D\\u9700\\u8981\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"float\"}),\" \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u53C2\\u8003\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/\",children:\"Clearfix: A Lesson In Web Development Evolution\"})}),`\n`]})]})}function s(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(a,{...c})}):a(c)}return v(g);})();\n;return Component;"
|
||||
}
|
||||
|
|
@ -27,5 +27,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/en-US.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var s in e)r(t,s,{get:e[s],enumerable:!0})},d=(t,e,s,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!p.call(t,o)&&o!==s&&r(t,o,{get:()=>e[o],enumerable:!(c=u(e,o))||c.enumerable});return t};var S=(t,e,s)=>(s=t!=null?h(f(t)):{},d(e||!t||!t.__esModule?r(s,\"default\",{value:t,enumerable:!0}):s,t)),x=t=>d(r({},\"__esModule\",{value:!0}),t);var i=b((v,l)=>{l.exports=_jsx_runtime});var j={};g(j,{default:()=>C,frontmatter:()=>y});var n=S(i()),y={title:\"Describe pseudo-elements and discuss what they are used for.\"};function a(t){let e=Object.assign({p:\"p\",a:\"a\",code:\"code\",ul:\"ul\",li:\"li\",h2:\"h2\",em:\"em\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"A CSS \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\",children:\"pseudo-element\"}),\" is a keyword added to a selector that lets you style a specific part of the selected element(s). They can be used for decoration (\",(0,n.jsx)(e.code,{children:\"::first-line\"}),\", \",(0,n.jsx)(e.code,{children:\"::first-letter\"}),\") or adding elements to the markup (combined with \",(0,n.jsx)(e.code,{children:\"content: ...\"}),\") without having to modify the markup (\",(0,n.jsx)(e.code,{children:\":before\"}),\", \",(0,n.jsx)(e.code,{children:\":after\"}),\").\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"::first-line\"}),\" and \",(0,n.jsx)(e.code,{children:\"::first-letter\"}),\" can be used to decorate text.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Used in the \",(0,n.jsx)(e.code,{children:\".clearfix\"}),\" hack as shown above to add a zero-space element with \",(0,n.jsx)(e.code,{children:\"clear: both\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Triangular arrows in tooltips use \",(0,n.jsx)(e.code,{children:\"::before\"}),\" and \",(0,n.jsx)(e.code,{children:\"::after\"}),\". Encourages separation of concerns because the triangle is considered part of styling and not really the DOM.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Pseudo-elements are different from \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\",children:\"pseudo-classes\"}),\", which are used to style an element based on its \",(0,n.jsx)(e.em,{children:\"state\"}),\" (such as \",(0,n.jsx)(e.code,{children:\":hover\"}),\", \",(0,n.jsx)(e.code,{children:\":focus\"}),\", etc).\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Double colons should be used instead of single colon to distinguish pseudo-classes from pseudo-elements. Most browsers support both syntaxs since this distinction was not clear in legacy W3C specs.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"References\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\",children:\"Pseudo-elements - CSS | MDN\"})}),`\n`]})]})}function w(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(a,t)})):a(t)}var C=w;return x(j);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),S=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of f(e))!b.call(t,s)&&s!==o&&r(t,s,{get:()=>e[s],enumerable:!(d=m(e,s))||d.enumerable});return t};var x=(t,e,o)=>(o=t!=null?u(p(t)):{},c(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),y=t=>c(r({},\"__esModule\",{value:!0}),t);var i=g((v,l)=>{l.exports=_jsx_runtime});var C={};S(C,{default:()=>h,frontmatter:()=>w});var n=x(i()),w={title:\"Describe pseudo-elements and discuss what they are used for.\"};function a(t){let e={a:\"a\",code:\"code\",em:\"em\",h2:\"h2\",li:\"li\",p:\"p\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"A CSS \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\",children:\"pseudo-element\"}),\" is a keyword added to a selector that lets you style a specific part of the selected element(s). They can be used for decoration (\",(0,n.jsx)(e.code,{children:\"::first-line\"}),\", \",(0,n.jsx)(e.code,{children:\"::first-letter\"}),\") or adding elements to the markup (combined with \",(0,n.jsx)(e.code,{children:\"content: ...\"}),\") without having to modify the markup (\",(0,n.jsx)(e.code,{children:\":before\"}),\", \",(0,n.jsx)(e.code,{children:\":after\"}),\").\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"::first-line\"}),\" and \",(0,n.jsx)(e.code,{children:\"::first-letter\"}),\" can be used to decorate text.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Used in the \",(0,n.jsx)(e.code,{children:\".clearfix\"}),\" hack as shown above to add a zero-space element with \",(0,n.jsx)(e.code,{children:\"clear: both\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Triangular arrows in tooltips use \",(0,n.jsx)(e.code,{children:\"::before\"}),\" and \",(0,n.jsx)(e.code,{children:\"::after\"}),\". Encourages separation of concerns because the triangle is considered part of styling and not really the DOM.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notes\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Pseudo-elements are different from \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\",children:\"pseudo-classes\"}),\", which are used to style an element based on its \",(0,n.jsx)(e.em,{children:\"state\"}),\" (such as \",(0,n.jsx)(e.code,{children:\":hover\"}),\", \",(0,n.jsx)(e.code,{children:\":focus\"}),\", etc).\"]}),`\n`,(0,n.jsx)(e.li,{children:\"Double colons should be used instead of single colon to distinguish pseudo-classes from pseudo-elements. Most browsers support both syntaxs since this distinction was not clear in legacy W3C specs.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"References\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\",children:\"Pseudo-elements - CSS | MDN\"})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(a,{...t})}):a(t)}return y(C);})();\n;return Component;"
|
||||
}
|
||||
|
|
@ -27,5 +27,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/pt-BR.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var S=(s,e)=>()=>(e||s((e={exports:{}}).exports,e),e.exports),b=(s,e)=>{for(var a in e)r(s,a,{get:e[a],enumerable:!0})},i=(s,e,a,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of h(e))!f.call(s,n)&&n!==a&&r(s,n,{get:()=>e[n],enumerable:!(d=u(e,n))||d.enumerable});return s};var g=(s,e,a)=>(a=s!=null?m(p(s)):{},i(e||!s||!s.__esModule?r(a,\"default\",{value:s,enumerable:!0}):a,s)),v=s=>i(r({},\"__esModule\",{value:!0}),s);var c=S((q,t)=>{t.exports=_jsx_runtime});var j={};b(j,{default:()=>C,frontmatter:()=>x});var o=g(c()),x={title:\"Descreva pseudo-elementos e discuta para que eles s\\xE3o usados.\"};function l(s){let e=Object.assign({p:\"p\",a:\"a\",code:\"code\",ul:\"ul\",li:\"li\",h2:\"h2\",em:\"em\"},s.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Um CSS \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\",children:\"pseudo-element\"}),\" \\xE9 uma palavra-chave adicionada a um seletor que permite estilizar uma parte espec\\xEDfica do(s) elemento(s) selecionado(s). Eles podem ser usados para decora\\xE7\\xE3o (\",(0,o.jsx)(e.code,{children:\"::first-line\"}),\", \",(0,o.jsx)(e.code,{children:\"::first-letter\"}),\") ou adicionando elementos \\xE0 marca\\xE7\\xE3o (combinado com \",(0,o.jsx)(e.code,{children:\"content: ...\"}),\") sem ter que modificar a marca\\xE7\\xE3o (\",(0,o.jsx)(e.code,{children:\":before\"}),\", \",(0,o.jsx)(e.code,{children:\":after\"}),\").\"]}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:\"::first-line\"}),\" e \",(0,o.jsx)(e.code,{children:\"::first-letter\"}),\" podem ser usados para decorar o texto.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Usado no truque \",(0,o.jsx)(e.code,{children:\".clearfix\"}),\" conforme mostrado acima, para adicionar um elemento de espa\\xE7o zero com \",(0,o.jsx)(e.code,{children:\"clear: both\"}),\".\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"As setas triangulares em tooltips utilizam \",(0,o.jsx)(e.code,{children:\"::before\"}),\" e \",(0,o.jsx)(e.code,{children:\"::after\"}),\". Incentiva a separa\\xE7\\xE3o de responsabilidades porque o tri\\xE2ngulo \\xE9 considerado parte do estilo e n\\xE3o realmente do DOM.\"]}),`\n`]}),`\n`,(0,o.jsx)(e.h2,{children:\"Notas\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[\"Pseudo-elementos s\\xE3o diferentes de \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\",children:\"pseudo-classes\"}),\", que s\\xE3o usados para estilizar um elemento baseado em seu \",(0,o.jsx)(e.em,{children:\"state\"}),\" (como \",(0,o.jsx)(e.code,{children:\":hover\"}),\", \",(0,o.jsx)(e.code,{children:\":focus\"}),\", etc).\"]}),`\n`,(0,o.jsx)(e.li,{children:\"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\\xE7\\xE3o n\\xE3o estava clara nas especifica\\xE7\\xF5es antigas do W3C.\"}),`\n`]}),`\n`,(0,o.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\",children:\"Pseudo-elements - CSS | MDN\"})}),`\n`]})]})}function z(s={}){let{wrapper:e}=s.components||{};return e?(0,o.jsx)(e,Object.assign({},s,{children:(0,o.jsx)(l,s)})):l(s)}var C=z;return v(j);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var v=(s,e)=>()=>(e||s((e={exports:{}}).exports,e),e.exports),x=(s,e)=>{for(var a in e)r(s,a,{get:e[a],enumerable:!0})},i=(s,e,a,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of p(e))!S.call(s,n)&&n!==a&&r(s,n,{get:()=>e[n],enumerable:!(d=h(e,n))||d.enumerable});return s};var b=(s,e,a)=>(a=s!=null?u(f(s)):{},i(e||!s||!s.__esModule?r(a,\"default\",{value:s,enumerable:!0}):a,s)),g=s=>i(r({},\"__esModule\",{value:!0}),s);var c=v((q,t)=>{t.exports=_jsx_runtime});var C={};x(C,{default:()=>m,frontmatter:()=>z});var o=b(c()),z={title:\"Descreva pseudo-elementos e discuta para que eles s\\xE3o usados.\"};function l(s){let e={a:\"a\",code:\"code\",em:\"em\",h2:\"h2\",li:\"li\",p:\"p\",ul:\"ul\",...s.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Um CSS \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\",children:\"pseudo-element\"}),\" \\xE9 uma palavra-chave adicionada a um seletor que permite estilizar uma parte espec\\xEDfica do(s) elemento(s) selecionado(s). Eles podem ser usados para decora\\xE7\\xE3o (\",(0,o.jsx)(e.code,{children:\"::first-line\"}),\", \",(0,o.jsx)(e.code,{children:\"::first-letter\"}),\") ou adicionando elementos \\xE0 marca\\xE7\\xE3o (combinado com \",(0,o.jsx)(e.code,{children:\"content: ...\"}),\") sem ter que modificar a marca\\xE7\\xE3o (\",(0,o.jsx)(e.code,{children:\":before\"}),\", \",(0,o.jsx)(e.code,{children:\":after\"}),\").\"]}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[(0,o.jsx)(e.code,{children:\"::first-line\"}),\" e \",(0,o.jsx)(e.code,{children:\"::first-letter\"}),\" podem ser usados para decorar o texto.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Usado no truque \",(0,o.jsx)(e.code,{children:\".clearfix\"}),\" conforme mostrado acima, para adicionar um elemento de espa\\xE7o zero com \",(0,o.jsx)(e.code,{children:\"clear: both\"}),\".\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"As setas triangulares em tooltips utilizam \",(0,o.jsx)(e.code,{children:\"::before\"}),\" e \",(0,o.jsx)(e.code,{children:\"::after\"}),\". Incentiva a separa\\xE7\\xE3o de responsabilidades porque o tri\\xE2ngulo \\xE9 considerado parte do estilo e n\\xE3o realmente do DOM.\"]}),`\n`]}),`\n`,(0,o.jsx)(e.h2,{children:\"Notas\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsxs)(e.li,{children:[\"Pseudo-elementos s\\xE3o diferentes de \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\",children:\"pseudo-classes\"}),\", que s\\xE3o usados para estilizar um elemento baseado em seu \",(0,o.jsx)(e.em,{children:\"state\"}),\" (como \",(0,o.jsx)(e.code,{children:\":hover\"}),\", \",(0,o.jsx)(e.code,{children:\":focus\"}),\", etc).\"]}),`\n`,(0,o.jsx)(e.li,{children:\"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\\xE7\\xE3o n\\xE3o estava clara nas especifica\\xE7\\xF5es antigas do W3C.\"}),`\n`]}),`\n`,(0,o.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,o.jsxs)(e.ul,{children:[`\n`,(0,o.jsx)(e.li,{children:(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\",children:\"Pseudo-elements - CSS | MDN\"})}),`\n`]})]})}function m(s={}){let{wrapper:e}=s.components||{};return e?(0,o.jsx)(e,{...s,children:(0,o.jsx)(l,{...s})}):l(s)}return g(C);})();\n;return Component;"
|
||||
}
|
||||
|
|
@ -27,5 +27,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/zh-CN.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var a=Object.create;var d=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var p=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),x=(r,e)=>{for(var c in e)d(r,c,{get:e[c],enumerable:!0})},o=(r,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of m(e))!S.call(r,l)&&l!==c&&d(r,l,{get:()=>e[l],enumerable:!(i=f(e,l))||i.enumerable});return r};var b=(r,e,c)=>(c=r!=null?a(u(r)):{},o(e||!r||!r.__esModule?d(c,\"default\",{value:r,enumerable:!0}):c,r)),C=r=>o(d({},\"__esModule\",{value:!0}),r);var h=p((D,t)=>{t.exports=_jsx_runtime});var M={};x(M,{default:()=>_,frontmatter:()=>g});var n=b(h()),g={title:\"\\u63CF\\u8FF0\\u4F2A\\u5143\\u7D20\\u5E76\\u8BA8\\u8BBA\\u5B83\\u4EEC\\u7684\\u4F7F\\u7528\\u3002\"};function s(r){let e=Object.assign({p:\"p\",a:\"a\",code:\"code\",ul:\"ul\",li:\"li\",h2:\"h2\",em:\"em\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"CSS \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\",children:\"\\u4F2A\\u5143\\u7D20\"}),\" \\u662F\\u6DFB\\u52A0\\u5230\\u9009\\u62E9\\u5668\\u7684\\u5173\\u952E\\u5B57\\uFF0C\\u53EF\\u8BA9\\u60A8\\u8BBE\\u7F6E\\u6240\\u9009\\u5143\\u7D20\\u7279\\u5B9A\\u90E8\\u5206\\u7684\\u6837\\u5F0F\\u3002\\u5B83\\u4EEC\\u53EF\\u7528\\u4E8E\\u88C5\\u9970 (\",(0,n.jsx)(e.code,{children:\"::first-line\"}),\", \",(0,n.jsx)(e.code,{children:\"::first-letter\"}),\") \\u6216\\u5C06\\u5143\\u7D20\\u6DFB\\u52A0\\u5230\\u6807\\u8BB0\\u4E2D\\uFF08\\u4E0E \",(0,n.jsx)(e.code,{children:\"content: ...\"}),\" \\u7ED3\\u5408\\u4F7F\\u7528\\uFF09\\uFF0C\\u800C\\u65E0\\u9700\\u4FEE\\u6539\\u6807\\u8BB0 (\",(0,n.jsx)(e.code,{children:\":before\"}),\", \",(0,n.jsx)(e.code,{children:\":after\"}),\")\\u3002\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"::first-line\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"::first-letter\"}),\" \\u53EF\\u7528\\u4E8E\\u88C5\\u9970\\u6587\\u672C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5728\\u4E0A\\u9762\\u663E\\u793A\\u7684 \",(0,n.jsx)(e.code,{children:\".clearfix\"}),\" hack \\u4E2D\\u4F7F\\u7528\\uFF0C\\u4EE5\\u6DFB\\u52A0\\u4E00\\u4E2A\\u5E26\\u6709 \",(0,n.jsx)(e.code,{children:\"clear: both\"}),\" \\u7684\\u96F6\\u7A7A\\u95F4\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5DE5\\u5177\\u63D0\\u793A\\u4E2D\\u7684\\u4E09\\u89D2\\u5F62\\u7BAD\\u5934\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"::before\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"::after\"}),\"\\u3002 \\u9F13\\u52B1\\u5173\\u6CE8\\u70B9\\u5206\\u79BB\\uFF0C\\u56E0\\u4E3A\\u4E09\\u89D2\\u5F62\\u88AB\\u8BA4\\u4E3A\\u662F\\u6837\\u5F0F\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u800C\\u4E0D\\u662F\\u771F\\u6B63\\u7684 DOM\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u7B14\\u8BB0\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4F2A\\u5143\\u7D20\\u4E0E \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\",children:\"\\u4F2A\\u7C7B\"}),\" \\u4E0D\\u540C\\uFF0C\\u4F2A\\u7C7B\\u7528\\u4E8E\\u6839\\u636E\\u5143\\u7D20\\u7684\",(0,n.jsx)(e.em,{children:\"\\u72B6\\u6001\"}),\"\\uFF08\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\":hover\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\":focus\"}),\" \\u7B49\\uFF09\\u8BBE\\u7F6E\\u5143\\u7D20\\u7684\\u6837\\u5F0F\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5E94\\u4F7F\\u7528\\u53CC\\u5192\\u53F7\\u800C\\u4E0D\\u662F\\u5355\\u5192\\u53F7\\u6765\\u533A\\u5206\\u4F2A\\u7C7B\\u548C\\u4F2A\\u5143\\u7D20\\u3002 \\u5927\\u591A\\u6570\\u6D4F\\u89C8\\u5668\\u90FD\\u652F\\u6301\\u8FD9\\u4E24\\u79CD\\u8BED\\u6CD5\\uFF0C\\u56E0\\u4E3A\\u8FD9\\u79CD\\u533A\\u522B\\u5728\\u65E7\\u7248 W3C \\u89C4\\u8303\\u4E2D\\u5E76\\u4E0D\\u660E\\u786E\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u53C2\\u8003\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\",children:\"\\u4F2A\\u5143\\u7D20 - CSS | MDN\"})}),`\n`]})]})}function j(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(s,r)})):s(r)}var _=j;return C(M);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var f=Object.create;var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var x=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),C=(r,e)=>{for(var c in e)d(r,c,{get:e[c],enumerable:!0})},o=(r,e,c,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of u(e))!p.call(r,l)&&l!==c&&d(r,l,{get:()=>e[l],enumerable:!(i=m(e,l))||i.enumerable});return r};var _=(r,e,c)=>(c=r!=null?f(S(r)):{},o(e||!r||!r.__esModule?d(c,\"default\",{value:r,enumerable:!0}):c,r)),b=r=>o(d({},\"__esModule\",{value:!0}),r);var h=x((v,t)=>{t.exports=_jsx_runtime});var j={};C(j,{default:()=>a,frontmatter:()=>g});var n=_(h()),g={title:\"\\u63CF\\u8FF0\\u4F2A\\u5143\\u7D20\\u5E76\\u8BA8\\u8BBA\\u5B83\\u4EEC\\u7684\\u4F7F\\u7528\\u3002\"};function s(r){let e={a:\"a\",code:\"code\",em:\"em\",h2:\"h2\",li:\"li\",p:\"p\",ul:\"ul\",...r.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"CSS \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\",children:\"\\u4F2A\\u5143\\u7D20\"}),\" \\u662F\\u6DFB\\u52A0\\u5230\\u9009\\u62E9\\u5668\\u7684\\u5173\\u952E\\u5B57\\uFF0C\\u53EF\\u8BA9\\u60A8\\u8BBE\\u7F6E\\u6240\\u9009\\u5143\\u7D20\\u7279\\u5B9A\\u90E8\\u5206\\u7684\\u6837\\u5F0F\\u3002\\u5B83\\u4EEC\\u53EF\\u7528\\u4E8E\\u88C5\\u9970 (\",(0,n.jsx)(e.code,{children:\"::first-line\"}),\", \",(0,n.jsx)(e.code,{children:\"::first-letter\"}),\") \\u6216\\u5C06\\u5143\\u7D20\\u6DFB\\u52A0\\u5230\\u6807\\u8BB0\\u4E2D\\uFF08\\u4E0E \",(0,n.jsx)(e.code,{children:\"content: ...\"}),\" \\u7ED3\\u5408\\u4F7F\\u7528\\uFF09\\uFF0C\\u800C\\u65E0\\u9700\\u4FEE\\u6539\\u6807\\u8BB0 (\",(0,n.jsx)(e.code,{children:\":before\"}),\", \",(0,n.jsx)(e.code,{children:\":after\"}),\")\\u3002\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"::first-line\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"::first-letter\"}),\" \\u53EF\\u7528\\u4E8E\\u88C5\\u9970\\u6587\\u672C\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5728\\u4E0A\\u9762\\u663E\\u793A\\u7684 \",(0,n.jsx)(e.code,{children:\".clearfix\"}),\" hack \\u4E2D\\u4F7F\\u7528\\uFF0C\\u4EE5\\u6DFB\\u52A0\\u4E00\\u4E2A\\u5E26\\u6709 \",(0,n.jsx)(e.code,{children:\"clear: both\"}),\" \\u7684\\u96F6\\u7A7A\\u95F4\\u5143\\u7D20\\u3002\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"\\u5DE5\\u5177\\u63D0\\u793A\\u4E2D\\u7684\\u4E09\\u89D2\\u5F62\\u7BAD\\u5934\\u4F7F\\u7528 \",(0,n.jsx)(e.code,{children:\"::before\"}),\" \\u548C \",(0,n.jsx)(e.code,{children:\"::after\"}),\"\\u3002 \\u9F13\\u52B1\\u5173\\u6CE8\\u70B9\\u5206\\u79BB\\uFF0C\\u56E0\\u4E3A\\u4E09\\u89D2\\u5F62\\u88AB\\u8BA4\\u4E3A\\u662F\\u6837\\u5F0F\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u800C\\u4E0D\\u662F\\u771F\\u6B63\\u7684 DOM\\u3002\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u7B14\\u8BB0\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"\\u4F2A\\u5143\\u7D20\\u4E0E \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\",children:\"\\u4F2A\\u7C7B\"}),\" \\u4E0D\\u540C\\uFF0C\\u4F2A\\u7C7B\\u7528\\u4E8E\\u6839\\u636E\\u5143\\u7D20\\u7684\",(0,n.jsx)(e.em,{children:\"\\u72B6\\u6001\"}),\"\\uFF08\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\":hover\"}),\"\\u3001\",(0,n.jsx)(e.code,{children:\":focus\"}),\" \\u7B49\\uFF09\\u8BBE\\u7F6E\\u5143\\u7D20\\u7684\\u6837\\u5F0F\\u3002\"]}),`\n`,(0,n.jsx)(e.li,{children:\"\\u5E94\\u4F7F\\u7528\\u53CC\\u5192\\u53F7\\u800C\\u4E0D\\u662F\\u5355\\u5192\\u53F7\\u6765\\u533A\\u5206\\u4F2A\\u7C7B\\u548C\\u4F2A\\u5143\\u7D20\\u3002 \\u5927\\u591A\\u6570\\u6D4F\\u89C8\\u5668\\u90FD\\u652F\\u6301\\u8FD9\\u4E24\\u79CD\\u8BED\\u6CD5\\uFF0C\\u56E0\\u4E3A\\u8FD9\\u79CD\\u533A\\u522B\\u5728\\u65E7\\u7248 W3C \\u89C4\\u8303\\u4E2D\\u5E76\\u4E0D\\u660E\\u786E\\u3002\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"\\u53C2\\u8003\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements\",children:\"\\u4F2A\\u5143\\u7D20 - CSS | MDN\"})}),`\n`]})]})}function a(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(s,{...r})}):s(r)}return b(j);})();\n;return Component;"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -28,5 +28,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/describe-the-difference-between-script-async-and-script-defer/pt-BR.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),x=(r,e)=>{for(var a in e)c(r,a,{get:e[a],enumerable:!0})},i=(r,e,a,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!f.call(r,o)&&o!==a&&c(r,o,{get:()=>e[o],enumerable:!(d=p(e,o))||d.enumerable});return r};var q=(r,e,a)=>(a=r!=null?u(h(r)):{},i(e||!r||!r.__esModule?c(a,\"default\",{value:r,enumerable:!0}):a,r)),b=r=>i(c({},\"__esModule\",{value:!0}),r);var s=g((H,t)=>{t.exports=_jsx_runtime});var L={};x(L,{default:()=>v,frontmatter:()=>M});var n=q(s()),M={title:\"Descreva a diferen\\xE7a entre `<script>`, `<script async>` e `<script defer>`\"};function l(r){let e=Object.assign({p:\"p\",code:\"code\",h2:\"h2\",ul:\"ul\",li:\"li\",a:\"a\"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"tags \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" s\\xE3o usadas para incluir JavaScript em uma p\\xE1gina da web. Os atributos \",(0,n.jsx)(e.code,{children:\"async\"}),\" e \",(0,n.jsx)(e.code,{children:\"defer\"}),\" s\\xE3o usados para mudar como/quando o carregamento e a execu\\xE7\\xE3o do script acontecem.\"]}),`\n`,(0,n.jsxs)(e.h2,{children:[\"Simples \",(0,n.jsx)(e.code,{children:\"<script>\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Para tags normais \",(0,n.jsx)(e.code,{children:\"<script>\"}),\" sem qualquer \",(0,n.jsx)(e.code,{children:\"async\"}),\" ou \",(0,n.jsx)(e.code,{children:\"defer\"}),\", quando forem encontrados, a an\\xE1lise do HTML \\xE9 bloqueada, o script \\xE9 buscado e executado imediatamente. A an\\xE1lise do HTML \\xE9 retomada ap\\xF3s a execu\\xE7\\xE3o do script.\"]}),`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"<script async>\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"No \",(0,n.jsx)(e.code,{children:\"<script async>\"}),\", o script ser\\xE1 buscado em paralelo \\xE0 an\\xE1lise do HTML e ser\\xE1 executado assim que estiver dispon\\xEDvel (potencialmente antes da conclus\\xE3o da an\\xE1lise do HTML) e n\\xE3o ser\\xE1 necessariamente executado na ordem em que aparece no documento HTML. Use \",(0,n.jsx)(e.code,{children:\"async\"}),\" quando o script \\xE9 independente de quaisquer outros scripts na p\\xE1gina, por exemplo, analytics.\"]}),`\n`,(0,n.jsx)(e.h2,{children:(0,n.jsx)(e.code,{children:\"<script defer>\"})}),`\n`,(0,n.jsxs)(e.p,{children:[\"No \",(0,n.jsx)(e.code,{children:\"<script defer>\"}),\", o script ser\\xE1 buscado em paralelo \\xE0 an\\xE1lise HTML e executado quando o documento tiver sido totalmente analisado, mas antes de disparar \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\". Se houver m\\xFAltiplos, cada script adiado \\xE9 executado na ordem em que eles apareceram no documento HTML.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Se um script depende de um DOM totalmente analisado, o atributo \",(0,n.jsx)(e.code,{children:\"defer\"}),\" ser\\xE1 \\xFAtil para garantir que o HTML seja totalmente analisado antes de ser executado.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Notas\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"Geralmente, o atributo \",(0,n.jsx)(e.code,{children:\"async\"}),\" deve ser usado para scripts que n\\xE3o s\\xE3o cr\\xEDticos para a renderiza\\xE7\\xE3o inicial da p\\xE1gina e n\\xE3o dependem um do outro. enquanto o atributo \",(0,n.jsx)(e.code,{children:\"defer\"}),\" deve ser usado para scripts que dependem de / \\xE9 dependente de outro script.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Os atributos \",(0,n.jsx)(e.code,{children:\"async\"}),\" e \",(0,n.jsx)(e.code,{children:\"defer\"}),\" s\\xE3o ignorados para scripts que n\\xE3o t\\xEAm o atributo \",(0,n.jsx)(e.code,{children:\"src\"}),\".\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"<script>\"}),\"s com \",(0,n.jsx)(e.code,{children:\"defer\"}),\" ou \",(0,n.jsx)(e.code,{children:\"async\"}),\" que cont\\xEAm \",(0,n.jsx)(e.code,{children:\"document.write()\"}),' ser\\xE3o ignorados com uma mensagem como \"Uma chamada para o documento.write() de um script externo carregado de forma ass\\xEDncrona foi ignorada\".']}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer\",children:[(0,n.jsx)(e.code,{children:\"<script>\"}),\": O elemento Script | MDN\"]})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html\",children:\"async vs defer attributes\"})}),`\n`]})]})}function y(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(l,r)})):l(r)}var v=y;return b(L);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var q=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var a in e)c(n,a,{get:e[a],enumerable:!0})},i=(n,e,a,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of h(e))!x.call(n,o)&&o!==a&&c(n,o,{get:()=>e[o],enumerable:!(d=m(e,o))||d.enumerable});return n};var b=(n,e,a)=>(a=n!=null?p(f(n)):{},i(e||!n||!n.__esModule?c(a,\"default\",{value:n,enumerable:!0}):a,n)),M=n=>i(c({},\"__esModule\",{value:!0}),n);var s=q((w,t)=>{t.exports=_jsx_runtime});var v={};g(v,{default:()=>u,frontmatter:()=>y});var r=b(s()),y={title:\"Descreva a diferen\\xE7a entre `<script>`, `<script async>` e `<script defer>`\"};function l(n){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",ul:\"ul\",...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.p,{children:[\"tags \",(0,r.jsx)(e.code,{children:\"<script>\"}),\" s\\xE3o usadas para incluir JavaScript em uma p\\xE1gina da web. Os atributos \",(0,r.jsx)(e.code,{children:\"async\"}),\" e \",(0,r.jsx)(e.code,{children:\"defer\"}),\" s\\xE3o usados para mudar como/quando o carregamento e a execu\\xE7\\xE3o do script acontecem.\"]}),`\n`,(0,r.jsxs)(e.h2,{children:[\"Simples \",(0,r.jsx)(e.code,{children:\"<script>\"})]}),`\n`,(0,r.jsxs)(e.p,{children:[\"Para tags normais \",(0,r.jsx)(e.code,{children:\"<script>\"}),\" sem qualquer \",(0,r.jsx)(e.code,{children:\"async\"}),\" ou \",(0,r.jsx)(e.code,{children:\"defer\"}),\", quando forem encontrados, a an\\xE1lise do HTML \\xE9 bloqueada, o script \\xE9 buscado e executado imediatamente. A an\\xE1lise do HTML \\xE9 retomada ap\\xF3s a execu\\xE7\\xE3o do script.\"]}),`\n`,(0,r.jsx)(e.h2,{children:(0,r.jsx)(e.code,{children:\"<script async>\"})}),`\n`,(0,r.jsxs)(e.p,{children:[\"No \",(0,r.jsx)(e.code,{children:\"<script async>\"}),\", o script ser\\xE1 buscado em paralelo \\xE0 an\\xE1lise do HTML e ser\\xE1 executado assim que estiver dispon\\xEDvel (potencialmente antes da conclus\\xE3o da an\\xE1lise do HTML) e n\\xE3o ser\\xE1 necessariamente executado na ordem em que aparece no documento HTML. Use \",(0,r.jsx)(e.code,{children:\"async\"}),\" quando o script \\xE9 independente de quaisquer outros scripts na p\\xE1gina, por exemplo, analytics.\"]}),`\n`,(0,r.jsx)(e.h2,{children:(0,r.jsx)(e.code,{children:\"<script defer>\"})}),`\n`,(0,r.jsxs)(e.p,{children:[\"No \",(0,r.jsx)(e.code,{children:\"<script defer>\"}),\", o script ser\\xE1 buscado em paralelo \\xE0 an\\xE1lise HTML e executado quando o documento tiver sido totalmente analisado, mas antes de disparar \",(0,r.jsx)(e.code,{children:\"DOMContentLoaded\"}),\". Se houver m\\xFAltiplos, cada script adiado \\xE9 executado na ordem em que eles apareceram no documento HTML.\"]}),`\n`,(0,r.jsxs)(e.p,{children:[\"Se um script depende de um DOM totalmente analisado, o atributo \",(0,r.jsx)(e.code,{children:\"defer\"}),\" ser\\xE1 \\xFAtil para garantir que o HTML seja totalmente analisado antes de ser executado.\"]}),`\n`,(0,r.jsx)(e.h2,{children:\"Notas\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[\"Geralmente, o atributo \",(0,r.jsx)(e.code,{children:\"async\"}),\" deve ser usado para scripts que n\\xE3o s\\xE3o cr\\xEDticos para a renderiza\\xE7\\xE3o inicial da p\\xE1gina e n\\xE3o dependem um do outro. enquanto o atributo \",(0,r.jsx)(e.code,{children:\"defer\"}),\" deve ser usado para scripts que dependem de / \\xE9 dependente de outro script.\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"Os atributos \",(0,r.jsx)(e.code,{children:\"async\"}),\" e \",(0,r.jsx)(e.code,{children:\"defer\"}),\" s\\xE3o ignorados para scripts que n\\xE3o t\\xEAm o atributo \",(0,r.jsx)(e.code,{children:\"src\"}),\".\"]}),`\n`,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:\"<script>\"}),\"s com \",(0,r.jsx)(e.code,{children:\"defer\"}),\" ou \",(0,r.jsx)(e.code,{children:\"async\"}),\" que cont\\xEAm \",(0,r.jsx)(e.code,{children:\"document.write()\"}),' ser\\xE3o ignorados com uma mensagem como \"Uma chamada para o documento.write() de um script externo carregado de forma ass\\xEDncrona foi ignorada\".']}),`\n`]}),`\n`,(0,r.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsx)(e.li,{children:(0,r.jsxs)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer\",children:[(0,r.jsx)(e.code,{children:\"<script>\"}),\": O elemento Script | MDN\"]})}),`\n`,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:\"https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html\",children:\"async vs defer attributes\"})}),`\n`]})]})}function u(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(l,{...n})}):l(n)}return M(v);})();\n;return Component;"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -27,5 +27,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/en-US.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var p=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var s in e)r(n,s,{get:e[s],enumerable:!0})},o=(n,e,s,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of w(e))!m.call(n,t)&&t!==s&&r(n,t,{get:()=>e[t],enumerable:!(a=u(e,t))||a.enumerable});return n};var b=(n,e,s)=>(s=n!=null?l(f(n)):{},o(e||!n||!n.__esModule?r(s,\"default\",{value:n,enumerable:!0}):s,n)),v=n=>o(r({},\"__esModule\",{value:!0}),n);var d=p((k,c)=>{c.exports=_jsx_runtime});var y={};g(y,{default:()=>j,frontmatter:()=>x});var i=b(d()),x={title:\"Describe what you like and dislike about the CSS preprocessors you have used.\"};function h(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",a:\"a\",code:\"code\"},n.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"Likes\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Mostly the advantages mentioned in \",(0,i.jsx)(e.a,{href:\"/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors\",children:'\"What are the advantages/disadvantages of using CSS preprocessors?\"'}),\".\"]}),`\n`,(0,i.jsx)(e.li,{children:\"Less is written in JavaScript, which plays well with Node.\"}),`\n`]}),`\n`,(0,i.jsx)(e.h2,{children:\"Dislikes\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Sass relies on \",(0,i.jsx)(e.code,{children:\"node-sass\"}),\", which is a binding for LibSass written in C++. The library has to be recompiled frequently when switching between Node.js versions.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[\"In Less, variable names are prefixed with \",(0,i.jsx)(e.code,{children:\"@\"}),\", which can be confused with native CSS keywords like \",(0,i.jsx)(e.code,{children:\"@media\"}),\", \",(0,i.jsx)(e.code,{children:\"@import\"}),\" and \",(0,i.jsx)(e.code,{children:\"@font-face\"}),\" rule.\"]}),`\n`]})]})}function S(n={}){let{wrapper:e}=n.components||{};return e?(0,i.jsx)(e,Object.assign({},n,{children:(0,i.jsx)(h,n)})):h(n)}var j=S;return v(y);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var s in e)r(n,s,{get:e[s],enumerable:!0})},o=(n,e,s,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of f(e))!p.call(n,t)&&t!==s&&r(n,t,{get:()=>e[t],enumerable:!(a=w(e,t))||a.enumerable});return n};var x=(n,e,s)=>(s=n!=null?u(m(n)):{},o(e||!n||!n.__esModule?r(s,\"default\",{value:n,enumerable:!0}):s,n)),b=n=>o(r({},\"__esModule\",{value:!0}),n);var d=g((j,c)=>{c.exports=_jsx_runtime});var y={};v(y,{default:()=>l,frontmatter:()=>S});var i=x(d()),S={title:\"Describe what you like and dislike about the CSS preprocessors you have used.\"};function h(n){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",ul:\"ul\",...n.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h2,{children:\"Likes\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Mostly the advantages mentioned in \",(0,i.jsx)(e.a,{href:\"/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors\",children:'\"What are the advantages/disadvantages of using CSS preprocessors?\"'}),\".\"]}),`\n`,(0,i.jsx)(e.li,{children:\"Less is written in JavaScript, which plays well with Node.\"}),`\n`]}),`\n`,(0,i.jsx)(e.h2,{children:\"Dislikes\"}),`\n`,(0,i.jsxs)(e.ul,{children:[`\n`,(0,i.jsxs)(e.li,{children:[\"Sass relies on \",(0,i.jsx)(e.code,{children:\"node-sass\"}),\", which is a binding for LibSass written in C++. The library has to be recompiled frequently when switching between Node.js versions.\"]}),`\n`,(0,i.jsxs)(e.li,{children:[\"In Less, variable names are prefixed with \",(0,i.jsx)(e.code,{children:\"@\"}),\", which can be confused with native CSS keywords like \",(0,i.jsx)(e.code,{children:\"@media\"}),\", \",(0,i.jsx)(e.code,{children:\"@import\"}),\" and \",(0,i.jsx)(e.code,{children:\"@font-face\"}),\" rule.\"]}),`\n`]})]})}function l(n={}){let{wrapper:e}=n.components||{};return e?(0,i.jsx)(e,{...n,children:(0,i.jsx)(h,{...n})}):h(n)}return b(y);})();\n;return Component;"
|
||||
}
|
||||
|
|
@ -27,5 +27,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/pt-BR.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),f=(o,e)=>{for(var n in e)r(o,n,{get:e[n],enumerable:!0})},t=(o,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of h(e))!p.call(o,a)&&a!==n&&r(o,a,{get:()=>e[a],enumerable:!(c=m(e,a))||c.enumerable});return o};var q=(o,e,n)=>(n=o!=null?u(v(o)):{},t(e||!o||!o.__esModule?r(n,\"default\",{value:o,enumerable:!0}):n,o)),x=o=>t(r({},\"__esModule\",{value:!0}),o);var d=g((L,i)=>{i.exports=_jsx_runtime});var b={};f(b,{default:()=>_,frontmatter:()=>S});var s=q(d()),S={title:\"Descreva o que voc\\xEA gosta e n\\xE3o gosta sobre os pr\\xE9-processadores CSS que voc\\xEA usou.\"};function l(o){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",a:\"a\",code:\"code\"},o.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.h2,{children:\"Gostei\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsxs)(e.li,{children:[\"A maioria das vantagens mencionadas em \",(0,s.jsx)(e.a,{href:\"/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors\",children:'\"Quais s\\xE3o as vantagens/desvantagens de usar pr\\xE9-processadores CSS?\"'}),\".\"]}),`\n`,(0,s.jsx)(e.li,{children:\"Less \\xE9 escrito em JavaScript, o que o torna compat\\xEDvel com o Node.\"}),`\n`]}),`\n`,(0,s.jsx)(e.h2,{children:\"N\\xE3o gostei\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsxs)(e.li,{children:[\"Sass depende de \",(0,s.jsx)(e.code,{children:\"node-sass\"}),\", que \\xE9 um v\\xEDnculo para o LibSass escrito em C++. A biblioteca tem que ser recalculada com frequ\\xEAncia quando estiver mudando entre as vers\\xF5es do Node.js.\"]}),`\n`,(0,s.jsxs)(e.li,{children:[\"No Less, os nomes de vari\\xE1veis s\\xE3o prefixados com \",(0,s.jsx)(e.code,{children:\"@\"}),\", o que pode ser confundido com palavras-chave nativas do CSS, como a regra \",(0,s.jsx)(e.code,{children:\"@media\"}),\", \",(0,s.jsx)(e.code,{children:\"@import\"}),\" e \",(0,s.jsx)(e.code,{children:\"@font-face\"}),\".\"]}),`\n`]})]})}function j(o={}){let{wrapper:e}=o.components||{};return e?(0,s.jsx)(e,Object.assign({},o,{children:(0,s.jsx)(l,o)})):l(o)}var _=j;return x(b);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),q=(o,e)=>{for(var n in e)r(o,n,{get:e[n],enumerable:!0})},t=(o,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of v(e))!f.call(o,a)&&a!==n&&r(o,a,{get:()=>e[a],enumerable:!(c=h(e,a))||c.enumerable});return o};var x=(o,e,n)=>(n=o!=null?m(p(o)):{},t(e||!o||!o.__esModule?r(n,\"default\",{value:o,enumerable:!0}):n,o)),S=o=>t(r({},\"__esModule\",{value:!0}),o);var i=g((b,d)=>{d.exports=_jsx_runtime});var j={};q(j,{default:()=>u,frontmatter:()=>_});var s=x(i()),_={title:\"Descreva o que voc\\xEA gosta e n\\xE3o gosta sobre os pr\\xE9-processadores CSS que voc\\xEA usou.\"};function l(o){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",ul:\"ul\",...o.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.h2,{children:\"Gostei\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsxs)(e.li,{children:[\"A maioria das vantagens mencionadas em \",(0,s.jsx)(e.a,{href:\"/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors\",children:'\"Quais s\\xE3o as vantagens/desvantagens de usar pr\\xE9-processadores CSS?\"'}),\".\"]}),`\n`,(0,s.jsx)(e.li,{children:\"Less \\xE9 escrito em JavaScript, o que o torna compat\\xEDvel com o Node.\"}),`\n`]}),`\n`,(0,s.jsx)(e.h2,{children:\"N\\xE3o gostei\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsxs)(e.li,{children:[\"Sass depende de \",(0,s.jsx)(e.code,{children:\"node-sass\"}),\", que \\xE9 um v\\xEDnculo para o LibSass escrito em C++. A biblioteca tem que ser recalculada com frequ\\xEAncia quando estiver mudando entre as vers\\xF5es do Node.js.\"]}),`\n`,(0,s.jsxs)(e.li,{children:[\"No Less, os nomes de vari\\xE1veis s\\xE3o prefixados com \",(0,s.jsx)(e.code,{children:\"@\"}),\", o que pode ser confundido com palavras-chave nativas do CSS, como a regra \",(0,s.jsx)(e.code,{children:\"@media\"}),\", \",(0,s.jsx)(e.code,{children:\"@import\"}),\" e \",(0,s.jsx)(e.code,{children:\"@font-face\"}),\".\"]}),`\n`]})]})}function u(o={}){let{wrapper:e}=o.components||{};return e?(0,s.jsx)(e,{...o,children:(0,s.jsx)(l,{...o})}):l(o)}return S(j);})();\n;return Component;"
|
||||
}
|
||||
|
|
@ -27,5 +27,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/zh-CN.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var S=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),j=(n,e)=>{for(var t in e)i(n,t,{get:e[t],enumerable:!0})},o=(n,e,t,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!x.call(n,c)&&c!==t&&i(n,c,{get:()=>e[c],enumerable:!(r=u(e,c))||r.enumerable});return n};var g=(n,e,t)=>(t=n!=null?h(f(n)):{},o(e||!n||!n.__esModule?i(t,\"default\",{value:n,enumerable:!0}):t,n)),p=n=>o(i({},\"__esModule\",{value:!0}),n);var a=S((M,d)=>{d.exports=_jsx_runtime});var v={};j(v,{default:()=>b,frontmatter:()=>_});var s=g(a()),_={title:\"\\u63CF\\u8FF0\\u4F60\\u559C\\u6B22\\u548C\\u4E0D\\u559C\\u6B22\\u4F60\\u4F7F\\u7528\\u8FC7\\u7684 CSS \\u9884\\u5904\\u7406\\u5668\\u7684\\u5730\\u65B9\\u3002\"};function l(n){let e=Object.assign({h2:\"h2\",ul:\"ul\",li:\"li\",a:\"a\",code:\"code\"},n.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.h2,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsxs)(e.li,{children:[\"\\u4E3B\\u8981\\u662F \",(0,s.jsx)(e.a,{href:\"/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors\",children:'\"\\u4F7F\\u7528 CSS \\u9884\\u5904\\u7406\\u5668\\u7684\\u4F18\\u70B9/\\u7F3A\\u70B9\\u662F\\u4EC0\\u4E48\\uFF1F\"'}),\" \\u4E2D\\u63D0\\u5230\\u7684\\u4F18\\u70B9\\u3002\"]}),`\n`,(0,s.jsx)(e.li,{children:\"\\u7F16\\u5199\\u7684 JavaScript \\u8F83\\u5C11\\uFF0C\\u8FD9\\u4E0E Node \\u914D\\u5408\\u5F97\\u5F88\\u597D\\u3002\"}),`\n`]}),`\n`,(0,s.jsx)(e.h2,{children:\"\\u7F3A\\u70B9\"}),`\n`,(0,s.jsxs)(e.ul,{children:[`\n`,(0,s.jsxs)(e.li,{children:[\"Sass \\u4F9D\\u8D56\\u4E8E \",(0,s.jsx)(e.code,{children:\"node-sass\"}),\"\\uFF0C\\u5B83\\u662F\\u7528 C++ \\u7F16\\u5199\\u7684 LibSass \\u7684\\u4E00\\u4E2A\\u7ED1\\u5B9A\\u3002 \\u5728 Node.js \\u7248\\u672C\\u4E4B\\u95F4\\u5207\\u6362\\u65F6\\uFF0C\\u5FC5\\u987B\\u7ECF\\u5E38\\u91CD\\u65B0\\u7F16\\u8BD1\\u8BE5\\u5E93\\u3002\"]}),`\n`,(0,s.jsxs)(e.li,{children:[\"\\u5728 Less \\u4E2D\\uFF0C\\u53D8\\u91CF\\u540D\\u4EE5 \",(0,s.jsx)(e.code,{children:\"@\"}),\" \\u4E3A\\u524D\\u7F00\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u4E0E \",(0,s.jsx)(e.code,{children:\"@media\"}),\"\\u3001\",(0,s.jsx)(e.code,{children:\"@import\"}),\" \\u548C \",(0,s.jsx)(e.code,{children:\"@font-face\"}),\" \\u89C4\\u5219\\u7B49\\u539F\\u751F CSS \\u5173\\u952E\\u5B57\\u6DF7\\u6DC6\\u3002\"]}),`\n`]})]})}function C(n={}){let{wrapper:e}=n.components||{};return e?(0,s.jsx)(e,Object.assign({},n,{children:(0,s.jsx)(l,n)})):l(n)}var b=C;return p(v);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var p=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),_=(n,e)=>{for(var t in e)i(n,t,{get:e[t],enumerable:!0})},o=(n,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of f(e))!S.call(n,c)&&c!==t&&i(n,c,{get:()=>e[c],enumerable:!(s=m(e,c))||s.enumerable});return n};var j=(n,e,t)=>(t=n!=null?u(x(n)):{},o(e||!n||!n.__esModule?i(t,\"default\",{value:n,enumerable:!0}):t,n)),C=n=>o(i({},\"__esModule\",{value:!0}),n);var a=p((M,d)=>{d.exports=_jsx_runtime});var v={};_(v,{default:()=>h,frontmatter:()=>g});var r=j(a()),g={title:\"\\u63CF\\u8FF0\\u4F60\\u559C\\u6B22\\u548C\\u4E0D\\u559C\\u6B22\\u4F60\\u4F7F\\u7528\\u8FC7\\u7684 CSS \\u9884\\u5904\\u7406\\u5668\\u7684\\u5730\\u65B9\\u3002\"};function l(n){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",ul:\"ul\",...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[\"\\u4E3B\\u8981\\u662F \",(0,r.jsx)(e.a,{href:\"/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors\",children:'\"\\u4F7F\\u7528 CSS \\u9884\\u5904\\u7406\\u5668\\u7684\\u4F18\\u70B9/\\u7F3A\\u70B9\\u662F\\u4EC0\\u4E48\\uFF1F\"'}),\" \\u4E2D\\u63D0\\u5230\\u7684\\u4F18\\u70B9\\u3002\"]}),`\n`,(0,r.jsx)(e.li,{children:\"\\u7F16\\u5199\\u7684 JavaScript \\u8F83\\u5C11\\uFF0C\\u8FD9\\u4E0E Node \\u914D\\u5408\\u5F97\\u5F88\\u597D\\u3002\"}),`\n`]}),`\n`,(0,r.jsx)(e.h2,{children:\"\\u7F3A\\u70B9\"}),`\n`,(0,r.jsxs)(e.ul,{children:[`\n`,(0,r.jsxs)(e.li,{children:[\"Sass \\u4F9D\\u8D56\\u4E8E \",(0,r.jsx)(e.code,{children:\"node-sass\"}),\"\\uFF0C\\u5B83\\u662F\\u7528 C++ \\u7F16\\u5199\\u7684 LibSass \\u7684\\u4E00\\u4E2A\\u7ED1\\u5B9A\\u3002 \\u5728 Node.js \\u7248\\u672C\\u4E4B\\u95F4\\u5207\\u6362\\u65F6\\uFF0C\\u5FC5\\u987B\\u7ECF\\u5E38\\u91CD\\u65B0\\u7F16\\u8BD1\\u8BE5\\u5E93\\u3002\"]}),`\n`,(0,r.jsxs)(e.li,{children:[\"\\u5728 Less \\u4E2D\\uFF0C\\u53D8\\u91CF\\u540D\\u4EE5 \",(0,r.jsx)(e.code,{children:\"@\"}),\" \\u4E3A\\u524D\\u7F00\\uFF0C\\u8FD9\\u53EF\\u80FD\\u4F1A\\u4E0E \",(0,r.jsx)(e.code,{children:\"@media\"}),\"\\u3001\",(0,r.jsx)(e.code,{children:\"@import\"}),\" \\u548C \",(0,r.jsx)(e.code,{children:\"@font-face\"}),\" \\u89C4\\u5219\\u7B49\\u539F\\u751F CSS \\u5173\\u952E\\u5B57\\u6DF7\\u6DC6\\u3002\"]}),`\n`]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(l,{...n})}):l(n)}return C(v);})();\n;return Component;"
|
||||
}
|
||||
|
|
@ -27,5 +27,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/en-US.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),u=(n,e)=>{for(var i in e)a(n,i,{get:e[i],enumerable:!0})},c=(n,e,i,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!g.call(n,o)&&o!==i&&a(n,o,{get:()=>e[o],enumerable:!(s=m(e,o))||s.enumerable});return n};var k=(n,e,i)=>(i=n!=null?d(f(n)):{},c(e||!n||!n.__esModule?a(i,\"default\",{value:n,enumerable:!0}):i,n)),w=n=>c(a({},\"__esModule\",{value:!0}),n);var l=x((C,r)=>{r.exports=_jsx_runtime});var S={};u(S,{default:()=>v,frontmatter:()=>_});var t=k(l()),_={title:\"Describe `z-index` and how stacking context is formed.\"};function h(n){let e=Object.assign({p:\"p\",code:\"code\",em:\"em\",strong:\"strong\",a:\"a\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[\"The \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" property in CSS controls the vertical stacking order of elements that overlap. \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" only affects positioned elements (elements which have a \",(0,t.jsx)(e.code,{children:\"position\"}),\" value which is not \",(0,t.jsx)(e.code,{children:\"static\"}),\") and its descendants or flex items.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Without any \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning (and their children) will always appear on top of elements with default static positioning, regardless of the HTML hierarchy.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"A stacking context is an element that contains a set of layers. Within a local stacking context, the \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" values of its children are set relative to that element rather than to the document root. Layers outside of that context \\u2014 i.e. sibling elements of a local stacking context \\u2014 can't sit between layers within it. If an element B sits on top of element A, a child element of element A, element C, can never be higher than element B even if element C has a higher \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" than element B.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Each stacking context is self-contained - after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context. A handful of CSS properties trigger a new stacking context, such as \",(0,t.jsx)(e.code,{children:\"opacity\"}),\" less than 1, \",(0,t.jsx)(e.code,{children:\"filter\"}),\" that is not \",(0,t.jsx)(e.code,{children:\"none\"}),\", and \",(0,t.jsx)(e.code,{children:\"transform\"}),\" that is not\",(0,t.jsx)(e.code,{children:\"none\"}),\".\"]}),`\n`,(0,t.jsx)(e.p,{children:(0,t.jsxs)(e.em,{children:[(0,t.jsx)(e.strong,{children:\"Note\"}),\": What exactly qualifies an element to create a stacking context is listed in this long set of \",(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context\",children:\"rules\"}),\".\"]})})]})}function y(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var v=y;return w(S);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var u=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),k=(n,e)=>{for(var i in e)a(n,i,{get:e[i],enumerable:!0})},s=(n,e,i,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of f(e))!x.call(n,o)&&o!==i&&a(n,o,{get:()=>e[o],enumerable:!(c=p(e,o))||c.enumerable});return n};var w=(n,e,i)=>(i=n!=null?m(g(n)):{},s(e||!n||!n.__esModule?a(i,\"default\",{value:n,enumerable:!0}):i,n)),_=n=>s(a({},\"__esModule\",{value:!0}),n);var l=u((z,r)=>{r.exports=_jsx_runtime});var v={};k(v,{default:()=>d,frontmatter:()=>y});var t=w(l()),y={title:\"Describe `z-index` and how stacking context is formed.\"};function h(n){let e={a:\"a\",code:\"code\",em:\"em\",p:\"p\",strong:\"strong\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[\"The \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" property in CSS controls the vertical stacking order of elements that overlap. \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" only affects positioned elements (elements which have a \",(0,t.jsx)(e.code,{children:\"position\"}),\" value which is not \",(0,t.jsx)(e.code,{children:\"static\"}),\") and its descendants or flex items.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Without any \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning (and their children) will always appear on top of elements with default static positioning, regardless of the HTML hierarchy.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"A stacking context is an element that contains a set of layers. Within a local stacking context, the \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" values of its children are set relative to that element rather than to the document root. Layers outside of that context \\u2014 i.e. sibling elements of a local stacking context \\u2014 can't sit between layers within it. If an element B sits on top of element A, a child element of element A, element C, can never be higher than element B even if element C has a higher \",(0,t.jsx)(e.code,{children:\"z-index\"}),\" than element B.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Each stacking context is self-contained - after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context. A handful of CSS properties trigger a new stacking context, such as \",(0,t.jsx)(e.code,{children:\"opacity\"}),\" less than 1, \",(0,t.jsx)(e.code,{children:\"filter\"}),\" that is not \",(0,t.jsx)(e.code,{children:\"none\"}),\", and \",(0,t.jsx)(e.code,{children:\"transform\"}),\" that is not\",(0,t.jsx)(e.code,{children:\"none\"}),\".\"]}),`\n`,(0,t.jsx)(e.p,{children:(0,t.jsxs)(e.em,{children:[(0,t.jsx)(e.strong,{children:\"Note\"}),\": What exactly qualifies an element to create a stacking context is listed in this long set of \",(0,t.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context\",children:\"rules\"}),\".\"]})})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(h,{...n})}):h(n)}return _(v);})();\n;return Component;"
|
||||
}
|
||||
|
|
@ -27,5 +27,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/pt-BR.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var l=Object.create;var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),q=(n,e)=>{for(var t in e)d(n,t,{get:e[t],enumerable:!0})},i=(n,e,t,m)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!x.call(n,a)&&a!==t&&d(n,a,{get:()=>e[a],enumerable:!(m=p(e,a))||m.enumerable});return n};var g=(n,e,t)=>(t=n!=null?l(h(n)):{},i(e||!n||!n.__esModule?d(t,\"default\",{value:n,enumerable:!0}):t,n)),_=n=>i(d({},\"__esModule\",{value:!0}),n);var c=f((b,s)=>{s.exports=_jsx_runtime});var C={};q(C,{default:()=>v,frontmatter:()=>S});var o=g(c()),S={title:\"Descreva `z-index` e como o contexto de empilhamento \\xE9 formado.\"};function r(n){let e=Object.assign({p:\"p\",code:\"code\",em:\"em\",strong:\"strong\",a:\"a\"},n.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"A propriedade \",(0,o.jsx)(e.code,{children:\"z-index\"}),\" no CSS controla a ordem de empilhamento vertical dos elementos que se sobrep\\xF5em. 'z-index' afeta apenas elementos posicionados (elementos que t\\xEAm um valor de 'posi\\xE7\\xE3o' que n\\xE3o \\xE9 'static') e seus descendentes ou itens flex\\xEDveis.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Sem qualquer valor de \",(0,o.jsx)(e.code,{children:\"z-index\"}),\", pilha de elementos na ordem de exibi\\xE7\\xE3o no DOM (o menor n\\xEDvel abaixo na mesma hierarquia aparece no topo). Elementos com posicionamento n\\xE3o est\\xE1tico (e seus filhos) sempre aparecer\\xE3o no topo dos elementos com posi\\xE7\\xE3o est\\xE1tica padr\\xE3o, independente da hierarquia HTML.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Um contexto de empilhamento \\xE9 um elemento que cont\\xE9m um conjunto de camadas. Dentro de um contexto local de empilhamento, os valores de \",(0,o.jsx)(e.code,{children:\"z-index\"}),\" de seus filhos s\\xE3o definidos em rela\\xE7\\xE3o a esse elemento, ao inv\\xE9s da raiz do documento. Camadas fora desse contexto \\u2014 ou seja, elementos irm\\xE3s de um contexto local de empilhamento \\u2014 n\\xE3o 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 \",(0,o.jsx)(e.code,{children:\"z-index\"}),\" maior que o elemento B.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Cada contexto de empilhamento \\xE9 auto-contido - ap\\xF3s o conte\\xFAdo do elemento ser empilhado, todo o elemento \\xE9 considerado na ordem de empilhamento do contexto de empilhamento do pai. Algumas propriedades CSS desencadeiam um novo contexto de empilhamento, como \",(0,o.jsx)(e.code,{children:\"opacity\"}),\" menor que 1, \",(0,o.jsx)(e.code,{children:\"filter\"}),\" que n\\xE3o \\xE9 \",(0,o.jsx)(e.code,{children:\"none\"}),\", e \",(0,o.jsx)(e.code,{children:\"transform\"}),\" que n\\xE3o \\xE9 \",(0,o.jsx)(e.code,{children:\"none\"}),\".\"]}),`\n`,(0,o.jsx)(e.p,{children:(0,o.jsxs)(e.em,{children:[(0,o.jsx)(e.strong,{children:\"Nota\"}),\": O que exatamente qualifica-se como um elemento para criar um contexto de empilhamento est\\xE1 listado neste longo conjunto de \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context\",children:\"rules\"}),\".\"]})})]})}function j(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(r,n)})):r(n)}var v=j;return _(C);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var p=Object.create;var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var q=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),_=(n,e)=>{for(var t in e)d(n,t,{get:e[t],enumerable:!0})},i=(n,e,t,m)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of h(e))!f.call(n,a)&&a!==t&&d(n,a,{get:()=>e[a],enumerable:!(m=u(e,a))||m.enumerable});return n};var g=(n,e,t)=>(t=n!=null?p(x(n)):{},i(e||!n||!n.__esModule?d(t,\"default\",{value:n,enumerable:!0}):t,n)),S=n=>i(d({},\"__esModule\",{value:!0}),n);var c=q((j,r)=>{r.exports=_jsx_runtime});var C={};_(C,{default:()=>l,frontmatter:()=>v});var o=g(c()),v={title:\"Descreva `z-index` e como o contexto de empilhamento \\xE9 formado.\"};function s(n){let e={a:\"a\",code:\"code\",em:\"em\",p:\"p\",strong:\"strong\",...n.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"A propriedade \",(0,o.jsx)(e.code,{children:\"z-index\"}),\" no CSS controla a ordem de empilhamento vertical dos elementos que se sobrep\\xF5em. 'z-index' afeta apenas elementos posicionados (elementos que t\\xEAm um valor de 'posi\\xE7\\xE3o' que n\\xE3o \\xE9 'static') e seus descendentes ou itens flex\\xEDveis.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Sem qualquer valor de \",(0,o.jsx)(e.code,{children:\"z-index\"}),\", pilha de elementos na ordem de exibi\\xE7\\xE3o no DOM (o menor n\\xEDvel abaixo na mesma hierarquia aparece no topo). Elementos com posicionamento n\\xE3o est\\xE1tico (e seus filhos) sempre aparecer\\xE3o no topo dos elementos com posi\\xE7\\xE3o est\\xE1tica padr\\xE3o, independente da hierarquia HTML.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Um contexto de empilhamento \\xE9 um elemento que cont\\xE9m um conjunto de camadas. Dentro de um contexto local de empilhamento, os valores de \",(0,o.jsx)(e.code,{children:\"z-index\"}),\" de seus filhos s\\xE3o definidos em rela\\xE7\\xE3o a esse elemento, ao inv\\xE9s da raiz do documento. Camadas fora desse contexto \\u2014 ou seja, elementos irm\\xE3s de um contexto local de empilhamento \\u2014 n\\xE3o 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 \",(0,o.jsx)(e.code,{children:\"z-index\"}),\" maior que o elemento B.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Cada contexto de empilhamento \\xE9 auto-contido - ap\\xF3s o conte\\xFAdo do elemento ser empilhado, todo o elemento \\xE9 considerado na ordem de empilhamento do contexto de empilhamento do pai. Algumas propriedades CSS desencadeiam um novo contexto de empilhamento, como \",(0,o.jsx)(e.code,{children:\"opacity\"}),\" menor que 1, \",(0,o.jsx)(e.code,{children:\"filter\"}),\" que n\\xE3o \\xE9 \",(0,o.jsx)(e.code,{children:\"none\"}),\", e \",(0,o.jsx)(e.code,{children:\"transform\"}),\" que n\\xE3o \\xE9 \",(0,o.jsx)(e.code,{children:\"none\"}),\".\"]}),`\n`,(0,o.jsx)(e.p,{children:(0,o.jsxs)(e.em,{children:[(0,o.jsx)(e.strong,{children:\"Nota\"}),\": O que exatamente qualifica-se como um elemento para criar um contexto de empilhamento est\\xE1 listado neste longo conjunto de \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context\",children:\"rules\"}),\".\"]})})]})}function l(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(s,{...n})}):s(n)}return S(C);})();\n;return Component;"
|
||||
}
|
||||
|
|
@ -27,5 +27,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/zh-CN.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var a=Object.create;var o=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var g=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),f=(c,e)=>{for(var t in e)o(c,t,{get:e[t],enumerable:!0})},r=(c,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of m(e))!_.call(c,d)&&d!==t&&o(c,d,{get:()=>e[d],enumerable:!(i=x(e,d))||i.enumerable});return c};var S=(c,e,t)=>(t=c!=null?a(p(c)):{},r(e||!c||!c.__esModule?o(t,\"default\",{value:c,enumerable:!0}):t,c)),z=c=>r(o({},\"__esModule\",{value:!0}),c);var l=g((B,s)=>{s.exports=_jsx_runtime});var M={};f(M,{default:()=>u,frontmatter:()=>C});var n=S(l()),C={title:\"\\u63CF\\u8FF0 `z-index` \\u4EE5\\u53CA\\u5982\\u4F55\\u5F62\\u6210\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u3002\"};function h(c){let e=Object.assign({p:\"p\",code:\"code\",em:\"em\",strong:\"strong\",a:\"a\"},c.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"CSS \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u5C5E\\u6027\\u63A7\\u5236\\u91CD\\u53E0\\u5143\\u7D20\\u7684\\u5782\\u76F4\\u5806\\u53E0\\u987A\\u5E8F\\u3002\",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u4EC5\\u5F71\\u54CD\\u5DF2\\u5B9A\\u4F4D\\u7684\\u5143\\u7D20\\uFF08\\u5177\\u6709 \",(0,n.jsx)(e.code,{children:\"position\"}),\" \\u503C\\u4E0D\\u4E3A \",(0,n.jsx)(e.code,{children:\"static\"}),\" \\u7684\\u5143\\u7D20\\uFF09\\u53CA\\u5176\\u540E\\u4EE3\\u6216 flex \\u9879\\u76EE\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6CA1\\u6709\\u4EFB\\u4F55 \",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u503C\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5143\\u7D20\\u6309\\u7167\\u5B83\\u4EEC\\u5728 DOM \\u4E2D\\u51FA\\u73B0\\u7684\\u987A\\u5E8F\\u5806\\u53E0\\uFF08\\u5728\\u540C\\u4E00\\u5C42\\u7EA7\\u4E2D\\uFF0C\\u6700\\u4E0B\\u9762\\u7684\\u5143\\u7D20\\u51FA\\u73B0\\u5728\\u6700\\u4E0A\\u9762\\uFF09\\u3002\\u5177\\u6709\\u975E\\u9759\\u6001\\u5B9A\\u4F4D\\u7684\\u5143\\u7D20\\uFF08\\u53CA\\u5176\\u5B50\\u5143\\u7D20\\uFF09\\u5C06\\u59CB\\u7EC8\\u51FA\\u73B0\\u5728\\u5177\\u6709\\u9ED8\\u8BA4\\u9759\\u6001\\u5B9A\\u4F4D\\u7684\\u5143\\u7D20\\u4E4B\\u4E0A\\uFF0C\\u800C\\u4E0D\\u7BA1 HTML \\u5C42\\u6B21\\u7ED3\\u6784\\u5982\\u4F55\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u662F\\u5305\\u542B\\u4E00\\u7EC4\\u5C42\\u7684\\u5143\\u7D20\\u3002\\u5728\\u5C40\\u90E8\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u4E2D\\uFF0C\\u5176\\u5B50\\u5143\\u7D20\\u7684 \",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u503C\\u662F\\u76F8\\u5BF9\\u4E8E\\u8BE5\\u5143\\u7D20\\u8BBE\\u7F6E\\u7684\\uFF0C\\u800C\\u4E0D\\u662F\\u76F8\\u5BF9\\u4E8E\\u6587\\u6863\\u6839\\u5143\\u7D20\\u3002\\u8BE5\\u4E0A\\u4E0B\\u6587\\u4E4B\\u5916\\u7684\\u5C42\\u2014\\u2014\\u5373\\u5C40\\u90E8\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u7684\\u540C\\u7EA7\\u5143\\u7D20\\u2014\\u2014\\u4E0D\\u80FD\\u4F4D\\u4E8E\\u5176\\u5185\\u7684\\u5C42\\u4E4B\\u95F4\\u3002\\u5982\\u679C\\u5143\\u7D20 B \\u4F4D\\u4E8E\\u5143\\u7D20 A \\u7684\\u9876\\u90E8\\uFF0C\\u800C\\u5143\\u7D20 A \\u7684\\u5B50\\u5143\\u7D20 C \\u6C38\\u8FDC\\u4E0D\\u80FD\\u9AD8\\u4E8E\\u5143\\u7D20 B\\uFF0C\\u5373\\u4F7F\\u5143\\u7D20 C \\u7684 \",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u6BD4\\u5143\\u7D20 B \\u9AD8\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6BCF\\u4E2A\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u90FD\\u662F\\u81EA\\u5305\\u542B\\u7684 - \\u5728\\u5143\\u7D20\\u7684content\\u5806\\u53E0\\u540E\\uFF0C\\u6574\\u4E2A\\u5143\\u7D20\\u88AB\\u8BA4\\u4E3A\\u5728\\u7236\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u7684\\u5806\\u53E0\\u987A\\u5E8F\\u4E2D\\u3002\\u5C11\\u6570 CSS \\u5C5E\\u6027\\u4F1A\\u89E6\\u53D1\\u65B0\\u7684\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"opacity\"}),\" \\u5C0F\\u4E8E 1\\u3001\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"none\"}),\" \\u7684 \",(0,n.jsx)(e.code,{children:\"filter\"}),\" \\u4EE5\\u53CA\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"none\"}),\" \\u7684 \",(0,n.jsx)(e.code,{children:\"transform\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.em,{children:[(0,n.jsx)(e.strong,{children:\"\\u6CE8\\u610F\"}),\"\\uFF1A\\u786E\\u5207\\u5730\\u8BF4\\uFF0C\\u4EC0\\u4E48\\u4F7F\\u4E00\\u4E2A\\u5143\\u7D20\\u80FD\\u591F\\u521B\\u5EFA\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u5217\\u5728\\u8FD9\\u4E2A\\u957F\\u957F\\u7684 \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context\",children:\"\\u89C4\\u5219\"}),\" \\u96C6\\u4E2D\\u3002\"]})})]})}function j(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,Object.assign({},c,{children:(0,n.jsx)(h,c)})):h(c)}var u=j;return z(M);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var x=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports),S=(c,e)=>{for(var t in e)o(c,t,{get:e[t],enumerable:!0})},r=(c,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of p(e))!g.call(c,d)&&d!==t&&o(c,d,{get:()=>e[d],enumerable:!(i=m(e,d))||i.enumerable});return c};var z=(c,e,t)=>(t=c!=null?x(_(c)):{},r(e||!c||!c.__esModule?o(t,\"default\",{value:c,enumerable:!0}):t,c)),C=c=>r(o({},\"__esModule\",{value:!0}),c);var h=f((B,l)=>{l.exports=_jsx_runtime});var j={};S(j,{default:()=>a,frontmatter:()=>u});var n=z(h()),u={title:\"\\u63CF\\u8FF0 `z-index` \\u4EE5\\u53CA\\u5982\\u4F55\\u5F62\\u6210\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u3002\"};function s(c){let e={a:\"a\",code:\"code\",em:\"em\",p:\"p\",strong:\"strong\",...c.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"CSS \\u4E2D\\u7684 \",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u5C5E\\u6027\\u63A7\\u5236\\u91CD\\u53E0\\u5143\\u7D20\\u7684\\u5782\\u76F4\\u5806\\u53E0\\u987A\\u5E8F\\u3002\",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u4EC5\\u5F71\\u54CD\\u5DF2\\u5B9A\\u4F4D\\u7684\\u5143\\u7D20\\uFF08\\u5177\\u6709 \",(0,n.jsx)(e.code,{children:\"position\"}),\" \\u503C\\u4E0D\\u4E3A \",(0,n.jsx)(e.code,{children:\"static\"}),\" \\u7684\\u5143\\u7D20\\uFF09\\u53CA\\u5176\\u540E\\u4EE3\\u6216 flex \\u9879\\u76EE\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5728\\u6CA1\\u6709\\u4EFB\\u4F55 \",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u503C\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5143\\u7D20\\u6309\\u7167\\u5B83\\u4EEC\\u5728 DOM \\u4E2D\\u51FA\\u73B0\\u7684\\u987A\\u5E8F\\u5806\\u53E0\\uFF08\\u5728\\u540C\\u4E00\\u5C42\\u7EA7\\u4E2D\\uFF0C\\u6700\\u4E0B\\u9762\\u7684\\u5143\\u7D20\\u51FA\\u73B0\\u5728\\u6700\\u4E0A\\u9762\\uFF09\\u3002\\u5177\\u6709\\u975E\\u9759\\u6001\\u5B9A\\u4F4D\\u7684\\u5143\\u7D20\\uFF08\\u53CA\\u5176\\u5B50\\u5143\\u7D20\\uFF09\\u5C06\\u59CB\\u7EC8\\u51FA\\u73B0\\u5728\\u5177\\u6709\\u9ED8\\u8BA4\\u9759\\u6001\\u5B9A\\u4F4D\\u7684\\u5143\\u7D20\\u4E4B\\u4E0A\\uFF0C\\u800C\\u4E0D\\u7BA1 HTML \\u5C42\\u6B21\\u7ED3\\u6784\\u5982\\u4F55\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u662F\\u5305\\u542B\\u4E00\\u7EC4\\u5C42\\u7684\\u5143\\u7D20\\u3002\\u5728\\u5C40\\u90E8\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u4E2D\\uFF0C\\u5176\\u5B50\\u5143\\u7D20\\u7684 \",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u503C\\u662F\\u76F8\\u5BF9\\u4E8E\\u8BE5\\u5143\\u7D20\\u8BBE\\u7F6E\\u7684\\uFF0C\\u800C\\u4E0D\\u662F\\u76F8\\u5BF9\\u4E8E\\u6587\\u6863\\u6839\\u5143\\u7D20\\u3002\\u8BE5\\u4E0A\\u4E0B\\u6587\\u4E4B\\u5916\\u7684\\u5C42\\u2014\\u2014\\u5373\\u5C40\\u90E8\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u7684\\u540C\\u7EA7\\u5143\\u7D20\\u2014\\u2014\\u4E0D\\u80FD\\u4F4D\\u4E8E\\u5176\\u5185\\u7684\\u5C42\\u4E4B\\u95F4\\u3002\\u5982\\u679C\\u5143\\u7D20 B \\u4F4D\\u4E8E\\u5143\\u7D20 A \\u7684\\u9876\\u90E8\\uFF0C\\u800C\\u5143\\u7D20 A \\u7684\\u5B50\\u5143\\u7D20 C \\u6C38\\u8FDC\\u4E0D\\u80FD\\u9AD8\\u4E8E\\u5143\\u7D20 B\\uFF0C\\u5373\\u4F7F\\u5143\\u7D20 C \\u7684 \",(0,n.jsx)(e.code,{children:\"z-index\"}),\" \\u6BD4\\u5143\\u7D20 B \\u9AD8\\u3002\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u6BCF\\u4E2A\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u90FD\\u662F\\u81EA\\u5305\\u542B\\u7684 - \\u5728\\u5143\\u7D20\\u7684content\\u5806\\u53E0\\u540E\\uFF0C\\u6574\\u4E2A\\u5143\\u7D20\\u88AB\\u8BA4\\u4E3A\\u5728\\u7236\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u7684\\u5806\\u53E0\\u987A\\u5E8F\\u4E2D\\u3002\\u5C11\\u6570 CSS \\u5C5E\\u6027\\u4F1A\\u89E6\\u53D1\\u65B0\\u7684\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\uFF0C\\u4F8B\\u5982 \",(0,n.jsx)(e.code,{children:\"opacity\"}),\" \\u5C0F\\u4E8E 1\\u3001\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"none\"}),\" \\u7684 \",(0,n.jsx)(e.code,{children:\"filter\"}),\" \\u4EE5\\u53CA\\u4E0D\\u662F \",(0,n.jsx)(e.code,{children:\"none\"}),\" \\u7684 \",(0,n.jsx)(e.code,{children:\"transform\"}),\"\\u3002\"]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.em,{children:[(0,n.jsx)(e.strong,{children:\"\\u6CE8\\u610F\"}),\"\\uFF1A\\u786E\\u5207\\u5730\\u8BF4\\uFF0C\\u4EC0\\u4E48\\u4F7F\\u4E00\\u4E2A\\u5143\\u7D20\\u80FD\\u591F\\u521B\\u5EFA\\u5806\\u53E0\\u4E0A\\u4E0B\\u6587\\u5217\\u5728\\u8FD9\\u4E2A\\u957F\\u957F\\u7684 \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context\",children:\"\\u89C4\\u5219\"}),\" \\u96C6\\u4E2D\\u3002\"]})})]})}function a(c={}){let{wrapper:e}=c.components||{};return e?(0,n.jsx)(e,{...c,children:(0,n.jsx)(s,{...c})}):s(c)}return C(j);})();\n;return Component;"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -30,5 +30,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/difference-between-document-load-event-and-document-domcontentloaded-event/pt-BR.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var l=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),h=(o,e)=>{for(var t in e)a(o,t,{get:e[t],enumerable:!0})},s=(o,e,t,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of p(e))!x.call(o,d)&&d!==t&&a(o,d,{get:()=>e[d],enumerable:!(r=u(e,d))||r.enumerable});return o};var j=(o,e,t)=>(t=o!=null?l(f(o)):{},s(e||!o||!o.__esModule?a(t,\"default\",{value:o,enumerable:!0}):t,o)),M=o=>s(a({},\"__esModule\",{value:!0}),o);var i=g((L,c)=>{c.exports=_jsx_runtime});var D={};h(D,{default:()=>v,frontmatter:()=>O});var n=j(i()),O={title:\"Qual a diferen\\xE7a entre o evento `load` do documento e o evento `DOMContentLoaded` do documento?\"};function m(o){let e=Object.assign({p:\"p\",code:\"code\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"O evento \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\" \\xE9 disparado quando o documento HTML inicial foi completamente carregado e analisado, sem esperar que folhas de estilo, imagens e subframes terminem de carregar.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"O evento \",(0,n.jsx)(e.code,{children:\"load\"}),\" do \",(0,n.jsx)(e.code,{children:\"window\"}),\" s\\xF3 \\xE9 disparado ap\\xF3s o DOM e todos os recursos e ativos dependentes terem sido carregados.\"]})]})}function _(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(m,o)})):m(o)}var v=_;return M(D);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var M=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),_=(o,e)=>{for(var t in e)a(o,t,{get:e[t],enumerable:!0})},s=(o,e,t,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let d of f(e))!h.call(o,d)&&d!==t&&a(o,d,{get:()=>e[d],enumerable:!(r=p(e,d))||r.enumerable});return o};var g=(o,e,t)=>(t=o!=null?u(x(o)):{},s(e||!o||!o.__esModule?a(t,\"default\",{value:o,enumerable:!0}):t,o)),j=o=>s(a({},\"__esModule\",{value:!0}),o);var i=M((C,c)=>{c.exports=_jsx_runtime});var D={};_(D,{default:()=>l,frontmatter:()=>v});var n=g(i()),v={title:\"Qual a diferen\\xE7a entre o evento `load` do documento e o evento `DOMContentLoaded` do documento?\"};function m(o){let e={code:\"code\",p:\"p\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"O evento \",(0,n.jsx)(e.code,{children:\"DOMContentLoaded\"}),\" \\xE9 disparado quando o documento HTML inicial foi completamente carregado e analisado, sem esperar que folhas de estilo, imagens e subframes terminem de carregar.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"O evento \",(0,n.jsx)(e.code,{children:\"load\"}),\" do \",(0,n.jsx)(e.code,{children:\"window\"}),\" s\\xF3 \\xE9 disparado ap\\xF3s o DOM e todos os recursos e ativos dependentes terem sido carregados.\"]})]})}function l(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(m,{...o})}):m(o)}return j(D);})();\n;return Component;"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -28,5 +28,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/difference-between-function-person-var-person-person-and-var-person-new-person/pt-BR.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var r in e)s(n,r,{get:e[r],enumerable:!0})},t=(n,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!f.call(n,a)&&a!==r&&s(n,a,{get:()=>e[a],enumerable:!(c=l(e,a))||c.enumerable});return n};var P=(n,e,r)=>(r=n!=null?m(h(n)):{},t(e||!n||!n.__esModule?s(r,\"default\",{value:n,enumerable:!0}):r,n)),j=n=>t(s({},\"__esModule\",{value:!0}),n);var i=v((q,d)=>{d.exports=_jsx_runtime});var w={};g(w,{default:()=>_,frontmatter:()=>x});var o=P(i()),x={title:\"Diferen\\xE7a entre: `function Person(){}`, `var person = Person()`, e `var person = new Person()`?\"};function u(n){let e=Object.assign({p:\"p\",code:\"code\",pre:\"pre\"},n.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Esta pergunta \\xE9 muito vaga. Nossa melhor suposi\\xE7\\xE3o sobre a inten\\xE7\\xE3o dessa pergunta \\xE9 que ela est\\xE1 perguntando sobre construtores em JavaScript. Tecnicamente falando, \",(0,o.jsx)(e.code,{children:\"function Person(){}\"}),\" \\xE9 apenas uma declara\\xE7\\xE3o de fun\\xE7\\xE3o normal. A conven\\xE7\\xE3o \\xE9 usar PascalCase para fun\\xE7\\xF5es que se destinam a ser usadas como construtores.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\"var person = Person()\"}),\" invoca o \",(0,o.jsx)(e.code,{children:\"Person\"}),\" como uma fun\\xE7\\xE3o, e n\\xE3o como um construtor. Invocar como tal \\xE9 um erro comum se a fun\\xE7\\xE3o pretende ser usada como um construtor. Normalmente, o construtor n\\xE3o devolve nada. Assim, invocando o construtor como uma fun\\xE7\\xE3o normal retornar\\xE1 \",(0,o.jsx)(e.code,{children:\"undefined\"}),\" e que ser\\xE1 atribu\\xEDdo \\xE0 vari\\xE1vel pretendida como a inst\\xE2ncia.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\"var person = new Person()\"}),\" cria uma inst\\xE2ncia do objeto \",(0,o.jsx)(e.code,{children:\"Person\"}),\" usando o operador \",(0,o.jsx)(e.code,{children:\"new\"}),\", que herda de \",(0,o.jsx)(e.code,{children:\"Person.prototype\"}),\". Uma alternativa seria usar \",(0,o.jsx)(e.code,{children:\"Object.create\"}),\", tais como: \",(0,o.jsx)(e.code,{children:\"Object.create(Person.prototype)\"}),\".\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n this.name = name;\n}\n\nvar person = Person('John');\nconsole.log(person); // undefined\nconsole.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined\n\nvar person = new Person('John');\nconsole.log(person); // Person { name: \"John\" }\nconsole.log(person.name); // \"john\"\n`})})]})}function b(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,Object.assign({},n,{children:(0,o.jsx)(u,n)})):u(n)}var _=b;return j(w);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var l=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var P=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var r in e)s(n,r,{get:e[r],enumerable:!0})},t=(n,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of h(e))!v.call(n,a)&&a!==r&&s(n,a,{get:()=>e[a],enumerable:!(c=p(e,a))||c.enumerable});return n};var j=(n,e,r)=>(r=n!=null?l(f(n)):{},t(e||!n||!n.__esModule?s(r,\"default\",{value:n,enumerable:!0}):r,n)),x=n=>t(s({},\"__esModule\",{value:!0}),n);var i=P((y,d)=>{d.exports=_jsx_runtime});var b={};g(b,{default:()=>m,frontmatter:()=>_});var o=j(i()),_={title:\"Diferen\\xE7a entre: `function Person(){}`, `var person = Person()`, e `var person = new Person()`?\"};function u(n){let e={code:\"code\",p:\"p\",pre:\"pre\",...n.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"Esta pergunta \\xE9 muito vaga. Nossa melhor suposi\\xE7\\xE3o sobre a inten\\xE7\\xE3o dessa pergunta \\xE9 que ela est\\xE1 perguntando sobre construtores em JavaScript. Tecnicamente falando, \",(0,o.jsx)(e.code,{children:\"function Person(){}\"}),\" \\xE9 apenas uma declara\\xE7\\xE3o de fun\\xE7\\xE3o normal. A conven\\xE7\\xE3o \\xE9 usar PascalCase para fun\\xE7\\xF5es que se destinam a ser usadas como construtores.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\"var person = Person()\"}),\" invoca o \",(0,o.jsx)(e.code,{children:\"Person\"}),\" como uma fun\\xE7\\xE3o, e n\\xE3o como um construtor. Invocar como tal \\xE9 um erro comum se a fun\\xE7\\xE3o pretende ser usada como um construtor. Normalmente, o construtor n\\xE3o devolve nada. Assim, invocando o construtor como uma fun\\xE7\\xE3o normal retornar\\xE1 \",(0,o.jsx)(e.code,{children:\"undefined\"}),\" e que ser\\xE1 atribu\\xEDdo \\xE0 vari\\xE1vel pretendida como a inst\\xE2ncia.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:\"var person = new Person()\"}),\" cria uma inst\\xE2ncia do objeto \",(0,o.jsx)(e.code,{children:\"Person\"}),\" usando o operador \",(0,o.jsx)(e.code,{children:\"new\"}),\", que herda de \",(0,o.jsx)(e.code,{children:\"Person.prototype\"}),\". Uma alternativa seria usar \",(0,o.jsx)(e.code,{children:\"Object.create\"}),\", tais como: \",(0,o.jsx)(e.code,{children:\"Object.create(Person.prototype)\"}),\".\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`function Person(name) {\n this.name = name;\n}\n\nvar person = Person('John');\nconsole.log(person); // undefined\nconsole.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined\n\nvar person = new Person('John');\nconsole.log(person); // Person { name: \"John\" }\nconsole.log(person.name); // \"john\"\n`})})]})}function m(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(u,{...n})}):u(n)}return x(b);})();\n;return Component;"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -28,5 +28,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-ajax-in-as-much-detail-as-possible/pt-BR.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var v=(e,a)=>()=>(a||e((a={exports:{}}).exports,a),a.exports),b=(e,a)=>{for(var o in a)s(e,o,{get:a[o],enumerable:!0})},c=(e,a,o,r)=>{if(a&&typeof a==\"object\"||typeof a==\"function\")for(let t of l(a))!j.call(e,t)&&t!==o&&s(e,t,{get:()=>a[t],enumerable:!(r=u(a,t))||r.enumerable});return e};var g=(e,a,o)=>(o=e!=null?p(x(e)):{},c(a||!e||!e.__esModule?s(o,\"default\",{value:e,enumerable:!0}):o,e)),f=e=>c(s({},\"__esModule\",{value:!0}),e);var d=v((q,i)=>{i.exports=_jsx_runtime});var _={};b(_,{default:()=>w,frontmatter:()=>h});var n=g(d()),h={title:\"Explique o Ajax com o m\\xE1ximo de detalhes poss\\xEDvel.\"};function m(e){let a=Object.assign({p:\"p\",code:\"code\"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a.p,{children:\"Ajax (asynchronous JavaScript and XML) \\xE9 um conjunto de t\\xE9cnicas de desenvolvimento web que utilizam diversas tecnologias web no lado do cliente para criar aplica\\xE7\\xF5es web ass\\xEDncronas. Com o Ajax, as aplica\\xE7\\xF5es web podem enviar dados para e receber do servidor de forma ass\\xEDncrona (em segundo plano) sem interferir na exibi\\xE7\\xE3o e comportamento da p\\xE1gina existente. Ao separar a camada de interc\\xE2mbio de dados da camada de apresenta\\xE7\\xE3o, o Ajax permite que p\\xE1ginas web, e por extens\\xE3o, aplica\\xE7\\xF5es web, alterem o conte\\xFAdo dinamicamente sem precisar recarregar toda a p\\xE1gina. Na pr\\xE1tica, implementa\\xE7\\xF5es modernas comumente usam JSON em vez de XML, devido \\xE0s vantagens de o JSON ser nativo ao JavaScript.\"}),`\n`,(0,n.jsxs)(a.p,{children:[\"A API \",(0,n.jsx)(a.code,{children:\"XMLHttpRequest\"}),\" \\xE9 frequentemente usada para a comunica\\xE7\\xE3o ass\\xEDncrona ou hoje em dia, a API fetch.\"]})]})}function A(e={}){let{wrapper:a}=e.components||{};return a?(0,n.jsx)(a,Object.assign({},e,{children:(0,n.jsx)(m,e)})):m(e)}var w=A;return f(_);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var b=(e,a)=>()=>(a||e((a={exports:{}}).exports,a),a.exports),f=(e,a)=>{for(var n in a)r(e,n,{get:a[n],enumerable:!0})},c=(e,a,n,s)=>{if(a&&typeof a==\"object\"||typeof a==\"function\")for(let t of x(a))!j.call(e,t)&&t!==n&&r(e,t,{get:()=>a[t],enumerable:!(s=l(a,t))||s.enumerable});return e};var g=(e,a,n)=>(n=e!=null?u(v(e)):{},c(a||!e||!e.__esModule?r(n,\"default\",{value:e,enumerable:!0}):n,e)),h=e=>c(r({},\"__esModule\",{value:!0}),e);var d=b((M,i)=>{i.exports=_jsx_runtime});var w={};f(w,{default:()=>p,frontmatter:()=>A});var o=g(d()),A={title:\"Explique o Ajax com o m\\xE1ximo de detalhes poss\\xEDvel.\"};function m(e){let a={code:\"code\",p:\"p\",...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a.p,{children:\"Ajax (asynchronous JavaScript and XML) \\xE9 um conjunto de t\\xE9cnicas de desenvolvimento web que utilizam diversas tecnologias web no lado do cliente para criar aplica\\xE7\\xF5es web ass\\xEDncronas. Com o Ajax, as aplica\\xE7\\xF5es web podem enviar dados para e receber do servidor de forma ass\\xEDncrona (em segundo plano) sem interferir na exibi\\xE7\\xE3o e comportamento da p\\xE1gina existente. Ao separar a camada de interc\\xE2mbio de dados da camada de apresenta\\xE7\\xE3o, o Ajax permite que p\\xE1ginas web, e por extens\\xE3o, aplica\\xE7\\xF5es web, alterem o conte\\xFAdo dinamicamente sem precisar recarregar toda a p\\xE1gina. Na pr\\xE1tica, implementa\\xE7\\xF5es modernas comumente usam JSON em vez de XML, devido \\xE0s vantagens de o JSON ser nativo ao JavaScript.\"}),`\n`,(0,o.jsxs)(a.p,{children:[\"A API \",(0,o.jsx)(a.code,{children:\"XMLHttpRequest\"}),\" \\xE9 frequentemente usada para a comunica\\xE7\\xE3o ass\\xEDncrona ou hoje em dia, a API fetch.\"]})]})}function p(e={}){let{wrapper:a}=e.components||{};return a?(0,o.jsx)(a,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}return h(w);})();\n;return Component;"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -28,5 +28,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/en-US.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var S=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),f=(i,e)=>{for(var o in e)s(i,o,{get:e[o],enumerable:!0})},r=(i,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of g(e))!u.call(i,t)&&t!==o&&s(i,t,{get:()=>e[t],enumerable:!(a=p(e,t))||a.enumerable});return i};var b=(i,e,o)=>(o=i!=null?h(m(i)):{},r(e||!i||!i.__esModule?s(o,\"default\",{value:i,enumerable:!0}):o,i)),w=i=>r(s({},\"__esModule\",{value:!0}),i);var c=S((j,l)=>{l.exports=_jsx_runtime});var _={};f(_,{default:()=>k,frontmatter:()=>x});var n=b(c()),x={title:\"Explain CSS sprites, and how you would implement them on a page or site.\"};function d(i){let e=Object.assign({p:\"p\",code:\"code\",h2:\"h2\",ul:\"ul\",li:\"li\",ol:\"ol\",pre:\"pre\",a:\"a\"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"CSS sprites combine multiple images into one single larger image file and uses a combination of CSS \",(0,n.jsx)(e.code,{children:\"background-image\"}),\", \",(0,n.jsx)(e.code,{children:\"background-position\"}),\" and \",(0,n.jsx)(e.code,{children:\"background-size\"}),\" to select a specific part of the larger image as the desired image.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"It used to be a commonly-used technique for icons (e.g. Gmail uses sprites for all their images).\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Advantages\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Reduce the number of HTTP requests for multiple images (only one single request is required per spritesheet). But with HTTP2, loading multiple images is no longer much of an issue.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Advance downloading of assets that won't be downloaded until needed, such as images that only appear upon \",(0,n.jsx)(e.code,{children:\":hover\"}),\" pseudo-states. Blinking wouldn't be seen.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"How to implement\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Use a sprite generator that packs multiple images into one and generate the appropriate CSS for it.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Each image would have a corresponding CSS class with \",(0,n.jsx)(e.code,{children:\"background-image\"}),\" and \",(0,n.jsx)(e.code,{children:\"background-position\"}),\" properties defined.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"To use that image, add the corresponding class to your element.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"The generated stylesheet might look something like:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.icon {\n background-image: url('https://example.com/images/spritesheet.png');\n width: 24px;\n height: 24px;\n}\n\n.icon-cart {\n background-position: 0 0;\n}\n\n.icon-arrow {\n background-position: -24px 0;\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"And can be used in the HTML as such:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<span class=\"icon icon-cart\"></span>\n\n<span class=\"icon icon-arrow\"></span>\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"References\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS\",children:\"Implementing image sprites in CSS - CSS: Cascading Style Sheets | MDN\"})}),`\n`]})]})}function C(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(d,i)})):d(i)}var k=C;return w(_);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var f=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),b=(i,e)=>{for(var o in e)a(i,o,{get:e[o],enumerable:!0})},r=(i,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of m(e))!S.call(i,t)&&t!==o&&a(i,t,{get:()=>e[t],enumerable:!(s=g(e,t))||s.enumerable});return i};var w=(i,e,o)=>(o=i!=null?p(u(i)):{},r(e||!i||!i.__esModule?a(o,\"default\",{value:i,enumerable:!0}):o,i)),x=i=>r(a({},\"__esModule\",{value:!0}),i);var c=f((y,l)=>{l.exports=_jsx_runtime});var k={};b(k,{default:()=>h,frontmatter:()=>C});var n=w(c()),C={title:\"Explain CSS sprites, and how you would implement them on a page or site.\"};function d(i){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",ul:\"ul\",...i.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"CSS sprites combine multiple images into one single larger image file and uses a combination of CSS \",(0,n.jsx)(e.code,{children:\"background-image\"}),\", \",(0,n.jsx)(e.code,{children:\"background-position\"}),\" and \",(0,n.jsx)(e.code,{children:\"background-size\"}),\" to select a specific part of the larger image as the desired image.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"It used to be a commonly-used technique for icons (e.g. Gmail uses sprites for all their images).\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Advantages\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Reduce the number of HTTP requests for multiple images (only one single request is required per spritesheet). But with HTTP2, loading multiple images is no longer much of an issue.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Advance downloading of assets that won't be downloaded until needed, such as images that only appear upon \",(0,n.jsx)(e.code,{children:\":hover\"}),\" pseudo-states. Blinking wouldn't be seen.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"How to implement\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Use a sprite generator that packs multiple images into one and generate the appropriate CSS for it.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"Each image would have a corresponding CSS class with \",(0,n.jsx)(e.code,{children:\"background-image\"}),\" and \",(0,n.jsx)(e.code,{children:\"background-position\"}),\" properties defined.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"To use that image, add the corresponding class to your element.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"The generated stylesheet might look something like:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-css\",children:`.icon {\n background-image: url('https://example.com/images/spritesheet.png');\n width: 24px;\n height: 24px;\n}\n\n.icon-cart {\n background-position: 0 0;\n}\n\n.icon-arrow {\n background-position: -24px 0;\n}\n`})}),`\n`,(0,n.jsx)(e.p,{children:\"And can be used in the HTML as such:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-html\",children:`<span class=\"icon icon-cart\"></span>\n\n<span class=\"icon icon-arrow\"></span>\n`})}),`\n`,(0,n.jsx)(e.h2,{children:\"References\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS\",children:\"Implementing image sprites in CSS - CSS: Cascading Style Sheets | MDN\"})}),`\n`]})]})}function h(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,{...i,children:(0,n.jsx)(d,{...i})}):d(i)}return x(k);})();\n;return Component;"
|
||||
}
|
||||
|
|
@ -28,5 +28,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/pt-BR.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var l=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var S=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),x=(n,e)=>{for(var o in e)i(n,o,{get:e[o],enumerable:!0})},c=(n,e,o,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of u(e))!h.call(n,s)&&s!==o&&i(n,s,{get:()=>e[s],enumerable:!(r=p(e,s))||r.enumerable});return n};var b=(n,e,o)=>(o=n!=null?l(g(n)):{},c(e||!n||!n.__esModule?i(o,\"default\",{value:n,enumerable:!0}):o,n)),C=n=>c(i({},\"__esModule\",{value:!0}),n);var m=S((M,d)=>{d.exports=_jsx_runtime});var j={};x(j,{default:()=>f,frontmatter:()=>v});var a=b(m()),v={title:\"Explique os sprites CSS e como voc\\xEA os implementaria em uma p\\xE1gina ou site.\"};function t(n){let e=Object.assign({p:\"p\",code:\"code\",h2:\"h2\",ul:\"ul\",li:\"li\",ol:\"ol\",pre:\"pre\",a:\"a\"},n.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(e.p,{children:[\"Os sprites CSS combinam v\\xE1rias imagens em um \\xFAnico arquivo de imagem maior e usam uma combina\\xE7\\xE3o de CSS \",(0,a.jsx)(e.code,{children:\"background-image\"}),\", \",(0,a.jsx)(e.code,{children:\"background-position\"}),\" e \",(0,a.jsx)(e.code,{children:\"background-size\"}),\" para selecionar uma parte espec\\xEDfica da imagem maior como a imagem desejada.\"]}),`\n`,(0,a.jsx)(e.p,{children:\"Essa t\\xE9cnica costumava ser comumente usada para \\xEDcones (por exemplo, o Gmail usa sprites para todas as suas imagens).\"}),`\n`,(0,a.jsx)(e.h2,{children:\"Vantagens\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:\"Reduz o n\\xFAmero de solicita\\xE7\\xF5es HTTP para v\\xE1rias imagens (apenas um \\xFAnico pedido \\xE9 necess\\xE1rio por spritesheet). Mas com HTTP2, carregar v\\xE1rias imagens j\\xE1 n\\xE3o \\xE9 muito problema.\"}),`\n`,(0,a.jsxs)(e.li,{children:[\"Download avan\\xE7ado de ativos que n\\xE3o ser\\xE3o baixados at\\xE9 ser necess\\xE1rio, como imagens que aparecem apenas nos pseudo-estados \",(0,a.jsx)(e.code,{children:\":hover\"}),\". O piscar n\\xE3o seria visto.\"]}),`\n`]}),`\n`,(0,a.jsx)(e.h2,{children:\"Como implementar\"}),`\n`,(0,a.jsxs)(e.ol,{children:[`\n`,(0,a.jsx)(e.li,{children:\"Use um gerador de sprites que agrupa v\\xE1rias imagens em uma s\\xF3 e gere o CSS apropriado para isso.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Cada imagem teria uma classe CSS correspondente com as propriedades 'background-image' e 'background-position' definidas.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Para usar essa imagem, adicione a classe correspondente ao seu elemento.\"}),`\n`]}),`\n`,(0,a.jsx)(e.p,{children:\"A folha de estilos gerada pode parecer algo como:\"}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-css\",children:`.icon {\n background-image: url('https://example.com/images/spritesheet.png');\n width: 24px;\n height: 24px;\n}\n\n.icon-cart {\n background-position: 0 0;\n}\n\n.icon-arrow {\n background-position: -24px 0;\n}\n`})}),`\n`,(0,a.jsx)(e.p,{children:\"E pode ser usado no HTML como tal:\"}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-html\",children:`<span class=\"icon icon-cart\"></span>\n\n<span class=\"icon icon-arrow\"></span>\n`})}),`\n`,(0,a.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:(0,a.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS\",children:\"Implementando sprites de imagem em CSS - CSS: Cascading Style Sheets | MDN\"})}),`\n`]})]})}function _(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,Object.assign({},n,{children:(0,a.jsx)(t,n)})):t(n)}var f=_;return C(j);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),C=(n,e)=>{for(var o in e)s(n,o,{get:e[o],enumerable:!0})},c=(n,e,o,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of g(e))!S.call(n,i)&&i!==o&&s(n,i,{get:()=>e[i],enumerable:!(r=u(e,i))||r.enumerable});return n};var b=(n,e,o)=>(o=n!=null?p(h(n)):{},c(e||!n||!n.__esModule?s(o,\"default\",{value:n,enumerable:!0}):o,n)),v=n=>c(s({},\"__esModule\",{value:!0}),n);var m=x((j,d)=>{d.exports=_jsx_runtime});var f={};C(f,{default:()=>l,frontmatter:()=>_});var a=b(m()),_={title:\"Explique os sprites CSS e como voc\\xEA os implementaria em uma p\\xE1gina ou site.\"};function t(n){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(e.p,{children:[\"Os sprites CSS combinam v\\xE1rias imagens em um \\xFAnico arquivo de imagem maior e usam uma combina\\xE7\\xE3o de CSS \",(0,a.jsx)(e.code,{children:\"background-image\"}),\", \",(0,a.jsx)(e.code,{children:\"background-position\"}),\" e \",(0,a.jsx)(e.code,{children:\"background-size\"}),\" para selecionar uma parte espec\\xEDfica da imagem maior como a imagem desejada.\"]}),`\n`,(0,a.jsx)(e.p,{children:\"Essa t\\xE9cnica costumava ser comumente usada para \\xEDcones (por exemplo, o Gmail usa sprites para todas as suas imagens).\"}),`\n`,(0,a.jsx)(e.h2,{children:\"Vantagens\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:\"Reduz o n\\xFAmero de solicita\\xE7\\xF5es HTTP para v\\xE1rias imagens (apenas um \\xFAnico pedido \\xE9 necess\\xE1rio por spritesheet). Mas com HTTP2, carregar v\\xE1rias imagens j\\xE1 n\\xE3o \\xE9 muito problema.\"}),`\n`,(0,a.jsxs)(e.li,{children:[\"Download avan\\xE7ado de ativos que n\\xE3o ser\\xE3o baixados at\\xE9 ser necess\\xE1rio, como imagens que aparecem apenas nos pseudo-estados \",(0,a.jsx)(e.code,{children:\":hover\"}),\". O piscar n\\xE3o seria visto.\"]}),`\n`]}),`\n`,(0,a.jsx)(e.h2,{children:\"Como implementar\"}),`\n`,(0,a.jsxs)(e.ol,{children:[`\n`,(0,a.jsx)(e.li,{children:\"Use um gerador de sprites que agrupa v\\xE1rias imagens em uma s\\xF3 e gere o CSS apropriado para isso.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Cada imagem teria uma classe CSS correspondente com as propriedades 'background-image' e 'background-position' definidas.\"}),`\n`,(0,a.jsx)(e.li,{children:\"Para usar essa imagem, adicione a classe correspondente ao seu elemento.\"}),`\n`]}),`\n`,(0,a.jsx)(e.p,{children:\"A folha de estilos gerada pode parecer algo como:\"}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-css\",children:`.icon {\n background-image: url('https://example.com/images/spritesheet.png');\n width: 24px;\n height: 24px;\n}\n\n.icon-cart {\n background-position: 0 0;\n}\n\n.icon-arrow {\n background-position: -24px 0;\n}\n`})}),`\n`,(0,a.jsx)(e.p,{children:\"E pode ser usado no HTML como tal:\"}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-html\",children:`<span class=\"icon icon-cart\"></span>\n\n<span class=\"icon icon-arrow\"></span>\n`})}),`\n`,(0,a.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsx)(e.li,{children:(0,a.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS\",children:\"Implementando sprites de imagem em CSS - CSS: Cascading Style Sheets | MDN\"})}),`\n`]})]})}function l(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(t,{...n})}):t(n)}return v(f);})();\n;return Component;"
|
||||
}
|
||||
|
|
@ -28,5 +28,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/zh-CN.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var S=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),x=(c,n)=>{for(var i in n)o(c,i,{get:n[i],enumerable:!0})},d=(c,n,i,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of g(n))!u.call(c,r)&&r!==i&&o(c,r,{get:()=>n[r],enumerable:!(l=p(n,r))||l.enumerable});return c};var C=(c,n,i)=>(i=c!=null?h(m(c)):{},d(n||!c||!c.__esModule?o(i,\"default\",{value:c,enumerable:!0}):i,c)),_=c=>d(o({},\"__esModule\",{value:!0}),c);var t=S((T,a)=>{a.exports=_jsx_runtime});var f={};x(f,{default:()=>j,frontmatter:()=>b});var e=C(t()),b={title:\"\\u89E3\\u91CA CSS \\u7CBE\\u7075\\uFF0C\\u4EE5\\u53CA\\u5982\\u4F55\\u5728\\u9875\\u9762\\u6216\\u7F51\\u7AD9\\u4E0A\\u5B9E\\u73B0\\u5B83\\u4EEC\\u3002\"};function s(c){let n=Object.assign({p:\"p\",code:\"code\",h2:\"h2\",ul:\"ul\",li:\"li\",ol:\"ol\",pre:\"pre\",a:\"a\"},c.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.p,{children:[\"CSS \\u7CBE\\u7075\\u5C06\\u591A\\u4E2A\\u56FE\\u50CF\\u7EC4\\u5408\\u6210\\u4E00\\u4E2A\\u66F4\\u5927\\u7684\\u56FE\\u50CF\\u6587\\u4EF6\\uFF0C\\u5E76\\u4F7F\\u7528 CSS \",(0,e.jsx)(n.code,{children:\"background-image\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"background-position\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"background-size\"}),\" \\u7684\\u7EC4\\u5408\\u6765\\u9009\\u62E9\\u66F4\\u5927\\u56FE\\u50CF\\u7684\\u7279\\u5B9A\\u90E8\\u5206\\u4F5C\\u4E3A\\u6240\\u9700\\u7684\\u56FE\\u50CF\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5B83\\u66FE\\u7ECF\\u662F\\u4E00\\u79CD\\u5E38\\u7528\\u7684\\u56FE\\u6807\\u6280\\u672F\\uFF08\\u4F8B\\u5982 Gmail \\u5BF9\\u5176\\u6240\\u6709\\u56FE\\u50CF\\u90FD\\u4F7F\\u7528\\u7CBE\\u7075\\u56FE\\uFF09\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u51CF\\u5C11\\u591A\\u4E2A\\u56FE\\u50CF\\u7684 HTTP \\u8BF7\\u6C42\\u6570\\u91CF\\uFF08\\u6BCF\\u4E2A\\u7CBE\\u7075\\u8868\\u53EA\\u9700\\u8981\\u4E00\\u4E2A\\u8BF7\\u6C42\\uFF09\\u3002\\u4F46\\u4F7F\\u7528 HTTP2\\uFF0C\\u52A0\\u8F7D\\u591A\\u4E2A\\u56FE\\u50CF\\u4E0D\\u518D\\u662F\\u4E00\\u4E2A\\u5927\\u95EE\\u9898\\u3002\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u9884\\u5148\\u4E0B\\u8F7D\\u5728\\u9700\\u8981\\u4E4B\\u524D\\u4E0D\\u4F1A\\u4E0B\\u8F7D\\u7684\\u8D44\\u4EA7\\uFF0C\\u4F8B\\u5982\\u4EC5\\u5728 \",(0,e.jsx)(n.code,{children:\":hover\"}),\" \\u4F2A\\u72B6\\u6001\\u4E0B\\u51FA\\u73B0\\u7684\\u56FE\\u50CF\\u3002\\u4E0D\\u4F1A\\u770B\\u5230\\u95EA\\u70C1\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5982\\u4F55\\u5B9E\\u73B0\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u7528\\u7CBE\\u7075\\u56FE\\u751F\\u6210\\u5668\\u5C06\\u591A\\u4E2A\\u56FE\\u50CF\\u6253\\u5305\\u6210\\u4E00\\u4E2A\\uFF0C\\u5E76\\u4E3A\\u5176\\u751F\\u6210\\u76F8\\u5E94\\u7684 CSS\\u3002\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u6BCF\\u4E2A\\u56FE\\u50CF\\u90FD\\u5C06\\u6709\\u4E00\\u4E2A\\u5BF9\\u5E94\\u7684 CSS \\u7C7B\\uFF0C\\u5176\\u4E2D\\u5B9A\\u4E49\\u4E86 \",(0,e.jsx)(n.code,{children:\"background-image\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"background-position\"}),\" \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,e.jsx)(n.li,{children:\"\\u8981\\u4F7F\\u7528\\u8BE5\\u56FE\\u50CF\\uFF0C\\u8BF7\\u5C06\\u76F8\\u5E94\\u7684\\u7C7B\\u6DFB\\u52A0\\u5230\\u60A8\\u7684\\u5143\\u7D20\\u4E2D\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u751F\\u6210\\u7684\\u6837\\u5F0F\\u8868\\u53EF\\u80FD\\u5982\\u4E0B\\u6240\\u793A\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-css\",children:`.icon {\n background-image: url('https://example.com/images/spritesheet.png');\n width: 24px;\n height: 24px;\n}\n\n.icon-cart {\n background-position: 0 0;\n}\n\n.icon-arrow {\n background-position: -24px 0;\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5E76\\u4E14\\u53EF\\u4EE5\\u5728 HTML \\u4E2D\\u8FD9\\u6837\\u4F7F\\u7528\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-html\",children:`<span class=\"icon icon-cart\"></span>\n\n<span class=\"icon icon-arrow\"></span>\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u53C2\\u8003\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS\",children:\"\\u5728 CSS \\u4E2D\\u5B9E\\u73B0\\u56FE\\u50CF\\u7CBE\\u7075 - CSS\\uFF1A\\u5C42\\u53E0\\u6837\\u5F0F\\u8868 | MDN\"})}),`\n`]})]})}function k(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,Object.assign({},c,{children:(0,e.jsx)(s,c)})):s(c)}var j=k;return _(f);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var x=(c,n)=>()=>(n||c((n={exports:{}}).exports,n),n.exports),C=(c,n)=>{for(var i in n)o(c,i,{get:n[i],enumerable:!0})},d=(c,n,i,l)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of m(n))!S.call(c,r)&&r!==i&&o(c,r,{get:()=>n[r],enumerable:!(l=g(n,r))||l.enumerable});return c};var _=(c,n,i)=>(i=c!=null?p(u(c)):{},d(n||!c||!c.__esModule?o(i,\"default\",{value:c,enumerable:!0}):i,c)),b=c=>d(o({},\"__esModule\",{value:!0}),c);var t=x((M,a)=>{a.exports=_jsx_runtime});var f={};C(f,{default:()=>s,frontmatter:()=>k});var e=_(t()),k={title:\"\\u89E3\\u91CA CSS \\u7CBE\\u7075\\uFF0C\\u4EE5\\u53CA\\u5982\\u4F55\\u5728\\u9875\\u9762\\u6216\\u7F51\\u7AD9\\u4E0A\\u5B9E\\u73B0\\u5B83\\u4EEC\\u3002\"};function h(c){let n={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",ul:\"ul\",...c.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.p,{children:[\"CSS \\u7CBE\\u7075\\u5C06\\u591A\\u4E2A\\u56FE\\u50CF\\u7EC4\\u5408\\u6210\\u4E00\\u4E2A\\u66F4\\u5927\\u7684\\u56FE\\u50CF\\u6587\\u4EF6\\uFF0C\\u5E76\\u4F7F\\u7528 CSS \",(0,e.jsx)(n.code,{children:\"background-image\"}),\"\\u3001\",(0,e.jsx)(n.code,{children:\"background-position\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"background-size\"}),\" \\u7684\\u7EC4\\u5408\\u6765\\u9009\\u62E9\\u66F4\\u5927\\u56FE\\u50CF\\u7684\\u7279\\u5B9A\\u90E8\\u5206\\u4F5C\\u4E3A\\u6240\\u9700\\u7684\\u56FE\\u50CF\\u3002\"]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5B83\\u66FE\\u7ECF\\u662F\\u4E00\\u79CD\\u5E38\\u7528\\u7684\\u56FE\\u6807\\u6280\\u672F\\uFF08\\u4F8B\\u5982 Gmail \\u5BF9\\u5176\\u6240\\u6709\\u56FE\\u50CF\\u90FD\\u4F7F\\u7528\\u7CBE\\u7075\\u56FE\\uFF09\\u3002\"}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u4F18\\u70B9\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u51CF\\u5C11\\u591A\\u4E2A\\u56FE\\u50CF\\u7684 HTTP \\u8BF7\\u6C42\\u6570\\u91CF\\uFF08\\u6BCF\\u4E2A\\u7CBE\\u7075\\u8868\\u53EA\\u9700\\u8981\\u4E00\\u4E2A\\u8BF7\\u6C42\\uFF09\\u3002\\u4F46\\u4F7F\\u7528 HTTP2\\uFF0C\\u52A0\\u8F7D\\u591A\\u4E2A\\u56FE\\u50CF\\u4E0D\\u518D\\u662F\\u4E00\\u4E2A\\u5927\\u95EE\\u9898\\u3002\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u9884\\u5148\\u4E0B\\u8F7D\\u5728\\u9700\\u8981\\u4E4B\\u524D\\u4E0D\\u4F1A\\u4E0B\\u8F7D\\u7684\\u8D44\\u4EA7\\uFF0C\\u4F8B\\u5982\\u4EC5\\u5728 \",(0,e.jsx)(n.code,{children:\":hover\"}),\" \\u4F2A\\u72B6\\u6001\\u4E0B\\u51FA\\u73B0\\u7684\\u56FE\\u50CF\\u3002\\u4E0D\\u4F1A\\u770B\\u5230\\u95EA\\u70C1\\u3002\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u5982\\u4F55\\u5B9E\\u73B0\"}),`\n`,(0,e.jsxs)(n.ol,{children:[`\n`,(0,e.jsx)(n.li,{children:\"\\u4F7F\\u7528\\u7CBE\\u7075\\u56FE\\u751F\\u6210\\u5668\\u5C06\\u591A\\u4E2A\\u56FE\\u50CF\\u6253\\u5305\\u6210\\u4E00\\u4E2A\\uFF0C\\u5E76\\u4E3A\\u5176\\u751F\\u6210\\u76F8\\u5E94\\u7684 CSS\\u3002\"}),`\n`,(0,e.jsxs)(n.li,{children:[\"\\u6BCF\\u4E2A\\u56FE\\u50CF\\u90FD\\u5C06\\u6709\\u4E00\\u4E2A\\u5BF9\\u5E94\\u7684 CSS \\u7C7B\\uFF0C\\u5176\\u4E2D\\u5B9A\\u4E49\\u4E86 \",(0,e.jsx)(n.code,{children:\"background-image\"}),\" \\u548C \",(0,e.jsx)(n.code,{children:\"background-position\"}),\" \\u5C5E\\u6027\\u3002\"]}),`\n`,(0,e.jsx)(n.li,{children:\"\\u8981\\u4F7F\\u7528\\u8BE5\\u56FE\\u50CF\\uFF0C\\u8BF7\\u5C06\\u76F8\\u5E94\\u7684\\u7C7B\\u6DFB\\u52A0\\u5230\\u60A8\\u7684\\u5143\\u7D20\\u4E2D\\u3002\"}),`\n`]}),`\n`,(0,e.jsx)(n.p,{children:\"\\u751F\\u6210\\u7684\\u6837\\u5F0F\\u8868\\u53EF\\u80FD\\u5982\\u4E0B\\u6240\\u793A\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-css\",children:`.icon {\n background-image: url('https://example.com/images/spritesheet.png');\n width: 24px;\n height: 24px;\n}\n\n.icon-cart {\n background-position: 0 0;\n}\n\n.icon-arrow {\n background-position: -24px 0;\n}\n`})}),`\n`,(0,e.jsx)(n.p,{children:\"\\u5E76\\u4E14\\u53EF\\u4EE5\\u5728 HTML \\u4E2D\\u8FD9\\u6837\\u4F7F\\u7528\\uFF1A\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-html\",children:`<span class=\"icon icon-cart\"></span>\n\n<span class=\"icon icon-arrow\"></span>\n`})}),`\n`,(0,e.jsx)(n.h2,{children:\"\\u53C2\\u8003\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS\",children:\"\\u5728 CSS \\u4E2D\\u5B9E\\u73B0\\u56FE\\u50CF\\u7CBE\\u7075 - CSS\\uFF1A\\u5C42\\u53E0\\u6837\\u5F0F\\u8868 | MDN\"})}),`\n`]})]})}function s(c={}){let{wrapper:n}=c.components||{};return n?(0,e.jsx)(n,{...c,children:(0,e.jsx)(h,{...c})}):h(c)}return b(f);})();\n;return Component;"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -30,5 +30,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-event-delegation/pt-BR.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),f=(o,e)=>{for(var i in e)a(o,i,{get:e[i],enumerable:!0})},l=(o,e,i,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of v(e))!p.call(o,t)&&t!==i&&a(o,t,{get:()=>e[t],enumerable:!(d=u(e,t))||d.enumerable});return o};var x=(o,e,i)=>(i=o!=null?m(h(o)):{},l(e||!o||!o.__esModule?a(i,\"default\",{value:o,enumerable:!0}):i,o)),E=o=>l(a({},\"__esModule\",{value:!0}),o);var r=g((M,s)=>{s.exports=_jsx_runtime});var D={};f(D,{default:()=>q,frontmatter:()=>b});var n=x(r()),b={title:\"Explique delega\\xE7\\xE3o do evento\"};function c(o){let e=Object.assign({p:\"p\",h2:\"h2\",ol:\"ol\",li:\"li\",strong:\"strong\",pre:\"pre\",code:\"code\",ul:\"ul\",a:\"a\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"A delega\\xE7\\xE3o de eventos \\xE9 um conceito fundamental no desenvolvimento web que permite gerenciar e tratar eventos eficientemente em v\\xE1rios elementos filhos, anexando um \\xFAnico ouvinte de eventos a um elemento ancestral comum. Em vez de atribuir ouvintes de eventos a cada elemento filho individualmente, voc\\xEA delega a responsabilidade de lidar com eventos ao elemento pai ou ancestral, que intercepta os eventos \\xE0 medida que eles sobem na \\xE1rvore DOM e identifica o alvo do evento.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Benef\\xEDcios da delega\\xE7\\xE3o de eventos\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Efici\\xEAncia\"}),\": A delega\\xE7\\xE3o de eventos reduz significativamente o n\\xFAmero de ouvintes de eventos em seu c\\xF3digo, tornando-o mais eficiente em termos de mem\\xF3ria e melhorando o desempenho, especialmente ao lidar com um grande n\\xFAmero de elementos semelhantes. Isso resulta em um c\\xF3digo mais limpo e de f\\xE1cil manuten\\xE7\\xE3o.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Elementos Din\\xE2micos\"}),\": A delega\\xE7\\xE3o de eventos funciona perfeitamente com elementos gerados ou removidos dinamicamente no DOM. Voc\\xEA n\\xE3o precisa anexar ou remover ouvintes de eventos toda vez que novos elementos s\\xE3o adicionados ou removidos. O ouvinte de eventos delegado os trata automaticamente.\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Exemplo\"}),`\n`,(0,n.jsx)(e.p,{children:\"Vamos ilustrar a delega\\xE7\\xE3o de eventos com um exemplo moderno usando a sintaxe do ES6:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <ul id=\"item-list\">\n// <li>Item 1</li>\n// <li>Item 2</li>\n// <li>Item 3</li>\n// </ul>\n\nconst itemList = document.getElementById('item-list');\n\nitemList.addEventListener('click', (event) => {\n if (event.target.tagName === 'LI') {\n console.log(\\`Clicou em \\${event.target.textContent}\\`);\n }\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Neste exemplo, um \\xFAnico ouvinte de eventos de clique \\xE9 anexado ao elemento \",(0,n.jsx)(e.code,{children:\"<ul>\"}),\". Quando ocorre um evento de clique em um elemento \",(0,n.jsx)(e.code,{children:\"<li>\"}),\", o evento se propaga at\\xE9 o elemento \",(0,n.jsx)(e.code,{children:\"<ul>\"}),\", onde o ouvinte de eventos verifica o nome da tag do alvo para identificar qual item da lista foi clicado.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Casos de uso\"}),`\n`,(0,n.jsx)(e.p,{children:\"A delega\\xE7\\xE3o de eventos \\xE9 comumente usada em v\\xE1rias situa\\xE7\\xF5es, incluindo:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Gerenciamento de listas, menus ou tabelas com muitos itens ou linhas.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Manipula\\xE7\\xE3o de conte\\xFAdo din\\xE2mico em aplicativos de p\\xE1gina \\xFAnica.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Simplifica\\xE7\\xE3o do c\\xF3digo, evitando a necessidade de anexar e remover ouvintes de eventos para elementos que mudam.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Recursos\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Building_blocks/Events#event_delegation\",children:\"MDN Web Docs sobre Delega\\xE7\\xE3o de Eventos\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/event-delegation\",children:\"JavaScript.info - Delega\\xE7\\xE3o de Eventos\"})}),`\n`]})]})}function j(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(c,o)})):c(o)}var q=j;return E(D);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var i in e)a(o,i,{get:e[i],enumerable:!0})},l=(o,e,i,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of h(e))!g.call(o,t)&&t!==i&&a(o,t,{get:()=>e[t],enumerable:!(d=v(e,t))||d.enumerable});return o};var E=(o,e,i)=>(i=o!=null?u(p(o)):{},l(e||!o||!o.__esModule?a(i,\"default\",{value:o,enumerable:!0}):i,o)),q=o=>l(a({},\"__esModule\",{value:!0}),o);var r=f((M,s)=>{s.exports=_jsx_runtime});var _={};x(_,{default:()=>m,frontmatter:()=>D});var n=E(r()),D={title:\"Explique delega\\xE7\\xE3o do evento\"};function c(o){let e={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"A delega\\xE7\\xE3o de eventos \\xE9 um conceito fundamental no desenvolvimento web que permite gerenciar e tratar eventos eficientemente em v\\xE1rios elementos filhos, anexando um \\xFAnico ouvinte de eventos a um elemento ancestral comum. Em vez de atribuir ouvintes de eventos a cada elemento filho individualmente, voc\\xEA delega a responsabilidade de lidar com eventos ao elemento pai ou ancestral, que intercepta os eventos \\xE0 medida que eles sobem na \\xE1rvore DOM e identifica o alvo do evento.\"}),`\n`,(0,n.jsx)(e.h2,{children:\"Benef\\xEDcios da delega\\xE7\\xE3o de eventos\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Efici\\xEAncia\"}),\": A delega\\xE7\\xE3o de eventos reduz significativamente o n\\xFAmero de ouvintes de eventos em seu c\\xF3digo, tornando-o mais eficiente em termos de mem\\xF3ria e melhorando o desempenho, especialmente ao lidar com um grande n\\xFAmero de elementos semelhantes. Isso resulta em um c\\xF3digo mais limpo e de f\\xE1cil manuten\\xE7\\xE3o.\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"Elementos Din\\xE2micos\"}),\": A delega\\xE7\\xE3o de eventos funciona perfeitamente com elementos gerados ou removidos dinamicamente no DOM. Voc\\xEA n\\xE3o precisa anexar ou remover ouvintes de eventos toda vez que novos elementos s\\xE3o adicionados ou removidos. O ouvinte de eventos delegado os trata automaticamente.\"]}),`\n`]}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Exemplo\"}),`\n`,(0,n.jsx)(e.p,{children:\"Vamos ilustrar a delega\\xE7\\xE3o de eventos com um exemplo moderno usando a sintaxe do ES6:\"}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`// HTML:\n// <ul id=\"item-list\">\n// <li>Item 1</li>\n// <li>Item 2</li>\n// <li>Item 3</li>\n// </ul>\n\nconst itemList = document.getElementById('item-list');\n\nitemList.addEventListener('click', (event) => {\n if (event.target.tagName === 'LI') {\n console.log(\\`Clicou em \\${event.target.textContent}\\`);\n }\n});\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Neste exemplo, um \\xFAnico ouvinte de eventos de clique \\xE9 anexado ao elemento \",(0,n.jsx)(e.code,{children:\"<ul>\"}),\". Quando ocorre um evento de clique em um elemento \",(0,n.jsx)(e.code,{children:\"<li>\"}),\", o evento se propaga at\\xE9 o elemento \",(0,n.jsx)(e.code,{children:\"<ul>\"}),\", onde o ouvinte de eventos verifica o nome da tag do alvo para identificar qual item da lista foi clicado.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Casos de uso\"}),`\n`,(0,n.jsx)(e.p,{children:\"A delega\\xE7\\xE3o de eventos \\xE9 comumente usada em v\\xE1rias situa\\xE7\\xF5es, incluindo:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Gerenciamento de listas, menus ou tabelas com muitos itens ou linhas.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Manipula\\xE7\\xE3o de conte\\xFAdo din\\xE2mico em aplicativos de p\\xE1gina \\xFAnica.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Simplifica\\xE7\\xE3o do c\\xF3digo, evitando a necessidade de anexar e remover ouvintes de eventos para elementos que mudam.\"}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{children:\"Recursos\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Building_blocks/Events#event_delegation\",children:\"MDN Web Docs sobre Delega\\xE7\\xE3o de Eventos\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://javascript.info/event-delegation\",children:\"JavaScript.info - Delega\\xE7\\xE3o de Eventos\"})}),`\n`]})]})}function m(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(c,{...o})}):c(o)}return q(_);})();\n;return Component;"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -30,5 +30,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-function-prototype-bind/pt-BR.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),f=(o,e)=>{for(var d in e)t(o,d,{get:e[d],enumerable:!0})},a=(o,e,d,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!g.call(o,c)&&c!==d&&t(o,c,{get:()=>e[c],enumerable:!(r=h(e,c))||r.enumerable});return o};var j=(o,e,d)=>(d=o!=null?u(p(o)):{},a(e||!o||!o.__esModule?t(d,\"default\",{value:o,enumerable:!0}):d,o)),q=o=>a(t({},\"__esModule\",{value:!0}),o);var l=b((F,i)=>{i.exports=_jsx_runtime});var x={};f(x,{default:()=>G,frontmatter:()=>v});var n=j(l()),v={title:\"Explique `Function.prototype.bind`\"};function s(o){let e=Object.assign({blockquote:\"blockquote\",p:\"p\",code:\"code\",em:\"em\",a:\"a\",pre:\"pre\",h2:\"h2\",ul:\"ul\",li:\"li\"},o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"O m\\xE9todo \",(0,n.jsx)(e.code,{children:\"bind()\"}),\" cria uma nova fun\\xE7\\xE3o que, quando chamada, tem sua palavra-chave \",(0,n.jsx)(e.code,{children:\"this\"}),\" definida para o valor fornecido, com uma determinada sequ\\xEAncia de argumentos precedendo qualquer um fornecido quando a nova fun\\xE7\\xE3o \\xE9 chamada.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.em,{children:[\"Source: \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind\",children:\"Function.prototype.bind() - JavaScript | MDN\"})]})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"bind()\"}),\" \\xE9 mais \\xFAtil para vincular o valor do \",(0,n.jsx)(e.code,{children:\"this\"}),\" em m\\xE9todos de classes que voc\\xEA quer passar para outras fun\\xE7\\xF5es. Isso foi frequentemente feito em m\\xE9todos de classe de componente React que n\\xE3o foram definidos usando arrow functions.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const john = {\n age: 42,\n getAge: function () {\n return this.age;\n },\n};\n\nconsole.log(john.getAge()); // 42\n\nconst unboundGetAge = john.getAge;\nconsole.log(unboundGetAge()); // undefined\n\nconst boundGetAge = john.getAge.bind(john);\nconsole.log(boundGetAge()); // 42\n\nconst mary = { age: 21 };\nconst boundGetAgeMary = john.getAge.bind(mary);\nconsole.log(boundGetAgeMary()); // 21\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"No exemplo acima, quando o m\\xE9todo \",(0,n.jsx)(e.code,{children:\"getAge\"}),\" \\xE9 chamado sem um objeto chamado (como \",(0,n.jsx)(e.code,{children:\"unboundGetAge\"}),\"), o valor \\xE9 'indefinido' porque o valor 'this' dentro de \",(0,n.jsx)(e.code,{children:\"getAge()\"}),\" se torna o objeto global. \",(0,n.jsx)(e.code,{children:\"boundGetAge()\"}),\" tem seu \",(0,n.jsx)(e.code,{children:\"this\"}),\" ligado a \",(0,n.jsx)(e.code,{children:\"john\"}),\", portanto pode obter o \",(0,n.jsx)(e.code,{children:\"idade\"}),\" de \",(0,n.jsx)(e.code,{children:\"john\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Podemos at\\xE9 usar \",(0,n.jsx)(e.code,{children:\"getAge\"}),\" em outro objeto que n\\xE3o \\xE9 \",(0,n.jsx)(e.code,{children:\"john\"}),\"! \",(0,n.jsx)(e.code,{children:\"boundGetAgeMary\"}),\" retorna o \",(0,n.jsx)(e.code,{children:\"age\"}),\" (idade) de \",(0,n.jsx)(e.code,{children:\"mary\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Pr\\xE1tica\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Tente \",(0,n.jsxs)(e.a,{href:\"/questions/javascript/function-bind\",children:[\"implementar seu pr\\xF3prio m\\xE9todo \",(0,n.jsx)(e.code,{children:\"Function.prototype.bind()\"})]}),\" na Great Front End.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind\",children:\"Function.prototype.bind() - JavaScript | MDN\"})}),`\n`]})]})}function A(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(s,o)})):s(o)}var G=A;return q(x);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),j=(o,e)=>{for(var d in e)t(o,d,{get:e[d],enumerable:!0})},a=(o,e,d,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!b.call(o,c)&&c!==d&&t(o,c,{get:()=>e[c],enumerable:!(r=m(e,c))||r.enumerable});return o};var q=(o,e,d)=>(d=o!=null?h(g(o)):{},a(e||!o||!o.__esModule?t(d,\"default\",{value:o,enumerable:!0}):d,o)),v=o=>a(t({},\"__esModule\",{value:!0}),o);var l=f((y,i)=>{i.exports=_jsx_runtime});var G={};j(G,{default:()=>s,frontmatter:()=>A});var n=q(l()),A={title:\"Explique `Function.prototype.bind`\"};function u(o){let e={a:\"a\",blockquote:\"blockquote\",code:\"code\",em:\"em\",h2:\"h2\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...o.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsxs)(e.p,{children:[\"O m\\xE9todo \",(0,n.jsx)(e.code,{children:\"bind()\"}),\" cria uma nova fun\\xE7\\xE3o que, quando chamada, tem sua palavra-chave \",(0,n.jsx)(e.code,{children:\"this\"}),\" definida para o valor fornecido, com uma determinada sequ\\xEAncia de argumentos precedendo qualquer um fornecido quando a nova fun\\xE7\\xE3o \\xE9 chamada.\"]}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.em,{children:[\"Source: \",(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind\",children:\"Function.prototype.bind() - JavaScript | MDN\"})]})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"bind()\"}),\" \\xE9 mais \\xFAtil para vincular o valor do \",(0,n.jsx)(e.code,{children:\"this\"}),\" em m\\xE9todos de classes que voc\\xEA quer passar para outras fun\\xE7\\xF5es. Isso foi frequentemente feito em m\\xE9todos de classe de componente React que n\\xE3o foram definidos usando arrow functions.\"]}),`\n`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:\"language-js\",children:`const john = {\n age: 42,\n getAge: function () {\n return this.age;\n },\n};\n\nconsole.log(john.getAge()); // 42\n\nconst unboundGetAge = john.getAge;\nconsole.log(unboundGetAge()); // undefined\n\nconst boundGetAge = john.getAge.bind(john);\nconsole.log(boundGetAge()); // 42\n\nconst mary = { age: 21 };\nconst boundGetAgeMary = john.getAge.bind(mary);\nconsole.log(boundGetAgeMary()); // 21\n`})}),`\n`,(0,n.jsxs)(e.p,{children:[\"No exemplo acima, quando o m\\xE9todo \",(0,n.jsx)(e.code,{children:\"getAge\"}),\" \\xE9 chamado sem um objeto chamado (como \",(0,n.jsx)(e.code,{children:\"unboundGetAge\"}),\"), o valor \\xE9 'indefinido' porque o valor 'this' dentro de \",(0,n.jsx)(e.code,{children:\"getAge()\"}),\" se torna o objeto global. \",(0,n.jsx)(e.code,{children:\"boundGetAge()\"}),\" tem seu \",(0,n.jsx)(e.code,{children:\"this\"}),\" ligado a \",(0,n.jsx)(e.code,{children:\"john\"}),\", portanto pode obter o \",(0,n.jsx)(e.code,{children:\"idade\"}),\" de \",(0,n.jsx)(e.code,{children:\"john\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Podemos at\\xE9 usar \",(0,n.jsx)(e.code,{children:\"getAge\"}),\" em outro objeto que n\\xE3o \\xE9 \",(0,n.jsx)(e.code,{children:\"john\"}),\"! \",(0,n.jsx)(e.code,{children:\"boundGetAgeMary\"}),\" retorna o \",(0,n.jsx)(e.code,{children:\"age\"}),\" (idade) de \",(0,n.jsx)(e.code,{children:\"mary\"}),\".\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Pr\\xE1tica\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"Tente \",(0,n.jsxs)(e.a,{href:\"/questions/javascript/function-bind\",children:[\"implementar seu pr\\xF3prio m\\xE9todo \",(0,n.jsx)(e.code,{children:\"Function.prototype.bind()\"})]}),\" na Great Front End.\"]}),`\n`,(0,n.jsx)(e.h2,{children:\"Refer\\xEAncias\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind\",children:\"Function.prototype.bind() - JavaScript | MDN\"})}),`\n`]})]})}function s(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(u,{...o})}):u(o)}return v(G);})();\n;return Component;"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -27,5 +27,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-hoisting/pt-BR.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),v=(o,e)=>{for(var n in e)s(o,n,{get:e[n],enumerable:!0})},i=(o,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!h.call(o,r)&&r!==n&&s(o,r,{get:()=>e[r],enumerable:!(c=u(e,r))||c.enumerable});return o};var x=(o,e,n)=>(n=o!=null?m(f(o)):{},i(e||!o||!o.__esModule?s(n,\"default\",{value:o,enumerable:!0}):n,o)),b=o=>i(s({},\"__esModule\",{value:!0}),o);var t=g((E,d)=>{d.exports=_jsx_runtime});var _={};v(_,{default:()=>F,frontmatter:()=>O});var a=x(t()),O={title:'Explique \"hoisting\"'};function l(o){let e=Object.assign({p:\"p\",code:\"code\",pre:\"pre\"},o.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(e.p,{children:[\"Hoisting \\xE9 um termo usado para explicar o comportamento de declara\\xE7\\xF5es vari\\xE1veis em seu c\\xF3digo. Vari\\xE1veis declaradas ou inicializadas com a palavra-chave \",(0,a.jsx)(e.code,{children:\"var\"}),' ter\\xE3o sua declara\\xE7\\xE3o \"movida\" at\\xE9 o topo do escopo do m\\xF3dulo/fun\\xE7\\xE3o do escopo, a que chamamos de hoisting. No entanto, apenas a declara\\xE7\\xE3o est\\xE1 hoisted, a atribui\\xE7\\xE3o (se houver uma), ficar\\xE1 onde est\\xE1.']}),`\n`,(0,a.jsx)(e.p,{children:\"Observe que a declara\\xE7\\xE3o n\\xE3o \\xE9 realmente movida - o motor de JavaScript analisa as declara\\xE7\\xF5es durante a compila\\xE7\\xE3o e torna-se ciente das declara\\xE7\\xF5es e dos seus \\xE2mbitos. \\xC9 mais f\\xE1cil compreender este comportamento, visualizando as declara\\xE7\\xF5es como sendo hoisted at\\xE9 ao topo do seu escopo. Vamos explicar com alguns exemplos.\"}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:`console.log(foo); // indefinido\nvar foo = 1;\nconsole.log(foo); // 1\n`})}),`\n`,(0,a.jsx)(e.p,{children:\"As declara\\xE7\\xF5es de fun\\xE7\\xE3o t\\xEAm o corpo hoisted enquanto as express\\xF5es da fun\\xE7\\xE3o (escritas na forma de declara\\xE7\\xF5es vari\\xE1veis) s\\xF3 tem a declara\\xE7\\xE3o da vari\\xE1vel hoisted.\"}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:`// Declara\\xE7\\xE3o de fun\\xE7\\xE3o\nconsole.log(foo); // [Function: foo]\nfoo(); // 'FOOOOO'\nfunction foo() {\n console.log('FOOOOO');\n}\nconsole.log(foo); // [Function: foo]\n\n// Function Expression\nconsole.log(bar); // undefined\nbar(); // Uncaught TypeError: bar is not a function\nvar bar = function () {\n console.log('BARRRR');\n};\nconsole.log(bar); // [Function: bar]\n`})}),`\n`,(0,a.jsxs)(e.p,{children:[\"Vari\\xE1veis declaradas via \",(0,a.jsx)(e.code,{children:\"let\"}),\" e \",(0,a.jsx)(e.code,{children:\"const\"}),\" tamb\\xE9m sofrem o hoisted. No entanto, ao contr\\xE1rio de \",(0,a.jsx)(e.code,{children:\"var\"}),\" e \",(0,a.jsx)(e.code,{children:\"function\"}),\", eles n\\xE3o s\\xE3o inicializados e acess\\xE1-los antes que a declara\\xE7\\xE3o resulte em uma exce\\xE7\\xE3o \",(0,a.jsx)(e.code,{children:\"ReferenceError\"}),'. A vari\\xE1vel est\\xE1 em uma \"zona tempor\\xE1ria morta\" desde o in\\xEDcio do bloco at\\xE9 que a declara\\xE7\\xE3o seja processada.']}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:`x; // undefined; // Erro de refer\\xEAncia: y n\\xE3o est\\xE1 definido\n\nvar x = 'local';\nlet y = 'local';\n`})})]})}function j(o={}){let{wrapper:e}=o.components||{};return e?(0,a.jsx)(e,Object.assign({},o,{children:(0,a.jsx)(l,o)})):l(o)}var F=j;return b(_);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var g=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var n in e)s(o,n,{get:e[n],enumerable:!0})},i=(o,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!v.call(o,r)&&r!==n&&s(o,r,{get:()=>e[r],enumerable:!(c=p(e,r))||c.enumerable});return o};var b=(o,e,n)=>(n=o!=null?u(h(o)):{},i(e||!o||!o.__esModule?s(n,\"default\",{value:o,enumerable:!0}):n,o)),O=o=>i(s({},\"__esModule\",{value:!0}),o);var t=g((q,d)=>{d.exports=_jsx_runtime});var F={};x(F,{default:()=>m,frontmatter:()=>j});var a=b(t()),j={title:'Explique \"hoisting\"'};function l(o){let e={code:\"code\",p:\"p\",pre:\"pre\",...o.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(e.p,{children:[\"Hoisting \\xE9 um termo usado para explicar o comportamento de declara\\xE7\\xF5es vari\\xE1veis em seu c\\xF3digo. Vari\\xE1veis declaradas ou inicializadas com a palavra-chave \",(0,a.jsx)(e.code,{children:\"var\"}),' ter\\xE3o sua declara\\xE7\\xE3o \"movida\" at\\xE9 o topo do escopo do m\\xF3dulo/fun\\xE7\\xE3o do escopo, a que chamamos de hoisting. No entanto, apenas a declara\\xE7\\xE3o est\\xE1 hoisted, a atribui\\xE7\\xE3o (se houver uma), ficar\\xE1 onde est\\xE1.']}),`\n`,(0,a.jsx)(e.p,{children:\"Observe que a declara\\xE7\\xE3o n\\xE3o \\xE9 realmente movida - o motor de JavaScript analisa as declara\\xE7\\xF5es durante a compila\\xE7\\xE3o e torna-se ciente das declara\\xE7\\xF5es e dos seus \\xE2mbitos. \\xC9 mais f\\xE1cil compreender este comportamento, visualizando as declara\\xE7\\xF5es como sendo hoisted at\\xE9 ao topo do seu escopo. Vamos explicar com alguns exemplos.\"}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:`console.log(foo); // indefinido\nvar foo = 1;\nconsole.log(foo); // 1\n`})}),`\n`,(0,a.jsx)(e.p,{children:\"As declara\\xE7\\xF5es de fun\\xE7\\xE3o t\\xEAm o corpo hoisted enquanto as express\\xF5es da fun\\xE7\\xE3o (escritas na forma de declara\\xE7\\xF5es vari\\xE1veis) s\\xF3 tem a declara\\xE7\\xE3o da vari\\xE1vel hoisted.\"}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:`// Declara\\xE7\\xE3o de fun\\xE7\\xE3o\nconsole.log(foo); // [Function: foo]\nfoo(); // 'FOOOOO'\nfunction foo() {\n console.log('FOOOOO');\n}\nconsole.log(foo); // [Function: foo]\n\n// Function Expression\nconsole.log(bar); // undefined\nbar(); // Uncaught TypeError: bar is not a function\nvar bar = function () {\n console.log('BARRRR');\n};\nconsole.log(bar); // [Function: bar]\n`})}),`\n`,(0,a.jsxs)(e.p,{children:[\"Vari\\xE1veis declaradas via \",(0,a.jsx)(e.code,{children:\"let\"}),\" e \",(0,a.jsx)(e.code,{children:\"const\"}),\" tamb\\xE9m sofrem o hoisted. No entanto, ao contr\\xE1rio de \",(0,a.jsx)(e.code,{children:\"var\"}),\" e \",(0,a.jsx)(e.code,{children:\"function\"}),\", eles n\\xE3o s\\xE3o inicializados e acess\\xE1-los antes que a declara\\xE7\\xE3o resulte em uma exce\\xE7\\xE3o \",(0,a.jsx)(e.code,{children:\"ReferenceError\"}),'. A vari\\xE1vel est\\xE1 em uma \"zona tempor\\xE1ria morta\" desde o in\\xEDcio do bloco at\\xE9 que a declara\\xE7\\xE3o seja processada.']}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:\"language-js\",children:`x; // undefined; // Erro de refer\\xEAncia: y n\\xE3o est\\xE1 definido\n\nvar x = 'local';\nlet y = 'local';\n`})})]})}function m(o={}){let{wrapper:e}=o.components||{};return e?(0,a.jsx)(e,{...o,children:(0,a.jsx)(l,{...o})}):l(o)}return O(F);})();\n;return Component;"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -28,5 +28,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/en-US.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var d=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},i=(t,e,r,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of p(e))!u.call(t,s)&&s!==r&&o(t,s,{get:()=>e[s],enumerable:!(a=m(e,s))||a.enumerable});return t};var x=(t,e,r)=>(r=t!=null?d(f(t)):{},i(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),j=t=>i(o({},\"__esModule\",{value:!0}),t);var h=w((F,c)=>{c.exports=_jsx_runtime});var q={};g(q,{default:()=>y,frontmatter:()=>_});var n=x(h()),_={title:\"Explain how a browser determines what elements match a CSS selector.\"};function l(t){let e=Object.assign({p:\"p\",a:\"a\",code:\"code\"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"This question is related to the question about \",(0,n.jsx)(e.a,{href:\"/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css\",children:\"writing efficient CSS\"}),\". Browsers match selectors from rightmost (key selector) to the left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"For example, with a selector \",(0,n.jsx)(e.code,{children:\"p span\"}),\", browsers firstly find all the \",(0,n.jsx)(e.code,{children:\"<span>\"}),\" elements and traverse up its parent all the way up to the root to find the \",(0,n.jsx)(e.code,{children:\"<p>\"}),\" element. For a particular \",(0,n.jsx)(e.code,{children:\"<span>\"}),\", as soon as it finds a \",(0,n.jsx)(e.code,{children:\"<p>\"}),\", it knows that the \",(0,n.jsx)(e.code,{children:\"<span>\"}),\" matches the selector, and can stop traversing its parents.\"]})]})}function b(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(l,t)})):l(t)}var y=b;return j(q);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var m=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},i=(t,e,r,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of f(e))!w.call(t,s)&&s!==r&&o(t,s,{get:()=>e[s],enumerable:!(a=p(e,s))||a.enumerable});return t};var _=(t,e,r)=>(r=t!=null?m(u(t)):{},i(e||!t||!t.__esModule?o(r,\"default\",{value:t,enumerable:!0}):r,t)),j=t=>i(o({},\"__esModule\",{value:!0}),t);var h=x((C,c)=>{c.exports=_jsx_runtime});var b={};g(b,{default:()=>d,frontmatter:()=>y});var n=_(h()),y={title:\"Explain how a browser determines what elements match a CSS selector.\"};function l(t){let e={a:\"a\",code:\"code\",p:\"p\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\"This question is related to the question about \",(0,n.jsx)(e.a,{href:\"/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css\",children:\"writing efficient CSS\"}),\". Browsers match selectors from rightmost (key selector) to the left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"For example, with a selector \",(0,n.jsx)(e.code,{children:\"p span\"}),\", browsers firstly find all the \",(0,n.jsx)(e.code,{children:\"<span>\"}),\" elements and traverse up its parent all the way up to the root to find the \",(0,n.jsx)(e.code,{children:\"<p>\"}),\" element. For a particular \",(0,n.jsx)(e.code,{children:\"<span>\"}),\", as soon as it finds a \",(0,n.jsx)(e.code,{children:\"<p>\"}),\", it knows that the \",(0,n.jsx)(e.code,{children:\"<span>\"}),\" matches the selector, and can stop traversing its parents.\"]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(t)}return j(b);})();\n;return Component;"
|
||||
}
|
||||
|
|
@ -28,5 +28,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/pt-BR.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var a in e)s(o,a,{get:e[a],enumerable:!0})},c=(o,e,a,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of u(e))!g.call(o,n)&&n!==a&&s(o,n,{get:()=>e[n],enumerable:!(t=l(e,n))||t.enumerable});return o};var v=(o,e,a)=>(a=o!=null?p(h(o)):{},c(e||!o||!o.__esModule?s(a,\"default\",{value:o,enumerable:!0}):a,o)),q=o=>c(s({},\"__esModule\",{value:!0}),o);var i=f((M,d)=>{d.exports=_jsx_runtime});var O={};x(O,{default:()=>b,frontmatter:()=>j});var r=v(i()),j={title:\"Explique como um navegador determina quais elementos correspondem a um seletor CSS.\"};function m(o){let e=Object.assign({p:\"p\",a:\"a\",code:\"code\"},o.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.p,{children:[\"Esta pergunta est\\xE1 relacionada com a pergunta sobre \",(0,r.jsx)(e.a,{href:\"/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css\",children:\"escrever um CSS eficiente\"}),\". 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\\xEAncias. Quanto menor o comprimento da cadeia de seletores, mais r\\xE1pido o navegador pode determinar se aquele elemento corresponde ao seletor.\"]}),`\n`,(0,r.jsxs)(e.p,{children:[\"Por exemplo, com um seletor \",(0,r.jsx)(e.code,{children:\"p span\"}),\", os navegadores primeiro encontram todos os elementos \",(0,r.jsx)(e.code,{children:\"<span>\"}),\" e percorrem seus pais at\\xE9 a raiz para encontrar o elemento \",(0,r.jsx)(e.code,{children:\"<p>\"}),\". Para um determinado \",(0,r.jsx)(e.code,{children:\"<span>\"}),\", assim que ele encontrar um \",(0,r.jsx)(e.code,{children:\"<p>\"}),\", ele sabe que o \",(0,r.jsx)(e.code,{children:\"<span>\"}),\" corresponde ao seletor e pode parar de atravessar seus pais.\"]})]})}function _(o={}){let{wrapper:e}=o.components||{};return e?(0,r.jsx)(e,Object.assign({},o,{children:(0,r.jsx)(m,o)})):m(o)}var b=_;return q(O);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var l=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),v=(o,e)=>{for(var a in e)s(o,a,{get:e[a],enumerable:!0})},c=(o,e,a,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of h(e))!g.call(o,n)&&n!==a&&s(o,n,{get:()=>e[n],enumerable:!(t=u(e,n))||t.enumerable});return o};var q=(o,e,a)=>(a=o!=null?l(f(o)):{},c(e||!o||!o.__esModule?s(a,\"default\",{value:o,enumerable:!0}):a,o)),_=o=>c(s({},\"__esModule\",{value:!0}),o);var i=x((S,d)=>{d.exports=_jsx_runtime});var C={};v(C,{default:()=>p,frontmatter:()=>j});var r=q(i()),j={title:\"Explique como um navegador determina quais elementos correspondem a um seletor CSS.\"};function m(o){let e={a:\"a\",code:\"code\",p:\"p\",...o.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.p,{children:[\"Esta pergunta est\\xE1 relacionada com a pergunta sobre \",(0,r.jsx)(e.a,{href:\"/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css\",children:\"escrever um CSS eficiente\"}),\". 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\\xEAncias. Quanto menor o comprimento da cadeia de seletores, mais r\\xE1pido o navegador pode determinar se aquele elemento corresponde ao seletor.\"]}),`\n`,(0,r.jsxs)(e.p,{children:[\"Por exemplo, com um seletor \",(0,r.jsx)(e.code,{children:\"p span\"}),\", os navegadores primeiro encontram todos os elementos \",(0,r.jsx)(e.code,{children:\"<span>\"}),\" e percorrem seus pais at\\xE9 a raiz para encontrar o elemento \",(0,r.jsx)(e.code,{children:\"<p>\"}),\". Para um determinado \",(0,r.jsx)(e.code,{children:\"<span>\"}),\", assim que ele encontrar um \",(0,r.jsx)(e.code,{children:\"<p>\"}),\", ele sabe que o \",(0,r.jsx)(e.code,{children:\"<span>\"}),\" corresponde ao seletor e pode parar de atravessar seus pais.\"]})]})}function p(o={}){let{wrapper:e}=o.components||{};return e?(0,r.jsx)(e,{...o,children:(0,r.jsx)(m,{...o})}):m(o)}return _(C);})();\n;return Component;"
|
||||
}
|
||||
|
|
@ -28,5 +28,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/front-end-interview-handbook/blob/main/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/zh-CN.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),j=(n,e)=>{for(var c in e)r(n,c,{get:e[c],enumerable:!0})},i=(n,e,c,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of f(e))!u.call(n,o)&&o!==c&&r(n,o,{get:()=>e[o],enumerable:!(s=l(e,o))||s.enumerable});return n};var _=(n,e,c)=>(c=n!=null?p(m(n)):{},i(e||!n||!n.__esModule?r(c,\"default\",{value:n,enumerable:!0}):c,n)),g=n=>i(r({},\"__esModule\",{value:!0}),n);var d=x((O,a)=>{a.exports=_jsx_runtime});var w={};j(w,{default:()=>S,frontmatter:()=>C});var t=_(d()),C={title:\"\\u89E3\\u91CA\\u6D4F\\u89C8\\u5668\\u5982\\u4F55\\u786E\\u5B9A\\u54EA\\u4E9B\\u5143\\u7D20\\u4E0E CSS \\u9009\\u62E9\\u5668\\u5339\\u914D\\u3002\"};function h(n){let e=Object.assign({p:\"p\",a:\"a\",code:\"code\"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[\"\\u8FD9\\u4E2A\\u95EE\\u9898\\u4E0E\\u5173\\u4E8E \",(0,t.jsx)(e.a,{href:\"/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css\",children:\"\\u7F16\\u5199\\u9AD8\\u6548 CSS\"}),\" \\u7684\\u95EE\\u9898\\u76F8\\u5173\\u3002\\u6D4F\\u89C8\\u5668\\u4ECE\\u6700\\u53F3\\u4FA7\\uFF08\\u5173\\u952E\\u9009\\u62E9\\u5668\\uFF09\\u5230\\u5DE6\\u4FA7\\u5339\\u914D\\u9009\\u62E9\\u5668\\u3002\\u6D4F\\u89C8\\u5668\\u6839\\u636E\\u5173\\u952E\\u9009\\u62E9\\u5668\\u8FC7\\u6EE4 DOM \\u4E2D\\u7684\\u5143\\u7D20\\uFF0C\\u5E76\\u5411\\u4E0A\\u904D\\u5386\\u5176\\u7236\\u5143\\u7D20\\u4EE5\\u786E\\u5B9A\\u5339\\u914D\\u9879\\u3002\\u9009\\u62E9\\u5668\\u94FE\\u7684\\u957F\\u5EA6\\u8D8A\\u77ED\\uFF0C\\u6D4F\\u89C8\\u5668\\u786E\\u5B9A\\u8BE5\\u5143\\u7D20\\u662F\\u5426\\u4E0E\\u9009\\u62E9\\u5668\\u5339\\u914D\\u7684\\u901F\\u5EA6\\u5C31\\u8D8A\\u5FEB\\u3002\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u4F8B\\u5982\\uFF0C\\u5BF9\\u4E8E\\u9009\\u62E9\\u5668 \",(0,t.jsx)(e.code,{children:\"p span\"}),\"\\uFF0C\\u6D4F\\u89C8\\u5668\\u9996\\u5148\\u627E\\u5230\\u6240\\u6709 \",(0,t.jsx)(e.code,{children:\"<span>\"}),\" \\u5143\\u7D20\\uFF0C\\u5E76\\u5411\\u4E0A\\u904D\\u5386\\u5176\\u7236\\u5143\\u7D20\\uFF0C\\u76F4\\u5230\\u6839\\u5143\\u7D20\\uFF0C\\u4EE5\\u627E\\u5230 \",(0,t.jsx)(e.code,{children:\"<p>\"}),\" \\u5143\\u7D20\\u3002\\u5BF9\\u4E8E\\u7279\\u5B9A\\u7684 \",(0,t.jsx)(e.code,{children:\"<span>\"}),\"\\uFF0C\\u4E00\\u65E6\\u627E\\u5230 \",(0,t.jsx)(e.code,{children:\"<p>\"}),\"\\uFF0C\\u5B83\\u5C31\\u77E5\\u9053 \",(0,t.jsx)(e.code,{children:\"<span>\"}),\" \\u4E0E\\u9009\\u62E9\\u5668\\u5339\\u914D\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u505C\\u6B62\\u904D\\u5386\\u5176\\u7236\\u5143\\u7D20\\u3002\"]})]})}function M(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var S=M;return g(w);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var _=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),j=(n,e)=>{for(var c in e)r(n,c,{get:e[c],enumerable:!0})},i=(n,e,c,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!x.call(n,o)&&o!==c&&r(n,o,{get:()=>e[o],enumerable:!(s=f(e,o))||s.enumerable});return n};var g=(n,e,c)=>(c=n!=null?l(u(n)):{},i(e||!n||!n.__esModule?r(c,\"default\",{value:n,enumerable:!0}):c,n)),C=n=>i(r({},\"__esModule\",{value:!0}),n);var a=_((D,d)=>{d.exports=_jsx_runtime});var S={};j(S,{default:()=>p,frontmatter:()=>M});var t=g(a()),M={title:\"\\u89E3\\u91CA\\u6D4F\\u89C8\\u5668\\u5982\\u4F55\\u786E\\u5B9A\\u54EA\\u4E9B\\u5143\\u7D20\\u4E0E CSS \\u9009\\u62E9\\u5668\\u5339\\u914D\\u3002\"};function h(n){let e={a:\"a\",code:\"code\",p:\"p\",...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.p,{children:[\"\\u8FD9\\u4E2A\\u95EE\\u9898\\u4E0E\\u5173\\u4E8E \",(0,t.jsx)(e.a,{href:\"/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css\",children:\"\\u7F16\\u5199\\u9AD8\\u6548 CSS\"}),\" \\u7684\\u95EE\\u9898\\u76F8\\u5173\\u3002\\u6D4F\\u89C8\\u5668\\u4ECE\\u6700\\u53F3\\u4FA7\\uFF08\\u5173\\u952E\\u9009\\u62E9\\u5668\\uFF09\\u5230\\u5DE6\\u4FA7\\u5339\\u914D\\u9009\\u62E9\\u5668\\u3002\\u6D4F\\u89C8\\u5668\\u6839\\u636E\\u5173\\u952E\\u9009\\u62E9\\u5668\\u8FC7\\u6EE4 DOM \\u4E2D\\u7684\\u5143\\u7D20\\uFF0C\\u5E76\\u5411\\u4E0A\\u904D\\u5386\\u5176\\u7236\\u5143\\u7D20\\u4EE5\\u786E\\u5B9A\\u5339\\u914D\\u9879\\u3002\\u9009\\u62E9\\u5668\\u94FE\\u7684\\u957F\\u5EA6\\u8D8A\\u77ED\\uFF0C\\u6D4F\\u89C8\\u5668\\u786E\\u5B9A\\u8BE5\\u5143\\u7D20\\u662F\\u5426\\u4E0E\\u9009\\u62E9\\u5668\\u5339\\u914D\\u7684\\u901F\\u5EA6\\u5C31\\u8D8A\\u5FEB\\u3002\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u4F8B\\u5982\\uFF0C\\u5BF9\\u4E8E\\u9009\\u62E9\\u5668 \",(0,t.jsx)(e.code,{children:\"p span\"}),\"\\uFF0C\\u6D4F\\u89C8\\u5668\\u9996\\u5148\\u627E\\u5230\\u6240\\u6709 \",(0,t.jsx)(e.code,{children:\"<span>\"}),\" \\u5143\\u7D20\\uFF0C\\u5E76\\u5411\\u4E0A\\u904D\\u5386\\u5176\\u7236\\u5143\\u7D20\\uFF0C\\u76F4\\u5230\\u6839\\u5143\\u7D20\\uFF0C\\u4EE5\\u627E\\u5230 \",(0,t.jsx)(e.code,{children:\"<p>\"}),\" \\u5143\\u7D20\\u3002\\u5BF9\\u4E8E\\u7279\\u5B9A\\u7684 \",(0,t.jsx)(e.code,{children:\"<span>\"}),\"\\uFF0C\\u4E00\\u65E6\\u627E\\u5230 \",(0,t.jsx)(e.code,{children:\"<p>\"}),\"\\uFF0C\\u5B83\\u5C31\\u77E5\\u9053 \",(0,t.jsx)(e.code,{children:\"<span>\"}),\" \\u4E0E\\u9009\\u62E9\\u5668\\u5339\\u914D\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u505C\\u6B62\\u904D\\u5386\\u5176\\u7236\\u5143\\u7D20\\u3002\"]})]})}function p(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(h,{...n})}):h(n)}return C(S);})();\n;return Component;"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -29,5 +29,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/pt-BR.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var l=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),x=(a,e)=>{for(var n in e)t(a,n,{get:e[n],enumerable:!0})},i=(a,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!g.call(a,r)&&r!==n&&t(a,r,{get:()=>e[r],enumerable:!(c=p(e,r))||c.enumerable});return a};var O=(a,e,n)=>(n=a!=null?l(h(a)):{},i(e||!a||!a.__esModule?t(n,\"default\",{value:a,enumerable:!0}):n,a)),v=a=>i(t({},\"__esModule\",{value:!0}),a);var s=f((N,d)=>{d.exports=_jsx_runtime});var b={};x(b,{default:()=>S,frontmatter:()=>j});var o=O(s()),j={title:\"Explique como o JSONP funciona (e como ele n\\xE3o \\xE9 Ajax)\"};function m(a){let e=Object.assign({p:\"p\",code:\"code\",pre:\"pre\",a:\"a\"},a.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.p,{children:\"O JSONP (JSON com padding) \\xE9 um m\\xE9todo comumente utilizado para contornar as pol\\xEDticas de dom\\xEDnio cruzado em navegadores web, porque solicita\\xE7\\xF5es Ajax da p\\xE1gina atual para um dom\\xEDnio de origem cruzada n\\xE3o s\\xE3o permitidas.\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"O JSONP funciona fazendo uma solicita\\xE7\\xE3o a um dom\\xEDnio cross-origin atrav\\xE9s de uma tag \",(0,o.jsx)(e.code,{children:\"<script>\"}),\" e geralmente com um par\\xE2metro de consulta \",(0,o.jsx)(e.code,{children:\"callback\"}),\", por exemplo: \",(0,o.jsx)(e.code,{children:\"https://example O?callback=printData\"}),\". O servidor ir\\xE1, ent\\xE3o, encapsular os dados em uma fun\\xE7\\xE3o chamada printData e envi\\xE1-la de volta ao cliente.\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-html\",children:`<!-- https://mydomain.com -->\n<script>\n function printData(data) {\n console.log(\\`My name is \\${data.name}!\\`);\n }\n<\\/script>\n\n<script src=\"https://example.com?callback=printData\"><\\/script>\n`})}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`// Arquivo carregado de https://example.com?callback=printData\nprintData({ name: 'John Doe' });\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"O cliente deve ter a fun\\xE7\\xE3o \",(0,o.jsx)(e.code,{children:\"printData\"}),\" no seu escopo global e a fun\\xE7\\xE3o ser\\xE1 executada pelo cliente quando a resposta do dom\\xEDnio de origem cruzada for recebida.\"]}),`\n`,(0,o.jsx)(e.p,{children:\"O JSONP pode ser inseguro e tem algumas implica\\xE7\\xF5es de seguran\\xE7a. Como o JSONP \\xE9 JavaScript, ele pode fazer tudo o que o JavaScript pode fazer, ent\\xE3o voc\\xEA precisa confiar no provedor dos dados JSONP.\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Hoje em dia, \",(0,o.jsx)(e.a,{href:\"http://en.wikipedia.org/wiki/Cross-origin_resource_sharing\",children:\"CORS\"}),\" \\xE9 a abordagem recomendada, e a JSONP \\xE9 vista como um hack.\"]})]})}function J(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,Object.assign({},a,{children:(0,o.jsx)(m,a)})):m(a)}var S=J;return v(b);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),O=(a,e)=>{for(var n in e)t(a,n,{get:e[n],enumerable:!0})},i=(a,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of h(e))!f.call(a,r)&&r!==n&&t(a,r,{get:()=>e[r],enumerable:!(c=u(e,r))||c.enumerable});return a};var v=(a,e,n)=>(n=a!=null?p(g(a)):{},i(e||!a||!a.__esModule?t(n,\"default\",{value:a,enumerable:!0}):n,a)),J=a=>i(t({},\"__esModule\",{value:!0}),a);var s=x((j,d)=>{d.exports=_jsx_runtime});var D={};O(D,{default:()=>l,frontmatter:()=>S});var o=v(s()),S={title:\"Explique como o JSONP funciona (e como ele n\\xE3o \\xE9 Ajax)\"};function m(a){let e={a:\"a\",code:\"code\",p:\"p\",pre:\"pre\",...a.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.p,{children:\"O JSONP (JSON com padding) \\xE9 um m\\xE9todo comumente utilizado para contornar as pol\\xEDticas de dom\\xEDnio cruzado em navegadores web, porque solicita\\xE7\\xF5es Ajax da p\\xE1gina atual para um dom\\xEDnio de origem cruzada n\\xE3o s\\xE3o permitidas.\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"O JSONP funciona fazendo uma solicita\\xE7\\xE3o a um dom\\xEDnio cross-origin atrav\\xE9s de uma tag \",(0,o.jsx)(e.code,{children:\"<script>\"}),\" e geralmente com um par\\xE2metro de consulta \",(0,o.jsx)(e.code,{children:\"callback\"}),\", por exemplo: \",(0,o.jsx)(e.code,{children:\"https://example O?callback=printData\"}),\". O servidor ir\\xE1, ent\\xE3o, encapsular os dados em uma fun\\xE7\\xE3o chamada printData e envi\\xE1-la de volta ao cliente.\"]}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-html\",children:`<!-- https://mydomain.com -->\n<script>\n function printData(data) {\n console.log(\\`My name is \\${data.name}!\\`);\n }\n<\\/script>\n\n<script src=\"https://example.com?callback=printData\"><\\/script>\n`})}),`\n`,(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:\"language-js\",children:`// Arquivo carregado de https://example.com?callback=printData\nprintData({ name: 'John Doe' });\n`})}),`\n`,(0,o.jsxs)(e.p,{children:[\"O cliente deve ter a fun\\xE7\\xE3o \",(0,o.jsx)(e.code,{children:\"printData\"}),\" no seu escopo global e a fun\\xE7\\xE3o ser\\xE1 executada pelo cliente quando a resposta do dom\\xEDnio de origem cruzada for recebida.\"]}),`\n`,(0,o.jsx)(e.p,{children:\"O JSONP pode ser inseguro e tem algumas implica\\xE7\\xF5es de seguran\\xE7a. Como o JSONP \\xE9 JavaScript, ele pode fazer tudo o que o JavaScript pode fazer, ent\\xE3o voc\\xEA precisa confiar no provedor dos dados JSONP.\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"Hoje em dia, \",(0,o.jsx)(e.a,{href:\"http://en.wikipedia.org/wiki/Cross-origin_resource_sharing\",children:\"CORS\"}),\" \\xE9 a abordagem recomendada, e a JSONP \\xE9 vista como um hack.\"]})]})}function l(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,{...a,children:(0,o.jsx)(m,{...a})}):m(a)}return J(D);})();\n;return Component;"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -32,5 +32,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-prototypal-inheritance-works/pt-BR.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var b=(n,o)=>()=>(o||n((o={exports:{}}).exports,o),o.exports),j=(n,o)=>{for(var t in o)r(n,t,{get:o[t],enumerable:!0})},i=(n,o,t,c)=>{if(o&&typeof o==\"object\"||typeof o==\"function\")for(let a of h(o))!_.call(n,a)&&a!==t&&r(n,a,{get:()=>o[a],enumerable:!(c=m(o,a))||c.enumerable});return n};var f=(n,o,t)=>(t=n!=null?p(u(n)):{},i(o||!n||!n.__esModule?r(t,\"default\",{value:n,enumerable:!0}):t,n)),g=n=>i(r({},\"__esModule\",{value:!0}),n);var s=b((O,d)=>{d.exports=_jsx_runtime});var S={};j(S,{default:()=>y,frontmatter:()=>x});var e=f(s()),x={title:\"Explique como funciona a heran\\xE7a de prot\\xF3tipos\"};function l(n){let o=Object.assign({p:\"p\",code:\"code\",a:\"a\",h2:\"h2\",pre:\"pre\",ul:\"ul\",li:\"li\"},n.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(o.p,{children:[\"Essa \\xE9 uma pergunta extremamente comum em entrevistas de JavaScript. Todos os objetos JavaScript t\\xEAm uma propriedade \",(0,e.jsx)(o.code,{children:\"__proto__\"}),\" com exce\\xE7\\xE3o de objetos criados com \",(0,e.jsx)(o.code,{children:\"object.create(null)\"}),', ou seja, uma refer\\xEAncia a outro objeto, que \\xE9 chamado de \"prot\\xF3tipo\" do objeto. Quando uma propriedade \\xE9 acessada em um objeto e se a propriedade n\\xE3o \\xE9 encontrada nesse objeto, o motor de JavaScript olha para o objeto ',(0,e.jsx)(o.code,{children:\"__proto__\"}),\", e o \",(0,e.jsx)(o.code,{children:\"__proto__\"}),\" do \",(0,e.jsx)(o.code,{children:\"__proto__\"}),\" e assim por diante, at\\xE9 que encontre a propriedade definida em um dos \",(0,e.jsx)(o.code,{children:\"__proto__\"}),\"s ou at\\xE9 chegar ao final da cadeia de prot\\xF3tipos. Este comportamento simula a heran\\xE7a cl\\xE1ssica, mas \\xE9 realmente mais de \",(0,e.jsx)(o.a,{href:\"https://davidwalsh.name/javascript-objects\",children:\"delega\\xE7\\xE3o do que heran\\xE7a\"}),\".\"]}),`\n`,(0,e.jsx)(o.h2,{children:\"Exemplo de Heran\\xE7a de Prot\\xF3tipos\"}),`\n`,(0,e.jsx)(o.pre,{children:(0,e.jsx)(o.code,{className:\"language-js\",children:`// Construtor de objeto pai.\nfunction Animal(name) {\n this.name = name;\n}\n\n// Adiciona um m\\xE9todo ao prot\\xF3tipo do objeto pai.\nAnimal.prototype.makeSound = function () {\n console.log('O ' + this.constructor.name + ' faz um som.');\n};\n\n// Construtor filho.\nfunction Dog(name) {\n Animal.call(this, name); // Chama o construtor pai.\n}\n\n// Set the child object's prototype to be the parent's prototype.\nObject.setPrototypeOf(Dog.prototype, Animal.prototype);\n\n// Adiciona um m\\xE9todo ao prot\\xF3tipo do objeto filho.\nDog.prototype.bark = function () {\n console.log('Woof!');\n};\n\n// Criar uma nova inst\\xE2ncia do Cachorro.\nconst bolt = new Dog('Bolt');\n\n// Chama m\\xE9todos no objeto filho.\nconsole.log(bolt.name); // \"Bolt\"\nbolt.makeSound(); // \"O Dog faz um som.\"\nbolt.bark(); // \"Woof!\"\n`})}),`\n`,(0,e.jsx)(o.p,{children:\"As coisas a observar s\\xE3o:\"}),`\n`,(0,e.jsxs)(o.ul,{children:[`\n`,(0,e.jsxs)(o.li,{children:[(0,e.jsx)(o.code,{children:\".makeSound\"}),\" n\\xE3o est\\xE1 definido em \",(0,e.jsx)(o.code,{children:\"Dog\"}),\", ent\\xE3o o navegador aumenta a cadeia de prot\\xF3tipos e encontra \",(0,e.jsx)(o.code,{children:\".makeSound\"}),\" para fora do \",(0,e.jsx)(o.code,{children:\"Animal\"}),\" herdado.\"]}),`\n`,(0,e.jsxs)(o.li,{children:[\"Using \",(0,e.jsx)(o.code,{children:\"Object.create\"}),\" to build the inheritance chain is no longer recommended. Use \",(0,e.jsx)(o.code,{children:\"Object.setPrototypeOf\"}),\" instead.\"]}),`\n`]}),`\n`,(0,e.jsx)(o.h2,{children:\"Resources\"}),`\n`,(0,e.jsxs)(o.ul,{children:[`\n`,(0,e.jsx)(o.li,{children:(0,e.jsx)(o.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain\",children:\"Inheritance and the prototype chain | MDN\"})}),`\n`]})]})}function v(n={}){let{wrapper:o}=n.components||{};return o?(0,e.jsx)(o,Object.assign({},n,{children:(0,e.jsx)(l,n)})):l(n)}var y=v;return g(S);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var m=Object.create;var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var f=(n,o)=>()=>(o||n((o={exports:{}}).exports,o),o.exports),j=(n,o)=>{for(var t in o)r(n,t,{get:o[t],enumerable:!0})},i=(n,o,t,c)=>{if(o&&typeof o==\"object\"||typeof o==\"function\")for(let a of u(o))!b.call(n,a)&&a!==t&&r(n,a,{get:()=>o[a],enumerable:!(c=h(o,a))||c.enumerable});return n};var g=(n,o,t)=>(t=n!=null?m(_(n)):{},i(o||!n||!n.__esModule?r(t,\"default\",{value:n,enumerable:!0}):t,n)),x=n=>i(r({},\"__esModule\",{value:!0}),n);var s=f((D,d)=>{d.exports=_jsx_runtime});var y={};j(y,{default:()=>p,frontmatter:()=>v});var e=g(s()),v={title:\"Explique como funciona a heran\\xE7a de prot\\xF3tipos\"};function l(n){let o={a:\"a\",code:\"code\",h2:\"h2\",li:\"li\",p:\"p\",pre:\"pre\",ul:\"ul\",...n.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(o.p,{children:[\"Essa \\xE9 uma pergunta extremamente comum em entrevistas de JavaScript. Todos os objetos JavaScript t\\xEAm uma propriedade \",(0,e.jsx)(o.code,{children:\"__proto__\"}),\" com exce\\xE7\\xE3o de objetos criados com \",(0,e.jsx)(o.code,{children:\"object.create(null)\"}),', ou seja, uma refer\\xEAncia a outro objeto, que \\xE9 chamado de \"prot\\xF3tipo\" do objeto. Quando uma propriedade \\xE9 acessada em um objeto e se a propriedade n\\xE3o \\xE9 encontrada nesse objeto, o motor de JavaScript olha para o objeto ',(0,e.jsx)(o.code,{children:\"__proto__\"}),\", e o \",(0,e.jsx)(o.code,{children:\"__proto__\"}),\" do \",(0,e.jsx)(o.code,{children:\"__proto__\"}),\" e assim por diante, at\\xE9 que encontre a propriedade definida em um dos \",(0,e.jsx)(o.code,{children:\"__proto__\"}),\"s ou at\\xE9 chegar ao final da cadeia de prot\\xF3tipos. Este comportamento simula a heran\\xE7a cl\\xE1ssica, mas \\xE9 realmente mais de \",(0,e.jsx)(o.a,{href:\"https://davidwalsh.name/javascript-objects\",children:\"delega\\xE7\\xE3o do que heran\\xE7a\"}),\".\"]}),`\n`,(0,e.jsx)(o.h2,{children:\"Exemplo de Heran\\xE7a de Prot\\xF3tipos\"}),`\n`,(0,e.jsx)(o.pre,{children:(0,e.jsx)(o.code,{className:\"language-js\",children:`// Construtor de objeto pai.\nfunction Animal(name) {\n this.name = name;\n}\n\n// Adiciona um m\\xE9todo ao prot\\xF3tipo do objeto pai.\nAnimal.prototype.makeSound = function () {\n console.log('O ' + this.constructor.name + ' faz um som.');\n};\n\n// Construtor filho.\nfunction Dog(name) {\n Animal.call(this, name); // Chama o construtor pai.\n}\n\n// Set the child object's prototype to be the parent's prototype.\nObject.setPrototypeOf(Dog.prototype, Animal.prototype);\n\n// Adiciona um m\\xE9todo ao prot\\xF3tipo do objeto filho.\nDog.prototype.bark = function () {\n console.log('Woof!');\n};\n\n// Criar uma nova inst\\xE2ncia do Cachorro.\nconst bolt = new Dog('Bolt');\n\n// Chama m\\xE9todos no objeto filho.\nconsole.log(bolt.name); // \"Bolt\"\nbolt.makeSound(); // \"O Dog faz um som.\"\nbolt.bark(); // \"Woof!\"\n`})}),`\n`,(0,e.jsx)(o.p,{children:\"As coisas a observar s\\xE3o:\"}),`\n`,(0,e.jsxs)(o.ul,{children:[`\n`,(0,e.jsxs)(o.li,{children:[(0,e.jsx)(o.code,{children:\".makeSound\"}),\" n\\xE3o est\\xE1 definido em \",(0,e.jsx)(o.code,{children:\"Dog\"}),\", ent\\xE3o o navegador aumenta a cadeia de prot\\xF3tipos e encontra \",(0,e.jsx)(o.code,{children:\".makeSound\"}),\" para fora do \",(0,e.jsx)(o.code,{children:\"Animal\"}),\" herdado.\"]}),`\n`,(0,e.jsxs)(o.li,{children:[\"Using \",(0,e.jsx)(o.code,{children:\"Object.create\"}),\" to build the inheritance chain is no longer recommended. Use \",(0,e.jsx)(o.code,{children:\"Object.setPrototypeOf\"}),\" instead.\"]}),`\n`]}),`\n`,(0,e.jsx)(o.h2,{children:\"Resources\"}),`\n`,(0,e.jsxs)(o.ul,{children:[`\n`,(0,e.jsx)(o.li,{children:(0,e.jsx)(o.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain\",children:\"Inheritance and the prototype chain | MDN\"})}),`\n`]})]})}function p(n={}){let{wrapper:o}=n.components||{};return o?(0,e.jsx)(o,{...n,children:(0,e.jsx)(l,{...n})}):l(n)}return x(y);})();\n;return Component;"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -30,5 +30,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/top-javascript-interview-questions/blob/main/questions/explain-how-this-works-in-javascript/pt-BR.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),v=(a,e)=>{for(var n in e)i(a,n,{get:e[n],enumerable:!0})},d=(a,e,n,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of u(e))!f.call(a,c)&&c!==n&&i(a,c,{get:()=>e[c],enumerable:!(r=h(e,c))||r.enumerable});return a};var b=(a,e,n)=>(n=a!=null?m(p(a)):{},d(e||!a||!a.__esModule?i(n,\"default\",{value:a,enumerable:!0}):n,a)),x=a=>d(i({},\"__esModule\",{value:!0}),a);var l=g((y,t)=>{t.exports=_jsx_runtime});var w={};v(w,{default:()=>q,frontmatter:()=>j});var o=b(l()),j={title:\"Explique como `this` funciona em JavaScript\"};function s(a){let e=Object.assign({p:\"p\",code:\"code\",a:\"a\",ol:\"ol\",li:\"li\",h4:\"h4\"},a.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"N\\xE3o h\\xE1 uma explica\\xE7\\xE3o simples para \",(0,o.jsx)(e.code,{children:\"this\"}),\"; ela \\xE9 um dos conceitos mais confusos do JavaScript. Uma explica\\xE7\\xE3o superficial \\xE9 que o valor do \",(0,o.jsx)(e.code,{children:\"this\"}),\" depende de como a fun\\xE7\\xE3o \\xE9 chamada. Tendo lido muitas explica\\xE7\\xF5es sobre \",(0,o.jsx)(e.code,{children:\"this\"}),\" online, \",(0,o.jsx)(e.a,{href:\"https://medium.com/@arnav_aggarwal\",children:\"Arnav Aggrawal\"}),\" \\xE9 a explica\\xE7\\xE3o que foi mais clara. As seguintes regras se aplicam:\"]}),`\n`,(0,o.jsxs)(e.ol,{children:[`\n`,(0,o.jsxs)(e.li,{children:[\"Se a palavra-chave \",(0,o.jsx)(e.code,{children:\"new\"}),\" \\xE9 usada ao chamar a fun\\xE7\\xE3o, \",(0,o.jsx)(e.code,{children:\"new\"}),\" dentro da fun\\xE7\\xE3o \\xE9 um objeto totalmente novo.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Se \",(0,o.jsx)(e.code,{children:\"apply\"}),\", \",(0,o.jsx)(e.code,{children:\"call\"}),\", ou \",(0,o.jsx)(e.code,{children:\"bind\"}),\" forem usados para chamar/criar uma fun\\xE7\\xE3o, \",(0,o.jsx)(e.code,{children:\"this\"}),\" dentro da fun\\xE7\\xE3o \\xE9 o objeto passado como o argumento.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Se uma fun\\xE7\\xE3o \\xE9 chamada como um m\\xE9todo, como \",(0,o.jsx)(e.code,{children:\"obj.method()\"}),\" \\u2014 \",(0,o.jsx)(e.code,{children:\"this\"}),\" \\xE9 o objeto do qual a fun\\xE7\\xE3o \\xE9 uma propriedade.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Se uma fun\\xE7\\xE3o \\xE9 chamada como uma chamada de fun\\xE7\\xE3o livre, significando que ele foi invocado sem nenhuma das condi\\xE7\\xF5es presentes acima, \",(0,o.jsx)(e.code,{children:\"this\"}),\" \\xE9 o objeto global. Em um navegador, \\xE9 o objeto \",(0,o.jsx)(e.code,{children:\"window\"}),\". Se em modo estrito (\",(0,o.jsx)(e.code,{children:\"'use strict'\"}),\"), \",(0,o.jsx)(e.code,{children:\"this\"}),\" ser\\xE1 \",(0,o.jsx)(e.code,{children:\"undefined\"}),\" em vez do objeto global.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Se se aplicarem m\\xFAltiplas das regras acima, a regra que \\xE9 maior ganha e definir\\xE1 o valor \",(0,o.jsx)(e.code,{children:\"this\"}),\".\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Se a fun\\xE7\\xE3o \\xE9 uma arrow function ES2015, ela ignora todas as regras acima e recebe o valor \",(0,o.jsx)(e.code,{children:\"this\"}),\" do seu escopo circundante no momento em que ele \\xE9 criado.\"]}),`\n`]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Para uma explica\\xE7\\xE3o aprofundada, confira o \",(0,o.jsx)(e.a,{href:\"https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3\",children:\"artigo na Medium\"}),\".\"]}),`\n`,(0,o.jsx)(e.h4,{children:'Voc\\xEA pode dar um exemplo de uma das maneiras como o trabalho com \"this\" mudou no ES2015?'}),`\n`,(0,o.jsxs)(e.p,{children:[\"ES2015 permite que voc\\xEA use \",(0,o.jsx)(e.a,{href:\"http://2ality.com/2017/12/alternate-this.html#arrow-functions\",children:\"arrow functions\"}),\" que usa o \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this\",children:\"enclosing lexical scope\"}),\". Isso geralmente \\xE9 conveniente, mas impede quem chamou de controlar o contexto atrav\\xE9s de \",(0,o.jsx)(e.code,{children:\".call\"}),\" ou \",(0,o.jsx)(e.code,{children:\".apply\"}),\"\\u2014as consequ\\xEAncias s\\xE3o que uma biblioteca como \",(0,o.jsx)(e.code,{children:\"jQuery\"}),\" n\\xE3o ir\\xE1 vincular corretamente o \",(0,o.jsx)(e.code,{children:\"this\"}),\" em suas fun\\xE7\\xF5es de manipulador de eventos. Portanto, \\xE9 importante ter isso em mente ao refatorar grandes aplica\\xE7\\xF5es legadas.\"]})]})}function S(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,Object.assign({},a,{children:(0,o.jsx)(s,a)})):s(a)}var q=S;return x(w);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),b=(a,e)=>{for(var n in e)r(a,n,{get:e[n],enumerable:!0})},d=(a,e,n,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of p(e))!g.call(a,c)&&c!==n&&r(a,c,{get:()=>e[c],enumerable:!(i=u(e,c))||i.enumerable});return a};var x=(a,e,n)=>(n=a!=null?h(f(a)):{},d(e||!a||!a.__esModule?r(n,\"default\",{value:a,enumerable:!0}):n,a)),j=a=>d(r({},\"__esModule\",{value:!0}),a);var l=v((_,t)=>{t.exports=_jsx_runtime});var q={};b(q,{default:()=>m,frontmatter:()=>S});var o=x(l()),S={title:\"Explique como `this` funciona em JavaScript\"};function s(a){let e={a:\"a\",code:\"code\",h4:\"h4\",li:\"li\",ol:\"ol\",p:\"p\",...a.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[\"N\\xE3o h\\xE1 uma explica\\xE7\\xE3o simples para \",(0,o.jsx)(e.code,{children:\"this\"}),\"; ela \\xE9 um dos conceitos mais confusos do JavaScript. Uma explica\\xE7\\xE3o superficial \\xE9 que o valor do \",(0,o.jsx)(e.code,{children:\"this\"}),\" depende de como a fun\\xE7\\xE3o \\xE9 chamada. Tendo lido muitas explica\\xE7\\xF5es sobre \",(0,o.jsx)(e.code,{children:\"this\"}),\" online, \",(0,o.jsx)(e.a,{href:\"https://medium.com/@arnav_aggarwal\",children:\"Arnav Aggrawal\"}),\" \\xE9 a explica\\xE7\\xE3o que foi mais clara. As seguintes regras se aplicam:\"]}),`\n`,(0,o.jsxs)(e.ol,{children:[`\n`,(0,o.jsxs)(e.li,{children:[\"Se a palavra-chave \",(0,o.jsx)(e.code,{children:\"new\"}),\" \\xE9 usada ao chamar a fun\\xE7\\xE3o, \",(0,o.jsx)(e.code,{children:\"new\"}),\" dentro da fun\\xE7\\xE3o \\xE9 um objeto totalmente novo.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Se \",(0,o.jsx)(e.code,{children:\"apply\"}),\", \",(0,o.jsx)(e.code,{children:\"call\"}),\", ou \",(0,o.jsx)(e.code,{children:\"bind\"}),\" forem usados para chamar/criar uma fun\\xE7\\xE3o, \",(0,o.jsx)(e.code,{children:\"this\"}),\" dentro da fun\\xE7\\xE3o \\xE9 o objeto passado como o argumento.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Se uma fun\\xE7\\xE3o \\xE9 chamada como um m\\xE9todo, como \",(0,o.jsx)(e.code,{children:\"obj.method()\"}),\" \\u2014 \",(0,o.jsx)(e.code,{children:\"this\"}),\" \\xE9 o objeto do qual a fun\\xE7\\xE3o \\xE9 uma propriedade.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Se uma fun\\xE7\\xE3o \\xE9 chamada como uma chamada de fun\\xE7\\xE3o livre, significando que ele foi invocado sem nenhuma das condi\\xE7\\xF5es presentes acima, \",(0,o.jsx)(e.code,{children:\"this\"}),\" \\xE9 o objeto global. Em um navegador, \\xE9 o objeto \",(0,o.jsx)(e.code,{children:\"window\"}),\". Se em modo estrito (\",(0,o.jsx)(e.code,{children:\"'use strict'\"}),\"), \",(0,o.jsx)(e.code,{children:\"this\"}),\" ser\\xE1 \",(0,o.jsx)(e.code,{children:\"undefined\"}),\" em vez do objeto global.\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Se se aplicarem m\\xFAltiplas das regras acima, a regra que \\xE9 maior ganha e definir\\xE1 o valor \",(0,o.jsx)(e.code,{children:\"this\"}),\".\"]}),`\n`,(0,o.jsxs)(e.li,{children:[\"Se a fun\\xE7\\xE3o \\xE9 uma arrow function ES2015, ela ignora todas as regras acima e recebe o valor \",(0,o.jsx)(e.code,{children:\"this\"}),\" do seu escopo circundante no momento em que ele \\xE9 criado.\"]}),`\n`]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Para uma explica\\xE7\\xE3o aprofundada, confira o \",(0,o.jsx)(e.a,{href:\"https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3\",children:\"artigo na Medium\"}),\".\"]}),`\n`,(0,o.jsx)(e.h4,{children:'Voc\\xEA pode dar um exemplo de uma das maneiras como o trabalho com \"this\" mudou no ES2015?'}),`\n`,(0,o.jsxs)(e.p,{children:[\"ES2015 permite que voc\\xEA use \",(0,o.jsx)(e.a,{href:\"http://2ality.com/2017/12/alternate-this.html#arrow-functions\",children:\"arrow functions\"}),\" que usa o \",(0,o.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this\",children:\"enclosing lexical scope\"}),\". Isso geralmente \\xE9 conveniente, mas impede quem chamou de controlar o contexto atrav\\xE9s de \",(0,o.jsx)(e.code,{children:\".call\"}),\" ou \",(0,o.jsx)(e.code,{children:\".apply\"}),\"\\u2014as consequ\\xEAncias s\\xE3o que uma biblioteca como \",(0,o.jsx)(e.code,{children:\"jQuery\"}),\" n\\xE3o ir\\xE1 vincular corretamente o \",(0,o.jsx)(e.code,{children:\"this\"}),\" em suas fun\\xE7\\xF5es de manipulador de eventos. Portanto, \\xE9 importante ter isso em mente ao refatorar grandes aplica\\xE7\\xF5es legadas.\"]})]})}function m(a={}){let{wrapper:e}=a.components||{};return e?(0,o.jsx)(e,{...a,children:(0,o.jsx)(s,{...a})}):s(a)}return j(q);})();\n;return Component;"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -32,5 +32,5 @@
|
|||
],
|
||||
"gitHubEditUrl": "https://github.com/yangshun/top-reactjs-interview-questions/blob/main/questions/explain-the-composition-pattern-in-react/en-US.mdx"
|
||||
},
|
||||
"solution": "var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),b=(i,n)=>{for(var o in n)a(i,o,{get:n[o],enumerable:!0})},r=(i,n,o,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of m(n))!g.call(i,t)&&t!==o&&a(i,t,{get:()=>n[t],enumerable:!(s=d(n,t))||s.enumerable});return i};var x=(i,n,o)=>(o=i!=null?h(u(i)):{},r(n||!i||!i.__esModule?a(o,\"default\",{value:i,enumerable:!0}):o,i)),y=i=>r(a({},\"__esModule\",{value:!0}),i);var l=f((C,c)=>{c.exports=_jsx_runtime});var R={};b(R,{default:()=>j,frontmatter:()=>v});var e=x(l()),v={title:\"Explain the composition pattern in React\"};function p(i){let n=Object.assign({h2:\"h2\",p:\"p\",pre:\"pre\",code:\"code\",hr:\"hr\",h3:\"h3\",h4:\"h4\",ul:\"ul\",li:\"li\",strong:\"strong\",a:\"a\"},i.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"The composition pattern in React is a way to build components by combining smaller, reusable components. Instead of using inheritance, React encourages composition to create complex UIs. You can pass components as children or props to other components to achieve this. For example:\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function WelcomeDialog() {\n return (\n <Dialog>\n <h1>Welcome</h1>\n <p>Thank you for visiting our spacecraft!</p>\n </Dialog>\n );\n}\n\nfunction Dialog(props) {\n return <div className=\"dialog\">{props.children}</div>;\n}\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Composition pattern in React\"}),`\n`,(0,e.jsx)(n.h3,{children:\"What is composition?\"}),`\n`,(0,e.jsx)(n.p,{children:\"Composition is a design principle that involves combining smaller, reusable components to build more complex components. In React, this is preferred over inheritance for creating complex UIs.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"How to use composition in React\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Passing components as children\"}),`\n`,(0,e.jsx)(n.p,{children:\"One common way to use composition is by passing components as children to other components. This allows you to nest components and create a hierarchy.\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function Dialog(props) {\n return <div className=\"dialog\">{props.children}</div>;\n}\n\nfunction WelcomeDialog() {\n return (\n <Dialog>\n <h1>Welcome</h1>\n <p>Thank you for visiting our spacecraft!</p>\n </Dialog>\n );\n}\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"Passing components as props\"}),`\n`,(0,e.jsx)(n.p,{children:\"Another way to achieve composition is by passing components as props. This allows for more flexibility and customization.\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function SplitPane(props) {\n return (\n <div className=\"split-pane\">\n <div className=\"split-pane-left\">{props.left}</div>\n <div className=\"split-pane-right\">{props.right}</div>\n </div>\n );\n}\n\nfunction App() {\n return <SplitPane left={<Contacts />} right={<Chat />} />;\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Benefits of composition\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Reusability\"}),\": Smaller components can be reused across different parts of the application.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Maintainability\"}),\": Easier to manage and update smaller components.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Flexibility\"}),\": Components can be easily combined in different ways to create complex UIs.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"When to use composition\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"When you need to create complex UIs from smaller, reusable components.\"}),`\n`,(0,e.jsx)(n.li,{children:\"When you want to avoid the pitfalls of inheritance, such as tight coupling and difficulty in managing state.\"}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://krasimir.gitbooks.io/react-in-patterns/content/chapter-04/\",children:\"Composition in React\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0\",children:\"Medium article on React composition\"})}),`\n`]})]})}function D(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,Object.assign({},i,{children:(0,e.jsx)(p,i)})):p(i)}var j=D;return y(R);})();\n;return Component;"
|
||||
"solution": "var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(i,n)=>()=>(n||i((n={exports:{}}).exports,n),n.exports),b=(i,n)=>{for(var o in n)a(i,o,{get:n[o],enumerable:!0})},s=(i,n,o,r)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let t of u(n))!f.call(i,t)&&t!==o&&a(i,t,{get:()=>n[t],enumerable:!(r=m(n,t))||r.enumerable});return i};var y=(i,n,o)=>(o=i!=null?d(g(i)):{},s(n||!i||!i.__esModule?a(o,\"default\",{value:i,enumerable:!0}):o,i)),v=i=>s(a({},\"__esModule\",{value:!0}),i);var l=x((j,c)=>{c.exports=_jsx_runtime});var R={};b(R,{default:()=>h,frontmatter:()=>D});var e=y(l()),D={title:\"Explain the composition pattern in React\"};function p(i){let n={a:\"a\",code:\"code\",h2:\"h2\",h3:\"h3\",h4:\"h4\",hr:\"hr\",li:\"li\",p:\"p\",pre:\"pre\",strong:\"strong\",ul:\"ul\",...i.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.h2,{children:\"TL;DR\"}),`\n`,(0,e.jsx)(n.p,{children:\"The composition pattern in React is a way to build components by combining smaller, reusable components. Instead of using inheritance, React encourages composition to create complex UIs. You can pass components as children or props to other components to achieve this. For example:\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function WelcomeDialog() {\n return (\n <Dialog>\n <h1>Welcome</h1>\n <p>Thank you for visiting our spacecraft!</p>\n </Dialog>\n );\n}\n\nfunction Dialog(props) {\n return <div className=\"dialog\">{props.children}</div>;\n}\n`})}),`\n`,(0,e.jsx)(n.hr,{}),`\n`,(0,e.jsx)(n.h2,{children:\"Composition pattern in React\"}),`\n`,(0,e.jsx)(n.h3,{children:\"What is composition?\"}),`\n`,(0,e.jsx)(n.p,{children:\"Composition is a design principle that involves combining smaller, reusable components to build more complex components. In React, this is preferred over inheritance for creating complex UIs.\"}),`\n`,(0,e.jsx)(n.h3,{children:\"How to use composition in React\"}),`\n`,(0,e.jsx)(n.h4,{children:\"Passing components as children\"}),`\n`,(0,e.jsx)(n.p,{children:\"One common way to use composition is by passing components as children to other components. This allows you to nest components and create a hierarchy.\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function Dialog(props) {\n return <div className=\"dialog\">{props.children}</div>;\n}\n\nfunction WelcomeDialog() {\n return (\n <Dialog>\n <h1>Welcome</h1>\n <p>Thank you for visiting our spacecraft!</p>\n </Dialog>\n );\n}\n`})}),`\n`,(0,e.jsx)(n.h4,{children:\"Passing components as props\"}),`\n`,(0,e.jsx)(n.p,{children:\"Another way to achieve composition is by passing components as props. This allows for more flexibility and customization.\"}),`\n`,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:\"language-jsx\",children:`function SplitPane(props) {\n return (\n <div className=\"split-pane\">\n <div className=\"split-pane-left\">{props.left}</div>\n <div className=\"split-pane-right\">{props.right}</div>\n </div>\n );\n}\n\nfunction App() {\n return <SplitPane left={<Contacts />} right={<Chat />} />;\n}\n`})}),`\n`,(0,e.jsx)(n.h3,{children:\"Benefits of composition\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Reusability\"}),\": Smaller components can be reused across different parts of the application.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Maintainability\"}),\": Easier to manage and update smaller components.\"]}),`\n`,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:\"Flexibility\"}),\": Components can be easily combined in different ways to create complex UIs.\"]}),`\n`]}),`\n`,(0,e.jsx)(n.h3,{children:\"When to use composition\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:\"When you need to create complex UIs from smaller, reusable components.\"}),`\n`,(0,e.jsx)(n.li,{children:\"When you want to avoid the pitfalls of inheritance, such as tight coupling and difficulty in managing state.\"}),`\n`]}),`\n`,(0,e.jsx)(n.h2,{children:\"Further reading\"}),`\n`,(0,e.jsxs)(n.ul,{children:[`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://krasimir.gitbooks.io/react-in-patterns/content/chapter-04/\",children:\"Composition in React\"})}),`\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\"https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0\",children:\"Medium article on React composition\"})}),`\n`]})]})}function h(i={}){let{wrapper:n}=i.components||{};return n?(0,e.jsx)(n,{...i,children:(0,e.jsx)(p,{...i})}):p(i)}return v(R);})();\n;return Component;"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue