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 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

2018 年の最新のフロントエンド インタビューの質問 8

2018 年の最新のフロントエンド インタビューの質問 7

2018 年の最新のフロントエンド インタビューの質問 6

以上が2018年最新のフロントエンド面接の質問9の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。