某家笔试题

某家笔试题总结
1：css样式顺序，就近原则；多个class id组合的顺序没有关系

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.yellow{
			color: yellow;
		}
		.red{
			color:red;
		}
	</style>
</head>
<body>
	<div class="red yellow">hello world!</div>
</body>
</html>



2:substring vs substr
substring(begin_index,end_index);
得到的子串是：begin_index到end_index-1
substr(begin_index,length);
得到的子串长度是：begin_index到length长度的子串，begin_index算第一个
关于子串下标更进一步的讨论
参考：substring vs substr


3:Math.round(parseFloat(‘1.45b’)); // 1
a:pareseFloat先将’1.45b’转换成1.45
b:Math.round()再四舍五入、


4：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
   (function(){
 		return typeof arguments; //object
 	})()

   var f = function c(){
 		return 2;
 	}
 	console.log(typeof f())//number

   (function(x){
 		delete x;
 		return x;
 	})(1); //1

   (function f(){
 		function f(){return 1;}
 		return f();//2
 		function f(){return 2;}
 	})(); 
 	
var foo = {
 		bar : function(){return this.num},
 		num : 1
 	}
 	(function(){
 		return typeof arguments[0]; //number
 	})(foo.bar());	

 foo.bar() //30
  		var foo = {
       x: 20,
        bar: function () {
           var x = 30;
           return this.x;
       }
   };
   foo.bar()//20 	

   function fn(){
		var arr = new Array();
		for(var i = 0; i <3; i++)
		{
			arr[i] = function(){
				return i;
			}
		}
		return arr;
	}
	var arr = fn();
	console.log(arr[0]()); //3
	console.log(arr[1]()); //3
	console.log(arr[2]()); //3

	function fn(){
		var arr = new Array();
		for(var i = 0; i <3; i++)
		{
			arr[i] = function(i){
				return i;
			}(i);
		}
		return arr;
	}
	var arr = fn();
	console.log(arr[0]); //3
	console.log(arr[1]); //3
	console.log(arr[2]); //3

	 var name = 'the windows';
	 var object = {
	 	name : 'my object',
	 	getName : function(){
	 		return function(){
	 			return this.name;
	 		}
	 	}
	 }

	 console.log(object.getName()());  //the windows

	 var name = 'the windows';
	 var object = {
	 	name : 'my object',
	 	getName : function(){
	 		return this.name;
	 	}
	 }
	 console.log(object.getName());  //my object

	 var name = 'the windows';
	 var object = {
	 	name : 'my object',
	 	getName : function(){
	 		var that = this;
	 		return function(){
	 			return that.name;
	 		}
	 	}
	 }

	 console.log(object.getName()());  //my object

	 var scope = "global scope";
	 function checkScope(){
	 	var scope = "local scope";
	 	function f(){
	 		return scope;
	 	}
	 	return f();  //local scope
	 }


	 console.log(checkScope()); //global scope //匿名函数this对象总是指向顶层window

	 var scope = "global scope";
	 function checkScope(){
	 	var scope = "local scope";
	 	function f(){
	 		return this.scope;
	 	}
	 	return f();
	 }
	 console.log(checkScope()); //global scope //匿名函数this对象总是指向顶层window

	  var a = 1;
	 function fn(){
	 	function fn2(){
	 		console.log(a);
	 	}
	 	return fn2;
	 }
	 fn()();//1 //没有局部变量就向上查找全局变量

js数据类型
基本类型：number boolean underfined string null
复杂类型：object

js数组比较
js数组不能直接使用==比较，返回的是false

1
2
3
var a = [1,2,3];
var b = [1,2,3];
a == b; //false

正确的做法是：遍历比较数组内部元素.之前有说使用toString方法来比较，这是万万不妥的，toString会强制转换所有数组内容为string类型，因此无法判断数据类型。

1
2
3
4
5
6
7
8
9
10
function checkArrayEqual(a,b){
 if(a.length !== b.length)
 	return false;
	else{
 	for(var i = 0 ; i <= a.length; i++)
  	if(a[i] !== b[i])
   	return false;
	}
 return true;
}

实现方法temp(‘hello,{name}’, {name : ‘Lucy’})，输出’hello,Lucy’
当时的写法是：

