前端面经内容整理（一）一面考察技术使用

一、使用

（一）HTML5
1.画布
1）创建Canvas元素

<canvas id="myCanvas" width="200" height="100"></canvas>

2）通过 JavaScript 来绘制

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");  //获取画布元素上下文

可绘制：

线条：moveTo()、lineTo()、stroke()
圆形：fillStyle、beginPath()、arc()、closePath()、fill()
渐变：createLinearGradient()、addColorStop()、fillStyle、fillRect()
图像：Image()、src、drawImage

（二）动画
1.JS原生实现
1）常用API：setInterval()、setTimeout()、requestAnimationFrame()
（requestAnimationFrame方法是h5提供的一种专门解决动画更新的API，浏览器会自动以最合适的频率去刷新动画。）
2）原理：动画其实是 “位移”关于“时间”的函数：s=f(t)。所以不该采用增量的方式来执行动画，为了更精确的控制动画，更合适的方法是将动画与时间关联起来。
3）示例：三种API实现进度条动画效果
//html

<style type="text/css">
.box {
    background-color: lightblue;
    height: 20px;
    line-height: 20px;
    box-sizing: border-box;
}
</style>
<div class="box" style="width:0">0%</div>
<button id="btn">load</button>

//js

var btn = document.getElementById('btn');
var div = document.getElementsByClassName('box')[0];
btn.addEventListener('click', function() {
        //load1();
        //load2();
        //load3();
});

//setTimeout
function load1() {
	div.style.width = parseInt(div.style.width) + 5 + 'px';
    div.innerHTML = parseInt(div.style.width) / 5 + '%'
    if (parseInt(div.style.width) < 500) {
	    var c = setTimeout(function() {
        	load1();
        }, 16);
    } else {
        clearTimeout(c);
    }
}

//setInterval
function load2() {
	div.style.width = parseInt(div.style.width) + 5 + 'px';
    div.innerHTML = parseInt(div.style.width) / 5 + '%';
    var c = setInterval(function() {
	    if (parseInt(div.style.width) < 500) {
        	load2();
        } else {
	        clearInterval(c);
        }
	}, 16);
}

//requestAnimationFrame
function load3() {
	div.style.width = parseInt(div.style.width) + 5 + 'px';
    div.innerHTML = parseInt(div.style.width) / 5 + '%';
    if (parseInt(div.style.width) < 500) {
	    var c = requestAnimationFrame(load3);
    } else {
	    cancelAnimationFrame(c);
    }
}

2.jQuery的animate函数
1）语法

$(selector).animate(styles,speed,easing,callback);  //语法1
$(selector).animate(styles,options);  //语法2

2）说明：

styles：规定产生动画效果的 CSS 样式和值。
speed：规定动画的速度。（n毫秒、slow、normal、fast）
easing：动画的速度函数。（可选参数：swing，linear）
callback：animate 函数执行完之后，要执行的函数。
options={
speed设置动画的速度，
easing规定要使用的 easing 函数，
callback规定动画完成之后要执行的函数，
step规定动画的每一步完成之后要执行的函数，
queue布尔值，指示是否在效果队列中放置动画，如果为 false，则动画将立即开始，
specialEasing来自 styles参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数 }

3）示例

<style type="text/css">
div {
	width: 100px;
    height: 100px;
    background: red;
    position: relative;
}
</style>
<div id="myElement"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
    $("#myElement").animate({ left: "500px" }, "slow");
});
</script>

3.css3的transition属性
1）语法

transition: property duration timing-function delay;

2）说明：

property：填写需要变化的css属性。如：width,line-height,font-size,color等;
duration：完成过渡效果需要的时间（2s 或者2000ms）
timing-function：完成效果的速度曲线（
linear匀速，
ease从慢到快再到慢，
ease-in慢慢变快，
ease-out慢慢变慢，
ease-in-out先变快再到慢，
cubic-bezier(n,n,n,n) 在 cubic-bezier值n是 0 至 1 之间的数值。）
delay：动画效果的延迟触发时间。（单位s秒或ms毫秒）

3）transform
是一种变化属性，可以作为transition中需要变化的属性。该属性允许对元素进行旋转、缩放、移动或倾斜。

