2018년 최신 프론트엔드 면접 질문 9가지

这次给大家带来2018最新前端面试题，我们知道在前端工作中面试是必不可少的一部分，这次的前端面试常考问题分类整理汇总就是来帮助大家度过前端面试着一大难关。一起来看一下。

【相关推荐：前端面试题（2020）】

一、如果网页内容需要支持多语言，你会怎么做？

采用统一编码UTF-8方式编码：应用字符集的选择；所以对提供了多语言版本的网站来说，Unicode字符集应该是最理想的选择。它是一种双字节编码机制的字符集，不管是东方文字还是西方文字，在Unicode中一律用两个字节来表示，因而至少可以定义65536个不同的字符，几乎可以涵盖世界上目前所有通用的语言的每一种字符。所以在设计和开发多语言网站时，一定要注意先把非中文页面的字符集定义为“utf-8”格式

语言书写习惯&导航结构：有些国家的语言书写习惯是从右到左，例如许多中东地区所使用的阿拉伯语，波斯语和希伯来语等等。如果你的市场目标是这些语言的国家，那么在网站设计中就需要考虑这些特殊的语言书写习惯。而且如果你在网站导航结构设计中使用的是一个竖直导航栏，这时候就应该把它放在右边，而不是象我们习惯的那样放在左边了。

多语言网站实现计划 ：
静态：就是为每种语言分辨准备一套页面文件，要么通过文件后缀名来区分不同语言，要么通过子目录来区分不同语言。
例如对于首页文件index_en.htm供给英语界面，index_gb.htm供给简体中文界面，index_big.htm供给繁体中文界面，或者是en/index.htm供给英语界面，gb/index.htm供给简体中文界面，big/index.htm供给繁体中文界面，一旦用户选择了需要的语言后，主动跳转到相应的页面，首页以下其他链接也是按照同样方法处理。从保护的角度来看，通过子目录比通过文件后缀名来区分不同语言版本显得要简略明了。

动态：站点内所有页面文件都是动态页面文件（PHP，ASP等）而不是静态页面文件，在需要输出语言文字的处所同一采用语言变量来表现，这些语言变量可以根据用户选择不同的语言赋予不同的值，从而能够实现在不同的语言环境下输出不同的文字。

例如：语言变量ln_name，当用户选择的语言是英语时赋值为“Name”，当用户选择的语言是简体中文时赋值为“姓名”，这样就可以适应不同语言时的输出。
采用静态方法的长处是页面直接输出到客户端，不需要在服务器上运行，占用服务器的资源比拟少，系统能够支撑的并发连接数较多，毛病是要为每种语言制作一套页面文件，很多内容即使是和语言无关的也要分不同语言来存储，因此占用的存储空间较多。

采用动态方法和静态方法的优毛病正好相反，它的长处是动态页面文件只有一套，不同语言的文字应用语言变量来存储，和语言无关的内容只存储一份，占用的存储空间较少，并且扩大新语言比拟轻易，毛病需要在服务器上运行，然后把成果输进到客户端，占用服务器的资源比拟多，系统能够支撑的并发连接数较少。

二、使用 data- 属性的好处是什么？

HTML5规范里增加了一个自定义data属性.
为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过 getAttribute方法获取

...

div.dataset.commentNum; // 10
data- 뒤에 하이픈으로 구분된 여러 단어로 구성된 속성은 카멜 케이스 스타일을 사용하여 가져옵니다. 예를 들어

<div id="content" data-user-list="user_list">data-user_list自定义属性 </div>//jsvar content= document.getElementById(&#39;content&#39;);
alert(content.dataset.userList)//jQuery
$(&#39;#content&#39;).data(&#39;userList&#39;);//读

모든 브라우저가 .dataset 속성만 지원하는 것은 아닙니다. Chrome과 Opera는 테스트된 브라우저 중에서 이를 지원합니다.
js를 통해 data-* 값 설정

<div id="content" data-user-list="user_list">data-user_list自定义属性 </div>//jsvar content= document.getElementById(&#39;content&#39;);
content.dataset.name=&#39;我叫tom&#39;
alert(content.dataset.name)//jquery
$(&#39;#content&#39;).data(&#39;name&#39;,&#39;我叫tom&#39;);//写
getAttribute/setAttribute方法的使用var content= document.getElementById(&#39;content&#39;);        
content.dataset.birthDate = &#39;19990619&#39;;        
content.setAttribute(&#39;age&#39;, 25);       
console.log(content.getAttribute(&#39;data-age&#39;)); //25       console.log(content.getAttribute(&#39;data-birth-date&#39;)); //19990519

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

2018년 최신 프론트엔드 면접 질문 8개

2018년 최신 프론트엔드 면접 질문 7개

2018년 프론트엔드 면접 질문 6개

위 내용은 2018년 최신 프론트엔드 면접 질문 9가지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!