1
2
3
4
5
6
function temp(){
	var a = arguments[0].substring(0,6);
	var b = arguments[1].name;
	console.log(a + b);
}
temp('hello,{name}', {name : 'Lucy'});//hello,Lucy

现在想一想，应该不是出题者的本意吧

写一个响应式布局页面
移动优先 渐进增强

css3 Media Query
device-width device-height
width height
oritation
resolution

css写一个input框，实现foucs功能
我ciao，忘记了placeholder误终身啊，结果就是这么简单。


1
<input type="text" class="inputarea" id="inputarea"  placeholder="f***k world!"/>

原生js_ajax

前端拼图之–ajax
ajax返回码：
readyState:联想open(）和send()函数
0:open失败
1：open成功sned失败
2：send成功没有响应数据
3：响应部分数据
4：数据完全响应并返回

status状态码：
1：http建立响应
2：响应成功
3：响应需要进一步跟进，典型304，缓存问题
4：客户端问题 404 url错误
5：服务器错误
9：自定义错误
参考：状态码

attention，state是adj，status是n

终于撸了第一个简单ajax，找了很久bug，原来是readyState和status写错了。
关于跨域请求问题，jsonp可以部分解决，添加允许跨域头可以解决。测试的时候，我的做法是统一放到本地虚拟服务器下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax</title>
</head>
<body>
	<div>1212</div>
</body>
<script>
	var xmlhttp;
	//适配现在浏览器和古老的ie 5,6浏览器
	window.XMLHttpRequest ? xmlhttp = new XMLHttpRequest() : xmlhttp = new ActiveObject("Microsoft.XMLHttpRequest");
	//get or post
	//url
	//true = 异步加载，false = 同步加载
	//xmlhttp.open("get","http://127.0.0.1/test/test.asp",true);
	xmlhttp.open("GET","test.text",true);
	xmlhttp.send();
	
	xmlhttp.onreadystatechange = function(){
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
			document.getElementsByTagName("div")[0].innerHTML = xmlhttp.responseText;
		}
	} 
</script>
</html>

test.text文件

1
<p style='color:red;'>本内容是使用 GET 方法请求的。</p><p style='color:red;'>请求时间：2015-10-28 16:16:47</p>

gitignore无法ignore问题解决 && es6的import带不带{}

###.gitignore无法ignore问题解决 && es6的import带不带{}
webstorm会给项目自动生成一个.idea文件夹，第一次创建项目并上传到github，没有注意到.idea文件也被上传上去。再次编辑文件并上传时发现了.idea文件也做了修改：

modified:   .idea/workspace.xml
modified:   components/Counter.js
modified:   reducers/counterReducer.js

在.gitignore中添加配置项：

