2018最新前端面试题九

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

采用统一编码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 data-author="david" data-time="2011-06-20" data-comment-num="10">...</div>div.dataset.commentNum; // 10
需要注意的是，data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格：比如

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

并不是所有的浏览器都支持.dataset属性，测试的浏览器中只有Chrome和Opera支持。
通过js方式给data-*设置值

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

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

相关阅读：

2018最新前端面试题八

2018最新前端面试题七

2018最新前端面试题六

以上就是2018最新前端面试题九的详细内容，更多请关注Gxl网其它相关文章！