综述:对常见问题进行总结,帮助自己提高,找到自己基础问题的不足之处,这些问题属于基础,工作中的实践才是最重要的
1.es6中的箭头函数?其中的this指向谁?
由于箭头函数不绑定this, 它会捕获其所在(即定义的位置)上下文的this值, 作为自己的this值
var obj = {
i: 10,
b: () => console.log(this.i, this), //捕获上下文的this,作为自己的this值
c: function() {
console.log( this.i, this)
}
}
obj.b(); // undefined window{...}
obj.c(); // 10 Object {...}
可以看到,作为方法的箭头函数this指向全局window对象,而普通函数则指向调用它的对象,es6中的箭头函数没有this,他继承外部的函数的this值,以上为个人学习整理内容, 文中例子参考MDN, 欢迎交流学习
2.如何实现一个数组的去重?使用es6中的set数据结构即可?不能存储重复的数据结构?Map数据结构有什么好处?
const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x)); //将从事数组中获取的值添加到set数据结构中
for(let i of s ) { //遍历set的方法
console.log(i); //2 3 5 4
}
Map是以键值来存储数据的,传统的对象都是键值对的(字符串--值),但是键只能是字符串,Map中的键不仅仅是字符串,可以为任何值(值--值),扩展了,灵活性更大;
3.浏览器兼容性问题?简单的说几个?
使用meta标签来调节浏览器的渲染方式,可以强制要求360浏览器使用哪个内核来渲染页面,也可以强制要求浏览器其使用最新的内核来渲染浏览器
使用pie.htc让IE6/7/8支持部分css3属性,像css3的border-radius,box-shadow,Gradients,RGBA属性,
css hack通过不同的css前缀,针对IE6/7/8写相对应的样式
识别html5中的标签,可以使用html5shiv框架
4.Vue框架?
简述Vue的生命周期?
Vue对象在实例化之后,从建立到最终销毁有一个流程,在这个过程中,存在很多生命周期钩子函数,我们写的函数就是挂载在这些生命周期函数上的;
如何实现一个自定义组件?不同组件之间如何通信?
首先可以定义一个Vue组件,再将其import进入另一个Vue页面中,还统一通过Vue.extend()/Vue.component()的方式来定义组件;
父子组件如何通信?
使用$emit将消息发送出去;
前端路由,在项目中怎么实现路由嵌套?
在定义一个路由数组的时候,再定义它的子组件,实现路由的嵌套;
nextTick和VueX有没有使用过?分别在什么情况下使用到?
Vue.nextTick 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
vueX相当于是一个集中管理数据的仓库,当项目较大时,避免状态交互过于复杂;
Vue的响应式式原理(数据双向绑定)是怎样实现的?你觉得订阅者-发布者和观察者模式有区别吗?有的话说一下区别?
view到data是通过绑定事件实现的;
data到view层是通过es5中的Object.defineProperty()中的set和get方法实现的;
Object.defineProperty("obj","obj.key",{
set:function(){
},
get:function(){
}
})
5.css部分
怎样实现左边和右边两列固定比例宽度,且在关闭左边的管理按钮部分后,右边自动占满全屏?比如民情中的后台管理系统?
flex和grid布局有没有用过?简述?
怎样实现上下,左右居中,且在不知道高度和宽度的情况下?
#test{
position: fixed;
left:50%;
top:50%;
transform: translate(-50%,-50%);
/*在分别向上和左边走自己的50%,这里是相对于自己的-50%,经典答案*/
background-color: #2aabd2;
}
2018-06-16 星期四
1、实现页面宽度等于网页宽度的设置?使用meta标签来搞定?
2、五种原始类型数据?和一种引用类型?还有es6中的symbol新增类型?
五种原始类型: string/boolean/bumber/null/undefined 引用类型:object
3、onload和domcontentonload之间的区别是什么?
4、实现Function.prototype.bind()方法?实现对象深拷贝方法?实现trim方法?
5、查看函数执行结果的题目?
2018-08-06 星期一
1.浏览器缓存技术有哪些?卡牛公司也问过类似的问题:将那几个http请求头中的作用说清楚,怎样来控制这些请求标志为?
2.Vue中的methods和computed之间的区别是?(金蝶)
3.jquery中的实现深拷贝和浅拷贝的方法?什么是深浅拷贝?
浅拷贝仅仅只是对将一个对象的值复制到另一个对象中,两个对象的引用还是一样的,共享同一块内存,如果改变其中一个对象的值,另一个对象也会跟着改变。深拷则不仅仅是将值复制了一份,也会在内存中重新开辟一个单元来存储对象的引用,改变一个对象的值,另一个对象的值不会改变。
方法如下:
// 浅层复制(只复制顶层的非 object 元素)
var newObject = jQuery.extend({}, oldObject);
// 深层复制(一层一层往下复制直到最底层)
var newObject = jQuery.extend(true, {}, oldObject);
将设计稿按照语义化的方式进行分块
将公共的样式抽取出来
确定响应式布局方案
根据设计图对页面进行布局
2.标准化的好处,了解前端开发中的哪些标准?(应该是指前端开发中一些常见的开发规范相关内容)
标准化避免开发的时候出现兼容性问题,提高开发效率,便于开发人员之间的沟通;
3.css中的reseting和normalizing的区别,你会怎样来选择?
reseting:直接重置所有的格式,没有任何的前提,无视任何 user agent 预置样式
normalizing:重置部分格式的;
所以建议在设置的时候使用normalizing进行设置,避免造成所有数据的丢失,resetting这个需要谨慎使用;
4.怎样使你的网页适合打印?这种需求在平时有哪些应用呢?
在页面上右键有打印按钮,还可以选中页面的其中的一部分进行打印;
5.有没有使用过预编译器(sass、less等),并且描述其利弊?
有使用过sass预处理器,他依赖于ruby(runtime),在开发前需要先安装开发环境,sass的主要特点有:
sass分为sass和scss两个版本,scss版本是最新的,其中是由大括号的,更加靠近css的语法,sass则是上一个版本的语法
可以使用变量来定义宽度,高度等,做到统一管理的效果
可以使用嵌套css规则,避免针对一个元素中的子元素,要写好几遍的父元素的选择器
可以在scss文件中使用@import导入scss的文件,然后在发布的时候,自动将文件合并为一个css文件
静默注释,例如:/*注释内容*/,在代码中注释,方便开发人员理解,但是在最终上线的时候,会自动将这些注释清除掉。避免他人通过浏览器理解我们的代码
混合器@mixin
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
//sass最终生成:
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
使用选择器继承来精简CSS,避免写多余的css样式
//通过选择器继承继承样式
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
6.伪元素(::before)一般在什么地方使用?给出伪元素(::before, ::after)的几种使用场景?
清除浮动时
利用attr()来实现某些动态功能时
与counter()结合实现序号问题,而不用使用列表元素
实现各种特效
7.inline和inline-block之间的区别是?display的值常见的有block/inline-block/inline/none/table-cell等?
block:元素就变成了一个块级元素,单独占一行,可以设置盒子模型相关属性;
inline:元素变为行元素,可以和别行元素处于同一行,但是不能设置高度和宽度,其宽度随元素额内容而变化,inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
inline-block:简单来说就是将对象呈现为inline对象,让block元素不再单独占一行,多个block元素可以同排一行,且元素具有block的属性,可设置宽高,是block和inline元素的综合体;
8.什么情况下使用translate来代替position,理由是什么?
当实现某些动画的时候,使用translate来代替position来实现某些动画,这样会默认使用GPU来渲染动画,使用硬件加速功能;
使用 transform 时,可以让 GPU 参与运算,动画的 FPS 更高。使用 position 时,最小的动画变化的单位是 1px,而使用 transform 参与时,可以做到更小(动画效果更加平滑)
9.说一下你知道的js模块化规范,以及他们之间的区别?
AMD和CMD模块化规范,分别的实现方案有sea.js和require.js
10.描述一下jsonp的工作过程?
利用script标签中的src属性天然的可以获取外部的js代码,在其中去获取服务器的代码,服务器中的代码是一个在前端定义的函数,服务器端将通信数据以参数的形式发给前端,实现数据的通信,只能处理get方式的请求;不能处理post请求;
11.==和===之间的区别?
前者仅仅只比较两者的值是否相等,不比较类型,后者比较
12.描述一下你知道的polyfill?
在js中有些方法,不同的浏览器支持情况是不同的,polyfill就是一个js修补器,他是一个库,提高相关js方法的兼容性;
13.实现下列函数?记得淘宝还是谁在校招中出现过类似的问题?
add(2,5); //7
add(2)(5); //7
//传统的函数
function add(a,b){
return a+b;
}
function add(a){
var test=a;
console.log(test+add(a));
return test+add(a);
}
add(2)(5);
14.foo.x是多少?仔细两者之间的区别是?
//思考两者之间的区别?
var foo={n:1};
var bar=foo; //这里写一个bar的作用是什么?看不懂啥意思?
foo.x=foo={n:2};
console.log(foo.x); //undefined
var foo={n:1};
var bar=foo;
foo={n:2}
foo.x={n:2};
console.log(foo.x); //{n:2}
15.react和vue之间的区别?
vue是双向数据绑定,react是单向数据流
Vue创造了.vue文件,html/css/js依然是相互分离开,react提倡all in js
react 适合构建大型的应用,相对学习曲线更加陡峭,Vue则是构建小型应用的首选,开发速度快,易于掌握
16.Git使用过程中,如果你在开发着业务,突然另一个分支有一个bug要改,你怎么办?
马上使用switch/checkout 切换到相应的有bug的分支,解决完问题后再切换回来即可;
17.autoprefixer的作用?autoprefixer是什么?autoprefixer(自动前缀,解决css在各个浏览器中不兼容的问题)
Autoprefixer是一款自动管理浏览器前缀的插件,它可以解析CSS文件并且添加浏览器前缀到CSS内容里,使用Can I Use(caniuse网站)的数据来决定哪些前缀是需要的。
把Autoprefixe添加到资源构建工具(例如Grunt)后,可以完全忘记有关CSS前缀的东西,只需按照最新的W3C规范来正常书写CSS即可。如果项目需要支持旧版浏览器,可修改browsers参数设置 [1] 。
18.es6中增加了Map对象,如何让老浏览器也支持Map对象,说说你的思路?
map对象一些来的浏览器是不支持的,方法就是,可以判断浏览器的版本号,或者判断浏览器是否是支持map对象的,如果是不支持的,则直接用自己写的map兑现过来替换;按照这种思路,set对象也可以直接自定义了;
// 自定义Map对象
function Map() {
this.keys = new Array();
this.data = new Object();
this.set = function(key, value) {
if (this.data[key] == null) {
if (this.keys.indexOf(key) == -1) {
this.keys.push(key);
}
}
this.data[key] = value;
}
this.get = function(key) {
return this.data[key];
}
}
// new Map()
var map = new Map();
19.http缓存有哪几种方案?下边的这几个概念十分重要;
cache-control
expires
Etag
last-modified
20.目前来看vue项目的实践经验是是十分重要的,这是一个非常重要的点;一定要加强学习和认识,找到工作后,要将react的东西也学起来,并在框架层面进行分析,知道每个框架的优劣,怎样做技术选型,要形成自己的全面的知识体系?
21.在js中给元素添加事件绑定的三个参数说明?非常的重要,如果这里返回data呢?
var test=document.getElementById("test");
button.addEventLisner("click",function(this){
console.log(this);//这里的this指的是元素
},false); //false代表在事件冒泡阶段触发函数,true代表在事件捕获阶段触发函数
var test=document.getElementById("test");
button.addEventLisner("click",function(data){
console.log(data); //这里的data返回了非常多的信息,非常多
},false); //false代表在事件冒泡阶段触发函数,true代表在事件捕获阶段触发函数
22.什么是原型?原型链?能用你自己的话将其讲清楚吗?
js每声明一个function,都有prototype原型,prototype原型是函数的一个默认属性,在函数的创建过程中由js编译器自动添加。
也就是说:当生产一个function对象的时候,就有一个原型prototype
通过这个属性可以给构造函数添加方法,通过构造函数示例化出来的对象,默认大家都有这个属性,在这个原型上添加方法可以实现大家的共享,当我们在调用的一个对象的方法时,会先从自己的范围能寻找,如果没有则通过原型去寻找,知道找到null,这样就形成了一个链条,叫原型链;
var Person=function(name,age){
this.name=name;
this.age=age;
}
Person.prototype.sayHello=function(){
console.log("你哈");
console.log(this.name+this.age);
}
var person=new Person("xiaoming",25);
person.sayHello();
console.log(person.__proto__);
2018-08-20 星期一
1.h5和css3的特性?
语义化标签,video,radio,canvas,input中增加很多type等;
增加了媒体查询,box-shadow,text-shadow,tansform等可以实现很多的动画
2.性能优化?
3.各种技术原理?要能将一些技术的核心原理讲解出来
4.项目和后端知识问的挺多?
怎样来使用SpringMVC架构来开发后端接口,怎样来实现数据的增删改查;
5.this的指向有哪些情况?
一般是谁调用this就指向谁(这句话在大部分情况下是正确的),
在箭头函数中,因为箭头函数中是没有this的,他是调用上一级词法环境中的this;
情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window,但是我们这里不探讨严格版的问题,你想了解可以自行上网查找。
情况2:如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。
情况3:如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象
6.原生ajax的原理?过程讲解?ajax的操作必须要懂?最起码能简单的说几句他的核心内容是什么?
ajax是创建一个异步调用对象的方法,可以和服务器建立联系通信的方法:
function CreateXmlHttp() {
//非IE浏览器创建XmlHttpRequest对象
if (window.XmlHttpRequest) {
xmlhttp = new XmlHttpRequest();
}
//IE浏览器创建XmlHttpRequest对象
if (window.ActiveXObject){
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
try {
xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
}
catch (ex) { }
}
}
}
function Ustbwuyi() {
var data = document.getElementById("username").value;
CreateXmlHttp();
if (!xmlhttp) {
alert("创建xmlhttp对象异常!");
return false;
}
xmlhttp.open("POST", url,false); //false代表异步,必须等到请求完成了才能执行后边的代码
xmlhttp.send(); //发送请求的相关数据,只有post请求是需要的
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
document.getElementById("user1").innerHTML = "数据正在加载...";
if (xmlhttp.status==200){
document.write(xmlhttp.responseText);
}
}
}
}
7.自我介绍,要将重点技术能力展示出来?自己的核心竞争力在哪里?
8.es6问的还挺多的?
2018-08-20 星期一
1.数组去重的方法?说的方法不够全面?
2.HTML5和css3中的新加了哪些内容?
3.ajax的原理?将其中的原理说清楚?
4.http1.0/http1.1/http2.0之间的区别?2.0相对于前边的有哪些优势?
5.将多个块元素放到一行的方法?多说方法?
6.将一个元素上下左右居中的方法?
7.浏览器端缓存的方法?常见的那几个标志位的作用是什么?
8.es6中新加了哪些东西?能说出哪些内容?set和map数据结构的应用?
9.常见的性能优化的方法有哪些?越多越好?
10.node.js端的应用以及相关的信息?当初是怎样处理那个问题的?明天问问明华是怎样处理子文留下的问题的?
11.常见的http状态码有哪些呢?分别有啥作用呢?
100 200 301 304 404 500 505等;
2018-08-21 星期二
1.熟悉模块化开发,熟练使用css预处理工具?
2.webpack工具的使用,熟悉node开发;
3.有js通用组件的抽象和编写能力;
1.具有小程序的开发经验
2.熟悉模块化开发
3.熟悉各个浏览器之间的常见的兼容性问题
4.一定的前端的架构能力,对前端框架有深刻的理解,某些东西即使自己并不了解,但是也要不能表现的过于慌乱,有一个问题回答不了,可以将其牵引到自己熟悉的领域,一定要表现的落落大方,不要太怯场,要有自行;
1.八种http的理解?
HTTP协议中共定义了八种方法或者叫“动作”来表明对Request-URI指定的资源的不同操作方式,具体介绍如下:
GET:向特定的资源发出请求。
POST:向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。POST请求可能会导致新的资源的创建和/或已有资源的修改。
OPTIONS:返回服务器针对特定资源所支持的HTTP请求方法。也可以利用向Web服务器发送'*'的请求来测试服务器的功能性。
HEAD:向服务器索要与GET请求相一致的响应,只不过响应体将不会被返回。这一方法可以在不必传输整个响应内容的情况下,就可以获取包含在响应消息头中的元信息。
PUT:向指定资源位置上传其最新内容。
DELETE:请求服务器删除Request-URI所标识的资源。
TRACE:回显服务器收到的请求,主要用于测试或诊断。
CONNECT:HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
虽然HTTP的请求方式有8种,但是我们在实际应用中常用的也就是get和post,其他请求方式也都可以通过这两种方式间接的来实现。
2.针对hybrid APP对于jsbrige的理解?我们在开发的时候是怎样来实现安卓和前端之间的交互的?这里的一些细节的探讨?
3.sessionStorage是一个会话层面的本地存储,这个存储并不是说关闭一个页面之后就将相关的存储信息给删除掉,有可能这个信息在多个页面之间都应用到了,关闭其中一个并不代表就一定删除了;
4.post和get请求方式的区别?
不能说get方式不能向服务器端携带参数,在url的尾部是可以携带参数的,只是不安全而已,还有get携带的参数的体积是相对比较小的,post携带更多的数据量,post更加的安全,post会涉及一个100的状态码
5.编码题目?这个问题还是挺有深度的?知识点涉及到同步异步,块级作用域,闭包,let-var,扩展性也挺强的,可以将Promise等引入进来
for(var i=0;i<=5;i++){
setTimeout(function(){
console.log(new Date(),i);
},i*1000);
}
console.log(new Date(),i);
1.管理系统中,是怎样来做超时逻辑处理的?想想当初春晖的做法是怎样的?
每请求一个接口的时候,后端都会针对当前的登录状态进行一个判断,如果超时,则直接要求其回到登录页面
2.node.js和浏览器下的js之间的区别?为什么他会火?
3.四个console.log()的打印顺序是什么?promise和setTimeout之间的关系,怎样做这个处理的呢?
//请问下方的代码打印顺序,探讨对于promise的理解
console.log(1);
let promise=new Promise(function(resolve,reject){});
promise.then(console.log(2));
setTimeout(()=>{console.log(3)},0);
console.log(4);
//1 2 4 3
4.如果你的Vue中使用了es6的语法,但是再使用babel将其转为es5之后,其依然不能兼容IE8的浏览器时,你们是怎么处理的?
1.原型链和闭包?你知道底层的闭包的实现的数据结构是怎样的吗?那本大红书上有写?
2.你希望什么样的团队呢?主要是使用Vue来开发?
3.你觉得长处和缺点是什么?
1.写出常见的五个Linux命令?
2.遇到跨域请求时资源时,如何处理呢?
3.网站常见的安全漏洞有哪些?如何防范?
4.编写冒泡排序算法程序?
5.什么是闭包?
6.tcp和udp的区别是?
7.常见的设计模式有哪些?
8.http和https的区别是?
9.什么是守护进程?如何实现守护进程?
对于设计模式要有基本的理解,对于Linux系统要有简单的认识;
两个主要的学习方向:Vue和微信小程序,这四个方向自己的认识都不是非常的深刻,要自己去探索。
提问阶段:
1.你使用VueX来存储数据,但是如果当你跳转到另一个页面的时候,突然刷新了页面,数据丢失了怎么办,解决方案是将其存储到本地localStorage当中?
这种问题确实存在,自己没有真正使用Vue来做过这个项目,针对这里的细节还是不能完全的领会,但是别人在问的时候要尽可能用现有的办法来解决这个问题;最近要尽快熟悉一个vue项目,将其中的逻辑理解清楚;
2.es6的相关的应用,比如解构赋值等等?
3.如果让你单独设计一个秒杀的活动,该怎样来处理相关的工作呢?
2018-08-20 星期四
笔试试题汇总:
1.js有几种数据类型?
string number null undefined boolean Object
2.如何点击每一个li之后,弹出相应的index值?
- 这是第一条
- 这是第一条
- 这是第一条
//基础答案-代码如下
var ul=document.getElementById("test");
var li=document.getElementsByTagName("li");
for(var i=0;i
3.this对象的理解?
var User={
count:1,
getCount:function(){
return this.count;
}
}
console.log(User.count); //1
var func=User.getCount;
console.log(func()); //undefined
4.如何解决跨域的问题?
CORS JSONP document.domain
5.如何设置浏览器缓存,缓存和不缓存两种?
-
Last-Modified:服务器上文件的最后修改时间
-
Etag:文件标识,文件指纹,提高传输性能
-
Expires:本地缓存目录中,文件过期的时间(由服务器指定具体的时间)
-
Cache-control:本地缓存目录中,文件过期的时间(由服务器指定过期的间隔时间,由浏览器根据间隔生成具体的时间)
6.实现一个clone函数,可以对js中的5种主要数据类型进行值复制?主要是考察对于对象的深拷贝的实现?null也是属于Object的;
7.代码实现(有几种实现)
var arr=[
{
id:1,
children:[...]|null
}
]
变量arr是一个Object数组,数组元素为Object,有两个属性
id:数字类型
children:有两种类型。一种是数组,结构类似于变量arr;一种是null
请用代码实现从变量arr中提取子孙元素的id值组成一个一维数组,如[1,2,3...];
var arr=[{
id:1,
children:[{
id:2,
children:null
}],
},
{
id:3,
children:null,
},
];
function getId(arr){
var newArr=[];
for(var i=0;i
8.不可变数组的范围求和?给定一个整数数组nums,计算出从第i个元素到第j个元素的和(i<=j),包括nums[i]和nums[j]。
例子:
const nums=Object.freeze([-2,0,3,-5,2,-1]);
sumRange(0,2)->1
sumRange(2,5)->-1
sumRange(0,5)->-3
//注意:
假定数组的值不会改变(如上边的代码,nums因为Object.freeze的缘故可读不可写)
sumRange可能会被使用很多次,求不同范围的值
数组可能规模很大(比如超过10000个数),注意运行时间
思路:
主要为了提高效率,前边计算过的值,要保存到本地,供下次计算的时候使用,非常好的方法,但是一旦本地存储的数据过多的时候,这个检查的过程也是非常缓慢的。
var nums=[1,2,3,4];
function add(start,end){
var newNums=nums.slice(start,end+1);
var result=0;
for(var i=0;i
9.实现一个LazyMan,可以按照以下方式调用?非常经典的问题,涉及到代码组织方式,js的难点就是代码的组织方式和复合应用?用简单的语法开发出复杂的应用;
LazyMan("Hank"); 输出:
Hi!This is Hank!
LazyMan("Hank").sleep(0).eat("dinner);输出:
Hi!This is Hank!
//等待10秒..
Wake Up after 10
Eat dinner~
LazyMan("Hank").eat("dinner").eat("supper");输出:
Hi!This is Hank!
Eat dinner~
Eat supper~
LazyMan("Hank").sleepFirst(5).eat("supper");输出:
//等待5秒
Wake up after 5
Hi This is Hank!
Eat supper
依次类推。
//非常经典的一个问题,手动实现一个事件队列管理栈和链式调用的组合使用
function _LazyMan(name) {
this.tasks = [];
var self = this;
var fn =(function(n){
var name = n;
return function(){
console.log("Hi! This is " + name + "!");
self.next();
}
})(name);
this.tasks.push(fn);
setTimeout(function(){
self.next();
}, 0); // 在下一个事件循环启动任务
}
/* 事件调度函数 */
_LazyMan.prototype.next = function() {
var fn = this.tasks.shift();
fn && fn();
}
_LazyMan.prototype.eat = function(name) {
var self = this;
var fn =(function(name){
return function(){
console.log("Eat " + name + "~");
self.next()
}
})(name);
this.tasks.push(fn);
return this; // 实现链式调用
}
_LazyMan.prototype.sleep = function(time) {
var self = this;
var fn = (function(time){
return function() {
setTimeout(function(){
console.log("Wake up after " + time + "s!");
self.next();
}, time * 1000);
}
})(time);
this.tasks.push(fn);//这几个都是直接将其加入到事件队列数组中
return this;
}
_LazyMan.prototype.sleepFirst = function(time){
var self = this;
var fn = (function(time) {
return function() {
setTimeout(function() {
console.log("Wake up after " + time + "s!");
self.next();
}, time * 1000);
}
})(time);
this.tasks.unshift(fn);//这个则是直接将其插入到数组的最前边来执行
return this;
}
/* 封装 */
function LazyMan(name){
return new _LazyMan(name);
}
LazyMan("Hank").sleepFirst(1).eat("supper");
讨论的问题汇总:
1.面试题目还是非常的有高度?
2.大公司的试题难度相对还是比较高的?
3.关于Vue中的bus的问题,怎样使用bus来实现两个组件之间的通信?
简单的状态管理,可以用vue bus(事件总线),其实自己在面试中说的兄弟组件之间用$emit的方法先自己定义一个事件,再在另一个元素中一般在created钩子函数中写相应的方法,监听这个自定义事件,并获取信息,拿到后给后边的代码使用
vue bus可以实现不同组件间、不同页面间的通信,比如我在A页面出发点击事件,要B页面发生变化,使用方法如下:
全局定义:main.js
window.eventBus = new Vue()
在A页面的事件中触发:
eventBus.$emit('todo', '123')
在B页面的created中开始监听,越早监听越好:
eventBus.$on('todo', (params) => {
console.log(params)
})
4.Vue中那几个钩子函数一般在什么情况下使用?还有methods、computed、watch之间的区别是?
2018-08-27 星期一
1.我们的产品是部署在阿里云的oss服务上吗?
是的,相当于一个集中存储服务器,将我们的js/css/img上传上去之后就能自动进行请求使用了;
2.你们的产品是用webpack进行压缩,打包吗?为什么不进行压缩合并打包呢?你们不会使用sourcemap来解决压缩文档问题定位吗?
不是,以前是使用grunt合并,压缩,但是发现对于性能没有大的影响就放弃了,因为影响了调试,那你们不会使用sourcemap吗?
这个工具是专门用于定位压缩文件的问题的;想想Vue打包后的xx.map.js文件的作用是不是就是这个呢?
3.常见的设计模式有哪些?Vue中主要用了哪几种设计模式?
单例模式、单体模式、工厂模式、观察者模式、代理模式、策略模式你等
4.在跨域时,浏览器端和后端交互时,是不会将cookies信息携带给后端的?将cookies和localStorage合并成chache方法的实现过程?
5.你最近的学习方向和内容有哪些?
6.你的博客地址是多少?为什么不写到简历上呢?
地址是:https://blog.csdn.net/m0_37631322,目前的博客内容还是比较少的,写上去不能反映自己的能力,以后要多些,多思考,多总结;
7.promise的内部实现原理?(状态机)
8.弹性布局有应用过吗?实现原理是?三种定位,浮动的应用?
9.谈谈你对mvc/mvp/mvvm的深刻理解?让我回来查查,说明理解的不是非常的正确?
10.通过实时更改left不会影响页面的性能吗?相当于实时重绘?可以使用css中的translateX、translateY来实现实时改变坐标的效果。
个人总结:
1.大公司对于代码的设计模式是有一定的要求的,代码组织方式
2.对于自己使用的框架一定要有自己的见解理解其核心点的实现原理
3.数据结构和算法是一个非常重要的方向,特别是大公司的高级前端,一般都会涉及到复杂数据的处理,算法很重要
4.对于框架的运用要有一个新的认识,平时多对于小的问题进行思考和总结十分重要
5.自己工作中多做一些有挑战的东西很重要
你可能感兴趣的:(前端自测问题总结,前端问题汇总,前端面试问题,思考,第二篇)