#ignore .ignore files
#.ignore
#ignore node_modules
/node_modules/*
.idea

然而似乎.gitignore似乎失效了，每次修改后还是会提示modified了.idea文件。

查证资料：如果一个文件已经存在于git远程仓库中，向.gitignore中添加配置项会失效（有人说这是git bug）。
删除远程git仓库代码：

git rm -r —cached  .idea
git commit -m 'delete file'
git push origin master

再次编辑文件，.gitignore就能正常工作了。

最近写代码时，总是纠结import出来的结果要不要带{}，又听工友说

if （export var a = 1）
    import {a}
if（export default var a = 1）
    import a

今天早上为此纠结了很久，下午看了下阮一峰的es6入门，看到模块这一章节才恍然大悟：
正常export出来的模块都需要{}，export default出来的模块不需要添加。比如：

export default function a（）{}
import a from 'filepath'

这是因为default出一个默认模块，其他模块调用时随便给这个文件起个名字就行，例如：a

古人云： 学而不思则罔，思而不学则殆。诚不欺余！

乞丐版登录 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table>
		<tr>
			<td><span>用户名:</span></td><td><input type="text" name="username" id="username" value=""></td>
		</tr>
		<tr>
			<td><span>密&nbsp;码:</span></td><td><input type="password" name="password" id="password" value=""></td>
		</tr>
		<tr>
			<td><input type="button" value="登录" onclick="clickBtn()"></td>
			<td><input type="reset" value="重置" onclick="clickRst()"></td>
		</tr>
	</table>
</body>
<script>
	function clickBtn(){
		alert("helloworld");
	}
	function clickRst(){
		document.getElementById("username").value = "";
		document.getElementById("password").value = "";
	}
</script>
</html>

ht_js_table

一张图解释table主要元素关系
able
tr：表格一行
th：表格
tbody：表格单元内容集合
td：表格单元内容
操作表单样式有2种方式，css或者html内添加
个人觉得html内添加不够方便，被限制的地方比较多，还是css好
注意边框融合：
css：border-collapse：collapse；
html：ceilspacing=”0”
attention:html中，border=’1’,等价于border=”1px”,solid red不起作用。

html创建table + js动态添加tr

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table</title>
	<style>
		#table1{
			width : 400px;
			text-align: center;
			border-collapse: collapse;
		}
		#table1 th, #table1 td{
			border: 1px solid red;
		}
	</style>
</head>
<style>
</style>
<body>
	<table id="table1">
		<caption>test table 1</caption>
		<tr>
			<th>姓名</th>
			<th>学号</th>
			<th>成绩</th>
		</tr>
		<tbody id="mybody">
			<tr>
				<td>张三</td>
				<td>1</td>
				<td>100</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>2</td>
				<td>90</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>3</td>
				<td>80</td>
			</tr>
		</tbody>
	</table>

	<table id="table2" width="300" border="1px" cellspacing="0">
		<caption>test table 2</caption>
		<tr>
			<th>姓名</th>
			<th>学号</th>
			<th>成绩</th>
		</tr>
		<tbody>
			<tr>
				<td>张三</td>
				<td>1</td>
				<td>100</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>2</td>
				<td>90</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>3</td>
				<td>80</td>
			</tr>
		</tbody>
	</table>
</body>
<script>
	//js动态添加table内容
	var _tbody = document.getElementById('mybody');
	var _tr = document.createElement('tr');
	var array = ['tom', 4, 70];
	var td_array = [];
	for(var i = 0; i < 3;i++){
		var _td = document.createElement('td');
		var node = document.createTextNode(array[i]);
		_td.appendChild(node);
		_tr.appendChild(_td);
	}
	_tbody.appendChild(_tr);
</script>
</html>

css画图形

css画图，常见只是利用2个小技巧。
1：border画多边形
2：border-radiou画曲边图形

理解border一张图就行了
border边框的分布特性

1
2
3
4
5
6
7
8
9
div{
    width:100px;
    height:100px;
    background: red;
    border-top: 100px solid green;
    border-left:50px solid yellow;
    border-bottom: 100px solid blue;
    border-right: 30px solid violet;
}

理解border-radious
参考：border-radious详解

链接这么长，可以压缩一下吗？

来，少年，画完这个图还有三个图！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	div{
		margin:20px;
		text-align: center;
		background: red;
		line-height: 100px;
	}
	.square{
		width:100px;
		height:100px; 
	}
	.rectangle{
		width:200px;
		height:100px;
	}
	.circle{
		width:100px;
		height:100px;
		border-radius:50px;
	}
	.oval{
		width:200px;
		height:100px;
		border-radius: 100px / 50px; /*水平半径 垂直半径*/
	}
	.diamond{
		margin:0;
		width:500px;
		height:100px;
		background: white;
		overflow: hidden;
	}
	.diamond .left_triangle{
		margin:0;
		width:0;
		height:0;
		border-bottom: 50px solid yellow;
		border-right:50px solid yellow;
		border-top:50px solid transparent;
		border-left:50px solid transparent;
		float:left;
		background: white;
	}
	.diamond .square{
		margin:0;
		width:100px;
		height:100px;
		background: yellow;
		float:left;
	}
	.diamond .right_triangle{
		margin:0;
		width:0;
		height:0;
		border-bottom: 50px solid transparent;
		border-right:50px solid transparent;
		border-top:50px solid  yellow;
		border-left:50px solid  yellow;
		float:left;
		background: white;
	}
	.diamond_css3{
		overflow: hidden;
		width:200px;
		height:100px;
		-webkit-transform:skew(-45deg);
		-moz-transform:skew(-45deg);
		-ms-transform:skew(-45deg);
		transform:skew(-45deg);
	}
	.diamond_css3 span{
	 	display: block;/*inline to block*/
		-webkit-transform:skew(45deg);
		-moz-transform:skew(45deg);
		-ms-transform:skew(45deg);
		transform:skew(45deg);
	}
	.trapezoid{
		width:100px;
		height:0;
		border-bottom:100px solid yellow;
		border-left:50px solid transparent;
		border-right:50px solid transparent;
	}
	.concentric_circle{
		 width: 100px; 
		 height: 100px; 
		 background: red;
		/* border:20px solid red;
		 background: #fff; 
		 -moz-border-radius: 100px; 
		 -webkit-border-radius: 100px; 
		 -ms-border-radius:100px;
		 border-radius: 100px; */
		 border-radius:50px;
		 border:20px solid yellow;


	}
