移动端meta
1 | <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> |
在移动端开发时，我们会发现手机的dpr可能都不一致，有些是1，chrome预览器就是1，有些手机是2，有些手机是3，这和手机的retina屏有关，所以我们不能单纯将scale值写死，应该根据dpr的值来设置，即用1.0 / dpr的值。
1 | // 设置viewport属性，安卓4.5以下均设置为1.0，其余通过计算取得 |
rem单位使用
head区脚本（最重要）
1
2
3
4
5
6
7
8
9
10<script>
var html = window.document.documentElement;
var sw = html.clientWidth;
var sh = html.clientHeight;
var rfs = sw * (32 / 640) + 'px';
html.dataset.sw = sw;
html.dataset.sh = sh;
html.style.fontSize = rfs;
</script>应用
在css中设置
font-size: 设计稿标注字号 / 32 + rem;
font-size: 设计稿标注字号 / (设计稿宽 * 0.05) + rem;在scss中设置
1
2
3
4@function r($px) {
@return $px / 32 + rem; // 32是针对640的设计稿
@return $px / (设计稿宽 * 0.05) + rem; // 其他
}1
2
3
4
5div{
font-size: r(30);
width: r(200);
height: r(60);
}
移动端单位使用详见
数组去重方法
原数组
1
var myArray = [0, 1, 6, 9, 0, 2, 4, 5, 4];
方法1
1
2
3
4
5
6
7
8
9
10
11
12
13function aaa(){
var newArray = []; //一个新的临时数组
for(var i = 0; i < myArray.length; i++){ //遍历当前数组
//如果当前数组的第i项已经保存进了临时数组，那么跳过，
//否则把当前项push到临时数组里面
if (newArray.indexOf(myArray[i]) == -1){ //在新数组中查找原数组的每一项是否存在
newArray.push(myArray[i]); //如果不存在就加到新数组中
}
}
// return newArray;
alert("新的数组：" + newArray);
}
aaa();方法2
1
2
3
4
5
6
7
8
9
10
11
12function bbb(){
var n = {},r=[]; //n为hash表，r为临时数组
for(var i = 0; i < myArray.length; i++){ //遍历当前数组
if (!n[myArray[i]]){ //如果hash表中没有当前项
n[myArray[i]] = true; //存入hash表
r.push(myArray[i]); //把当前数组的当前项push到临时数组里面
}
}
// return r;
alert("新的数组：" + r);
}
bbb();方法3
1
2
3
4
5
6
7
8
9
10
11
12
13function ccc(){
var n = [myArray[0]]; //结果数组
for(var i = 1; i < myArray.length; i++){ //从第二项开始遍历
//如果当前数组的第i项在当前数组中第一次出现的位置不是i，
//那么表示第i项是重复的，忽略掉。否则存入结果数组
if (myArray.indexOf(myArray[i]) == i){
n.push(myArray[i]);
}
}
// return n;
alert("新的数组：" + n);
}
ccc();方法4（同时排序）
1
2
3
4
5
6
7
8
9
10
11
12function ddd(){
myArray.sort(); //数组排序
var re = [myArray[0]]; //先提取最小的
for(var i = 1; i < myArray.length; i++){
if( myArray[i] !== re[re.length-1]){ //将不等于的放在新数组的后面，等于的跳过
re.push(myArray[i]);
}
}
// return re;
alert("新的数组：" + re);
}
ddd();
数组乱序函数
1 | function shuffle(array) { |
数组常见操作（push、pop、shift、unshift）
push:向数组的末尾添加一个或多个元素，并返回新的长度
pop:把数组的最后一个元素从其中删除，并返回最后一个元素的值
shift:把数组的第一个元素从其中删除，并返回第一个元素的值
unshift:向数组的开头添加一个或更多元素，并返回新的长度
ajax请求
原生js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16if(window.XMLHttpRequest){
var ajax = new XMLHttpRequest();
}else{
var ajax = new ActiveXObject(“Microsoft.XMLHttp”);
}
ajax.open(‘GET’,’***’,true);
ajax.send();
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status == 200){
alert(ajax.responseText);
} else {
alert(“失败！”);
}
}
}jquery
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$.ajax({
url: 'api.php',
type: 'GET',
dataType: 'json',
timeout: 3000,
data: {
num1: num1,
num2: num2
},
beforeSend: function(xhr, settings) {
// 发送请求前
console.log('beforeSend', xhr, settings);
},
success: function(data, status, xhr) {
// 请求成功
console.log('success', data, status, xhr);
if (data.code === 0) {
console.log('处理成功');
$('#result').val(data.result);
} else {
console.log('处理失败');
}
},
error: function(xhr, errorType, error) {
// 请求失败
console.log('error', xhr, errorType, error);
alert('请求失败');
},
complete: function(xhr, status) {
// 请求成功或失败都执行
console.log('complete', xhr, status);
}
});
HTML5特性
简单易记的语言标签
简单易记的编码类型
不需要标签闭合
标签名不区分大小写
语义化的新增标签
表单增强
视频和音频
canvas绘画
其他专业技能
事件冒泡、委托等见web前端/常用资料/前端面试
html5 + css3
常见居中方法（定宽高和不定宽高）
cavas、svg
使用什么框架，喜欢它的哪些优点
同步工具：svn / git （svn是集中式管理系统、git是分布式管理系统）
公司使用：linux + node + git + jade + scss + es6 + vue
vue特点：mvvm
jquery：高效、快速处理一些简单的事情、很难处理麻烦的，比如渲染不固定数量的数组列表…
其他（思想、生活）
专业、居住地
是否单身、期望薪资等
对未来的想法、构思
业余活动
对待加班的看法
对待大企业和创业公司的看法
如果公司需要你去使用一些你之前未有过的技能或知识，你该怎么办
释放压力的方法
github面试题
https://github.com/cpm828/Front-end-Developer-Interview-Questions