面闭 — JavaScript

Ajax 请求的步骤

第一步(得到 XMLHttpRequest)

第二步(打开与服务器的链接)

第三步(发送请求)

xmlHttp.send(null);如果括号里不给 null 可能会造成部分浏览器无法发送;

第四步

在 xmlHttp 对象的一个事件上注册监听器: onreadstatechange

得到的 5 个状态

>0状态:刚创建,还没有调用 open() 方法;

>1状态:请求刚开始,调用了open()方法,但是没有调用 send 方法;

>2状态:调用完了 send() 方法;

>3状态:服务器已经开始响应。但不表示响应结束;

>4状态:服务器响应结束!;

得到 xmlHttp 对象状态

var state = xmlHttp.redayState; // 可能是 0,1,2,3,4

得到服务器的响应状态码

var state = xmlHttp.status; // 可能是 200、404、500

得到服务器的响应内容

Ajax 的缺点

(1)、ajax 不支持浏览器 back 按钮

(2)、安全问题 ajax 暴露了与服务器交互的细节。

(3)、对搜索引擎的支持比较弱

(4)、破坏了程序的异常机制

什么是 Ajax 和 JSON,它们的优缺点

Ajax 全称 asynchronous JavaScript and XML,即异步 JavaScript 和 xml,用于在 web 页面中事先异步数据交互,实现页面局部刷新。

优点:可以使得页面不重载全部内容的情况下加载局部内容,降低数据传输量,避免用户不断刷新或者跳转页面,提高用户体验。

缺点:对搜索引擎不友好,要实现 ajax 下的前后退功能成本较大,可能造成请求数量增加跨域问题限制;

json 是一种轻量级的数据交换格式,ECMA 的一个子级

优点:轻量级、易于人的阅读和编写,便于机器(JavaScript)解析,支持复合数据类型(数组、对象、字符串、数字)

Ajax 请求的时候 get 和 post 方式的区别

get 一般用来进行查询操作,url 地址有长度限制,请求的参数都暴露在 url 地址中,如果传递中文参数,需要自己进行编码操作,安全性低

post 请求方式主要提交数据,没有数据长度的限制,提交的数据内容存在于 http 请求体中,数据不会暴露在 url 地址中。

jsonp的原理,以及为什么不是真正的 ajax

jsonp 并不是一种数据格式,而 json 是一种数据格式,jsonp 是用来解决跨域获取数据的一种解决方案,具体是通过动态创建 script 标签,然后通过标签的 src 属性获取 js 文件中的 js 脚本,该脚本的内容是一个函数调用,参数就是服务器返回的数据,为了处理这些返回的数据,需要事先在页面定义好回调函数,本质上不是使用 ajax 技术。

阐述一下异步加载

(1) 异步加载的方案:动态插入 script 标签

(2) 通过 ajax 去获取 js 代码,然后通过 eval 执行

(3) script 标签上添加 defer 或 async 属性

(4) 创建并插入 iframe,让它异步执行 js

post 和 get 的区别,何时使用 post

get:一般用于信息获取,使用 url 传递参数,对所有发送信息的数量也有限制,一般在 2000 个字符,有的浏览器 8000 个字符

post:一般用于修改服务器上的资源,对于发送的信息没有限制

在以下情况中,请使用 post 请求:

(1) 无法使用缓存文件(更新服务器上的文件或数据库)

(2) 向服务器发送大量数据(post 没有数据限制)

(3) 发送包含未知字符的用户输入时,post 比 get 更稳定也更可靠

数组去重的方法

排序方法

1
2
3
4
5
6
7
8
9
10
function distinct(arr){
var result = []
for(var i = 0;i < arr.length; i++){
for(var j = i+1;j<arr.length;j++){
j = ++i;
}
result.push(arr[i])
}
return result;
}

对象方法

1
2
3
4
5
6
7
8
9
10
11
function unique(arr){
var res = []
var json = {}
for(var i=0;i<arr.length;i++){
if(!json[arr[i]]){
res.push(arr[i])
json[arr[i]] = 1;
}
}
return res;
}

js 的作用域

作用域说明:一般理解指一个变量的作用范围

1、全局作用域

(1)全局作用域在页面打开时被创建,页面关闭时被销毁

(2)编写在 script 标签中的变量和函数,作用域为全局,在页面的任意位置都可以访问到

(3)在全局作用域中有全局对象 window,代表一个浏览器窗口,由浏览器创建,可以直接调用

(4)全局作用域中声明的变量和函数会作为 window 对象的属性和方法保存

2、函数作用域

(1)调用函数时,函数作用域被创建,函数执行完毕,函数作用域被销毁

(2)每调用一次函数就会被创建一个新的函数作用域,他们之间是相互独立的。

(3)在函数作用域中可以访问到全局作用域的变量,在函数外无法访问到函数作用域内的变量

(4)在函数作用域中访问变量、函数时,会先在自身作用域中寻找,若没有找到,则会到函数的上一级作用域中寻找,一直到全局作用域

说说你对闭包的理解

说说你对闭包的理解

使用闭包主要是为了设计私有的方法和变量。

闭包的优点是可以避免全局变量的污染,

缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。

闭包有三个特性:

1、函数嵌套函数

2、函数内部可以引用外部的参数和比变量

3、参数和变量不会被垃圾回收机制回收