</style>
<body>
	<div class="square">square</div>
	<div class="rectangle">rectangle</div>
	<div class="circle">circle</div>
	<div class="oval">oval</div>
	<div class="diamond">
		<div class="left_triangle"></div>
		<div class="square">diamond</div>
		<div class="right_triangle"></div>
	</div>
	<div class="diamond_css3"><span>diamond by css3</span></div>
	<div class="trapezoid"><span>梯形</span></div>
	<div class="concentric_circle">同心圆</div>
</body>
</html>

某家前端笔试题

刚刚做了某家装修公司前端笔试题。回来的路上和许尼玛说，这一次再不进面试轮，我吃键盘，以后再也不做线下笔试题了。线下前端笔试题太吃亏，说是前端题目，全是数据结构，算法，c++，java，计算机网络。 而且，自己的字确实不敢恭维啊。

回忆一下笔试题中一些没回答好的题目。
1：js内存泄露
今天终于明白了内存泄露的具体含义了，囧。。。
内存泄露：一块已经被分配的内存既不会被使用又不会被收回，直到浏览器进程结束为止。

1)：《javascript高级程序设计》里说到过，循环引用会导致内存泄露。

1
2
3
4
var a=document.getElementById("xx");
var b=document.getElementById("xxx");
a.r=b;
b.r=a;

标准EcmaScript能够正常回收a和b，但是IE浏览器下ab循环引用会导致内存泄露。

2)：IE浏览器下删除绑定事件响应的DOM节点
EcmaScript删除DOM节点后，节点绑定的事件也一并被删除。又是IE，DOM节点被删除后，节点绑定的事件操作没有及时删除导致事件操作内存泄露。

1
2
3
4
5
6
7
8
9
<div id="myDiv">
    <input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        document.getElementById("myDiv").innerHTML = "Processing...";
    }
</script>

手动解除事件绑定：

1
2
3
4
5
6
7
8
9
10
<div id="myDiv">
    <input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        btn.onclick = null;//解除事件
        document.getElementById("myDiv").innerHTML = "Processing...";
    }
</script>

3)：闭包

4)：这个应该不算是内存泄露吧

1
2
3
4
a = {p: {x: 1}};
b = a.p;
delete a.p;
b.x //1

5)：其他内存泄露，看了下基本都是古老的IE浏览器造成的。珍爱生命，远离IE!!!
参考：博客园–js内存泄露几种情况
          IBM大发好！！！

2：如何实现页面通信
居然猜对了
html5：localStorage
html：session轮询

3：inline vs block？
inline：a em strong span。。。
block：div p session h1-h6.。。。
inline-block：
参考：html标签
   block，inline和inline-block概念和区别

4：session vs localStorage vs sessionStorage
在某家面试题中遇到过，没答上来，回来做了总结。这次笔试题中又不到了，只能说，装了个满分X
前端面试题

5：前端开发规范
AMD vs CMD（CommadJS ）

6：doctype申明的作用
<！DOCTYPE>写在html文档第一行,在html标签前面。这也就说明了doctype不是html标签一部分。因此也不难猜测doctype的作用是告诉浏览器以什么样的方式去解析html DOM文档。

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body
</body>
</html>

doctype有3种模式。
严格模式：strict
过渡模式：transitional
框架模式：frameset
strict模式最规范，transitional模式兼容性最好，frameset没怎么用到哎

7:有空总结一下浏览器事件响应机制