transform:rotate(9deg);  //旋转9度
transform:scale(2);  //放大2倍
transform: translate(50%,50%);  //向右下角平移自身的50%长、50%宽的距离
transform: skew(45deg, 45deg);  //倾斜

4.css3的animation属性
1）语法

animation: name duration timing-function delay iteration-count direction;

2）说明：

name:keyframe的名称，也就是定义了关键帧的动画的名称,这个名称用来区别不同的动画。在keyframe中设置具体的动画效果。
duration:完成动画所需要的时间（2s 或者 2000ms）
timing-function:完成动画的速度曲线
delay：动画开始之前的延迟
iteration-count：动画播放次数
direction：是否轮流反向播放动画（normal:正常顺序播放，alternate下一次反向播放）如果把动画设置为只播放一次，则该属性没有效果。

3）示例

<style type="text/css">
    @keyframes mymove {
        0% { left: 0px; top: 0px; }
        50% { left: 300px; top: 0px; }
        100% { left:300px; top: 200px; }
    }
    div {
        width: 100px;
        height: 100px;
        background: red;
        position: relative;
        animation: mymove 5s infinite;
    }
</style>
<div></div>

5.其他方法
1）插件
2）使用canvas制作动画：比原生js效率高的多，流畅的多。
3）引用gif图片：需求特别紧急，而且动画又特别复杂的情况。

（三）JS API
1.数组API

join()：数组转字符串

var a=[1,2,3];
a.join();//=>"1,2,3"
a.join("-");//=>"1-2-3"

split()：字符串转数组

var str="1-2-3";
var a=str.split("-");//=>a=[1,2,3]

reverse()：返回逆序的数组。修改了原先的数组。

var a=[1,2,3];
a.reverse();//=>a=[3,2,1]

sort()：将数组中的元素排序并返回排序后的数组。

var a=new Array("banana","cherry","apple");
a.sort();//=>a=["apple","banana","cherry"];  //sort()不带参数，按字母表排序

var a=[33,4,1111,222];
a.sort(function(a,b){return a-b;});//=>a=[4,33,222,1111]，给sort()传递一个比较函数

slice()：获取子数组

var a=[1,2,3,4,5];
a.slice(0,3);//返回[1,2,3]
a.slice(1,-1);//返回[2,3,4]

concat()：添加新元素到数组，创建并返回一个新数组。

var a=[1,2,3];
a.concat(4,5);//=>新数组[1,2,3,4,5]
a.concat([4,5]);//=>新数组[1,2,3,4,5]
a.concat(4,[5,6]);//=>新数组[1,2,3,4,[5,6]]

splice()：数组添加/删除元素。

var a=[1,2,3,4,5];
a.splice(2,0,'a','b');//返回[]，a=[1,2,'a','b',3,4,5]
a.splice(2,2,'c','d','e');//返回['a','b'],a=[1,2,'c','d','e',3,4,5]

push()和pop()：数组添加/删除元素。

var stack=[];
stack.push(1,2);//stack=[1,2],返回2（数组长度）
stack.pop();//stack=[1],返回2（删除的最后一个元素的值）

unshift()和shift()：数组添加/删除元素。

var a=[];
a.unshift(1,[2,3]);//a=[1,[2,3]]，返回2（数组长度）
a.shift();//a=[[1,2]]，返回1（删除的第一个元素的值）

forEach()：遍历数组，为每个元素调用指定的函数。修改原数组。

var data=[1,2,3,4,5];
data.forEach(function(value,index,array){//三个参数为每个元素值、索引、该数组
	array[index]=value+1;
});
console.log(data);//=>[2,3,4,5,6]

map()：将调用的数组的每个元素传递给指定的函数，并返回一个新数组。

var a=[1,2,3];
var b=a.map(function(x){
	return x*x;
});//=>b=[1,4,9]

filter：过滤器。该方法返回的数组元素是调用的数组的一个子集。

var a=[5,4,3,2,1];
var b=a.filter(function(x){
	return x<3;
});//=>b=[2,1]

every()和some()：逻辑判定。every()-“所有”，some()-“存在”。