cookie 虽然在持久保存客户数据提供了方便,分担了服务器存储的负担,但是有很多局限性。

1、每个域名下最多生成 20 个 cookie.

2、浏览器会清理 cookie ,IE、Opera 会清理近期最少使用的 cookie,Firefox 会随机清理 cookie.

3、cookie 最大大约为 4096 字节。

优点:极高的扩展性和可用性。

1、通过良好的编程,控制保存在 cookie 中的 session 对象的大小。

2、通过加密和安全传输技术(SSL),减少 cookie 被破解的可能性。

3、只在 cookie 中存放不敏感数据,即使被盗也不会有重大损失。

4、控制 cookie 的生命期,使之不会永远有效。盗窃者很可能拿到一个过期的 cookie。

缺点:

1、cookie 数量和长度的限制。

2、安全性问题。

3、有些状态不可能保存在客户端。

1、cookie 数据存放在客户的浏览器上,session 数据放在服务器上。

2、cookie 不是很安全,可以分析存放在本地的 cookie 并进行 cookie 欺骗,考虑到安全应当使用 session。

3、session 会在一定时间内保存在服务器上。当访问增多,会比较占用服务器的性能。

4、单个 cookie 保存的数据不能超过 4k,一个站点最多保存20个 cookie。

使用 typeof bar === “object” 来确定 bar 是否是对象的潜在陷阱是什么?如何避免这个陷阱?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 避免 null 返回 true
var bar = null;
console.log((bar !== null) && (typeof bar === "object")); // logs false

// function 返回 ture
var bar = function(){
};
console.log((bar !== null) && ((typeof bar === "object") || (typeof bar === "function")));

// 数组 返回 false
var bar = [];
console.log((bar !== null) && (typeof bar === "object") && (toString.call(bar) !== "[object Array]"));

// jQ
console.log((bar !== null) && (typeof bar === "object") && (! $.isArray(bar)));
下面的代码将输出什么到控制台,为什么
1
2
3
4
5
6
7
8
9
10
(function(){
var a = b = 3; // b = 3;var a = b;
})();

console.log("a defined? " + (typeof a !== 'undefined'));
console.log("b defined? " + (typeof b !== 'undefined'));

// output
a defined? false
b defined? true
下面输出什么到控制台,为什么
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var myObject = {
foo: "bar",
func: function() {
var self = this;
console.log("outer func: this.foo = " + this.foo);
console.log("outer func: self.foo = " + self.foo);
(function() {
console.log("inner func: this.foo = " + this.foo);
console.log("inner func: self.foo = " + self.foo);
}());
}
};

myObject.func();
// 在ECMA 5之前,在内部函数中的this 将指向全局的 window 对象;
/*
* outer func: this.foo = bar
* outer func: self.foo = bar
* inner func: this.foo = undefined
* inner func: self.foo = bar
*/
封装JavaScript源文件的全部内容到一个函数块有什么意义及理由

这是一个越来越普遍的做法,被许多流行的JavaScript库(jQuery,Node.js等)采用。这种技术创建了一个围绕文件全部内容的闭包,也许是最重要的是,创建了一个私有的命名空间,从而有助于避免不同JavaScript模块和库之间潜在的名称冲突。

这种技术的另一个特点是,允许一个易于引用的(假设更短的)别名用于全局变量。这通常用于,例如,jQuery插件中。jQuery允许你使用jQuery.noConflict(),来禁用 $ 引用到jQuery命名空间。在完成这项工作之后,你的代码仍然可以使用$ 利用这种闭包技术,如下所示:

1
(function($) { /* jQuery plugin code referencing $ */ } )(jQuery);

在 JavaScript 源文件的开头包含 use strict 意义和好处

use strict 是一种在JavaScript代码运行时自动实行更严格解析和错误处理的方法。

严格模式的一些主要优点包括:

  • 使调试更加容易。
  • 防止意外的全局变量。
  • 消除 this 强制
  • 不允许重复的属性名称或参数值。
  • 使eval() 更安全。
  • 在 delete使用无效时抛出错误。
考虑以下两个函数。它们会返回相同的东西吗? 为什么相同或为什么不相同
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function foo1()
{
return {
bar: "hello"
};
}

function foo2()
{
return
{
bar: "hello"
};
}
console.log(foo1());
console.log(foo2());

// output
// Object {bar: "hello"};
// undefined

// 代码行上没有其他任何代码,分号会立即自动插入到返回语句之后。
NaN 是什么?它的类型是什么?你如何可靠地测试一个值是否等于 NaN

NaN 属性代表一个“不是数字”的值。这个特殊的值是因为运算不能执行而导致的,不能执行的原因要么是因为其中的运算对象之一非数字(例如, “abc” / 4),要么是因为运算的结果非数字(例如,除数为零)。

NaN 是 Number;

检测
isNaN
Number.isNaN()

下列代码将输出什么?并解释原因

console.log(0.1 + 0.2);
console.log(0.1 + 0.2 == 0.3);

JavaScript中的数字和浮点精度的处理相同,因此,可能不会总是产生预期的结果。

9.讨论写函数 isInteger(x) 的可能方法,用于确定x是否是整数

在ECMAScript规格说明中,整数只概念上存在:即,数字值总是存储为浮点值。

