前端基础Geomatics（GIS，GPS，RS，Surveying）Web前端之路

前端面试概念收集器

2017-01-06  本文已影响705人  brandonxiang

前端面试概念收集器

前端面试三部曲

本文分为 概念，原生Javascript，css知识点，http协议，网络安全，性能优化。

概念

Commonjs 在Nodejs服务端上运行，无法在浏览器端运行。为了满足浏览器端模块化的要求，才有了AMD和CMD。

AMD (Asynchronous Module Definition)是 RequireJS 在推广过程中对模块定义的规范化产出。对于依赖的模块，AMD 是提前执行。AMD 推崇依赖前置，把依赖参数以数组形式保存在前半部分。使用规则如下：

define(id?, dependencies?, factory);

CMD (Common Module Definition)是 Seajs 在推广过程中对模块定义的规范化产出。 CMD 是延迟执行，CMD 推崇依赖就近，使用规则如下：

define(function(require, exports, module) {
  // 模块代码
});

Require.js 和Sea.js都是模块加载器，两者的主要区别如下：

UMD (Universal Module Definition)，AMD，CommonJS规范是两种不一致的规范，虽然他们应用的场景也不太一致，但是人们仍然是期望有一种统一的规范来支持这两种规范，对两种情况进行判断，兼容两个规范。

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS-like
        module.exports = factory(require('jquery'));
    } else {
        // Browser globals (root is window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    //    methods
    function myFunc(){};

    //    exposed public method
    return myFunc;
}));

原生Javascript

在做项目或者产品的过程当中，可能你对框架和库的使用非常多，往往忽视了基础知识。当然，大公司不仅仅希望你是一个api调用工程师，所以对基础知识的考察越来越重要。随着浏览器的兼容性越来越好，原生js的重要性也日益明显。

原生函数

Array

Math

String

原生Javascript求数组最小值和最大值

Math.min.apply(null, array)
Math.max.apply(null, array)

原生Dom操作

查找

重绘重排

当DOM的变化影响了元素的几何属性（宽或高），浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为重排。完成重排后，浏览器会重新绘制受影响的部分到屏幕，该过程称为重绘，参考高性能JavaScript DOM编程以及重排与重绘。

事件流(捕获冒泡)，参考JavaScript的事件机制

从document开始，到document结束。事件流分为三个阶段：

  1. 事件捕获阶段
  2. 处于目标阶段
  3. 事件冒泡阶段

事件流分为两类：捕获型事件和冒泡型事件。

从根元素向下传播，从body开始往每一个div。方法是addEventListener。（true：捕获，false：冒泡，默认：false）

由当前dom向上传播，从div到body。方法是onclick事件。

委派代理 参考JavaScript事件代理和委托（Delegation）

 var delegate = function(client, clientMethod) {
        return function() {
            return clientMethod.apply(client, arguments);
        }
    }
    var ClassA = function() {
        var _color = "red";
        return {
            getColor: function() {
                console.log("Color: " + _color);
            },
            setColor: function(color) {
                _color = color;
            }
        };
    };

    var a = new ClassA();
    a.getColor();
    a.setColor("green");
    a.getColor();
    console.log("执行代理！");
    var d = delegate(a, a.setColor);
    d("blue");
    console.log("执行完毕！");
    a.getColor();

兼容性写法

ie下的兼容性问题，js举例，(转载)IE8+兼容经验小结。

IE6能识别下划线"_"和星号"\ * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

动画方面，加速度，重力模拟实现

正则，基本用法和相关函数作用

参考深入浅出的javascript的正则表达式学习教程。

必须要死记硬背的事\d数字，即“digit”，\w字母，即“word”，\s空格或tab，即“space”。\D是非数字字符，\S是非空白字符，/W是非单词字符。

{3}是指有3个这样的字符，{2,3}至少出现2次但不超过3次，{2,}至少出现2次。?指零个或一个，+指是一个或多个。*是任意个也可以没有。

定义的方法是

new RegExp(pattern,attributes);

其中，参数pattern是一个字符串，指定了正则表达式的模式；参数attributes是一个可选的参数，包含属性 g，i，m，分别使用与全局匹配，不区分大小写匹配，多行匹配。

也可以是/pattern/直接定义。方法包含：

OOP

如果你需要补救Javascript面向对象这一方面，先看廖雪峰老师的Javascript原型继承，以及廖雪峰老师的Javascript面向对象编程（二）：构造函数的继承。你必须掌握好一个概念就是原型链 。

类继承方法
类的继承有4种方法。比较完美的方法是声明一个空对象，作为中间prototype，参考brandonxiang/example-mocha/demo5。

私有变量

GlobalScope和LocalScope是指面向对象中的共有或私有变量函数，全局变量的搜索较慢，减少document的访问。私有变量和公有变量是Javascript基础开发的一个重要环节。下面是一个简单的例子，name是公用变量，它是this的一个属性。age是一个私有变量，但是它能被对应的公有方法调用。

function Person(props){
    this.name ='brandon';
    var age = '26';

    this.setAge = function(_age){
        age = _age;
    }
    this.getAge = function(){
        return age;
    }
}

变量提升和函数提示和作用域

一道容易做错的JavaScript面试题很好地讲述了这个问题。

如果你还是不懂。我举几个简单的例子，来自你不知道的Javascript。

变量提升

a=2;
var a;
console.log(a);