var a=[1,2,3,4,5];
a.every(function(x){ return x<10; });//=>true：数组中所有的值都小于10
a.every(function(x){ return x%2===0; });//=>false:不是所有元素都是偶数

a.some(function(x){ return x%2===0; })//=>true：a中存在元素为偶数
a.some(isNaN);//=>false:a不包含非数值元素

reduce()和reduceRight()：使用指定的函数将数组元素进行组合，生成单个值并返回。

var numbers = [65, 44, 12, 4];
function getSum(total, num) {  //累加器
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}

indexOf()和lastIndexOf()：搜索整个数组中具有给定值的元素，返回找到的第一个元素的索引，如果没有找到就返回-1。

var a=[0,1,2,1,0];
a.indexOf(1);//=>1
a.lastIndexOf(1);//=>3
a.indexOf(3);//=>-1

isArray()：给定一个未知对象，判定它是否为数组。

var a=[1,2,3];
Array.isArray(a);//=>true

2.字符串API

charAt()和charCodeAt()：用于访问字符串中特定字符
charAt()返回给定位置的那个字符，charCodeAt()返回给定位置的字符编码。

var stringValue = "hello world";
console.log(stringValue.charAt(1));//e
console.log(stringValue.charCodeAt(1));//101

concat()：拼接字符串，可以接受任意多个参数，返回新字符串。

var stringValue = "hello";
var result = stringValue.concat(" world","!");
console.log(result);//hello world!

slice()、substr()和substring()：基于子字符串创建新字符串
stringObject.slice(start,end)
stringObject.substr(start,length)
stringObject.substring(start,stop)

var str="hello world!";
str.slice(0,3);  //"hel"
str.slice(3);  //"lo world!"

str.substr(0,3);  //"hel"
str.substr(3);  //"lo world!"

str.substring(0,3);  //"hel"
str.substring(3);  //"lo world!"

indexOf()和lastIndexOf()：和数组方法相似。
trim()：删除前置和后缀的所有空格，然后返回结果。不影响原字符串。

var str=" hello world! ";
console.log(str.length);  //14
console.log(str.trim().length);  //12

toLowerCase()、toLocaleLowerCase()、toUpperCase()、toLocaleUpperCase()：字符串大小写转换方法
match()：可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

var str="1 plus 2 equal 3"
console.log(str.match(/\d+/g));  //1,2,3

search()：用于检索字符串中指定的子字符串位置，或检索与正则表达式相匹配的子字符串。未检索到则返回-1。

var str="Visit W3School!"
console.log(str.search(/W3School/));  //6

replace()：用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

var str="Visit Microsoft!"
console.log(str.replace(/Microsoft/, "W3School"))；  //Visit W3School!

split()：基于分隔符将一个字符串分成多个子字符串，并放入数组中。

3.DOM节点
1）创建节点

//创建一个文本节点
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

//创建一个块节点
var para=document.createElement("div");

2）获取节点

获取父节点

var p  = document.getElementById("test").parentNode;  //1.parentNode (W3C)
var p1 = document.getElementById("test").parentElement;  //2.parentElement (IE)
var p2 = document.getElementById("test").offsetParent;  //3.offsetParent

获取子节点

var b =document.getElementById("test").childNodes;  //1.childNodes
var getFirstChild = document.getElementById("test").children[0];  //2.children
var getFirstChild = document.getElementById("test").firstChild;  //3.firstChild或firstElementChild
var getLastChildA = document.getElementById("test").lastChild;  //4.lastChild或lastElementChild

获取兄弟节点

//1.通过获取父节点的子节点来获取兄弟节点
var brother1 = document.getElementById("test").parentNode.children[1];  
//2.previousSibling或previousElementSibling获取上一个节点
var brother3 = document.getElementById("test").previousSibling;  
//3.nextSibling或nextElementSibling获取下一个节点
var brother5 = document.getElementById("test").nextSibling;

4.DOM事件
1）鼠标事件

onmouseover 和 onmouseout
onmousedown 和 onmouseup 和 onclick

2）页面事件

onload 和 onunload

3）表单事件

onchange
onfocus
oninput

前端面经 内容整理（一）一面考察技术使用

一、使用

猜你喜欢

前端面经内容整理（一）一面考察技术使用