function isInteger(x) { return (x^0) === x; }
function isInteger(x) { return Math.round(x) === x; }
function isInteger(x) { return (typeof x === ‘number’) && (x % 1 === 0);
function isInteger(x) { return parseInt(x, 10) === x; } // 目变得足够大,为指数形式(例如, 1e+21)

Math.ceil() 和 Math.floor() 在上面的实现中等同于 Math.round()。

下列代码行1-4如何排序,使之能够在执行代码时输出到控制台? 为什么

(function() {
console.log(1);
setTimeout(function(){console.log(2)}, 1000);
setTimeout(function(){console.log(3)}, 0);
console.log(4);
})();

output
1
4
3
2

浏览器有一个事件循环,会检查事件队列和处理未完成的事件。例如,如果时间发生在后台(例如,脚本的 onload 事件)时,浏览器正忙(例如,处理一个 onclick),那么事件会添加到队列中。当onclick处理程序完成后,检查队列,然后处理该事件(例如,执行 onload 脚本)。
同样的, setTimeout() 也会把其引用的函数的执行放到事件队列中,如果浏览器正忙的话。
当setTimeout()的第二个参数为0的时候,它的意思是“尽快”执行指定的函数。具体而言,函数的执行会放置在事件队列的下一个计时器开始。但是请注意,这不是立即执行:函数不会被执行除非下一个计时器开始。这就是为什么在上述的例子中,调用 console.log(4) 发生在调用 console.log(3) 之前(因为调用 console.log(3) 是通过setTimeout被调用的,因此会稍微延迟)。

写一个简单的函数(少于80个字符),要求返回一个布尔值指明字符串是否为回文结构

function isPalindrome(str) {
str = str.replace(/W/g, ‘’).toLowerCase();
return (str == str.split(‘’).reverse().join(‘’));
}

console.log(isPalindrome(“level”)); // logs ‘true’
console.log(isPalindrome(“levels”)); // logs ‘false’
console.log(isPalindrome(“A car, a man, a maraca”)); // logs ‘true’

阅读更多

面面俱到

面试题 —— 基础篇

涉及知识点

基础知识:原型、原型链、作用域、闭包、异步、单线程
JSAPI:DOM 操作、 ajax、事件绑定
开发环境:版本管理、模块化、打包工具
运行环境:页面渲染、性能优化

原始类型有哪几种 null 是对象嘛

在 JS 中,存在着 6 种原始值,分别是

  • boolean
  • null
  • undefined
  • number
  • string
  • symbol

首先原始类型存储的都是值,是没有函数可以调用的,比如 undefined.toString()
‘1’.toString() 可以使用原因是 ‘1’ 被强制转换成了 String 类型,String 类型也是对象类型。
js 的 number 类型是浮点型,使用计算中会出现 bug ,比如 0.1 + 0.2 != 0.3。
string 类型是不可变的。
null 是对象类型是历史遗留 bug ,在 js 的最初版本中使用的是 32 位 系统,为了性能考虑使用低位存储变量的类型信息,000 开头代表是对象,然而 null 表示为全零。

对象类型和原始类型的不同之处 函数参数是对象会发生什么问题

在 js 中,除了原始类型那么其他的都是对象类型了。对象类型和原始类型不同的是,原始类型存储的是值,对象类型存储的是地址(指针)。当你创建了一个对象类型的时候,计算机会在内存中帮我们开辟一个空间用来存放值,但是我们需要找到这个空间,这空间会拥有一个地址(指针)。

1
2
3
const a = []
const b = a
b.push(1)

对于常量 a 来说,假设内存地址(指针)为 #001,那么在地址 #001 的位置放了值 [],常量 a 存放了地址(指针) #001。

前端需要注意哪些 SEO

  • 合理的 title、description、keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过 2 次,而且要靠前,不同页面 title 要有所不同;description 把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面 description 有所不同; keywords 列举出重要关键词即可
  • 语义化的 HTML 代码,符合 W3C 规范:语义化代码让搜索引擎容易理解网页
  • 重要内容 HTML 代码放在最前:搜索引擎抓取 HTML 顺序是从上到下,有的搜索引擎对抓取长度有限制,保证重要内容一定会被抓取
  • 重要内容不要用 js 输出:爬虫不会执行 js 获取内容
  • 少用 iframe:搜索引擎不会抓取 iframe 中的内容
  • 非装饰性图片必须加 alt
  • 提高网站速度:网站速度是搜索引擎排序的一个重要指标

JS 中使用 typeof 能得到的哪些类型

何时使用 === 何时使用 ==

window.onload 和 DOMContentLoaded 的区别

用 JS 创建 10个 a 标签,点击的时候弹出来对应的序号

简述如何实现一个 模块加载器,实现类似 require.js 和基本功能

实现数组的随机排序

Ajax 请求的步骤

第一步(得到 XMLHttpRequest)
第二部(打开与服务器的链接)
xmlHttp.open(请求方式,请求URL,是否异步);用来打开与服务器的连接,需要三个参数;
第三部(发送请求)
xmlHttp.send(null);如果括号里不给 null 可能会造成部分浏览器无法发送;
第四部
在 xmlHttp 对象的一个事件上注册监听器: onreadystatechange 得到的 5个状态

  • 0状态:刚创建,还没有调用 open()方法;
  • 1状态:请求刚开始,调用了 open()方法,但是没有调用 send 方法;
  • 2状态:调用完了 send()方法;
  • 3状态:服务器已经开始响应。但不表示响应结束;
  • 4状态:服务器响应结束!
    得到 xmlHttp 对象状态
    var state = xmlHttp.readyState; // 可能是 0,1,2,3,4
    得到服务器的响应状态码
    var state = xmlHttp.status; // 可能是 200、404、200
    得到服务器的响应内容

相关资料
[视频]BAT大牛带你横扫初级前端JavaScript面试
[视频]前端面试求职跳槽通关路线
两年前端 9 ~ 10月面经(已拿阿里,头条,pdd,快手 offer)
前端面试之道
掘金 前端面试之道2
失业两个月拿到offer后,入手MacBook Pro!
新出炉的阿里、腾讯、美团以及网易等一线公司面试总结
推荐这 10 个 GitHub 上超火的前端面试项目,打造自己的加薪宝库!
推荐几个大厂的前端代码规范,你也能写出诗一样的代码!
面试官:说说你对SPA(单页应用)的理解?
分享一位同学的阿里、百度前端面经
互联网寒冬,一年经验字节跳动、虾皮、快手、拼多多前端面试总结
JavaScript 正则表达式迷你书
JS正则表达式完整教程
2 年前端 7~9 月大厂面试经历总结
阿里、腾讯、美团以及网易等一线互联网公司面试总结

前端程序员面试宝典 摘要

第 8 章 移动端

在移动端,单击穿透是什么?

单击穿透现象有 3 种。

单击穿透问题:单机蒙层(mask)上的“关闭”按钮,蒙层消失后,发现触发了按钮下面元素的 click 事件。
页面羊击穿透问题:如果按钮下面恰好是一个有 href 属性的 a 标签,那么页面 就会发生跳转。
跨页面单击穿透问题:这次没有蒙层了,直接单击页内按钮跳转至新页,然后发现新页面中对应位置元素的 click 事件被触发了。

有 4 种解决方案。
(1)只用 touch。
这是最简单的解决方案,完美解决单击穿透,把页面内所有 click 都换成 touch 事件(touchstart,touchend,tap)。
(2)只用 click
因为单击会带来 300ms 的延迟,所以网页内任何一个自定义交互都将增加 300ms 的延迟。
(3)轻触(tap)后延迟 350ms 再隐藏蒙层。
改动最小,缺点是隐藏蒙层变慢了,350ms 还是能感觉到慢的。
(4)添加 pointer-events:none 样式
这比较麻烦且有缺陷,不建议使用,蒙层隐藏后,给按钮下面的元素添上 pointer-events:none 样式,让 click 穿过去,350ms 后去掉这个样式。恢复响应的缺陷是蒙层消失后的 350ms 内,用户单击按钮下面的元素没反应,如果用户单击速度很快,一定会发现。

如何实现自适应布局?

通过以下几种方式实现。
(1)可以使用媒体查询做响应式页面
(2)用 Boostrap 的栅格系统。
(3)使用弹性盒模型

在移动端( Android 、 iOS )怎么做好用户体验?

从以下几方面做好用户体验。
(1)清晰的视觉纵线。
(2)信息的分组
(3)极致的减法
(4)利用选择代替输入
(5)标签及文字的排布方式。
(6)依靠明文确认密码。
(7)合理地利用键盘。

如何解决 And「oid 浏览器查看背景图片模糊的问题?

这个问题是 devicePixelRatio 的不同导致的,因为手机分辨率太小,如果按照分辨率来显示网页,字会非常小,所以苹果系统当初就把 iPhone 4 的 960×640 像素的分辨率在网页里更改为 480 x 320 像素,这样 devicePixelRatio = 2 而 Android 的 devicePixe!Ratio 比较乱,值有 1.5、2 和 3。为了在手机里更为清晰地显示图片,必须使用 2 倍宽高的背景图末代替 img 标签(一般情况下都使用 2 倍)。 例如一个 div 的宽高是 100px × 100px,背景图必须是 200px × 200px,然后设置 backgroundsize:contain 样式,显示出来的图片就比较清晰了。

如何解决长时间按住页面出现闪退的问题?

通过以下代码设直样式。

1
2
3
element {
-webkit-touch-callout: none;
}

如何解决 iPhone 及 iPad 下输入框的默认内阴影问题?

通过以下代码设置样式。

1
2
3
4
element {
-moz-appearance: none;
-webkit-appearance: none;
}

在 iOS 和 Android 下,如何实现触摸元素时出现半透明灰色遮罩?

通过以下代码设置样式

1
2
3
element {
-webkit-tap-highlight-color: rgba(255,255,255,0);
}

在旋转屏幕时,如何解决字体大小自动调整的问题?

通过以下代码设置样式

1
2
3
html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6 {
-webkit-text-size-adjust: 100%;
}

如何解决 Android 手机圆角失效问题?

通过 background-clip: padding-box 为 失效的元素设直样式。

如何解决 iOS 中 input 键盘事件 keyup 失效问题?

通过以下代码设置样式

1
2
3
4
5
6
<input type="text" id="testInput" />
<script type="text/javascript">
document.getElementById("testInput").addEventListener("input", function(e) {
var value = e.target.value;
});
</script>

如何解决 iOS 设置中 input 按钮样式会被默认样式覆盖的问题?

设置默认样式为 none。解决方式如下。

1
2
3
4
5
6
input,textarea{
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

如何解决通过 transform 进行 skew 变形、rotate 旋转会出现锯齿现象 的问题?

通过以下代码设置样式

第 29 章 公司常问问题

1、你觉得前端工程师的价值体现在哪些方面?

体现在以下方面。
(1)为优化用户体验提供技术支持(交互部分)。
(2)为浏览器之间的兼容性提供支持。
(3)为提高用户浏览速度(浏览器性能)提供支持。
(4)为跨平台(多端)、其他基于 webkit 或其他渲染引擎的应用(应用嵌入,如微信小程序)提供支持。
(5)为展示数据提供支持(大数据可视化)。

2、你是如何认识前端界面工程师这个职位的?

前端工程师是最贴近用户的程序员,比后端、数据库、产品经理、运营、安全都近。
前端工作可以实现界面交互,提升用户体验。
有了 Node.js ,前端可以实现服务端的一些工作。
前端工程师的职责就是能让产品从 90 分提升到 100 分,甚至更好。
前端工程师的岗位职责包括以下几方面。
(1)参与项目开发,快速,高质量地完成实现效果图,精确到 1px。
(2)与团队成员,UI 设计人员、产品经理沟通。
(3)做好页面结构,页面重构,提升用户体验。
(4)处理 hack、兼容性问题,写出优美的代码。
(5)针对服务器的优化,拥抱最新的前端技术。

3、说说你对前端架构师的理解

前端架构师的职责如下。
(1)负责前端团队的管理以及与其他团队的协调工作,提升团队成员能力和工作效率。
(2)带领团队完成研发工具及平台前端部分的设计、研发和维护。
(3)带领团队进行前端领域前沿技术的研究及新技术的调研,保证团队的技术领先。
(4)负责前端开发规范的指定、功能的模块设计、公共组件的搭建等工作,并组织培训。

4、什么样的前端代码是好的?

好的代码应具备高复用率、低耦合度、易维护性、易扩展性等特点。

5、平时如何管理你的项目?

主要从以下方面进行管理。
(1)前端团队必须确定好全局样式(globe.css)、编码模式(utf-8)等。
(2)编写习惯必须统一(例如 JavaScript 中都采用面向对象式的写法,css 中单样式都写成一行)。
(3)标注样式编写人,各模块都及时标注(标注关键样式调用的地方)。
(4)标注页面(例如页面、模块的开始和结束)。
(5)把 CSS、HTML(模板)和 JavaScript 代码分文件夹进行存放,命名要表达出文件模块的功能,并要统一(如 header.css)。
(6)图片采用优化后的图片,并放在 images 文件夹内。

6、介绍一下最能体现你能力的项目?

我做过一个外卖项目,这个项目是使用 Vue.js 开发的,使用 vue-cli 和 webpack 自动化构建工具构建的项目,通过组件化开发,实现对组件的高度复用。运用 VueX 管理状态,使各个组件间能够共享数据。使用 Vue.js 自带的 transition 动画组件实现过渡动画效果,在项目中运用路由对各组件按需加载,从而提高效率。自定义了很多可以复用到别的项目中的基础组件,例如 modal 提示信息组件、loading 组件、星级评分组件、滚动列表组件、使用 vue-lazyload 实现图片懒加载,使用 vue-scoller 实现下拉刷新、上拉加载更多,使用 axios 实现异步请求,加载数据等。

7、你的项目与同类项目相比有哪些亮点?

同类项的项目是使用传统方式开发的。我们这个项目是使用 Vue.js 开发的。与传统的开发方式相比,Vue.js 开发的优势还是很明显的。因为在传统的开发方式中,DOM 节点操作比较多,对节点进行操作会导致浏览器对页面的重绘。但是 Vue.js 是数据驱动的 MVVM 框架,并且在 Vue.js2.0 中运行了虚拟 DOM 的技术,最大限度地减少了浏览器的重绘,所以运行效率很高。 Vue.js 是基于组件化开发的,代码的可维护性更高,而且在项目中我们运用 VueX 管理状态,使数据交互的实现变得更加简单。另外,在路由中,使用按需加载的方式加载组件,使组件的访问效率更高。

8、你们团队使用的后端语言是什么?如何与后端协同工作?

后端语言是 PHP。我跟他们配合方式一般是,我这边规定各个接口的 JSON 数据结构,后端工程师提供数据接口,他们会给我一个数据接口的文档。拿到文档之后,对于各个数据接口,我首先会用 postman 测试一下,看它们是否正常工作。如果没问题,就用这些数据开发项目。

9、你们这个外卖项目是几个人开发的?是如何分工协作的?在开发过程中 遇到的问题是如何解决的?

是两个人开发的。我主要负责开发首页和购物两个模块。首页主要就是通过接口获取数据,渲染页面。涉及的有几个主要的内容:轮播放果、 搜索功能、滚动加载更多等。 轮播图我用的是 swipper 插件,下拉加载更多使用 vue-scroller 实现,并且运用 vue-lazyload 实现了图片懒加载。搜索模块在后台提供了一个搜索接口,有一个参数是用户输入的关键字 ,通过发送这个请求接口,获取后台数据,并渲染到页面中 。
购物页面有几个地方不太好设计。比如选择商品时,右侧商品列表和左侧商品类目的一个联动效果。单击左侧 ,右侧商品滚动到对应位直,右侧商品滚动,左边类目对应 进行高亮显示。我当时是使用 Better-scroll 实现的。里面有接口可以监听滚动的距离, 然后通过计算距离,从而计算出索引值,将对应索引值的类目高亮显示。
还有一个难点是购物车组件。 购物车组件涉及多组件的通信,开始我是使用组件间的传参方式实现的。父子组件向子组件传递的参数通过 props 接收, 子组件向父组件传递的参 数通过 $emit 进行事件传递,父组件监听事件。 这种方式代码可读性差,不利于后期维护。 后来使用 VueX 管理状态,把需要在多个组件通用的数据放入 store 中,然后通过 muatation 进行统一管理。

10、你感觉你在项目开发中的贡献有多大?

这个项目是我们整个公司同仁共同努力的结果。在项目上线的过程中,产品运营团队、设计团队,以及前后端开发团队都付出了巨大的努力,我只是有幸成为团队的 一员而已。
在开发的过程中,我有意识地让自己承担更多工作,比如我会积极参与那些有挑战的、较为复杂的模块来做。 一方面可以为公司贡献更多价值,另一方面也更有利于自己的成长。

11、你做前端开发多长时间了?

两年了,现在前端技术发展非常快,需要快速学习、持续学习的能力。虽然很累,但是我非常喜欢这个工作,所以在工作之余我一直坚持自学新技术,Vue、Angualr 都是我在工作后业余时间自学的,后来把它们运用到了项目中。

12、你是学什么专业的?都学习了哪些课程?

我是计算机专业的。 主要学习过高数、线性代数、离散数学、 C 语言、数据结构、SQL Server 数据库等。
大学里学的内容比较陈旧,离工作的需求有距离,所以我自学了前端知识,然后进入这个行业,一直做到现在。

13、前端是在大学里学的吗?

是在大学期间自学的,开始看一些视频资料,后来查文档,看 GitHub 上的一些开源项目。如果在开发中遇到问题,通过 Google 或百度搜索寻找解决问题的方案等。

14、你一直在做前端开发吗?

大学毕业后就一直做前端开发。开始使用 HTML、css 、jQuery 做 PC 端页面,做一些动画效果,现在通常用 MVVM 框架做项目。

15、说说你一天的工作内容。

每天 9 点左右到公司,领导会分配任务,然后与 PM (产品经理)确认需求,与 UI(用户界面)设计师确定一些标注不详的样式。明确了之后 ,自己选择一个分支开始开发,做完了让领导审查代码。他觉得合格了就合并,如果不合格,他会给我指出 Bug, 然后我再修改。

16、谈谈你的期望月薪

首先,我上一份工作的月薪是 1.2 万元,并且做了一年多了,这一年多我没有在团队掉队,说明我每个月的工作最起码是值 1.2 万元的。但是,在这一年中我的技术又有了很大的进步,比如学会了使用 WebPack 前端自动化构建工具,使用 Vue、VueX 等 MVVM 框架做项目。
而且我的自主学习能力很强,对新技术有浓厚的兴趣,喜欢钻研新技术,这保证了我在未来的增值能力。所以我的期望月薪是 1.2 万元,因为我的学习能力保证了我的技术会持续增值,会为公司创造更大的价值。

17、你的项目用了 哪些插件?

使用了以下插件。
使用 swipper 制作轮播图。
使用 better-scroll 制作滚动列表。
使用 vue-scroller 实现下拉加载更多。
使用 vue-lazyload 实现图片懒加载。
使用 vue-router 实现路由跳转。
使用 axios 请求后端数据接口。

18、工作中,你是如何与 RD (后端 )工程师对接的?

我们的后端工程师还是比较照顾我,基本上我需要什么样的数据接口,他就在接口中返回我需要的数据结构,所以,我会把各部分数据结构的要求告诉后端工程师。后端工程师写好接口后会给我一个接口文档,然后我会使用 postman 测一下 。如果没问题,就着手开发;如果有问题,再把问题反馈给他,让他修改。

19、你们公司的前端与后端是完全分离吗?

是完全分离的,在不同的分支上开发。

20、你了解后端的语言吗?

使用 express 和 MySQL 实现过注册登录功能,并且写了一个博客系统。对于基本的增、删 、 改、 查操作有一定经验。并且写过简单的数据接口,对前后端交王有新的认识

21、说说你们团队的项目开发流程。

我们公司是产品经理和运营确定需求,然后 PM (产品经理)会给出原型图 。 之后用户页面设计师会出效果图。在这个过程中经理会根据要求确定技术选型。效果图出来之后,我们开发人员介入开始开发。经理会根据每个人的能力分配工作量。我开发的时候会自己找一个分支,然后自己开发,自己模拟数据。前端页面效果做完之后,会把数据结构告诉 RD (后端)工程师 ,让他们做数据接口。 他们做好之后会给我一个接口文档,我拿到接口文档后,会先用 postman 测试一下,如果通过了,就把测试的数据都换成后台接口的真实数据。我自己测试一下功能,如果没问题,就让我们经理审核代码,审核通过了就会合并分支程序。

22、如果通过这次面试 ,我们单位录用了你,但工作一段时间后发现你根本不适合这个职位,你怎么办?

如果一段时间后发现工作不适合我,我会有两种选择。如果我确实热爱这个职业,那我就要不断学习,虚心向领导和同事学习业务知识与处事经验,了解这个职业的精神内涵和职业要求,力争缩小差距。如果我觉得这个职业可有可无,那还是趁早换个职业,去发现适合自己并且热爱的职业,对自己的发展前途也会大,对单位和个人都有好处。

23、在完成某项工作时,你认为领导要求的方式不是最好的,自己还有更好的方法,你应该怎么做?

原则上,我会尊重和服从领导的工作安排,同时私底下找机会以请教的口吻,婉转地表达自己的想法,看看领导是否能改变想法。如果领导没有采纳我的建议,我也同样会按领导的要求认真地完成这项工作。还有一种情况,假如领导要求的方式违背原则,我会坚决提出反对意见,如领导仍固执己见,我会毫不犹豫地再向上级领导反映。

24、如果你的工作出现失误,给本公司造成经济损失,你认为该怎么办?

首先,我本意是为公司努力工作,如果造成经济损失,我认为首要的问题是想方设法去弥补或挽回经济损失。 如果我无能力负责,希望单位帮助解决。其次,分清责任,各负其责。如果是我的责任,我甘愿受罚;如果是我负责的一个团队中别人的失误,自己也不能幸灾乐祸,作为一个团队,需要互相提携、共同完成工作,安慰同事并且帮助同事查找原因、总结经验。最后,总结经验教训,一个人的一生不可能不犯错误,重要的是,能从自己的或者别人的错误中吸取经验教训,并在今后的工作中避免发生同类的错误。检讨自己的工作方法、 分析问题的深度和力度是否不够,导致出现了本可以避免的错误。

25、如果你做的一项工作受到上级领导的表扬,但你的主管领导说是他做的,你该怎样处理?

我首先不会找那位上级领导说明这件事,我会主动找我的主管领导来沟通,因为沟通是解决人际关系的最好办法,但结果会有两种。如果我的主管领导认识到自己的错误,我想我会视具体情况决定是否原谅他。若他不知悔改,还变本加厉,那我会毫不犹豫地找我的上级领导反映此事,因为他这样做会造成负面影响,对今后的工作不利。

26、谈谈你对跳槽的看法。

正常的 “跳槽”能促进人才合理流动,应该支持。 然而,频繁的跳槽对单位和个人双方都不利,应该反对。

27、工作中如果你难以和同事、上司相处,你该怎么办?

首先,我会服从领导的指挥,配合同事的工作。然后,我会从自身找原因,仔细分析是不是自己的工作做得不好,让领导不满意,让同事看不惯。还要看看是不是为人处世方面做得不好,如果是这样的话我会努力改正。其次,如果我找不到原因,我会找机会跟他们沟通,请他们指出我的不足,有问题就及时改正。最后,作为优秀的员工,应该时刻以大局为重,即使在一段时间内,领导和同事对我不理解,我也会做好本职工作,虚心向他们学习,我相信, 他们会看见我在努力,总有一天会对我微笑的。

28、假设你在某单位工作,成绩比较突出,得到领导的肯定。但同时你发现同事们越来越孤立你,你如何看待这个问题?你准备怎么办?

成绩比较突出,得到领导的肯定是件好事情,以后我会更加努力。关于这个问题,首先,我会检讨一下自己是不是对工作的热心度超过了同事间交往的热心,以后加强同事间的交往。然后,工作中,切勿伤害别人的自尊心。 最后,不在领导前拨弄是非 。

29、最能概括你自己的 3 个词是什么?

适应能力强,有责任心,做事有始终。

30、你通常如何面对别人的批评。

沉默是金,不必说什么,否则情况更糟,不过我会接受建设性的批评。我会等对方冷静下来再讨论。

31、怎样对待自己的失败?

我们生来都不是十全十美的,我相信我有第二次机会改正我的错误。

32、什么会让你有成就感?

为贵公司竭力效劳,尽我所能,出色地完成一个项目。

33、眼下你生活中最重要的是什么?

对我来说,能在这个领域找到工作是最重要的,能在贵公司任职对我说最重要。

34、假如你晚上要送一个出国的同学去机场,可单位临时有事非你办不可,你怎么办?

我觉得工作是第一位的,但朋友间的情谊也是不能偏庭的,这个问题我觉得要按照当时具体的情况来决定。如果我的朋友要搭乘晚上 ll 点钟的飞机,而我加班到 8 点钟就能够完成当天工作,那就最理想了,干完工作去机场,皆大欢喜。如果工作不是很紧急,加班仅仅是为了明天上班的时候能把报告文到办公室,那完全可以跟领导打声招呼,先去机场然后回来加班,晚点下班。如果工作很紧急,两者不可能兼顾的情况下,我觉得可以有两种选择。
如果不是全单位都加班,可以找其他同事来接替自己的工作,自己去机场。
如果找不到合适的人选,那只好忠义不能两全了,打电话向朋友解释一下 ,相信他会理解的。

35、你觉得压力最大的时候是什么时候?

我觉得压力最大的时候是刚刚接受一个任务或者刚刚给自己制订了一个大目标的时候。 之所以这样,是因为我的一个习惯,任务开始的时候,我会逼着自己制订一个完美的计划,并且尽可能把各项工作都提前做好。比方说,当参加一个比赛的时候,我会在刚一确定参加比赛的那个阶段拼命准备,找资料,提前很长时间就模拟练习。这样,越到最后我反而越放松。

中高级前端大厂面试秘籍,为你保驾护航金三银四,直通大厂

CSS

盒模型

content-box (W3C 标准盒模型)
border-box (IE 盒模型)
padding-box
margin-box (浏览器未实现)

BFC

块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。
IE 下为 Layout,可通过 zoom:1 触发
触发条件:
根元素
position: absolute/fixed
display: inline-block / table
float 元素
ovevflow !== visible
规则:
属于同一个 BFC 的两个相邻 Box 垂直排列
属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
BFC 中子元素的 margin box 的左边, 与包含块 (BFC) border box 的左边相接触 (子元素 absolute 除外)
BFC 的区域不会与 float 的元素区域重叠
计算 BFC 的高度时,浮动子元素也参与计算
文字层不会被浮动层覆盖,环绕于周围
应用:
阻止 margin 重叠
可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个 div 都位于同一个 BFC 区域之中)
自适应两栏布局
可以阻止元素被浮动元素覆盖

层叠上下文

触发条件
根层叠上下文(html)
position
css3 属性
flex
transform
opacity
filter
will-change
-webkit-overflow-scrolling
层叠等级:层叠上下文在 z 轴上的排序
在同一层叠上下文中,层叠等级才有意义
z-index 的优先级最高
层叠等级

居中布局
水平居中
行内元素:text-align:center
块级元素:margin: 0 auto

面试篇 —— HTML & CSS

1、根据下面效果图设计页面:
图1-1

两点要求: 1.自适应宽度,左右两栏固定宽度,中间栏优先加载; 2.要考虑到换肤

参考
1、自适应宽度、左右两栏固定宽度,中间栏优先加载,可以采用双飞翼布局。

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
<style type="text/css">
* {
margin: 0;
padding: 0px;
}
.header {
background: #666;
text-align: center;
}
.body {
overflow: hidden;
*zoom: 1;
}
.wrap-2 {
margin-top: 30px;
}
.wrap-2 .main-2 {
float: left;
width: 100%;
margin-bottom: -3000px;
padding-bottom: 3000px;
background: #f90;
}
.wrap-2 .main-wrap-2 {
margin: 0 200px 0 150px;
}
.wrap-2 .sub-2 {
float: left;
margin-left: -100%;
width: 150px;
background: #6c0;
margin-bottom: -3000px;
padding-bottom: 3000px;
}
.wrap-2 .extra-2 {
float: left;
margin-left: -200px;
width: 200px;
background: #f9f;
margin-bottom: -3000px;
padding-bottom: 3000px;
}
.footer {
background: #666;
text-align: center;
}
</style>

<div class="wrap-2">
<div class="header">Header</div>
<div class="body">
<div class="main-2">
<div class="main-wrap-2">
<p>main-wrap</p>
<p>main-wrap</p>
</div>
</div>
<div class="sub-2">
<p>sub</p>
<p>sub</p>
<p>sub</p>
</div>
<div class="extra-2">
<p>extra</p>
<p>
margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;
</p>
</div>
</div>
<div class="footer">Footer</div>
</div>
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
<style>
.container {
display: -moz-box;
display: -webkit-box;
}
div {
padding: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.sider_l {
width: 250px;
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
background: limegreen;
}
.middle_content {
-moz-box-flex: 1;
-webkit-box-flex: 1;
-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
background: lightpink;
}
.sider_r {
width: 250px;
-moz-box-ordinal-group: 3;
-webkit-box-ordinal-group: 3;
background: green;
}
</style>
<div class="container">
<div class="middle_content">优先加载主内容区</div>
<div class="sider_l">左边栏</div>
<div class="sider_r">右边栏</div>
</div>
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
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 100%;
height: 100%;
position: relative;
background: #cff;
overflow: hidden;
}
.left {
width: 200px;
height: 100%;
background: #0f0;
position: absolute;
z-index: 1001;
top: 0;
left: 0;
}
.center-ct {
height: 100%;
background: #60f;
position: absolute;
z-index: 900;
top: 0;
left: 0;
margin: 0;
width: 100%;
}
.center {
margin: 0 200px;
}
.right {
width: 200px;
height: 100%;
background: #ff0;
position: absolute;
z-index: 1000;
right: 0;
top: 0;
}
</style>
<div class="content">
<div class="center-ct">
<div class="center">
center center center center center center center center center center
center center center center center center center center center center
center center center center center center center center center center
center center center center center center center center center center
center center center center center center center center center center
center center center center center center center center center center
</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
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
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.main {
width: 100%;
position: relative;
background: #fc0;
}
.content {
margin: 0 210px;
background: #f60;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 200px;
background: #00f;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 200px;
background: #0f0;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
</style>
<header>头部</header>
<div class="main clearfix">
<div class="content">中间<br />中间</div>
<div class="left">左边<br />左边</div>
<div class="right">右边</div>
</div>
<footer>底部</footer>
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
<style type="text/css">
div {
outline: 1px solid red;
min-height: 200px;
}
.m {
margin: 0 200px;
}
.l,
.r {
position: absolute;
width: 200px;
background: #f3c;
}
.l {
top: 0;
}
.r {
top: 0;
right: 0;
}
</style>
<div class="m"></div>
<div class="l"></div>
<div class="r"></div>

阅读更多
You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.