结果输出为2。由于var a;变量提升，提升到代码的顶端，而它不会改变数值。代码怎变成了：

var a;
a=2;
console.log(a);

如果题目情况是下面这样。

console.log(a);
var a = 2;

结果输出是undefined。只有var a；才会提升。a=2；并不会提升。

函数提升

foo(); //3

function foo(){
   console.log(1);
}

var foo = function(){
    console.log(2);
}

foo(); //2

function foo(){
   console.log(3);
}

定义为function会直接引起函数提升，提升到文件最上端，第一次foo()输出2。而且后一个会将前一个覆盖。var foo = function(){}不会被提升。在后面的函数调用会覆盖，第二次foo()输出2。

作用域

闭包

参考前端基础进阶（四）：详细图解作用域链与闭包

内存泄漏的原因和场景

h5里一些新增api的了解H5的新特性及部分API详解

cookie，localstorage和sessionstorage

cookie与localstorage区别

localstorage与sessionstorage区别

存储在 localStorage 里面的数据没有过期时间（expiration time），而存储在 sessionStorage 里面的数据会在浏览器会话（browsing session）结束时被清除，即浏览器关闭时。

浏览器的对象模型

详情参考 《Javascript高级编程》的BOM一章。

CSS知识点

块元素

div center h1 hr table ul ol

内联元素

span a font img strong sub

模型盒

offsetwidth = width + border + padding
clientwidth = width + padding

doctype

html 5 的doctype写法 <!DOCTYPE html>

haslayout

hack写法参考 史上最全的CSS hack方式一览

link和@import的区别

网络安全

XSS

XSS（Cross Site Scripting），是一种注入攻击。没有过滤掉<script>以及其他敏感关键词的忽视，针对对方的cookie和用户缓存信息进行攻击。

CRSF

原理

CSRF（Cross-site request forgery）跨域请求伪造，又叫one click attack或session riding。

CRSF

它们之间的区别在于：XSS利用站点内的信任用户。而CSRF是通过伪装来自受信任用户的请求来利用受信任的网站。这种方式虽然不是很流行，但是却难以防范，其危害也不比其他安全漏洞小。

下面是CSRF的常见特性：

防范措施

http协议

报文格式

报文格式分为请求报文和响应报文。

请求报文

请求报文又分为4个部分。

响应报文

响应报文报文又分为4个部分。

get与post区别

get

要求服务器请求URL定位的资源放在响应报文的数据部分，回送客户端。请求参数和对应的值之间跟在URL后面。利用一个问号（?）代表着url的结束和请求参数的开始。传递参数长度受到限制。长度限制1024个字符。

缺点

post

请求行中不包含数据字符串，这些数据保存在请求内容中，各数据之间用&分割开。post也能完成get请求。

关于HTTP请求GET和POST的区别

1.GET提交，请求的数据会附在URL之后（就是把数据放置在HTTP协议头＜request-line＞中），以?分割URL和传输数据，多个参数用&连接;例如：login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0 %E5%A5%BD。如果数据是英文字母/数字，原样发送，如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密，得出如： %E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进制表示的ASCII。

POST提交：把提交的数据放置在是HTTP包的包体＜request-body＞中。上文示例中红色字体标明的就是实际的传输数据

因此，GET提交的数据会在地址栏中显示出来，而POST提交，地址栏不会改变

2.传输数据的大小：

首先声明，HTTP协议没有对传输的数据大小进行限制，HTTP协议规范也没有对URL长度进行限制。 而在实际开发中存在的限制主要有：

GET:特定浏览器和服务器对URL长度有限制，例如IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器，如Netscape、FireFox等，理论上没有长度限制，其限制取决于操作系统的支持。

因此对于GET提交时，传输数据就会受到URL长度的限制。

POST:由于不是通过URL传值，理论上数据不受限。但实际各个WEB服务器会规定对post提交数据大小进行限制，Apache、IIS6都有各自的配置。

3.安全性：

POST的安全性要比GET的安全性高。注意：这里所说的安全性和上面GET提到的“安全”不是同个概念。上面“安全”的含义仅仅是不作数据修改，而这里安全的含义是真正的Security的含义，比如：通过GET提交数据，用户名和密码将明文出现在URL上，因为(1)登录页面有可能被浏览器缓存， (2)其他人查看浏览器的历史纪录，那么别人就可以拿到你的账号和密码了。

优化性能

结合移动开发规范概述，我的总结：

spa优化

运行性能优化, 达到操作足够流畅

参考

Javascript面试题

前端的知识更新太快，此文持续更新

感想

我面试大大小小很多公司，有这么一点感想。面试其实是一个双向的过程，面试官在面试我，检验着我的能力。但是，同时，也是我在面试着面试官。面试官的问题是否专业，是否基础，直接反映出公司对应部门对员工的要求。有些面试官不太懂为啥我会默默的观察着整个办公室的一种工作氛围，有时工作氛围说明很多问题。其中包括工作人员的态度，流动性，实习生的比例。这些种种因素都会影响你的就业选择，也希望各位读者能够认真择业，不只是为了一份工资。

各位GIS开发工程师可能也会考虑往前端全栈的方向发展，可以参考一位同行的博客----前端面试笔记。

转载，请表明出处。总目录前端经验收集器

微信公众号
上一篇下一篇

猜你喜欢

热点阅读