JS（总结）
###基础javascript
####Javascript是一种弱类型语言，它分别有什么优势和缺点 弱类型语言：简单好用，更灵活多变。可是会牺牲性能，好比一些隐含的类型转换 强类型语言：类型转换的时候很是严格，，强类型语言是直接操纵内存，容易出内存越界和泄漏的问题。在类型的转换方面是不少约束，甚至强制转换也要很谨慎，一不当心就出大问题。php
####Javascript里面的数据类型有哪些 5个简单数据类型（基本数据类型）+ 1个复杂数据类型 undefiend, number string null boolean + objectcss
####有几种方式能够判断数据类型 typeof和intanceof 其实typeof和instanceof的目的都是检测变量的类型,两个的区别在于typeof通常是检测的是基本数据类型,instanceof主要检测的是引用类型! 
html
####基本类型和引用类型有什么区别 赋值的时候基本类型按值，引用类型按引用，就是基本类型会复制一份，引用类型就是一个新的指针 函数传参的时候都是按值传递前端
####? [][]? nullundefined? （） []==[]（） null == undefined（对）vue
####写个方法判断一个变量的类型java
###函数node
####函数声明和函数表达式有什么区别 函数声明会将那个函数提高到最前面，成为全局函数。函数声明要指定函数名，而函数表达式不用，能够用做匿名函数。 建立函数的方式：函数声明、函数表达式、还有一种不常见的方式就是Function构造器。 函数声明：react
function add(a,b) {
a = +a;
b = +b;
if (isNaN(a) || isNaN(b)) {
return;
}
return a + b;
}
函数表达式的几种方式：jquery
// 函数表达式
var add = function(a, b) {
// do sth
}
// 匿名函数定义的一个当即执行函数表达式
(function() {
// do sth
})();
// 做为返回值的函数表达式
return function() {
// do sth
};
// 命名式函数表达式
var add = function foo (a, b) {
// do sth
}
函数声明与函数表达式的主要区别就是：函数声明会被前置 函数声明前置：
// function add(a,b) 已经声明前置了，能够正常调用
var num = add(1, 2);
console.log(num); // 3
function add(a,b) {
a = +a;
b = +b;
if (isNaN(a) || isNaN(b)) {
return;
}
return a + b;
}
函数表达式前置：
// var add 变量声明提早，此时变量的值是undefined
var num = add(1, 2);
console.log(num); // TypeError:undefined is not a function
var add = function(a, b) {
a = +a;
b = +b;
if (isNaN(a) || isNaN(b)) {
return;
}
return a + b;
}
Function构造器：
var func = new Function('a', 'b', 'console.log(a+b);');
fun(1, 2); // 3
// 和上面的方式没有区别
var func = Function('a', 'b', 'console.log(a+b);');
func(1, 2); // 3
区别：
####函数有哪几种调用方式
直接调用 做为对象的方法调用 apply,call
####做用域 JS没有块做用域，只有函数做用域 做用域链的做用是保证执行环境里有权访问的变量和函数是有序的，做用域链的变量只能向上访问，变量访问到window对象即被终止，做用域链向下访问变量是不被容许的。 ####做用域链是什么 A：//说的不是很清楚
###闭包 ####闭包是什么
闭包是指有权访问另外一个函数做用域中的变量的函数
建立闭包的方式： 在一个函数内部建立另外一个函数
闭包的做用： 1.让这些函数的值始终保存在内存中
####滥用闭包有什么反作用 因为闭包会携带包含它的函数的做用域链,所以会比其余函数占用更多的内存。过分使用闭包可能会致使内存占用过多,因此只在绝对必要时使用闭包。
####闭包实现块级做用域
(function() {
})();
####闭包的做用/应用 匿名自执行函数、缓存、实现封装（主要做用）、实现面向对象中的对象 1 匿名自执行函数
咱们知道全部的变量，若是不加上var关键字，则默认的会添加到全局对象的属性上去，这样的临时变量加入全局对象有不少坏处， 好比：别的函数可能误用这些变量；形成全局对象过于庞大，影响访问速度(由于变量的取值是须要从原型链上遍历的)。 除了每次使用变量都是用var关键字外，咱们在实际状况下常常遇到这样一种状况，即有的函数只须要执行一次，其内部变量无需维护， 好比UI的初始化，那么咱们可使用闭包：
var datamodel = {
table : [],
tree : {}
};
(function(dm){
for(var i = 0; i < dm.table.rows; i++){
var row = dm.table.rows[i];
for(var j = 0; j < row.cells; i++){
drawCell(i, j);
}
}
//build dm.tree
})(datamodel);
```
咱们建立了一个匿名的函数，并当即执行它，因为外部没法引用它内部的变量，
所以在执行完后很快就会被释放，关键是这种机制不会污染全局对象。
**2缓存**
再来看一个例子，设想咱们有一个处理过程很耗时的函数对象，每次调用都会花费很长时间，
那么咱们就须要将计算出来的值存储起来，当调用这个函数的时候，首先在缓存中查找，若是找不到，则进行计算，
而后更新缓存并返回值，若是找到了，直接返回查找到的值便可。闭包正是能够作到这一点，由于它不会释放外部的引用，
从而函数内部的值能够得以保留。
```
var CachedSearchBox = (function(){
var cache = {},
count = [];
return {
attachSearchBox : function(dsid){
if(dsid in cache){//若是结果在缓存中
return cache[dsid];//直接返回缓存中的对象
}
var fsb = new uikit.webctrl.SearchBox(dsid);//新建
cache[dsid] = fsb;//更新缓存
if(count.length > 100){//保正缓存的大小<=100
delete cache[count.shift()];
}
return fsb;
},
clearSearchBox : function(dsid){
if(dsid in cache){
cache[dsid].clearSelection();
}
}
};
})();
CachedSearchBox.attachSearchBox("input1");
```
这样，当咱们第二次调用CachedSearchBox.attachSerachBox(“input1”)的时候，
咱们就能够从缓存中取道该对象，而不用再去建立一个新的searchbox对象。
**3 实现封装**
能够先来看一个关于封装的例子，在person以外的地方没法访问其内部的变量，而经过提供闭包的形式来访问：
```
var person = function(){
//变量做用域为函数内部，外部没法访问
var name = "default";
return {
getName : function(){
return name;
},
setName : function(newName){
name = newName;
}
}
}();
print(person.name);//直接访问，结果为undefined
print(person.getName());
person.setName("abruzzi");
print(person.getName());
获得结果以下：
undefined
default
abruzzi
```
4 **实现面向对象中的对象**
传统的对象语言都提供类的模板机制，
这样不一样的对象(类的实例)拥有独立的成员及状态，互不干涉。虽然JavaScript中没有类这样的机制，可是经过使用闭包，
咱们能够模拟出这样的机制。仍是以上边的例子来说：
```
function Person(){
var name = "default";
return {
getName : function(){
return name;
},
setName : function(newName){
name = newName;
}
}
};
var john = Person();
print(john.getName());
john.setName("john");
print(john.getName());
var jack = Person();
print(jack.getName());
jack.setName("jack");
print(jack.getName());
运行结果以下：
default
john
default
jack
```
由此代码可知，john和jack均可以称为是Person这个类的实例，由于这两个实例对name这个成员的访问是独立的，互不影响的。
####实现一个暴露内部变量，并且外部能够访问修改的函数
（get和set，闭包实现）
```
var person = function(){
//变量做用域为函数内部，外部没法访问
var name = "default";
return {
getName : function(){
return name;
},
setName : function(newName){
name = newName;
}
}
}();
print(person.name);//直接访问，结果为undefined
print(person.getName());
person.setName("abruzzi");
print(person.getName());
获得结果以下：
undefined
default
abruzzi
```
####从几个li中取下标的闭包代码
```
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
var li=document.getElementsByTagName("li");
for(var i=0;i<li.length;i++) {
(function(x) {
li[x].onclick=function(){alert(x);}
})(i);
}
```
####实现一个闭包的例子（实现了一个定时函数传值的）
```
闭包：
for(var i = 0; i < 10; i++ ){
(function(x){
setTimeout(function(){
console.log(x)
},x*1000)
})(i)
}
或者用全局变量实现
```
###面向对象
------------------------------------------
####原型与原型链
原型链是实现继承的主要方法，其基本原理是利用原型让一个引用继承另外一个引用类型的属性和方法。
简单回顾一下构造函数，原型和实例的关系：每一个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。咱们让一个原型对象等于另外一个类型的实例，此时原型对象将包含一个指向另外一个原型的指针，另外一个原型中也包含着指向另外一个构造函数的指针。假如另外一个原型又是另外一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例与原型的链条。这就是所谓原型链的基本概念
####js原型链的继承
####静态属性怎么继承
####js原型链以及特色
由于每一个对象和原型都有原型，对象的原型指向原型对象，
而父的原型又指向父的父，这种原型层层链接起来的就构成了原型链。
####面向对象有哪几个特色
封装,继承,多态
####对象的继承
####建立对象的几种方式
####继承的两种方法
原型链继承和类继承。而后类继承只继承了实例属性，没有原型属性。
原型链继承能够继承全部。而后用apply和call怎么继承原型链上的共享属性？经过空函数传值。新建一个空函数C。C实例化后C的实例属性就是空，而后用B的apply/call去继承C，至关于继承了C的实例属性
####JS怎么实现继承
将父对象的一个实例赋值给子对象的原型
[js实现继承的5种方式](http://javapolo.iteye.com/blog/1996871)
####new操做符时具体是干了些什么
New：
一、建立一个空对象，而且 this 变量引用该对象，同时还继承了该函数的原型。
二、属性和方法被加入到 this 引用的对象中。
三、新建立的对象由 this 所引用，而且最后隐式的返回 this 。
####怎么判断属性来自对象自身仍是原型链
hasOwnProperty
####一个对象的实例，如何统计被几回调用过，分别具体被哪些函数调用过，能够有哪些方法
####写个Animal类
有个Cat类继承它，要求新建一个Cat的实例，能够调用catch方法输出本身的名字“大白的猫”；
####实现私有变量
（这里当时还没看到相关部分，只能想到用属性的setter、getter来作。。。😂面试官各类启发呀。。）；
####手写一个类的继承，并解释一下
####手写JS实现类继承，讲原型链原理
####浅拷贝和深拷贝
```
function extendCopy(p) {
var c = {};
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
return c;
}
var Doctor = extendCopy(Chinese);
Doctor.career = '医生';
alert(Doctor.nation); // 中国
// 深拷贝：
function deepCopy(p, c) {
var c = c || {};
for (var i in p) {
if (typeof p[i] === 'object') {
c[i] = (p[i].constructor === Array) ? [] : {};
deepCopy(p[i], c[i]);
} else {
c[i] = p[i];
}
}
return c;
}
var Doctor = deepCopy(Chinese);
```
###数组
------------------------------------------
####Array对象自带的方法，一一列举
var arr = [0,1,2];
1.pop():删除数组的最后一个元素，减小数组的长度，返回删除的值。
这里是2.
2.push(3):将参数加载到数组的最后，返回新数组的长度。
如今arr中是：0,1,2,3
3.shift():删除数组的第一个元素,返回删除的值，同时数组长度减一。
这里是0
4.unshift(3,4):把参数加载数组的前面，返回新数组的长度。
如今arr:中是3,4,0,1,2
5.sort()：按指定的参数对数组进行排序 ，返回的值是通过排序以后的数组
```
var a = [0,1,5,10,15];
var b = a.sort(); // a：[1,2,3,4,5] b：[0,1,10,15,5]
正确的排序：
function compare(val1, val2) {
return val1 - val2;
}
arr = [3,7,6];
arr.sort(compare); // 3,6,7
```
6.reverse()：反转数组项的顺序，返回的值是通过排序以后的数组
7.concat(3,4)：把两个数组拼接起来。 返回的值是一个副本
8.slice(start,end)：返回从原数组中指定开始下标到结束下标之间的项组成的新数组
```
var colors = ["red", "green", "blue", "yellow", "purple"];
// 一个参数：[ ,+∞)
var color1 = colors.slice(1);
alert(color1); // green,blue,yellow,purple
// 两个参数：[,)
var color2 = colors.slice(1,4);
alert(color2); // green,blue,yellow
```
6splice()：
删除： 2个参数，起始位置，删除的项数
插入： 3个参数，起始位置，删除的项数，插入的项
替换：任意参数，起始位置，删除的项数，插入的任意数量的项
```
var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1); // 删除第一项
alert(colors); // green,blue
alert(removed); // red,返回数组中只包含一项
removed = colors.splice(1, 0, "yellow", "orange"); // 从位置1开始插入两项
alert(colors); // green,yellow,orange,blue
alert(removed); // 返回的数组是一个空数组
removed = colors.splice(1, 1, "red", "purple"); // 从位置I开始插入两项
alert(colors); // green,red,yellow,orange,blue
alert(removed); // yellow,返回的数组中只包含一项
```
indexOf()和lastIndexOf()：接受两个参数，要查找的项(可选)和查找起点位置的索引
indexOf()：从数组开头向后查找
lastIndexOf()：从数组末尾开始向前查找
every()：对数组中的每一项运行给定函数，若是该函数对每一项都返回true，则返回true。
filter()：对数组中的每一项运行给定函数，返回该函数会返回true的项组成数组。
forEach()：对数组的每一项运行给定函数，这个方法没有返回值。
map()：对数组的每一项运行给定函数，返回每次函数调用的结果组成的数组。
some()：对数组的每一项运行给定参数，若是该函数对任一项返回true，则返回true。以上方法都不会修改数组中的包含的值。
reduce()和reduceRight()：缩小数组的方法，这两个方法都会迭代数组的全部项，而后构建一个最终返回的值。
join(separator)：将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符
```
var a = [1,2,3,4,5];
var b = a.join("|"); //a：[1,2,3,4,5] b："1|2|3|4|5"
```
####Array对象自带的排序函数底层是怎么实现的
####数组去重
```
思路：
1.建立一个新的数组存放结果
2.建立一个空对象
3.for循环时，每次取出一个元素与对象进行对比，若是这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容做为对象的一个属性，并赋值为1，存入到第2步创建的对象中。
说明：至于如何对比，就是每次从原数组中取出一个元素，而后到对象中去访问这个属性，若是能访问到值，则说明重复。
Array.prototype.unique3 = function(){
var res = []; // 建立一个新的数组存放结果
var json = {}; // 建立一个空对象
for(var i = 0; i < this.length; i++){
if(!json[this[i]]){ // json不为空的时候
res.push(this[i]); // 把元素依次放入到res中
json[this[i]] = 1; //?
}
}
return res; // 返回res
}
var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];
alert(arr.unique3()); // 调用unique3函数
```
####数组去除一个函数。
用arr.splice。又问splice返回了什么？应该返回的是去除的元素。
####你知道伪数组吗
这里把符合如下条件的对象称为伪数组：
1，具备length属性
2，按索引方式存储数据
3，不具备数组的push,pop等方法
如
1，function内的**arguments** 。
2，经过**document.forms，Form.elements，Select.options，document.getElementsByName()** **，document.getElementsByTagName()** ，[**childNodes/children** ](http://snandy.iteye.com/blog/547369)等方式获取的集合（HTMLCollection，NodeList）等。
3，特殊写法的对象 ，如
```
var obj={};
obj[0] = "一";
obj[1] = "二";
obj[2] = "三";
obj.length = 3;
```
####那你从新设计一下这个函数，让它直接拥有数组的方法吧
```
// 方法1、 声明一个空数组，经过遍历伪数组把它们从新添加到新的数组中，你们都会，这不是面试官要的
var aLi = document.querySelectorAll('li');
var arr = [];
for (var i = 0; i < aLi.length; i++) {
arr[arr.length] = aLi[i]
}
// 方法2、使用数组的slice()方法 它返回的是数组，使用call或者apply指向伪数组
var arr = Array.prototype.slice.call(aLi);
```
####实现sum(2,3);sum(2,3,4);sum(2,3,4,5);
(我用了比较原始的方法，if来判断)
####那若是sum里面的参数不肯定呢
（提取arguments的长度，用for循环）
####手写一个递归函数（考察arguments.callee，以及arguments的解释）
```
// arguments.callee 是一个指向正在执行函数的指针
function factorial(num) {
if (num <= 1) {
return 1;
}
else {
return num * arguments.callee(num - 1);
}
}
```
####若干个数字，怎么选出最大的五个
###AJAX
--------------------------------------------
#### ajax原理
Ajax的原理：经过XmlHttpRequest对象来向服务器发异步请求，从服务器得到数据，而后用javascript来操做DOM而更新页面。
####原生ajax的四个过程/手写原生ajax
a:new一个XHR对象
b:调用open方法
c:send一些数据
d:对过程进行监听，来知道服务器是否是正确地作出了响应，接着能够作一些事情
```
// 兼容性写法
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest(); //IE7+,Firefox,Chrome,Opera,Safari
}
else{
request = new ActiveXObject("Microsoft.XMLHTTP"); //IE6,IE5
}
```
```
// GET请求：
document.getElementById("search").onclick = function() {
var request = new XMLHttpRequest();
request.open("GET", "server.php?number=" + document.getElementById("keyword").value);
request.send();
request.onreadystatechange = function() {
if (request.readyState===4) {
if (request.status===200) {
document.getElementById("searchResult").innerHTML = request.responseText;
} else {
alert("发生错误：" + request.status);
}
}
}
}
// POST请求
document.getElementById("save").onclick = function() {
var request = new XMLHttpRequest();
request.open("POST", "server.php");
var data = "name=" + document.getElementById("staffName").value
+ "&number=" + document.getElementById("staffNumber").value
+ "&sex=" + document.getElementById("staffSex").value
+ "&job=" + document.getElementById("staffJob").value;
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send(data);
request.onreadystatechange = function() {
if (request.readyState===4) {
if (request.status===200) {
document.getElementById("createResult").innerHTML = request.responseText;
} else {
alert("发生错误：" + request.status);
}
}
}
}
```
####经过哪一个属性获得data？
jquery里是success回调里面的形参。
responseText和responseXML。后者是XML解析了的。
#### readyState几个状态的含义
readyState属性的变化表明服务器响应的变化
0：请求未初始化，open尚未调用
1：服务器链接已创建，open已经调用了
2：请求已接收，也就是接收到头信息了
3：请求处理中，也就是接收到了响应主体
4：请求已完成，且响应已就绪，也就是响应完成了
####支持哪些数据格式？
经常使用的有三种数据格式：HTML、XML、JSON。
####XML和JSON有过了解吧？能说一下分别介绍一下他们吗？JSON有什么优点
>**XML**：扩展标记语言 (ExtensibleMarkup Language, XML) ，能够用来标记数据、定义数据类型，是一种容许用户对本身的标记语言进行定义的源语言。
优势：
- A.格式统一，符合标准；
- B.容易与其余系统进行远程交互，数据共享比较方便。
缺点：
- A.XML文件庞大，文件格式复杂，传输占带宽；
- B.服务器端和客户端都须要花费大量代码来解析XML，致使服务器端和客户端代码变得异常复杂且不易维护；
- C.客户端不一样浏览器之间解析XML的方式不一致，须要重复编写不少代码；
- D.服务器端和客户端解析XML花费较多的资源和时间。
>**JSON**：(JavaScript ObjectNotation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。 JSON采用彻底独立于语言的文本格式。
优势：
- A.数据格式比较简单，易于读写，格式都是压缩的，占用带宽小；
- B.易于解析，客户端JavaScript能够简单的经过eval()进行JSON数据的读取；
- C.支持多种语言。包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby等服务器端语言，便于服务器端的解析；
- D.在PHP世界，已经有PHP-JSON和JSON-PHP出现了，偏于PHP序列化后的程序直接调用，PHP服务器端的对象、数组等能直接生成JSON格式，便于客户端的访问提取；
- E.由于JSON格式能直接为服务器端代码使用，大大简化了服务器端和客户端的代码开发量，且完成任务不变，而且易于维护。
缺点：
- A.没有XML格式这么推广的深刻人心和喜用普遍，没有XML那么通用性；
- B.JSON格式目前在Web Service中推广还属于初级阶段。
####在不支持json格式的浏览器中，写方法可以将json字符串与对象互相转换；
现代浏览器中提供了JSON.stringify()方法 将数组，对象转成json。
JSON.stringify 把一个对象转换成json字符串，
JSON.parse 把一个json字符串解析成对象。
####ajax在jquery的底层是怎么实现的
####手写一个promise版的ajax
####js的异步加载，promise的三种状态，ES7中的async用过么
####若是页面初始载入的时候把ajax请求返回的数据存在localStorage里面，而后每次调用的时候去localStorage里面取数，是否可行。
（直接说了不能保证数据的实时性，请求和实时性必然会有一方有所牺牲）
####js异步的方法
方案一：`<script>`标签的`async="async"`属性（详细参见：script标签的async属性）
点评：HTML5中新增的属性，Chrome、FF、IE9&IE9+均支持（IE6~8不支持）。此外，这种方法不能保证脚本按顺序执行。
方案二：`<script>`标签的`defer="defer"`属性
点评：兼容全部浏览器。此外，这种方法能够确保全部设置defer属性的脚本按顺序执行。
方案三：动态建立`<script>`标签
```
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function() {
var s = document.createElement_x('script');
s.type = 'text/javascript';
s.src = "http://code.jquery.com/jquery-1.7.2.min.js";
var tmp = document.getElementsByTagName_r('script')[0];
tmp.parentNode.insertBefore(s, tmp);
})();
</script>
</head>
<body>
<img src="http://xybtv.com/uploads/allimg/100601/48-100601162913.jpg" />
</body>
</html>
```
点评：兼容全部浏览器。
方案四：AJAX eval（使用AJAX获得脚本内容，而后经过eval_r(xmlhttp.responseText)来运行脚本）
点评：兼容全部浏览器。
方案五：iframe方式（这里能够参照：iframe异步加载技术及性能 中关于Meboo的部分）
点评：兼容全部浏览器。
###跨域
---------------------------------------------------
####jsonp是什么
JSON是一种数据格式，JSONP是一种数据调用方式。
工做原理：
咱们和服务端约定好一个函数名，当请求文件的时候，服务端返回一段 JS。这段JS调用了咱们约定好的函数，而且将数据当作参数传入。，JSON 的数据格式和 JavaScript 语言里对象的格式正好相同。因此在咱们约定的函数里面能够直接使用这个对象。
利用`<script>`标签没有跨域限制的来达到与第三方通信的目的。
当须要通信时，本站脚本建立一个`<script>`元素，地址指向第三方的API网址，形如： `<script src="http://www.example.net/api?param1=1¶m2=2"></script>` 并提供一个回调函数来接收数据（函数名可约定，或经过地址参数传递）。 第三方产生的响应为json数据的包装（故称之为jsonp，即json padding），形如： `callback({"name":"hax","gender":"Male"})`这样浏览器会调用callback函数，并传递解析后json对象做为参数。本站脚本可在callback函数里处理所传入的数据。
```
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript">
function jsonpCallback(result) {
//alert(result);
for(var i in result) {
alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
}
}
var JSONP=document.createElement("script");
JSONP.type="text/javascript";
JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";
document.getElementsByTagName("head")[0].appendChild(JSONP);
</script>
// 或者：
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript">
function jsonpCallback(result) {
alert(result.a);
alert(result.b);
alert(result.c);
for(var i in result) {
alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
}
}
</script>
<script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>
```
####手写jsonp
####jsonp怎么用
动态加载`<script>`标签
####！发送jsonp时候的那个消息头长什么样子
####跨域是啥
跨域是指 不一样域名之间相互访问
协议、子域名、主域名、端口号任意一个不相同时，都算跨域。
####跨域了解多少
讲了CORS、JSONP、postMessage啥的
####跨域的方法
1. JSONP
- 原理：
动态`<script>`标签
`<script>` 标签是不受同源策略的限制的，它能够载入任意地方的 JavaScript 文件，而并不要求同源。
- 例子：
```
<script>function getWeather(data) { console.log(data); }</script>
<script src="http://x.y.com/xx.js">
// http://x.y.com/xx.js 文件内容：
getWeather({
"城市": "北京",
"天气": "大雾"
});
```
2. document.domain
- 使用条件：
1.有其余页面 window对象的引用。
2.二级域名相同。
3.协议相同。
4.端口相同。
3. window.name
4. [HTML5] postMessage
####前端跨域方法以及说下怎样实现
JSONP XHR2 后端代理 window.name window.postmessage
异步：客户端的操做和服务器端的操做互相之间不会形成堵塞
XMLHttpRequest对象：后台和服务器交换数据
一、利用html+css来实现页面，表达信息；
二、用XMLHttpRequest和web服务器进行数据的异步交换
三、运营js操做DOM，实现动态局部刷新；
####！为何要跨域
####描述一下跨域安全问题
####Cookie跨域请求能不能带上
###this
----------------------------------------
####js中this的做用
####this的理解
this对象是在运行时基于函数的执行环境绑定的：在全局函数中，this等于window，而当函数做为某个对象的方法调用时，this等于那个对象
（不过匿名函数的执行具备全局性，所以，this对象一般指向window.）
####怎么传入this
call apply
####apply和call的区别
foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments)
`call方法`:
语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定义：调用一个对象的一个方法，以另外一个对象替换当前对象。
说明：
call 方法能够用来代替另外一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
若是没有提供 thisObj 参数，那么 Global 对象被用做 thisObj。
`apply方法`：
**• 在js里call()与apply()有什么相同和不一样？ **
>apply()方法：
接受两个参数，一个是在其中运行函数的做用域，另外一个是参数数组（能够是Array的实例，也能够是arguments对象）。
语法：apply(thisObj，[argArray])
定义：应用某一对象的一个方法，用另外一个对象替换当前对象。
```
function sum(num1,num2){
return num1 + num2;
}
function callsum1(num1,num2){
return sum.apply(this,[num1,num2]);//传入数组
}
function callsum2(num1,num2){
return sum.apply(this,arguments);//传入arguments对象
}
alert(callsum1(10,10));
alert(callsum2(10,10));
```
>call()方法：
他与apply()方法的区别仅在与接收参数的方式不一样。对于call()方法而言，第一个参数是this值没有变化变化的是其他参数都直接传递个函数。换句话说就是在使用call()方法时，传递给函数的参数必须逐个例举出来。
语法：call(thisObj，Object)
定义：调用一个对象的一个方法，以另外一个对象替换当前对象。
```
function sum(num1,num2){
return num1 + num2;
}
function callsum(num1,num2){
return sum.call(this, num1, num2);
}
alert(callsum(10,10));
```
####实现bind函数
####js中上下文是什么
####js有哪些函数能改变上下文
call apply
###事件
-----------------------------------------------
####实现事件代理
事件委托就是利用事件冒泡，只指定一个事件处理程序，就能够管理某一类型的全部事件。
例1：点击li，弹出123
```
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
// 实现功能是点击li，弹出123：
window.onload = function(){
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName('li');
for(var i = 0; i < aLi.length; i++){
aLi[i].onclick = function(){
alert(123);
}
}
}
// 事件委托：利用冒泡
window.onload = function(){
var oUl = document.getElementById("ul1");
oUl.onclick = function(){
alert(123);
}
}
// 事件委托：点击具体的Li才会发生
window.onload = function(){
var oUl = document.getElementById("ul1");
oUl.onclick = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
alert(123);
alert(target.innerHTML);
}
}
}
```
例2：每一个li点击的效果都不同
```
<div id="box">
<input type="button" id="add" value="添加" />
<input type="button" id="remove" value="删除" />
<input type="button" id="move" value="移动" />
<input type="button" id="select" value="选择" />
</div>
// 普通方法：
window.onload = function(){
var Add = document.getElementById("add");
var Remove = document.getElementById("remove");
var Move = document.getElementById("move");
var Select = document.getElementById("select");
Add.onclick = function(){
alert('添加');
};
Remove.onclick = function(){
alert('删除');
};
Move.onclick = function(){
alert('移动');
};
Select.onclick = function(){
alert('选择');
}
}
// 事件委托：
window.onload = function(){
var oBox = document.getElementById("box");
oBox.onclick = function (ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLocaleLowerCase() == 'input') {
switch(target.id){
case 'add' :
alert('添加');
break;
case 'remove' :
alert('删除');
break;
case 'move' :
alert('移动');
break;
case 'select' :
alert('选择');
break;
}
}
}
}
```
总结：
那什么样的事件能够用事件委托，什么样的事件不能够用呢？
适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。
值得注意的是，mouseover和mouseout虽然也有事件冒泡，可是处理它们的时候须要特别的注意，由于须要常常计算它们的位置，处理起来不太容易。
####事件代理中怎么定位实际事件产生的目标
A：捕获->处于目标->冒泡，IE应该是只有冒泡没有捕获。
事件代理就是在父元素上绑定事件来处理，经过event对象的target来定位。
####jquery的委托原理
####冒泡和捕获，事件流哪三个阶段？
除了冒泡和捕获，还有目标阶段。他们的前后顺序，先捕获，到了目标，再冒泡。（不要只记概念，要了解是干么用的）
```
DOM事件流包括三个阶段：
事件捕获阶段
处于目标阶段
事件冒泡阶段
```
####事件机制，如何绑定事件处理函数
[浅谈JavaScript的事件机制](http://blog.csdn.net/wusuopubupt/article/details/21738523)
[JavaScript绑定事件的方法[3种]](http://www.itxueyuan.org/view/6338.html)
####事件类型、绑定方式
```
一、表单事件：
submit事件、reset事件、click事件、change事件、
focus事件（不冒泡） （IE和ES5支持冒泡的focusin）
blur事件（不冒泡） （IE和ES5支持冒泡的focusout）
input事件（ES5 textinput提供更方便的获取输入文字的方案）
二、Window事件
load事件、DOMContentLoaded事件、readyStatechage事件
unload事件、beforeunload事件、resize事件、scroll事件
三、鼠标事件
click事件、dbclick事件、mouseover事件（冒泡）、
mouseout事件（冒泡）、mousedown事件、mouseup事件
contextmenu事件、mouseenter事件（不冒泡）、mouseleave事件（不冒泡）
mousewheel事件（FF DOMMouseScroll事件、DOM3 wheel事件）
四、键盘事件
keydown事件、keyup事件、keypress事件
```
####w3c事件与IE事件的区别 (当时回答的只想到冒泡跟捕获)
####IE与W3C怎么阻止事件的冒泡
当咱们须要阻止浏览器某DOM元素的默认行为：
W3C用e.preventDefault()
IE下用window.event.returnValue＝false
阻止事件冒泡：
W3C用e.stopPropagation()
IE下用window.event.cancelBubble=true来实现。
>在浏览器解析事件的时候，有两种触发方式，一种叫作Bubbling(冒泡)，另一种叫作Capturing(捕获)。由上图能够看出来，冒泡的方式效果就是当一个DOM元素的某事件例如click事件被fire时，依次它的父元素的click事件也被fire(触发)，一直传递到最顶层的body元素为止。而捕获的触发方式正好相反，当某个元素的click事件被触发时，先从最顶层的body元素click事件被触发开始，一直传递到真正被触发的元素为止。
>此次我将讨论W3C的标准DOM事件模型和IE独立门户的DOM事件模型到底有多少区别，首先咱们能够回想一下目前大多数Js程序员习惯如何绑定事件到DOM元素上，最多见的就是obj.onclick=handler这种方式(更恶劣的是在Html代码的元素标签中直接加上onclick属性，彻底没达到视图和动做分开的原则)。咱们暂时称这种方式的事件添加为Traditional(传统方式)吧，IE有本身的IE Event Module，而火狐等浏览器则遵循的W3C方式的Event Module，下面看看这三者各自的优缺点在哪里——
>一、 Traditional Module
>传统方式的事件模型即直接在DOM元素上绑定事件处理器，例如—
>window.onload=function(){…}
>obj.onmouseover=function(e){…}
>obj.onclick=function(){…}
>首先这种方式是不管在IE仍是Firefox等其余浏览器上均可以成功运行的通用方式。这即是它最大的优点了，并且在Event处理函数内部的this变量无一例外的都只想被绑定的DOM元素，这使得Js程序员能够大大利用this关键字作不少事情。
>至于它的缺点也很明显，就是传统方式只支持Bubbling，而不支持Capturing，而且一次只能绑定一个事件处理器在DOM元素上，没法实现多Handler绑定。最后就是function参数中的event参数只对非IE浏览器有效果(由于IE浏览器有特制的window.event)。
>二、 W3C (Firefox.e.g) Event Module
>Firefox等浏览器很坚定的遵循W3C标准来制定浏览器事件模型，使用addEventListener和removeEventListener两个函数，看几个例子—
>window.addEventListener(‘load’,function(){…},false);
>document.body.addEventListener(‘keypress’,function{…},false);
>obj.addEventListener(‘mouseover’,MV,true);
>function MV(){…}
>addEventListener带有三个参数，第一个参数是事件类型，就是咱们熟知的那些事件名字去掉前面的’on’，第二个参数是处理函数，能够直接给函数字面量或者函数名，第三个参数是boolean值，表示事件是否支持Capturing。
>W3C的事件模型优势是Bubbling和Capturing都支持，而且能够在一个DOM元素上绑定多个事件处理器，各自并不会冲突。而且在处理函数内部，this关键字仍然可使用只想被绑定的DOM元素。另外function参数列表的第一个位置(无论是否显示调用)，都永远是event对象的引用。
>至于它的缺点，很不幸的就只有在市场份额最大的IE浏览器下不可以使用这一点。
>三、 IE Event Module
>IE本身的事件模型跟W3C的相似，但主要是经过attachEvent和detachEvent两个函数来实现的。依旧看几个例子吧—
>window.attachEvent(‘onload’,function(){…});
>document.body.attachEvent(‘onkeypress’,myKeyHandler);
>能够发现它跟W3C的区别是没有第三个参数，并且第一个表示事件类型的参数也必须把’on’给加上。这种方式的优势就是能绑定多个事件处理函数在同一个DOM元素上。
>至于它的缺点，为何现在在实际开发中不多见呢？首先IE浏览器自己只支持Bubbling不支持Capturing；并且在事件处理的function内部this关键字也没法使用，由于this永远都只想window object这个全局对象。要想获得event对象必须经过window.event方式，最后一点，在别的浏览器中，它显然是没法工做的。
>最后我在推荐两个必须知道的IE和W3C标准的区别用法吧—
>一、 当咱们须要阻止浏览器某DOM元素的默认行为的时候在W3C下调用e.preventDefault()，而在IE下则经过window.event.returnValue＝false来实现。
>二、当咱们要阻止事件冒泡的时候，在W3C标准里调用e.stopPropagation()，而在IE下经过设置window.event.cancelBubble=true来实现。
####描述一下事件模型
####IE的事件模型是怎样的
####event对象/事件包括哪些东西
####js异步模式如何实现
[Javascript异步编程的4种方法](http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html)
####手写一个盒子模型中,获取盒子内子节点的class样式，盒子内节点的类型不可知
我用了事件监听，但没考虑浏览器兼容性，也没能写出来怎么断定节点的类型（枚举不可）
面试官问我本身给这个代码打几分，我说60分
面试官说这种代码兼容性有问题，根本不能在线上运行，因此60分也没QwQ
使用事件代理机制，当事件被抛到更上层的父节点的时候，咱们经过检查事件的目标对象（target）来判断并获取事件源。 // 获取父节点，并为它添加一个click事件 document.getElementById("parent-list").addEventListener("click",function(e) { // 检查事件源e.targe是否为Li if(e.target && e.target.nodeName.toUpperCase() == "LI") { // 真正的处理过程在这里 //alert(123); console.log("List item ",e.target.id," was clicked!");
}
});
• 事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程当中，事件相应的监听函数是不会被触发的。
• 事件目标：当到达目标元素以后，执行目标元素该事件相应的处理函数。若是没有绑定监听函数，那就不执行。
• 事件起泡：从目标元素开始，往顶层元素传播。途中若是有节点绑定了相应的事件处理函数，这些函数都会被一次触发。若是想阻止事件起泡，可使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）来组织事件的冒泡传播。
###JQ
-----------------------------------------------
####jQuery仍是原生js
####为何选择原生
我认为要把原生吃透再去理解其余类库的话会更好一点，她说也是
#### jQuery源码有看过吗？请说出jQuery内部判断数据类型的巧妙方式
####jQuery源码有看过吗？请说出你印象最深入部分的原理。
####手写一个jQuery插件
####在jquery方法和原型上面添加方法的区别和实现（$.extend,$.fn.extend），以及jquery对象的实现（return new jQuery.fn.init）
####手写实现jquery里面的insertAfter
（结合nextSibling和insertBefore来实现）
####jquery和zepto有什么区别
###es6
-----------------------------------------
####es6与es7了解多少
####谈谈对ES6的理解
####es6的新特性
####promise let关键字，class ，
####promise
`http://www.jianshu.com/p/063f7e490e9a`
####Promise编程
####手写实现一个promise（不会）
####如何避免多重回调—promise，promise简单描述一下，如何在外部进行resolve()
####promise解决了你什么问题
####ES5中，除了函数，什么可以产生做用域
A：对象？
//而后被回问对象有做用域吗？而后我说对象里面this会变。。。彻底把做用域和执行环境弄混了
####es6中字符串模版怎么用
####ES6里头的箭头函数的this对象与其余的有啥区别
###浏览器
-------------------------------------------
####浏览器端的JS包含哪几个部分
ECMAScript+DOM
####浏览器渲染的方式
####浏览器的渲染过程
(如js代码何时运行啊，css代码上面时候渲染啊，js代码运行阻塞页面渲染之类的)
####浏览器加载一个页面的过程、渲染机制
浏览器的解析方式，浏览器解析html页面首先浏览器先下载html，而后在内存中把html代码转化成Dom Tree，而后浏览器根据Dom Tree上的Node分析css和Images，当文档下载遇到js时，js独立下载。
###DOM
--------------------------------------------------------------
####DOM包含哪些对象？
Node对象，而后继承下来的有Document,Element,Text，还有想不起来了
https://zhidao.baidu.com/question/562272490.html
####如何获取某个DOM节点，节点遍历方式
####setTimeout和setInterval区别，如何互相实现？
setInterval在执行完一次代码以后，通过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。
区别：
```
window.setTimeout("function",time)；//设置一个超时对象，只执行一次,无周期
window.setInterval("function",time)；//设置一个超时对象，周期＝'交互时间'
```
####了解navigator对象吗
Navigator 对象：
Navigator 对象包含有关浏览器的信息。
注释：没有应用于 navigator 对象的公开标准，不过全部浏览器都支持该对象。
###缓存
------------------------------------------------
####Cookie 是否会被覆盖，localStorage是否会被覆盖。
同名cookie会被覆盖
####cookie和session有什么区别
cookie在客户端，session在服务端
Session过时与否取决于服务期的设定，cookie过时与否能够在cookie生成的时候设置进去。
cookie不是很安全，别人能够分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
####浏览器在发送cookie时会发送哪几个部分？
A：不太清楚
####那你知道cookie有哪几个组成部分吗？
A：不太清楚
Cookie由变量名和值组成，相似[JavaScript](http://lib.csdn.net/base/javascript)变量。其属性里既有标准的Cookie变量，也有用户本身建立的变量，属性中变量是用“变量=值”形式来保存。
####你有用开发者工具看过cookie吗
A：有
####浏览器缓存的区别
###前端安全
--------------------------------------
####前端安全
[聊一聊WEB前端安全那些事儿](https://segmentfault.com/a/1190000006672214)
####前端安全：xss攻击和csrf
**XSS跨站脚本(Crosssite scripting)**
缘由：XSS其实就是Html的注入问题，攻击者的输入没有通过严格的控制进入了数据库，最终显示给来访的用户，致使能够在来访用户的浏览器里以浏览用户的身份执行Html代码。
攻击手段和目的:
攻击者使被攻击者在浏览器中执行脚本后，若是须要收集来自被攻击者的数据(如cookie或其余敏感信息)，能够自行架设一个网站，让被攻击者经过JavaScript等方式把收集好的数据做为参数提交，随后以数据库等形式记录在攻击者本身的服务器上。
a. 盗用 cookie ，获取敏感信息。
b.利用植入 Flash ，经过 crossdomain 权限设置进一步获取更高权限;或者利用Java等获得
相似的操做。
c.利用 iframe、frame、XMLHttpRequest或上述Flash等方式，以(被攻击)用户的身份执行一
些管理动做，或执行一些通常的如发微博、加好友、发私信等操做。
d.利用可被攻击的域受到其余域信任的特色，以受信任来源的身份请求一些平时不容许的操
做，如进行不当的投票活动。
e.在访问量极大的一些页面上的XSS能够攻击一些小型网站，实现DDoS攻击的效果。
避免XSS的方法：
1.主要是将用户所提供的内容进行滤；
移除用户上传的dom结点，好比onerror；
移除用户上传的style结点，script结点，iframe结点等。
2.使用HTTP头指定类型:
不少时候可使用HTTP头指定内容的类型，使得输出的内容避免被做为HTML解析。如在PHP语言中使用如下代码：
```
header
('Content-Type: text/javascript; charset=utf-8');
```
便可强行指定输出内容为文本/JavaScript脚本(顺便指定了内容编码)，而非能够引起攻击的HTML。
**CSRF(伪造请求)：冒充用户之手**
CSRF 顾名思义，是伪造请求，冒充用户在站内的正常操做。咱们知道，绝大多数网站是经过 cookie 等方式辨识用户身份(包括使用服务器端 Session 的网站，由于 Session ID 也是大多保存在 cookie 里面的)，再予以受权的。因此要伪造用户的正常操做，最好的方法是经过XSS 或连接欺骗等途径，让用户在本机(即拥有身份 cookie 的浏览器端)发起用户所不知道的请求。
防护方法：
请求令牌(一种简单有效的防护方法)：
首先服务器端要以某种策略生成随机字符串，做为令牌(token)，保存在 Session 里。而后在发出请求的页面，把该令牌以隐藏域一类的形式，与其余信息一并发出。在接收请求的页面，把接收到的信息中的令牌与 Session 中的令牌比较，只有一致的时候才处理请求，处理完成后清理session中的值，不然返回 HTTP 403 拒绝请求或者要求用户从新登录验证身份。
###功能实现
---------------------------------------
####1.一个文本框，须要两个控件对里面的值进行控制，一个是＋1一个是－1，要求每点击一次就有个提示框冒出来。 并且文本框是可修改的，每次修改也会冒出提示框。（ 事件监听）
####2.使用js画一个抛物线,抛物线上有个小球随着抛物线运动,有两个按钮能使小球继续运动中止运动
####3.js轮播实现思路
####4.实现一个querySelectorAll的功能
函数长这样querySelect(el, className)
```
function querySelect(el,className){
var children = el.children;
var result = [];
if(el.classList.contains(className)){
result.push(el);
}
for(var i; i<children.length; i++){
var child = children[i];
var arr = querySelect(child,className);
result.push.apply(result, arr);
}
return result;
}
```
####5.实现一个快排
```
#include <iostream>
using namespace std;
void Qsort(int a[], int low, int high)
{
if(low >= high)
{
return;
}
int first = low;
int last = high;
int key = a[first];/*用字表的第一个记录做为枢轴*/
while(first < last)
{
while(first < last && a[last] >= key)
{
--last;
}
a[first] = a[last];/*将比第一个小的移到低端*/
while(first < last && a[first] <= key)
{
++first;
}
a[last] = a[first];
/*将比第一个大的移到高端*/
}
a[first] = key;/*枢轴记录到位*/
Qsort(a, low, first-1);
Qsort(a, first+1, high);
}
int main()
{
int a[] = {57, 68, 59, 52, 72, 28, 96, 33, 24};
Qsort(a, 0, sizeof(a) / sizeof(a[0]) - 1);/*这里原文第三个参数要减1不然内存越界*/
for(int i = 0; i < sizeof(a) / sizeof(a[0]); i++)
{
cout << a[i] << "";
}
return 0;
}/*参考数据结构p274(清华大学出版社，严蔚敏)*/
```
####lazyload如何实现
[图片懒加载](图片延迟加载（lazyload）的实现原理)
###移动端
---------------------------------------------
####移动端是指手机浏览器，仍是native，仍是hybrid（问这个问题真的是无语）
####你用了移动端的什么库类和框架？
####移动端要注意哪些
####移动端是指手机浏览器，仍是native，仍是hybrid（问这个问题真的是无语）
####你用了移动端的什么库类和框架？
####移动端要注意哪些
####适配有去考虑么，retina屏幕啊？
####rem是什么？em是什么？若是上一层就是根root了，em和rem等价么？
#### 你对目前流行的前端框架都有什么了解，有没有应用经验？
（一面时面试官推荐我多了解一下 Vue.js ，我回去也恶补了，二面时便说了一些对Vue.js的理解，二面面试官也说Vue.js是他们经常使用的，这个信息很重要）
###算法
####双向链表怎么找中点？
头尾指针都往中间走，两个指针相等或交替的时候为中点
####上面的问题 单向链表呢
A：先走到尾记下有几个元素，而后再走到一半的地方
//面完查了下能够用快慢指针，一个指针每次走一步，另外个走两步，快指针到尾部时慢指针在中点
###问答
####1
obj怎么变？
```
var obj = {
a : 1
};
(function (obj) {
obj = {a : 2};
})(obj);
```
A：外面的obj不变，由于里面等于让局部的obj指向了一个新的对象
```
var obj = {
a: 1,
func: function() {
(function() {
a = 2;
}();
}
};
obj.func();
```
####2
问a怎么变匿名函数里的this是什么？怎么改变里面的this？匿名函数不能传参怎么改变obj.a的值？
A: obj.a不变，匿名函数里的this指向全局对象(window)，至关于给window加了一个名为a的属性。
```
(function () {
this.a = 2;
}).call(this);
//或者apply
//或者
func: function () {
var self = this;
(function () {
self.a = 2;
})();
}
```
###其余
####4. 字符串“1”加上数字1的结果是？
（也许是看我前一题答不上来，沉默半天忽然问了这个……这是在动态调整难度？）
####JS动画有哪些实现方法
####那你知道还有什么实现动画的方法
A：CSS3的animation，还有用canvas作的算吗？
####作一些js题（考察this，做用域，变量声明，引用类型）；
####实现一个列表中每一个li里有一个input和button，点击button删除对应的li节点
#### 给了段代码，问输出什么。主要是考做用域链和this
####要实现函数内每隔5秒调用本身这个函数，100次之后中止，怎么办
###框架
####介绍一下react
####组件化是啥
####你觉的react的优势
####为何没有选择学习AngularJS
####主流框架Node Angular Vue React对比 javascript实现的底层原理 **
####bootstrap的实现原理
####vue与angularjs区别
####对nodejs了解多少
####nodejs中的文件怎么读写
####解释一下vue和react，以及异同点
####解释一下react和vue，以及区别
####requireJS的原理是什么
####require的读取顺序
####手写实现requireJS模块实现（想了半天才想到createElement("script"），配合异步来加载，闭包导出）
####react和vue的介绍以及异同
####AMD和CMD，commonJS的区别
####requirejs如何避免循环依赖
####vue的特色？双向数据绑定是如何实现的
####学习angularjs之类的库的方法
####5requirejs实现原理
####5.vuejs与angularjs的区别
####requirejs怎么防止重复加载
####vue如何实现父子组件通讯，以及非父子组件通讯
####vuex是用来作什么的 /说下你所了解的vuex
###打包工具
####为何要打包
(我说了http请求那点事)
####介绍一下webpack和gulp，以及项目中具体的使用
####gulp的插件用过啥/gulp用过啥
####gulp底层实现原理
####gulp你是怎么用的
####webpack底层实现原理
####gulp与webpack区别
####webpack是用来干吗的
####webpack与gulp的区别
####vue源码结构
####vue与angularjs中双向数据绑定是怎样实现的
####webpack怎样配置
####angular的双向绑定原理
####angular和react的认识（挖财用这个两个框架，后来问了）
####MVVM是什么
####说说你了解的框架
我说了react和vue
####react你以为怎样
（我说了一些组件化和虚拟dom树的东西）
####AngularJS呢
（我说没有学过，但了解过一点，我把我了解的都说了给她听）
####为何你会以为AngularJS笨重？
（也是本身的见解，mvc框架嘛，一整套什么都有）
####响应式布局是啥
一个网站可以兼容多个终端
####响应式布局是根据什么进行响应
经过定义容器大小，平分12份(也有平分红24份或32份，但12份是最多见的)，再调整内外边距，最后结合媒体查询，就制做出了响应式网格系统。
判断出终端设备的容器宽度，而后选择性的加载吻合大小的网页，也就是媒体查询。媒体查询写在CSS样式代码的最后，CSS是层叠样式表，在同一特殊性下，靠后的的样式会重叠前面的样式。
html头部也要写兼容性，
例如：`<meta name="viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>`。
注释：
`width=device-width`:宽度等于当前设备的宽度
`initial-scale=1`：初始的缩放比例（默认为1）
`maximum-scale=1`：容许用户缩放到得最大比例（默认为1）
`user-scalable=no`：用户不能手动缩放
####响应式布局的方式
如何实现响应式布局？
一、百分比
经过将每一个盒子的宽度设定百分比来实现。
优势：简单方便要
缺点:在额外设置margin、padding时，或者使用不一样浏览器时，会使得布局混乱
二、meta标签
代码段为：
`<meta name="viewport" content="width=device-width, initial-scale=1" /> `
这主要是为了让代码适应移动端的屏幕，其中，viewport 是指须要加载meta 标签时读取的名字为“视口”，其中的 width 须要等于 device-width（设备宽度），主要是告诉浏览器，将布局视口的宽度设置为设备最理想的宽，initial-scale（缩放比例） 为1，这样就保证了加载的时候，要获取设备的宽度，同时要保持原始大小，便于媒体查询
三、@media 媒体查询
css代码段为：
`@media screen and (min-width: 10rem) and (max-width: 20rem) { ... } `
这里面的 第一个 screen 意思为屏幕，这里面还有许多 参数，包括all（用于全部设备）、print（用于打印机和打印预览）、speech（应用于屏幕阅读器等发声设备）。
使用and来并列显示多种状况，min-width 和max-width 来定义在那种尺寸的屏幕上显示，这就是响应式的灵魂。
上面的例子，就是 媒体查询屏幕，最小宽度为10rem 最大宽度我20rem 的设备宽度上来实现大括号内的样式或者其余功能，这里面的rem也能够换成px或者em之类的单位等。
优势：如今大部分的响应式布局都是使用@media 来实现的，能够书写大量的公共样式，在须要适应屏幕的时候，在大括号内加入相应的功能便可实现响应式布局。
缺点：可能须要对同一个类书写不一样的样式，代码比较繁复，难度也稍微难点。
###没有
####手写一个js的深克隆
####for函数里面setTimeout异步问题
####原生js模板引擎
####用原生js实现复选框选择以及全选非全选功能
####看过哪些框架的源码
####要求写js自定义事件
####做用域的题
#####js写一个递归。就是每隔5秒调用一个自身，一共100次。
####如何保持登陆状态
####原生js添加class怎么添加，若是自己已经有class了，会不会覆盖，怎么保留？
####Get和post的区别
####1.怎么获得一个页面的a标签
（就说了getElementByTagName和选择器）
####2.怎么在页面里放置一个很简单的图标，不能用img和background-img
（说了canvas，或者一些库有icon库，data-icon).
####3.正则表达式判断url（只写了判断是不是http或者https开头）
[正则表达式匹配URL](http://blog.csdn.net/weasleyqi/article/details/7912647)
```
String check = @"((http|ftp|https)://)(([a-zA-Z0-9\._-]+\.[a-zA-Z]{2,6})|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,4})*(/[a-zA-Z0-9\&%_\./-~-]*)?";
```
####4.怎么去除字符串先后的空格
```
（正则匹配^\s和\s$而且替代，Jquery的$.trim，string.trim()）
tring.prototype.Trim = function(){return this.replace(/(^\s*)|(\s*$)/g, "");}
g 为全局标志
```
正则表达式，JS里一组特殊的东东，上例是替换文本前与后的空格，就等于trim。
####实现页面的局部刷新
####websocket知道吗？
####知道最近流行哪些前端技术吗？我回答的nodejs
####用js使低版本浏览器支持HTML5标签 底层是怎么实现
####实现一个可拖动的div
**1.用原生JS实现一个接口，可以用Ajax上传文件并显示上传进度，上传完成后接收一个来自服务器的json数据**
####介绍一下主流的框架吧，angular 和react，原理，实现。
我把angular的watch digest这些讲了个遍，也问了关于react的虚拟dom，为何要这么作，优点在哪里？ 使用这些前端的框架的优点是什么，劣势又是什么 。 （看我把原理讲的差很少，问我是否是在网上看了不少的这方面的文章，卧槽居然别发现了，这些东西都是我面试前一天看的，我立马意识到不对），其实呢，框架对于我来讲并非要熟悉多少它的api，而是要研究它的设计思想，这样对本身之后的编码也是有帮助的哈（成功避开话题）
#### 由于项目中用过不少redis，不免要去解释一下redis的底层实现，
首先说了说底层6大的数据结构，链表，字符串，字典，跳表，压缩列表等，redis是一个基于epoll的单线程模型，redis的应用举例，在你的项目中如何使用，说到设置expire时间的时候，我给本身挖了个坑，面试官问我如何实现定时器，redis中有没有定时器这个概念（实际上是没有的）我入坑了， ，后来发现不对劲，赶忙说本身很久没有研究这个底层了，有些概念可能有些模糊了。后来面试官提醒我是用epoll注册事件的方法来实现expire的。自认为redis应该是本身的加分项，没有想到是减分项。
####node.js有用过吗？
A：有，主要用一些工具，好比gulp
####你有用过什么代码管理工具
A：//而后面试官看到简历上有GitHub就不问了
####介绍MVVM模式；
####若是要你设计一个组件，你会如何设计
####grunt用过哪些功能；
####浏览器如何匹配某个选择器；
####websocket相关，轮询，polling；
####ws和wss的区别；
###设计模式
####要是让你本身写一个js框架你会用到哪些设计模式
####日常在项目中用到过哪些设计模式,说说看
####了解哪些设计模式说说看
####说下你所了解的设计模式的优势
###其余
####页面优化
####移动端和pc差异
####模块化
####说下你所理解的mvc与mvvc
####有没有上传过些什么npm模块
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. js+jQuery总结
- 2. JS总结
- 3. js总结
- 4. css js 总结
- 5. JS的总结
- 6. JS - this 总结
- 7. Js总结
- 8. js总结1
- 9. JS 总结
- 10. wjk——js总结