CSS样式
1.请解释一下CSS3的Flexbox(弹性盒布局模型)，以及适用场景？
回答要点 Flexbox是什么
答：Flexbox是一种新的布局方式，目的是提供一种更加高效的方式对元素进行布局、对齐、分配空白空间。
在元素的尺寸未知或动态变化(如%百分比)时也能正常的工作。
详细补充：
在弹性模型下，会调整元素的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的元素也会被动态地调整。
举例：
例如，当容器尺寸变大时，其中包含的元素会被拉伸以占满多余的空白空间；当容器尺寸变小时，元素会被缩小以防止超出容器的范围。
弹性盒布局是与方向无关的。
- 对比传统布局模型：
传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；
而 inline 布局则是在水平方向来排列。
弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
- 使用场景：
在不同的屏幕下，保证同一行的所有元素能够按照一定的比例填充整行布局。
举例：
在进行浮动时，增加了元素的填充和边框也能动态调整浮动元素在整行的宽度，不至于被挤到下一行显示。
2.用css创建一个三角形的原理是什么，并写出相应的代码？
回答要点：是什么
css三角采用的是均分原理，以矩形的对角线分配出上、右、下、左4个三角形(在答题纸上画出图形)
3.有哪些CSS定位方式？每个定位方式介绍一下。
回答要点：定位有哪些，怎么用
position:static
元素遵循常规流。top 、right、bottom、left等属性不会被应用
position:relative
对象遵循常规流，并且参照自身在常规流中的位置通过 <' top '>，<'right '>，<' bottom '>，<'left '>属性进行偏移时不影响常规流中的任何元素。
position:absolute
对象脱离常规流，使用 <' top '>，<' right '>，<' bottom '>，<' left '>等属性进行绝对定位，盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
position:fixed：
对象脱离常规流，使用 <' top '>，<'right '>，<' bottom '>，<'left '>等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
CSS样式3新增的
position:center：
对象脱离常规流，使用 <' top '>，<'right '>，<' bottom '>，<'left '>等属性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
JavaScript
1.判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5~20
使用正则表达式
var reg=/^[a-zA-Z]\w{4,19}$/;
reg.test("要判断的字符串");2.截取字符串hnfcedu.com中的.com
方法1：
var src ="hnfcedu.com";
var index = src.indexOf(".");
var str = src.substring(index + 1);
console.log(str);方法2：
var reg=/\.com/
var word =reg.exec("hnfcedu.com")[0];
console.log(word)3.判断一个字符串中出现次数最多的字符，统计这个次数
方法一：
function count(str){
var words=[str[0]];//初始化数组，为字符串的第一个字母
var numbers=[1]; //统计系统字符的数目
for(var i=1;i<str.length;i++){//循环遍历所有的字母
var w=str[i];//获取字符
var flag=false; //设置是否出现了相同的标记
for(varj=0;j<words.length;j++){//匹配查找出来的元素
var w2=words[j];
if(w2==w){//有相同的元素
numbers[j]+=1; //累计数目
flag=true;
break;//退出循环
}
}
if(!flag){
words.push(w);//添加新字符
numbers.push(1); //添加数目
}
}
//构建数目最多的字母对象信息
var max={word:words[0],num:numbers[0],index:0};
for(var i=1;i<numbers.length;i++){
if(max.num<numbers[i]){
max.num=numbers[i];
max.index=i;
}
}
max.word=words[max.index];
return max;
}方法2：正则表达式
function count(str) {
str =str.split('').sort().join("");
var reg = /(.)\1{0,}/igm;
var words = str.match(reg);
var maxLen = words[0];
for (var i = 1; i < words.length;i++) {
if(maxLen.length<words[i].length){
maxLen=words[i];
}
}
return maxLen;
}4.如何显示/隐藏一个DOM元素？
方法一： obj.style.visibility="visible"; obj.style.visibility="hidden";
方法二： obj.style.display="block";obj.style.display="none";
方法三： obj.style.fontSize=0;obj.style.height=0;
5.如何打印日志？
console.log("Loglevel");//普通日志
console.debug("Debuglevel");//调试级别
console.info("Infolevel");//普通消息
console.warn("Warnlevel");//警告信息
console.error("Errorlevel");//错误日志
6.JavaScript有哪几种数据类型
Number
String
Boolean
Null
Undefined
Object
7.请给出异步加载JS方案，不少于两种
这个问题个人理解有歧义，是异步加载数据有几种js方案还是异步加载js文件有几种方案？
- 第一种理解的方案，异步加载数据的js方案
方案一：使用XMLHttpRequest或是 ActiveXObject(IE)
方法二：使用Worker
方法三：使用Jquery $.ajax()
- 第二种理解：异步加载js，这H5新增的
方法一：async
例如：<script type="text/javascript"src="demo_async.js" async="async"></script>
方法二：defer，只支持IE
例如：<script type="text/javascript"defer="defer"></script>
8.多浏览器检测用过什么工具？
本人采用的浏览器兼容测试工具是 IETester和BrowserShots
9.JavaScript中如何对一个对象进行深度克隆
function deepClone(obj){
var cloneObject={};//创建空对象
for(var k in obj){
cloneObject[k]=obj[k];
}
return cloneObject;
}10.前端开发有哪些优化方案
我用到过的优化有：
- 优化1：合并请求
合并请求的主要目的是减少浏览器对服务器发起的请求数，从而减少在发起请求过程中花费的时间。
- 优化2：域名拆分
域名拆分主要是为了增加浏览器下载的并行度，让浏览器能同时发起更多的请求，
- 优化3：异步加载
异步加载图片、js、数据等，减少IO的阻塞
- 优化4：使用缓存
将数据缓存在本地，减少数据的请求
- 优化5：压缩文件
对js、css文件进行压缩
11.请编写一个JavaScript函数parseQueryString,他的用途是把URL参数解析为一个对象，
如：var url = "http://www.hnfcedu.com/eg?key0=0&key1=1&key2=2";
答：
var url = "http://www.hnfcedu.com/eg?key0=0&key1=1&key2=2";
function parseQueryString(url){
var index=url.indexOf("?");
var paraStr=url.substring(index+1);
var json=eval("({"+paraStr.replace(/=/igm,":\"").replace(/&/igm,"\",")+"\"})");
console.log(json);
return json;
}
parseQueryString(url);
// { key0: '0', key1: '1', key2: '2' }12.定义两个类，B继承A
function A(){
}
function B(){
}
B.prototype=new A();13.什么是闭包？下面这个ul，如何点击每一列的时候alert其index？
<ul id="test">
<li>这是第一条</li>
<li>这是第二条</li>
<li>这是第三条</li>
</ul>闭包：在JavaScript中局部变量被一个函数引用，变量也是函数中的一部分。
代码实现：
<script>
var ul = document.getElementById('test');
var list = ul.children;
for(var i=0; i< list.length; i++){
(function (i) {
list[i].onclick = function () {
console.log(i);
}
})(i);// 闭包的行为
}
</script>14.有一个表格，当点击表头的属性区域，使表格的信息进行排序切换功能，第一次点击为降序排列，再一次点击为升序排列。
<table border="1" align="center" width="400"id="tab">
<thead>
<tr>
<td id="name">姓名</td>
<td id="power">力量</td>
<td id="quick">敏捷</td>
<td id="smart">智力</td>
</tr>
</thead>
<tbody>
<tr id="div0">
<td>众神之王</td>
<td>19</td>
<td>15</td>
<td>20</td>
</tr>
<tr id="div1">
<td>月之骑士</td>
<td>15</td>
<td>22</td>
<td>15</td>
</tr>
<tr id="div2">
<td>流浪剑客</td>
<td>23</td>
<td>15</td>
<td>14</td>
</tr>
<tr id="div3">
<td>德鲁伊</td>
<td>17</td>
<td>24</td>
<td>13</td>
</tr>
</tbody>
</table>答：
<script type="text/javascript">
var tab =document.getElementById("tab");
var tbody = tab.tBodies[0];//获取tbody对象
var bodies = tbody.children;//获取以对象
var trs = [];
for(var i = 0; i < bodies.length; i++) {
trs.push(bodies[i]);//对象转数组
}
var cells = tab.tHead.rows[0].cells;//获取所有的头部信息
for (var i = 0; i < cells.length; i++) {
cells[i].onclick = function () {
//获取点击对象的排序类型
var sortType = this.sortType;//获取点击单元格的排序类型[自定义属性 sortType]
if (sortType) {//自定义属性存在
sortType= sortType =="asc" ? "desc" : "asc";//改变排序类型
} else {
sortType = "asc";//默认升序
}
this.sortType = sortType;//添加自定义属性
//获取单元格的序号
var index = this.cellIndex;
var results = trs.sort(function (a,b) {//自定义排序逻辑
var aValue =a.cells[index].innerText;//获取对应单元格的内容
var bValue =b.cells[index].innerText;//获取对应单元格的内容
var cValue=aValue.localeCompare(bValue);//通过比较决定排序规则
return sortType =="asc"? cValue:-cValue;//做升序或降序排列 正数为升序，负数为降序
}); tbody.innerHTML = "";
for (var i = 0; i < results.length;i++) {
tbody.appendChild(results[i]);
}
}
}
</script>