8:css选择器，css3新增选择器
参考w3c css选择器
总结如下选择器：
标签选择器（* div p…）
类选择器（.class）
id选贼器（#）
属性选择器([attrubute])
伪类选择器（：link； ：hover； ：visited； ：focus； ：active）
从w3c来看，css3新增的选择器有2种，属性选择器和伪类选择器。
其中，属性选择器增加了表达式运算；伪类选择器出现了更多日常可能用到的一些操作习惯。
但是，这些操作在jquery里，应该都已经实现过了。

某生it金融公司面试题

1：正则表达式
已经三次考到正则表达式了，再考要自杀了。
正则表达式 from csdn

2:查找最短字符串
查找出现频率最小的字符
参考之前写过类似的题目：统计字符串字母个数
输入：aadaabbbccddddddffddd
输出：c f
1：统计str字符格式

1
2
3
4
5
6
7
function countNum(str){
    var obj = {};
    for(var i = 0; i < str.length; i++)
        !obj[str[i]] ? obj[str[i]] = 1 : ++obj[str[i]];
    console.log(obj);
}
countNum('aadaabbbccddddddffddd')

2:按照value值排序对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    function sortObj(obj){
    var tmp = [];
    for(var i in obj){
        tmp.push([obj[i], i]); //[obj[i], i]封装成数组形式
    }
    tmp.sort(function(a,b){
        return a[0] - b[0]; //按照数组首个值排序
    });
    var obj = {}; //需要将obj清空
    for(var i = 0; i < tmp.length; i++){
        obj[tmp[i][1]] = tmp[i][0]; //二维数组又重新放回obj中
    }    
    return obj;
}
sortObj({a: 4, d: 10, b: 3, c: 2, f: 2});

这样，我们已经完成了整个str对象按照个数的对象排序。

那么，更简洁的方法呢？

3：股票问题
参考segmentfault问答
算法编程计算题

getElementsByClassName

今天室友们都被某家创业公司请去喝咖啡了，而我只能苦逼的整理着前端试题。
缘分尽在一线，有时候就是试卷上的一道题目吧。

题目描述：获得document下的class = ‘div1’标签。

IE浏览器 ： 不支持getElementsByClassName，需要自己撸。
火狐浏览器 ： 原生getElementsByClassName。

很久以前自己写一个getElementsByClassName方法，无奈时间久远忘记.className这个API了。一次面试机会就这样没了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>

<style>
	div{
		width : 100px;
		height : 50px;
		background : yellow;
		margin-bottom: 10px;
	}

</style>

<body>
	<div class="div1"></div>
	<div class="div2"></div>
</body>

<script>
	var elementList = getElementsByClassName('div1');
	for(var i = 0; i < elementList.length; i++)
		elementList[i].style.background = 'red';

	function getElementsByClassName(src){
		var elementList = [];
	    if(document.getElementsByClassName(src))
	 		return elementArray = document.getElementsByClassName(src);
		 else{
			var  tagList = document.getElementsByTagName('*');
			var tmpList = [];
			for(var i = 0; i < tagList.length; i++){	
				//continue不是求值语句，但是我就是想用三元表达式
				tagList[i].className == src ? tmpList.push(tagList[i]) : 'continue' ;
			}
			return tmpList;
		 }
	}
</script>

</html>

css_html总结

IE盒子模型 vs w3c标准盒子模型

为什么博客网站图片都要防外链呢？还好哥有七牛图片云存储

IE盒子宽度 = content_width + 2*（padding-left + border-left）；假设left right数值一样 w3c盒子宽度 = content_width;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>IE盒子模型 vs W3C盒子模型</title>
</head>
<style>
	div{
		width:200px;
		height:100px;
		margin:20px;
		padding: 20px;
		border: solid 10px green;
		background-color: white;
	}
</style>
<body>
	<div>我快要连div标签都快不会写了</div>
</body>
<script>
	var myDiv = document.createElement('div');
	myDiv.innerHTML = '我是新创建的div';
	myDiv.style.width = '100px';
	myDiv.style.height = '100px';
	myDiv.style.border = 'solid 1px red';
	myDiv.style.padding = '10px';
	myDiv.style.margin = '20px';
	document.body.appendChild(myDiv);

	var doc = document.getElementsByTagName('div');
	alert(doc[0].offsetHeight);//160px
	alert(doc[1].offsetHeight);//122px
</script>
</html>

那么问题又来，如何获得margin padding值？