EPI前端面试心得
前言
时光飞逝,转眼间已过了一年了,我已经是大二的小(lao)姐(si)姐(ji)了!哈哈!
以前老听学长学姐说,大二是最迷茫的一年,不知自己何去何从。开学两个月了,迷茫了很久很久,我终于确定了方向,决定走软件这条路,选择了web前端。 现在学习web前端的人在不断的增加,不论是报班参加web培训还是自学web基础的人都不在少数,关于选择web前端的理由也许每个人都不一样,我说一下我自己为什么最终选择学习web前端吧。在我学程序设计的最初,我学习的是C语言,然而整整一本书除了教我如何在黑洞洞的控制台上输出一些数字、字符外,就没有什么其他的内容了。学习了一年之后,我的觉得这种黑洞洞框一点都不好玩,都把我变压抑了,因为在我看来,那些丰富多彩的操作系统和各种应用软件和黑洞洞的控制台之间明显还有着非常巨大的鸿沟。虽然这个想法是幼稚可笑的,但是,我还是希望在c语言的基础上再去学习多彩多样的新东西。所以相对来说,Web开发更吸引我,因为他可以设计出丰富的多姿多彩的页面,而且前端好上手,学一些就可以设计简单的页面,你就可以在浏览器里看到了,这就是前端的优势。
我所了解的前端
1.什么是WEB前端
前端工程是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲,前端工程师使用HTML、CSS、JavaScript等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端、移动端网页,处理视觉和交互问题。从广义上来讲,所有用户终端产品与视觉和交互有关的部分,都是前段工程师的专业领域。
2.WEB前端的前景
前端是一个相对比较新的行业,互联网发展早期(1995年—2005年)是没有专业的前端工程师的。随着互联网的发展,大约从2005年开始,正式的前端工程师被行业认可,到了2010年,互联网开始全面进入移动时代,前端工程师的地位越来越重要,前端领域的技术发展也越来越快,各种新的思想、设计模式工具和平台快速发展,对前端工程师的技能要求也越来越高。
近几年互联网公司前端团队每年扩张一倍,JavaScript工程师平均薪水排名在语言工程是收入的前10:
3.WEB前端的魅力
首先,W3C制定的国际统一标准,使前端成为天生跨平台的技术载体,成为其他语言做不到的技术垄断。不管移动平台还是桌面平台,还是什么操作系统,在这里都是完全支持的。因此前端也成为了开放的,跨平台的技术。其次,前端的配合灵活多变。前端是基于浏览器的一门技术,只要浏览器有可运行的平台,前端开发就有其用武之地。所有已知的开发需要都需要依赖前端技术的开发。不难预想未来退出的后台语言,不论依照什么样的准则,它必然依赖于前端开发技术。最后,前端开发之所以备受关注,一个主要的原因也是其良好的就业前景。与其他的技术不同,前端技术就业范围广泛。而且伴随着前端开发在国内发展速度的日益加快,国内越来越多的企业重视到了前端开发的重要作用,也因此对前端技术越发的重视,人才需求量越来越大。
只需要在文本编辑器里面输入一些字符,保存后打开浏览器,马上就能看到丰富的视觉效果,这就是前端的优势,你所做的努力立即就能看得见。相对于非浏览器语言死板的输入输出,Web开发在界面可见的一层要丰富多彩得多,各种颜色和特效非常吸引人,这一点吸引很多人前来学习。
EPI前端面试题
1.知道JavaScript中的原型是什么吗?什么是原型链?能手写一个原型链继承的例子吗?
函数的原型对象默认指向函数本身,原型对象除了有原型属性外,为了实现继承,还有一个原型链指针proto,该指针指向上一层的原型对象,而上一层的原型对象的结构依然类似,这样利用proto一直指向Object的原型对象上,而Object的原型对象用Object.prototype.proto = Function.prototype表示原型链的最顶端,如此变形成了javascript的原型链继承,同时也解释了为什么所有的javascript对象都具有Object的基本方法。
2.知道什么是Webpack吗?说说你理解的Webpack?
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
图片发自简书App
从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。
3.说下你知道的能影响页面布局的CSS属性?
一、CSS文字属性:
color : /文字颜色/
font-family :/文字字体/
font-size : /文字大小/
font-style:/文字斜体/
letter-spacing : /字间距离/
line-height : /设置行高/
font-weight: /文字粗体/
二、CSS边框空白
padding-top:10px; /上边框留空白/
padding-right:10px; /右边框留空白/
padding-bottom:10px; /下边框留空白/
padding-left:10px; /*左边框留空白
4.说说你对CSS盒模型的理解?知道box-sizing是什么吗?
在浏览器下,每一个html元素都会被解析为一个装有东西的盒子。盒子本身有自己的边框(border),盒子里的内容到盒子边框的距离称为填充(padding),盒子边框与其它盒子之间的距离为边界(margin)。在css 模型设计中,元素真实的宽度和高度不仅仅由width和height来决定,还包括内边距、外边距、边框来组成。
图片发自简书App
5.说下CSS属性display中的block,inline和inline-block概念和区别?
display:block的特点:
1、block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
2、block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
3、block元素可以设置margin和padding属性。
display:inline的特点:
1、inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
2、inline元素设置width,height属性无效。
3、inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
display:inline-block的特点
既具有block的宽度高度特性,又具有inline的同行特性。
6.如果要你写一个百度搜索的首页,你觉得你会用到哪些HTML标签?
图片发自简书App
图片发自简书App
图片发自简书App
7.说下你对前端的看法,为什么选择前端?
此题请参考前边我所了解的前端:)
8.之前通过什么渠道了解到前端的?你平时怎么学习编程的?
我大一报班写了c语言和程序员课程,接下来的学习方向中有前端和后台,通过查资料、咨询学长学姐了解了前端。
我一般都是听老师讲课学习知识体系,晚上回去之后上机练习上课记的笔记以及老师所留下来的代码题。
9.了解Node.js吗?Node.js相比PHP有哪些优势和劣势?
Node.js
优点:①性能高②开发效率高③应用范围广
缺点:①新,人少②中间件少③IDE不完善
PHP
优点:①跨平台,性能优越②语法简单③有很多成熟的框架(phpMVC.Prado.Cake)④适合开发大型项目
缺点:①对多线程支持不太好②语法不太严谨(比如不用定义就可以用)③无法让对象常驻内存
alert(a);
a();
var a = 3;
function a(){
alert(10)
}
alert(a);
a = 6;
a();
10.上方代码的输出结果是什么?说下为什么会有这样的输出结果?
结果:
function a(){
alert(10);
}310
原因:
在ES5中所有由var声明的变量都会提升到作用域的顶部进行声明,然后再在声明的地方进行赋值。var声明函数变量时,和直接使用function定义函数时效果是不一样的。var只能把变量名的声明提前,而使用function定义函数时,函数的初始化也会被提前,所以不论你何时使用function声明函数,只要有声明调用时都不会产生错误,而使用var形式的函数表达式,在赋值之前调用都会找不到函数。如果重复使用同一函数名的两个函数,后声明的生效。
11.利用JavaScript写一个求平均值的函数,来求以下数列的平均值:123,454, 7676,4243,5435, 8997,695072
<script>
var numList = [34,23,45,36,78,69];
var all = 0;
function average(list){
all = 0;
for(var i=0;i<list.length;i++){
all+=list[i];
}
return all/list.length;
}
</script>