我家自动化

这个屌丝很懒，什么也没留下！

热门标签

校招基本告一段落，总结一下

作者：我家自动化 | 2024-03-05 11:12:29

踩

school_name=%e5%ae%89%e9%a1%ba%e5%b

校招的这段时间学习到了很多

最终大概是签约上海美团点评

用Word总结了很多问题。发布在这里

7-13：

1：flex项目嵌套flex项目怎么算？

你知道Flex项目也可以成为Flex容器吗？是的，是可能的！

你想嵌套多深就嵌套多深（不过理智的做法是保持一个合理的水平）。

2:总结flexbox

3：规划布局

4：CSS选择器

5：现代各种布局

6：Hexo

7:react+redux书

7-17：

1：e.target.parentNode.remove();成功，查询一下JS原生的remove方法

2：复习JS DOM的原生操作方法，比如innerHTML(),insertBefore()等

3：技术之瞳

4：jquery的each,map等方法

5：数组和对象的深浅拷贝

http://blog.csdn.net/fungleo/article/details/54931379

7-18

1:MD5这种JS文件无法直接在index.js里面载入，需要用webpack加入的原因和如何加入？

2：webpack2.2中文文档 http://www.css88.com/doc/webpack2/

4：screenX,pageX,client,offset…

http://www.cnblogs.com/yehuabin/archive/2013/03/07/2946004.html

7：js怎么编写鼠标的右击事件

https://zhidao.baidu.com/question/1111401816718591899.html

7.24

1.checked事件的变化<input type="checkbox" checked={this.state.checked} onChange={this.checkedChangeHandler} />记住账号1</span>

2:backbone路由的封装怎么做的

3:基于 CentOS 搭建微信小程序服务

7.25

1.JS原生的onclick事件写法

2:左右添加

3接口不重复问题

7.26

作者：DaphneMoMo
链接：https://www.nowcoder.com/discuss/18530?type=2&order=3&pos=55&page=1

一面

1、 window.onload和$(document).ready()的区别，浏览器加载转圈结束时哪个时间点？

　　$(document).ready()方法和window.onload方法有相似的功能，但是在执行时机方面是有区别的。window.onload方法是子啊网页中的所有元素（包括元素的所有关联的文件）完全加载到浏览器后才执行，即javascript此可以访问网页中的任何元素。而通过jquery中的$(document).ready()方法注册的时间处理程序，在DOM完全就绪时就可以被调用。此时，网页的所有元素对jquery而言都是可以访问的，但是，这并不意味着这些元素关联的文件都已经下载完毕。

　　举一个例子，有一个大型的图库网站，为网页中的所有图片添加某些行为，例如单机图片后让他隐藏或显示。如果使用window.onload方法来处理，那么用户必须等到每一副图片都加载完毕后，才可以进行操作。如果使用jquery中的$(document).ready()方法来进行设置，只要DOM就绪就可以操作了，不需要等待所有图片加载完毕。显然，吧网页解析为DOM树的速度比吧网页中的所有关联文件加载完毕的素的快很多。

　　另外，需要注意一点，由于在$(document).ready()方法内注册的事件，只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的HTML下载完毕，并且已经即诶下为DOM树了，但很有可能图片还未加载完毕，所有例如图片的高度和宽度这样的属性此时比一定有效。要解决这个问题，可以使用Jquery中另一个关于页面加载的方法-----load（）方法。load（）方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定给window对象，则会在所有内容（包括窗口。框架，对象和图像等）加载完毕后触发，如果处理函数绑定在元素上，则会在元素的被容加载完毕后加载。jquery代码如下：

$(window).load(function(){

//代码

});

　　等价于javascript中的以下代码：

window.onload=function(){

//代码

}

2、 form表单当前页面无刷新提交 <form target=””> iframe

http://www.cnblogs.com/yevon/p/about_target_attribute_of_form.html

3、 setTimeout和setInterval区别，如何互相实现？

http://blog.csdn.net/baidu_24024601/article/details/51862488

参考资料：javascript高级程序设计第三版：重复定时器

4、如何避免多重回调—promise，promise简单描述一下，如何在外部进行resolve()

官方文档

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

通俗解释

http://www.cnblogs.com/lvdabao/p/es6-promise-1.html

感性理解

http://www.zhangxinxu.com/wordpress/2014/02/es6-javascript-promise-%E6%84%9F%E6%80%A7%E8%AE%A4%E7%9F%A5/

我们回来总结一下，异步回调的传统做法有四个问题：

1. 嵌套层次很深，难以维护

2. 代码难以复用

3. 堆栈被破坏，无法正常检索，也无法正常使用 try/catch/throw

4. 多个异步计算同时进行，无法预期完成顺序，必须借助外层作用域的变量，有

误操作风险

Promise保留异步在无阻塞上的优势，又能让我们写代码写的更舒服

5、 margin坍塌？水平方向会不会坍塌

http://www.cnblogs.com/hugejinfan/p/5901320.html水平方向不会出现margin坍塌

6、伪类和伪元素区别

http://www.cnblogs.com/ihardcoder/p/5294927.html

简单来说，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。

8、数组去重

http://blog.csdn.net/chengxuyuan20100425/article/details/8497277

我总共想出了三种算法来实现这个目的：

1.  Array.prototype.unique1 = function()

2.  {

3.    var n = []; //一个新的临时数组

4.    for(var i = 0; i < this.length; i++) //遍历当前数组

5.    {

6.           //如果当前数组的第i已经保存进了临时数组，那么跳过，

7.           //否则把当前项push到临时数组里面

8.           if (n.indexOf(this[i]) == -1) n.push(this[i]);

9.    }

10.  return n;

11.}

12.Array.prototype.unique2 = function()

13.{

14.  var n = {},r=[]; //n为hash表，r为临时数组

15.  for(var i = 0; i < this.length; i++) //遍历当前数组

16.  {

17.         if (!n[this[i]]) //如果hash表中没有当前项

18.         {

19.                 n[this[i]] = true; //存入hash表

20.                 r.push(this[i]); //把当前数组的当前项push到临时数组里面

21.         }

22.  }

23.  return r;

24.}

25.Array.prototype.unique3 = function()

26.{

27.  var n = [this[0]]; //结果数组

28.  for(var i = 1; i < this.length; i++) //从第二项开始遍历

29.  {

30.         //如果当前数组的第i项在当前数组中第一次出现的位置不是i，

31.         //那么表示第i项是重复的，忽略掉。否则存入结果数组

32.         if (this.indexOf(this[i]) == i) n.push(this[i]);

33.  }

34.  return n;

35.}

9、使用flex布局实现三等分，左右两个元素分别贴到左边和右边，垂直居中

flex{1} flex{1} flex{1}

10、平时如何学前端的，看了哪些书，关注了哪些公众号

二面

1、说下对this的理解

http://www.jb51.net/article/77519.htm

2、实现bind函数

http://blog.csdn.net/u010552788/article/details/50850453（手写bind()函数，理解MDN上的标准Polyfill，bind和new，柯里化）

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind （bind mdn）

http://www.cnblogs.com/libin-1/p/6069031.html（理解JS中的apply,call和bind方法）

http://www.cnblogs.com/admos/p/4453259.html (bind函数使用apply的实现)

3、数组和链表区别，分别适合什么数据结构

数组的特点是快速随机访问
链表的特点是快速插入删除

4、对mvc的理解

5、描述一个印象最深的项目，在其中担任的角色，解决什么问题

6、http状态码。。。401和403区别？

400（错误请求）	服务器不理解请求的语法。
401（未授权）	请求要求身份验证。对于登录后请求的网页，服务器可能返回此响应。
403（禁止）	服务器拒绝请求。

1xx（临时响应）2xx（成功）3xx（重定向）4xx（请求错误）5xx（服务器错误）

7、描述下二分查找

http://www.cnblogs.com/zuojiayi/p/6229902.html

8、在函数中使用array.prototype.slice.call(arguments,1);的作用？

arguments是每个函数在运行的时候自动获得的一个近似数组的对象（传入函数的参数从0开始按数字排列，而且有length）。比如当你 func('a', 'b', 'c') 的时候，func里面获得的arguments[0] 是 'a'，arguments[1] 是 'b'，依次类推。但问题在于这个arguments对象其实并不是Array，所以没有slice方法。Array.prototype.slice.call( )可以间接对其实现slice的效果，而且返回的结果是真正的Array。

http://www.cnblogs.com/dingxiaoyue/p/4948166.html

https://www.zhihu.com/question/21351604

三面

1、为什么选择前端，如何学习的，看了哪些书，《js高级程序设计》和《你不知道的js》有什么区别，看书，看博客，看公众号三者的时间是如何分配的

2、如何评价bat

3、描述下在实习中做过的一个项目，解决了什么问题，在其中担任了什么角色？这个过程存在什么问题，有什么值得改进的地方

4、如何看待加班，如果有个项目需要连续一个月加班，你怎么看

5、遇到的压力最大的一件事是什么？如何解决的

6、平时有什么爱好

7、自身有待改进的地方

8、n长的数组放入n-1个数，不能重复，找出那个缺失的数

思路：数组之和减去自然数之和，结果就是那个重复的。

等差数列求和公式

9、手里有什么offer

10、你对于第一份工作最看重的三个方面是什么

11、如何评价现在的前端

12、有什么问题

一上午面了将近四个小时完成了三面，当天晚上就接到了三面面试官的电话说面试通过了，炒鸡开心，校招这么久以来收到的第一个offer~后来又了解到是凤巢部门，于是就决定去这里了

7-28

1：JS异步开发教程

https://meathill.gitbooks.io/javascript-async-tutorial/content/

7-31

1：自己的产品

2：JavaScript创建对象的三种方法

http://blog.csdn.net/u010552788/article/details/50849191

3：书总结一下技术之瞳/react/JS高级/你不知道的JS

4：

1、手写jsonp的实现

2、手写链表倒数第K个查找

查找单链表倒数第m个结点，要求时间复杂度为O(n).(提示，使用双指针)

解题思路：
常规思路为先获取链表的长度N，然后返回N-k+1位置处的结点即可。但是中需要遍历两次链表。
我们使用另一种算法，设定两个指针p1,p2.将这两个指针都向第一个结点，让p1先走k步，然后两个指针一起向后移动，当p1到达最后一个结点时，p2指针刚好指向链表的倒数第k个结点。

3、 http请求行，请求头，请求体，cookie在哪个里面？url在哪里面？

http://blog.csdn.net/u010256388/article/details/68491509

cookie在请求头，url似乎在请求行？

4、原型链的解释

原型链是作为实现继承的主要方法，基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

5、对闭包的理解，实现一个暴露内部变量，而且外部可以访问修改的函数（get和set，闭包实现）

http://blog.csdn.net/baple/article/details/42495361

自己写得set的例子

var f1 = function (x) {

var a = 1;

function f2 (b){

a = a+b ;

return a

}

return f2

}

var x = f1();

var xx = x(2);

闭包就是能够读取其他函数内部变量的函数

7、{}=={}? []==[]? null==undefined?

{} == {} false

[] == [] false

null == undefined true

null == null true

undefined == undefined true

解答

[] == [] 这个好理解. 当两个值都是对象 (引用值) 时, 比较的是两个引用值在内存中是否是同一个对象. 因为此 [] 非彼 [], 虽然同为空数组, 确是两个互不相关的空数组, 自然 == 为 false.

null 表示一个值被定义了，定义为“空值”；
undefined 表示根本不存在定义。

所以设置一个值为 null 是合理的，如
objA.valueA = null;
但设置一个值为 undefined 是不合理的

6、基本的数据类型

ECMAScript中有5中简单数据类型（也称为基本数据类型）: Undefined、Null、Boolean、Number和String。还有1中复杂的数据类型————Object，Object本质上是由一组无序的名值对组成的。Array，Date，Function+基本包装类Number,String,Boolean均归于Object

7、基本的两列自适应布局

发现有了position的属性，不再与正常文档流中的元素互相影响

.sub, .extra {

position: absolute;

top: 0;

width: 200px;

}

.sub {

left: 0;

background-color: yellow;

}

.extra {

right: 0;

background-color: black;

}

.main {

background-color: blue;

margin: 0 200px;

}

<div class="extra">right</div>

11、OSI模型，HTTP,TCP,UDP分别在哪些层

OSI 分层（ 7 层）：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层

物理层与数据链路层为上面的协议族提供服务我们一般很少接触。IP在网络层，TCP/UDP在传输层，应用层一般是我们经常接触的东西HTTP在应用层ARP（地址解析协议）在链路层

12、网站性能优化

CDN是什么？使用CDN有什么优势？

https://www.zhihu.com/question/36514327

13、快排的时间复杂度和空间复杂度。

var quicksort = function(arr){

if(arr.length<=1){

return arr

}

var num = Math.floor(arr.length/2);

var item = arr.splice(num,1);

var arrleft=[];

var arrright=[];

for (var i = 0; i < arr.length; i++) {

if(arr[i]<item[0]){

arrleft.push(arr[i]);

}

else{

arrright.push(arr[i]);

}

return quicksort(arrleft).concat(item[0],quicksort(arrright));

}

console.log(quicksort([1,2,3,5,4]));

注意一下i < arr.length不能是<=，否则有一个undefined就会无限循环

一面问的基础知识很多，但是基本都答出来了，面完后有些蒙逼。

二面是一位女面试官，给的压力很大，人比较严肃，不苟言笑，后来听说二面是压力面，二面问了50分钟。

2、在jquery方法和原型上面添加方法的区别和实现（$.extend,$.fn.extend），以及jquery对象的实现（return new jQuery.fn.init）

http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html

为jQuery类添加类方法，可以理解为添加静态方法

对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

jQuery 2.0.3 源码分析core - 整体架构

http://www.cnblogs.com/aaronjs/p/3278578.html

3、手写一个递归函数（考察arguments.callee，以及arguments的解释）

// arguments.callee 是一个指向正在执行函数的指针

function factorial(num)

{ if (num <= 1) { return 1; }

else { return num * arguments.callee(num - 1); } }

caller

在一个函数调用另一个函数时，被调用函数会自动生成一个caller属性，指向调用它的函数对象。如果该函数当前未被调用，或并非被其他函数调用，则caller为null。

callee

当函数被调用时，它的arguments.callee对象就会指向自身，也就是一个对自己的引用。
由于arguments在函数被调用时才有效，因此arguments.callee在函数未调用时是不存在的（即null.callee），且解引用它会产生异常。

4、对前端路由的理解？前后端路由的区别？

1，什么是前端路由？
路由是根据不同的 url 地址展示不同的内容或页面
前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据 url 的不同返回不同的页面实现的。
2，什么时候使用前端路由？
在单页面应用，大部分页面结构不变，只改变部分内容的使用

3，后端路由：

每跳转到不同的URL，都是重新访问服务端，然后服务端返回页面，页面也可以是服务端获取数据，然后和模板组合，返回HTML，也可以是直接返回模板HTML，然后由前端js再去请求数据，使用前端模板和数据进行组合，生成想要的HTML。

4.5、如何记住OSI七层协议模型

http://blog.csdn.net/hellochenlu/article/details/52895341

Physical Data Link Network Transport Session Presentation Application

5、介绍一下webpack和gulp，以及项目中具体的使用

http://www.cnblogs.com/lovesong/p/6413546.html

6、你对es6的了解

http://www.alloyteam.com/2016/03/es6-front-end-developers-will-have-to-know-the-top-ten-properties/comment-page-1/#comments

Default Parameters（默认参数） in ES6
Template Literals （模板文本）in ES6
Multi-line Strings （多行字符串）in ES6
Destructuring Assignment （解构赋值）in ES6
Enhanced Object Literals （增强的对象文本）in ES6
Arrow Functions （箭头函数）in ES6
Promises in ES6
Block-Scoped Constructs Let and Const（块作用域构造Let and Const）
Classes（类） in ES6
Modules（模块） in ES6

7、解释一下vue和react，以及异同点

https://www.zhihu.com/question/31585377

学习一下vue

8、前后端分离的意义以及对前端工程化的理解

https://www.zhihu.com/question/28207685 --前后端分离

https://www.zhihu.com/question/24558375 --前端工程化主要应该从

模块化：webpack解惑：require的五种用法

组件化：组件化实际上是一种按照模板(HTML)+样式(CSS)+逻辑(JS)三位一体的形式对面向对象的进一步抽象

规范化：规范化其实是工程化中很重要的一个部分，项目初期规范制定的好坏会直接影响到后期的开发质量。

我能想到的有以下一些内容：

目录结构的制定

编码规范

前后端接口规范

文档规范

组件管理

Git分支管理

Commit描述规范

定期CodeReview

视觉图标规范

...

自动化：我认为，前端工程化的很多脏活累活都应该交给自动化工具来完成。

### 图标合并

不要再用PS拼雪碧图了，统一走Webpack吧；

不要再用Icomoon了，统一走Webpack吧。

### 持续集成

### 自动化构建

### 自动化部署

### 自动化测试

10、使用css实现一个三角形

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

宽度一定要为0，left,right是三角形的中心往左往右长度；bottom是三角形的高；

10.5CSS3D效果？

13、解释一下call函数和apply函数的作用，以及用法

1、介绍一下自己

2、你说自己抗压能力强，具体表现在哪里？

3、对前端前景的展望，以后前端会怎么发展

4、手写第一次面试没有写出来的链表问题，要求用es6写

5、平时是怎么学技术的？

6、平时大学里面时间是怎么规划的？

7、接下来有什么计划？这个学期和下个学期的计划是？

8、项目中遇到的难点，或者你学习路上的难点

9、你是通过什么方法和途径来学习前端的

12、你在团队中更倾向于什么角色？

13、对java的理解

14、介绍node.js，并且介绍你用它做的项目

百度外卖

1、介绍自己

2、手写一个js的深克隆

3、for函数里面setTimeout异步问题

关于for循环里面异步操作的问题

for 循环中的setTimeout(function(){})异步问题，为什么改var 为let就可以解决？

深入理解JavaScript编程中的同步与异步机制

4、归并排序

1、实现两个数组的排序合并，我一开始先合并再排序，他不乐意，然后我用了类似插入排序的方法。

2、手写一个原生ajax

https://segmentfault.com/a/1190000008097712

xmlhttp=new XMLHttpRequest();

xmlhttp.onreadystatechange=state_Change

xmlhttp.open("GET","/example/xdom/note.xml",true);

xmlhttp.send(null);

function state_Change()

{

if (xmlhttp.readyState==4)

{

if (xmlhttp.status==200)

{

// 这里应该是函数具体的逻辑

}

else

{

alert("Problem retrieving XML data");

}

6、手写实现jquery里面的insertAfter

结合nextSibling和insertBefore来实现

9、 AMD和CMD，commonJS的区别

AMD依赖前置；CMD就近依赖（牺牲性能来换取更多开发便利）；

NodeJS是CommonJS规范的实现；CommonJS的这个Modules规范设计之初是为了server端设计的，它是一个同步的模式。但是这种模式并不适合于浏览器端，大家设想一下如果浏览器同步模式一个一个加载模块，那么打开将会变得非常的慢，所以AMD就是为了这个诞生，它最大的特点就是可以异步的方式加载模块。(CMD也是异步的) 那么RequrieJS其实就是AMD现在用的最广泛，最流行的实现。

8-1

饥人谷
萌鹿简历

8-2

怎么写一个模态框

https://my.oschina.net/aiguozhe/blog/279992

面试什么的

http://www.cnblogs.com/iceb/p/7238785.html

作者：小芋头君
链接：https://www.zhihu.com/question/41986174/answer/94241086
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

不讲这个问题有没有意义，在我看来的确没有意义，但是这个的根源其实不是在于这些问题是否有意义。
而在于

你能够控制面试官问出你擅长回答的问题？

作为一名面试官，我面试过很多人了也算，首先，挑选简历的时候我就会挑选我能问出问题的简历，如果一个简历看了之后我都问不出什么针对性的问题，只能随口问一个“闭包怎么写”这样的问题的话，这个简历也没什么面试的必要性了。所以第一关就是，简历有可以让面试官针对性提问的内容，有亮眼的内容，有思考有总结，这样我们就可以愉快的进行一场互相交流的面试了，而不是给你一张卷子，你挨个写代码写算法。

然后，到了现场面试，同样，你需要引导面试官来提问。首先是简历上体现的内容，然后是让你自我介绍的时候，一定要抓住这个时机！！！！不要说些没用的，你爱好打球什么的，我都不关心！！让你自我介绍，是给你一个机会，你来开启一下我们的话题！其实就类似于述职，你讲讲你过去一段时间做过的有意义的事情，符合你定位的事情，不管是技术上提升，还是学习了新东西，还是你带项目作分析，还是做了什么优化，做了什么提升团队效率的工具，或者是你是管理者，你如何管理团队，如何提升团队效率，如何思考提升团队整体技术能力影响力等等等等。这真是太重要了。

这些表达都是从你想呈现的自己拥有的优秀特质作为起点来总结的，

平常多思考下什么样的工程师特质是大家希望看到的，

这些是你要做的，是你要总结的，就是你下次面试的时候要表达的

如果你的简历和你的自我介绍都没什么说头，那不好意思，为了应付一下，我有个面试题列表，我只能从里面随便挑一条出来问，都是很形式化的题目，其实你回答对了也没卵用，只是凑合一下场面而已啦，毕竟这些问题随便google一下就知道掌握了。

说的都是大实话，不管是做面试官，还是去面试，想清楚自己要表达出什么东西来，想清楚自己想要得到什么信息，都一样，凡事就怕用心！

8-3

HTTP协议下POST和GET的区别

http://blog.csdn.net/wangzhilife/article/details/12440089

2：浏览器缓存机制

http://www.cnblogs.com/slly/p/6732749.html

3：图片轮播

锋利的JQUERY

C:\Users\Administrator\Downloads\[jb51.net]fengli_jquery\实例下载\04第四章\第四章例子\10-实例

3.5Jquery的show()很容易就可以有从上往下的渐变效果，怎么做到的？

http://www.zhangxinxu.com/wordpress/2012/10/more-display-show-hide-tranisition/

show()使用的css3动画效果从上往下需要高度，Jquery算高度的方法还不知道

4：React拖拽

http://www.cnblogs.com/LuckyWinty/p/5347559.html

5.你知道什么是CSS预处理么

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。结构清晰，便于扩展，轻松实现多重继承

6.关于浮动的原理和工作方式，你可以描述一下么

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

7.浮动会产生什么影响呢，要怎么处理？

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

解决方法：使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}

.clearfix{display: inline-block;} /* for IE/Mac */

8.你了解哪些选择器？以及这些选择器的使用场景？

9.你知道它们的权重怎么计算么

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

12.你从jQuery学到了什么？（跳坑了竟说自己看过源代码...然后不会说了..)

16.说说函数表达式和函数声明的区别（变量提升和函数提升）

http://blog.csdn.net/qq673318522/article/details/50810650

18.你知道attribute和property的区别么

http://www.cnblogs.com/cndotabestdota/p/5706562.html

元素上的属性（包括自定义）都是attribute，但只有id,title,class等同时也是property，attribute就是DOM元素自带的属性，property是这个元素作为对象附加的内容，比如firstChild等

19.平时有了解web性能么，一般要关注哪些点？

https://www.zhihu.com/question/21658448 (很重要！！！！！)

21.淘宝那里的商品项，如图片，滚动到了才加载，你知道怎么实现么

问题19的zhihu回答里面有个Lazy Load Images好像有点类似

8-4

前端路由和单页路由？

① Backbone单页路由就是用①href=”#xx”或②router.navigate触发路由后执行回调函数，更改模板重新渲染。

②Hash路由的实现https://segmentfault.com/a/1190000007422616

hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。

语法:location.hash=anchorname

③前端的路由控制：hash和history(HTML5新特性)

④js页面刷新跳转的几种方式及区别

http://blog.csdn.net/fb408487792/article/details/41248675

window.location.href="http://shanghepinpai.com";

⑤a标签的href="javascript:void(0)"和href="#"的区别

http://www.cnblogs.com/pp-cat/p/4308736.html

如果页面里面有id为nogo的元素，点击这个链接后，锚点机制会作用，页面贴齐这个元素上缘

牛客网校招日历

https://www.nowcoder.com/activity/campus2018

ES6解构赋值，箭头函数

http://es6.ruanyifeng.com/#docs/destructuring

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

Object('abc') // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}

let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

4:廖雪峰JS

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000

console.trace()会打印出函数调用栈的信息

8-7

1：js关于for循环中的闭包问题？

for(var i=0,arr=[];i<=3;i++) {
arr.push(function(){alert(i)});
}
arr[0](); // ?? 结果不是0
arr[1](); // ?? 全是4
改装后
for(var i=0,arr=[];i<=3;i++) {
arr.push(
(function(i){
return function(){
alert(i);
}
})(i)
);
}
使用闭包可以解决了，为什么第一次代码中的i读取的一直是I变量的最后的结果呢?
那个大神能给分析一下第一段代码的执行的具体步骤呢？

https://www.zhihu.com/question/33468703

2：为什么需要闭包呢

局部变量无法共享和长久的保存，而全局变量可能造成变量污染，所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。

特点

占用更多内存

不容易被释放

何时使用

既想反复使用，又想避免全局污染

如何使用

1.定义外层函数，封装被保护的局部变量。 2.定义内层函数，执行对外部函数变量的操作。 3.外层函数返回内层函数的对象，并且外层函数被调用，结果保存在一个全局的变量中。

https://zhuanlan.zhihu.com/p/27857268

3：

var k = (function fun(x) {

if(x>0) {

x--;

console.log(x);

} else{

console.log("lala");

return "lala";

}

fun(x);

})(3)

console.trace(k);

为什么打印结果是undefined?

k就是你的fun(3), fun(3) 按照你代码，没有显式给出返回值，默认就是返回的 undefined 。

如果你要做递归的话，应该给里面的 fun(x) 加上 return 变成 return fun(x); 如此就能让k为 lala了。

4: a标签的href="javascript:void(0)"和href="#"的区别

http://www.cnblogs.com/pp-cat/p/4308736.html

如果页面里面有id为nogo的元素，点击这个链接后，锚点机制会作用，页面贴齐这个元素上缘

5：还是真弄一下原生JS和JQUERY 然后从作品入手写一个工程

廖雪峰+MDN+JS高级+你不知道的JS+JQUERY

6：廖雪峰

1.字符串：多行字符串,模板字符串

2.对象：

中括号运算符总是能代替点运算符。但点运算符却不一定能全部代替中括号运算符。
中括号运算符可以用字符串变量的内容作为属性名。点运算符不能。

var test={aa:12,bb:34};//或者var test={};

var cc= "acqId"

test[cc]=12;

test["cc"]=13;

console.log(test[cc]);//13

console.log(test[“cc”]);//12

console.log(test[aa]);//报错
中括号运算符可以用纯数字为属性名。点运算符不能。
中括号运算符可以用js的关键字和保留字作为属性名。点运算符不能。

如果我们要检测xiaoming是否拥有某一属性，可以用in操作符：

'name' in xiaoming; // true

不过要小心，如果in判断一个属性存在，这个属性不一定是xiaoming的，它可能是xiaoming继承得到的：

'toString' in xiaoming; // true

因为toString定义在object对象中，而所有对象最终都会在原型链上指向object，所以xiaoming也拥有toString属性。

要判断一个属性是否是xiaoming自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法：

xiaoming.hasOwnProperty('name'); // true

for...in 语句用于遍历数组或者对象的属性

8-8

3.ES6新类型Map和Set

初始化Map需要一个二维数组，或者直接初始化一个空Map。Map具有以下方法：

var m = new Map(); // 空Map

m.set('Adam', 67); // 添加新的key-value

m.set('Bob', 59);

m.has('Adam'); // 是否存在key 'Adam': true

m.get('Adam'); // 67

m.delete('Adam'); // 删除key 'Adam'

m.get('Adam'); // undefined

或

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);

不同于object的是JavaScript的对象有个小问题，就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。

Map是一组键值对的结构，具有极快的查找速度。

Set

Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。

要创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set：

var s1 = new Set(); // 空Set

var s2 = new Set([1, 2, 3]); // 含1, 2, 3

通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果：

>>> s.add(4)

>>> s

{1, 2, 3, 4}

>>> s.add(4)

>>> s

{1, 2, 3, 4}

通过delete(key)方法可以删除元素：

ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。

具有iterable类型的集合可以通过新的for ... of循环来遍历。

for ... of循环是ES6引入的新的语法

你可能会有疑问，for ... of循环和for ... in循环有何区别？

for ... in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。

当我们手动给Array对象添加了额外的属性后，for ... in循环将带来意想不到的意外效果：

for ... of循环则完全修复了这些问题，它只循环集合本身的元素：

这就是为什么要引入新的for ... of循环。

然而，更好的方式是直接使用iterable内置的forEach方法，它接收一个函数，每次迭代就自动回调该函数。以Array为例：

var a = ['A', 'B', 'C'];

a.forEach(function (element, index, array) {

// element: 指向当前元素的值

// index: 指向当前索引

// array: 指向Array对象本身

alert(element);

});

Set与Array类似，但Set没有索引，因此回调函数的前两个参数都是元素本身

函数

①作用域

名字空间

全局变量会绑定到window上，不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突，并且很难被发现。

减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中。例如：

// 唯一的全局变量MYAPP:

var MYAPP = {};

// 其他变量:

MYAPP.name = 'myapp';

MYAPP.version = 1.0;

// 其他函数:

MYAPP.foo = function () {

return 'foo';

};

把自己的代码全部放入唯一的名字空间MYAPP中，会大大减少全局变量冲突的可能。

许多著名的JavaScript库都是这么干的：jQuery，YUI，underscore等等。

②变量

由于var和let申明的是变量，如果要申明一个常量，在ES6之前是不行的，我们通常用全部大写的变量来表示“这是一个常量，不要修改它的值”：

var PI = 3.14;

ES6标准引入了新的关键字const来定义常量，const与let都具有块级作用域：

'use strict';

const PI = 3.14;

PI = 3; // 某些浏览器不报错，但是无效果！

PI; // 3.14

⑤对象方法的this

如果以对象的方法形式调用，比如xiaoming.age()，该函数的this指向被调用的对象，也就是xiaoming，这是符合我们预期的。

如果单独调用函数，比如getAge()，此时，该函数的this指向全局对象，也就是window。

坑爹啊！

更坑爹的是，如果这么写：

var fn = xiaoming.age; // 先拿到xiaoming的age函数

fn(); // NaN

也是不行的！要保证this指向正确，必须用obj.xxx()的形式调用！

有些时候，喜欢重构的你把方法重构了一下：

'use strict';

var xiaoming = {

name: '小明',

birth: 1990,

age: function () {

function getAgeFromBirth() {

var y = new Date().getFullYear();

return y - this.birth;

}

return getAgeFromBirth();

}

};

xiaoming.age(); // Uncaught TypeError: Cannot read property 'birth' of undefined

结果又报错了！原因是this指针只在age方法的函数内指向xiaoming，在函数内部定义的函数，this又指向undefined了！（在非strict模式下，它重新指向全局对象window！）

修复的办法也不是没有，我们用一个that变量首先捕获this：

'use strict';

var xiaoming = {

name: '小明',

birth: 1990,

age: function () {

var that = this; // 在方法内部一开始就捕获this

function getAgeFromBirth() {

var y = new Date().getFullYear();

return y - that.birth; // 用that而不是this

}

return getAgeFromBirth();

}

};

xiaoming.age(); // 25

用var that = this;，你就可以放心地在方法内部定义其他函数，而不是把所有语句都堆到一个方法中。

装饰器

利用apply()，我们还可以动态改变函数的行为。

JavaScript的所有对象都是动态的，即使内置的函数，我们也可以重新指向新的函数。

现在假定我们想统计一下代码一共调用了多少次parseInt()，可以把所有的调用都找出来，然后手动加上count += 1，不过这样做太傻了。最佳方案是用我们自己的函数替换掉默认的parseInt()：

var count = 0;

var oldParseInt = parseInt; // 保存原函数

window.parseInt = function () {

count += 1;

return oldParseInt.apply(null, arguments); // 调用原函数

};

// 测试:

parseInt('10');

parseInt('20');

parseInt('30');

count; // 3

⑥高阶函数（参数里有函数的函数比如array.map）

Array.reduce

如果我们继续改进这个例子，想办法把一个字符串13579先变成Array——[1, 3, 5, 7, 9]，再利用reduce()就可以写出一个把字符串转换为Number的函数。

牵扯到的问题是：将字符串变成数字的隐式转换（符号）

'use strict';

var arr = ['1', '2', '3'];

var r;

r = arr.map(parseInt);

[1, NaN, NaN]

由于map()接收的回调函数可以有3个参数：callback(currentValue, index, array)，通常我们仅需要第一个参数，而忽略了传入的后面两个参数。不幸的是，parseInt(string, radix)没有忽略第二个参数，导致实际执行的函数分别是：

parseInt('0', 0); // 0, 按十进制转换

parseInt('1', 1); // NaN, 没有一进制

parseInt('2', 2); // NaN, 按二进制转换不允许出现2

可以改为r = arr.map(Number);，因为Number(value)函数仅接收一个参数。

Filter()

Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。

可以用来数组去重

箭头函数对this的影响

this

箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。

回顾前面的例子，由于JavaScript函数对this绑定的错误处理，下面的例子无法得到预期结果：

var obj = {

birth: 1990,

getAge: function () {

var b = this.birth; // 1990

var fn = function () {

return new Date().getFullYear() - this.birth; // this指向window或undefined

};

return fn();

}

};

现在，箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj：

var obj = {

birth: 1990,

getAge: function () {

var b = this.birth; // 1990

var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象

return fn();

}

};

obj.getAge(); // 25

如果使用箭头函数，以前的那种hack写法：

var that = this;

就不再需要了。

由于this在箭头函数中已经按照词法作用域绑定了，所以，用call()或者apply()调用箭头函数时，无法对this进行绑定，即传入的第一个参数被忽略：

var obj = {

birth: 1990,

getAge: function (year) {

var b = this.birth; // 1990

var fn = (y) => y - this.birth; // this.birth仍是1990

return fn.call({birth:2000}, year);

}

};

obj.getAge(2015); // 25

Generator

generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次。

标准对象

总结一下，有这么几条规则需要遵守：

1.不要使用new Number()、new Boolean()、new String()创建包装对象；

2.用parseInt()或parseFloat()来转换任意类型到number；

3.用String()来转换任意类型到string，或者直接调用某个对象的toString()方法；

4.通常不必把任意类型转换为boolean再判断，因为可以直接写if (myVar) {...}；

5.typeof操作符可以判断出number、boolean、string、function和undefined；

6.判断Array要使用Array.isArray(arr)；

7.判断null请使用myVar === null；

8.判断某个全局变量是否存在用typeof window.myVar === 'undefined'；

9.函数内部判断某个变量是否存在用typeof myVar === 'undefined'。

10.最后有细心的同学指出，任何对象都有toString()方法吗？null和undefined就没有！确实如此，这两个特殊值要除外，虽然null还伪装成了object类型。

更细心的同学指出，number对象调用toString()报SyntaxError：

123.toString(); // SyntaxError

遇到这种情况，要特殊处理一下：

123..toString(); // '123', 注意是两个点！

(123).toString(); // '123'

不要问为什么，这就是JavaScript代码的乐趣！

JSON

序列化

JSON.stringify(xiaoming, null, ' ');

如果我们还想要精确控制如何序列化小明，可以给xiaoming定义一个toJSON()的方法，直接返回JSON应该序列化的数据

反序列化

拿到一个JSON格式的字符串，我们直接用JSON.parse()把它变成一个JavaScript对象

插一句：CSS 动画实战：创建一个漂亮的加载动画

http://svgtrick.com/tricks/7ecdbe287454e03bcbe6d36c3ee584bc

8-9

知识点总结

https://github.com/BearD01001/front-end-QA-to-interview#new%E6%93%8D%E4%BD%9C%E7%AC%A6%E5%85%B7%E4%BD%93%E5%B9%B2%E4%BA%86%E4%BB%80%E4%B9%88%E5%91%A2

New关键字的过程

使用new关键字调用函数（new ClassA(…)）的具体步骤：

1. 创建空对象；
　　var obj = {};

2. 设置新对象的constructor属性为构造函数的名称，设置新对象的__proto__属性指向构造函数的prototype对象；
　　obj.__proto__ = ClassA.prototype;

3. 使用新对象调用函数，函数中的this被指向新实例对象：
　　ClassA.call(obj);　　//{}.构造函数();

就是obj执行一遍构造函数，把属性什么的通过this.xx =xx;给obj。

4. 将初始化完毕的新对象地址，保存到等号左边的变量中

并且注意，调用构造函数千万不要忘记写new。为了区分普通函数和构造函数，按照约定，构造函数首字母应当大写，而普通函数首字母应当小写，这样，一些语法检查工具如jslint将可以帮你检测到漏写的new。

注意：若构造函数中返回this或返回值是基本类型（number、string、boolean、null、undefined）的值，则返回新实例对象；若返回值是引用类型的值，则实际返回值为这个引用类型。

关于prototype和__proto__的关系

摘自JS高级：

我们创建的每个函数都有一个prototype属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。

Constructor（构造函数）属性包含的是一个指向prototype所在函数的指针，通过这个构造函数可以继续为原型对象添加方法和属性。

而当调用构造函数创建一个实例之后，该实例将包含一个指针叫做[prototype]，也就是浏览器支持下的__proto__；

例如Array.prototype.slice.call();实际上Array就是一个构造函数啦！所以用的是prototype。

3.class继承

我们先回顾用函数实现Student的方法：

function Student(name) {

this.name = name;

}

Student.prototype.hello = function () {

alert('Hello, ' + this.name + '!');

}

如果用新的class关键字来编写Student，可以这样写：

classStudent {

constructor(name) {

this.name = name;

}

hello() {

alert('Hello, ' + this.name + '!');

}

最后，创建一个Student对象代码和前面章节完全一样：

var xiaoming = new Student('小明');

xiaoming.hello();

class继承

用class定义对象的另一个巨大的好处是继承更方便了。想一想我们从Student派生一个PrimaryStudent需要编写的代码量。现在，原型继承的中间对象，原型对象的构造函数等等都不需要考虑了，直接通过extends来实现：

classPrimaryStudentextendsStudent {

constructor(name, grade) {

super(name); // 记得用super调用父类的构造方法!

this.grade = grade;

}

myGrade() {

alert('I am at grade ' + this.grade);

}

注意PrimaryStudent的定义也是class关键字实现的，而extends则表示原型链对象来自Student。子类的构造函数可能会与父类不太相同，例如，PrimaryStudent需要name和grade两个参数，并且需要通过super(name)来调用父类的构造函数，否则父类的name属性无法正常初始化。

PrimaryStudent已经自动获得了父类Student的hello方法，我们又在子类中定义了新的myGrade方法。

ES6引入的class和原有的JavaScript原型继承有什么区别呢？实际上它们没有任何区别，class的作用就是让JavaScript引擎去实现原来需要我们自己编写的原型链代码。简而言之，用class的好处就是极大地简化了原型链代码。

练习

请利用class重新定义Cat，并让它从已有的Animal继承，然后新增一个方法say()，返回字符串'Hello, xxx!'：

class Animal {

constructor(name) {

this.name = name;

}

class Cat extends Animal{

constructor(name){

super(name);

}

say(){

return `Hello, ${this.name}!`

}

var kitty = new Cat('Kitty');

4.浏览器对象

window

navigator

screen

location

document

history

location.href是一个属性，要这样使用：
location.href='http://www.example.com'而location.assign('http://www.example.com')就location.href='http://www.example.com'至于location.replace('http://www.example.com')与前两者的区别是，在replace之后，浏览历史就被清空了（href与assign方法会产生历史记录）。

5.操作DOM

由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。

在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点。最常用的方法是document.getElementById()和document.getElementsByTagName()，以及CSS选择器document.getElementsByClassName()。

第二种方法是使用querySelector()和querySelectorAll()，需要了解selector语法，然后使用条件来获取节点，更加方便.

严格地讲，我们这里的DOM节点是指Element，但是DOM节点实际上是Node，在HTML中，Node包括Element、Comment、CDATA_SECTION等很多种，以及根节点Document类型，但是，绝大多数时候我们只关心Element，也就是实际控制页面结构的Node，其他类型的Node忽略即可。根节点Document已经自动绑定为全局变量document。

6.更新DOM

一种是修改innerHTML属性, 第二种是修改innerText或textContent属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签

修改CSS也是经常需要的操作。DOM节点的style属性对应所有的CSS，可以直接获取或设置。因为CSS允许font-size这样的名称，但它并非JavaScript有效的属性名，所以需要在JavaScript中改写为驼峰式命名fontSize

// 获取<p id="p-id">...</p>

var p = document.getElementById('p-id');

// 设置CSS:

p.style.color = '#ff0000';

p.style.fontSize = '20px';

p.style.paddingTop = '2em';

7. 插入DOM

有两个办法可以插入新的节点。一个是使用appendChild，把一个子节点添加到父节点的最后一个子节点。

如果我们要把子节点插入到指定的位置怎么办？可以使用parentElement.insertBefore(newElement, referenceElement);，子节点会插入到referenceElement之前。

8. 删除DOM

要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉：

// 拿到待删除节点:

var self = document.getElementById('to-be-removed');

// 拿到父节点:

var parent = self.parentElement;

// 删除:

var removed = parent.removeChild(self);

removed === self; // true

注意到删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。

MDN- ChildNode.remove()

ChildNode.remove() 方法把从它所属的DOM树中删除对象。

var el = document.getElementById('div-01');

el.nextElementSibling.remove();

// id 为 'div-02' 的 div 被删掉了

8-10

操作表单

提交表单

注意到id为md5-password的<input>标记了name="password"，而用户输入的id为input-password的<input>没有name属性。没有name属性的<input>的数据不会被提交。

2. 操作文件

在HTML表单中，可以上传文件的唯一控件就是<input type="file">。

注意：当一个表单包含<input type="file">时，表单的enctype必须指定为multipart/form-data，method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。

出于安全考虑，浏览器只允许用户点击<input type="file">来选择本地文件，用JavaScript对<input type="file">的value赋值是没有任何效果的。当用户选择了上传某个文件后，JavaScript也无法获得该文件的真实路径：

File API

由于JavaScript对用户上传的文件操作非常有限，尤其是无法读取文件内容，使得很多需要操作文件的网页不得不用Flash这样的第三方插件来实现。

随着HTML5的普及，新增的File API允许JavaScript读取文件内容，获得更多的文件信息。

HTML5的File API提供了File和FileReader两个主要对象，可以获得文件信息并读取文件。

下面的例子演示了如何读取用户选取的图片文件，并在一个<div>中预览图像

自我评价

推荐语：本人本科期间是数学专业的，由于对计算机编程的热爱，研究生转向计算机系，两年时间的项目开发经验，使得自己的编程能力有了很大的提高。技术方面熟练掌握数据结构、操作系统、计算机网络；并对基本算法及常用设计模式有较好的掌握。熟练掌握Java语言及其高级特性，包括集合、I/O流、反射、多线程并发；并对JVM基本原理有一定的了解。熟练掌握JavaWeb技术，包括JSP、JavaScript、Servlet、Session、Filter、Listener、JDBC等技术。熟悉MVC开发模式以及SSH、MyBatis、SpringMVC等JavaEE主流开发框架；具有JavaWeb和.NET开发经验；并对Lucene、JBPM、WebService、Nginx有一定的了解。熟练使用SQL Server、MySql数据库，熟悉数据库事务特性及数据库连接池；了解MySQL数据库的优化；并对Redis有一定的了解。了解Linux常见操作命令，Maven项目构建及基本的分布式开发原理。此外，在本科和研究生期间，成绩优异，积极参加校内校外实践活动，并多次获得奖学金，其中校级奖学金两次，研究生学业奖学金两次。语言方面通过CET-4和CET-6,具备阅读英文文献和基本的沟通能力。在毕业来临之际，希望自己能有机会和优秀的盛大员工一起学习进步，共同创造下一个伟大的时代！

VUE的学习

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM：

鼠标悬停几秒钟查看此处动态绑定的提示信息！

</span>

</div>

var app2 = new Vue({

el: '#app-2',

data: {

message: '页面加载于 ' + new Date()

}

})

鼠标悬停几秒钟查看此处动态绑定的提示信息！

这里我们遇到点新东西。你看到的 v-bind 属性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。简言之，这里该指令的作用是：“将这个元素节点的 title 属性和 Vue 实例的 message 属性保持一致”。

8-11

1.react的extends语法（MDN）

使用 extends

第一个例子是根据名为 Polygon 类创建一个名为Square的类。 你可以从实战演示看到这个例子。

class Square extends Polygon {

constructor(length) {

// 这里把length传参给父类的构造方法

// 作为父类Polygon的宽和高

super(length, length);

// 备注：在衍生类中使用this前必须先调用super()方法

// 忽视这一点将会导致一个引用错误

this.name = 'Square';

}

get area() {

return this.height * this.width;

}

set area(value) {

this.area = value;

}

Getter/Setter访问器属性

get 语法将一个对象属性绑定到查询该属性时将被调用的一个函数上。

语法E

{get prop() { ... } }

{get [expression]() { ... } }

super 关键字用于调用一个对象的父对象上的函数。

super.prop 和 super[expr] 表达式在类和对象字面量任何方法定义中都是有效的。

语法

super([arguments]);

// 调用父对象/父类的构造函数

super.functionOnParent([arguments]);

// 调用父对象/父类上的方法

滚动条样式

http://blog.csdn.net/hanshileiai/article/details/40398177

当设置了-webkit-scrollbar属性的时候，即使只设置了width,也会使滚动条变透明。

因此仅仅需要如下两条就可以有很漂亮的滚动条

#mobile-body-content::-webkit-scrollbar{width:8px}

#mobile-body-content::-webkit-scrollbar-thumb{background-color:#bdf4eb;-webkit-border-radius:4px;border-radius:4px}

4：通过同时设置元素的top和bottom，确定元素的高度。

5：如何让 height:100%; 起作用

http://www.webhek.com/post/css-100-percent-height.html

如果想让一个元素的百分比高度height: 100%;起作用，你需要给这个元素的所有父元素的高度设定一个有效值。

6：定宽元素居中方法2

{position:absolute;

left:50%;

width:300px;

margin-left:150px;}

7:利用伪元素::before或::after产生阴影

#mobile-body-bg:before {

position: relative;

width: 100%;

height: 25px;

background: linear-gradient(rgba(34,195,170,0.1) 0, transparent);}

8.CSS动画

transform-origin设置旋转元素的基点位置

animation: msgBounceIn .4s;

animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)

@keyframes msgBounceIn{

from{transform:scale(0)} //from相当于0%,to相当于100%

40%{transform:scale(1.03)}

75%{transform:scale(0.98)}

to{transform:scale(1)}

}

补充一个：transition 属性

width:100px;

transition: width 2s;

8-13

1.git文件上传

http://www.cnblogs.com/cxk1995/p/5800196.html

本地文件更新服务器

http://blog.csdn.net/u014724048/article/details/54408994

服务器覆盖本地

http://blog.csdn.net/zzclqy/article/details/52743810

使用原本是

transform: translateY(100%);

transition-duration: .3s;

transition-property: transform;

然后

background-color:rgba(0,0,0,0.5);

border-radius:20px;opacity:1;-webkit-transition:opacity .3s;transition:opacity .3s

transform:translateY(0)

完成对话框的显现！

对话框关闭的X用::before和::after

.close-btn {

position: absolute;

top: 0;

right: 0;

height: 20px;

padding: 12px 18px;

}

.close-btn:before {

top: 10px;

-webkit-transform: rotateZ(45deg);

-ms-transform: rotate(45deg);

transform: rotateZ(45deg);

}

.close-btn:after {

-webkit-transform: rotateZ(-45deg);

-ms-transform: rotate(-45deg);

transform: rotateZ(-45deg);

}

.close-btn:before, .close-btn:after {

content: '';

display: block;

width: 16px;

height: 2px;

position: relative;

top: 8px;

background-color: #ddd;

}

对话框出来时，底层变暗的效果（类似模态框）

#mobile.has-prompt #prompt-bg{

position:absolute;

top:0;

z-index:50;

display:block;

width:100%;

height:100%;

background-color:rgba(0,0,0,0.5);

-webkit-border-radius:20px;

border-radius:20px;opacity:1;-webkit-transition:opacity .3s;transition:opacity .3s

}

5：右边对话框浮动的清除方法

.msg-row::before, .msg-row::after {

content: " ";

display: table;

}

.msg-row::after {

clear: both;

}

6.为什么 .clear :after 和 :before 的 display 属性要定义为 table?

.cf:after，.cf:before {content: " "; display: table;} .cf:after {clear: both;} ：before是因为table类型能生成独立的bfc，防止上边距塌陷，：after负责清除浮动，防止父级高度塌陷；配合使用，代码少，效率高。

仅仅是清楚父级高度塌陷的代码经测试只需要

.main::after{

clear: both;

}

.main::after {

content: " ";

display: table;

}

就可以做到，原理就是利用伪元素清除浮动

8-15

组件化
回调完成各种效果
使用数组+1+1这样完成对话？
为什么react的组件要super(props)
1. 调用super的原因：在ES6中，在子类的constructor中必须先调用super才能引用this （经测试，不调用super会报错）；
2. super(props)的目的：在constructor中可以使用this.props
3. 最后，可以看下React文档，里面有一段

Class components should always call the base constructor with props.

下面我的例子，constructor的标配就是super(props);会自动传入组件的props;

constructor(props) {

super(props);

this.state = {

replyarr:["hehe"]

};

}

只有当不需要consructor的时候可以简写如下

class Welcome extends React.Component {

render() {

return <h1>Hello, {this.props.name}</h1>;

}

5.官方实例

class Clock extends React.Component {

constructor(props) {

super(props);

this.state = {date: new Date()};

}

componentDidMount() {

this.timerID = setInterval(

() => this.tick(),

1000

);

}

componentWillUnmount() {

clearInterval(this.timerID);

}

tick() {

this.setState({

date: new Date()

});

}

render() {

return (

<div>

<h1>Hello, world!</h1>

<h2>It is {this.state.date.toLocaleTimeString()}.</h2>

</div>

);

}

ReactDOM.render(

<Clock />,

document.getElementById('root')

);

修改状态

① this.setState({comment: 'Hello'});

② 当state更新需要用到之前的值时，要使用函数进行更新

Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

For example, this code may fail to update the counter:

// Wrong

this.setState({

counter: this.state.counter + this.props.increment,

});

To fix it, use a second form of setState() that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument:

// Correct

this.setState((prevState, props) => ({

counter: prevState.counter + props.increment

}));

更新state数组写法一：

this.setState((prevState, props) => ({

counter: prevState.replyarr.push("一只羊")

}));

写法二：

this.state.replyarr.push("一只羊");

this.setState({

replyarr:this.state.replyarr

});

onClick={this.reply1.bind(this)}

react里面这种写法很多，如果不加上bind(this)那么在reply1 里面调用this结果是null？

①如果你的点击事件触发的方法里需要引用this。就需要绑定啊。不然你的this是null（记得如果没绑定this应该是全局window。但这里this 就是null，撸完手上的需求去看一下react源码）所以

1.你要么在创建的时候绑定：

2.要么在一开始构造器里声明绑定

constructor(props){

super(props);

this.handleClick=this.handleClick.bind(this)

3.还有一种是利用闭包把作用域包起来

<div className="save" onClick={()=>this.handleClick}>Save</div>

如果用第一种会在每次点击时通过bind创建一个新的方法，所以一般用2 3 两种情况，显示调用bind()只是为了保证this值。

作者：空腹熊
链接：https://www.zhihu.com/question/50572127/answer/144757646

②

创建绑定函数
bind() 最简单的用法是创建一个函数，使这个函数不论怎么调用都有同样的 this 值。JavaScript新手经常犯的一个错误是将一个方法从对象中拿出来，然后再调用，希望方法中的 this 是原来的对象。（比如在回调中传入这个方法。）如果不做特殊处理的话，一般会丢失原来的对象。从原来的函数和原来的对象创建一个绑定函数，则能很漂亮地解决这个问题：

this.x = 9;

var module = {

x: 81,

getX: function() { return this.x; }

};

module.getX(); // 返回 81

var retrieveX = module.getX;

retrieveX(); // 返回 9, 在这种情况下，"this"指向全局作用域

// 创建一个新函数，将"this"绑定到module对象

// 新手可能会被全局的x变量和module里的属性x所迷惑

var boundGetX = retrieveX.bind(module);

boundGetX(); // 返回 81

结合这里的例子进行理解，React构造方法中的bind即将handleClick函数与这个组件Component进行绑定以确保在这个处理函数中使用this时可以时刻指向这一组件。

7. JQUERY对象转DOM对象

两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);

(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。

如：

var $v =$("#v") ; //jQuery对象

var v=$v[0]; //DOM对象

alert(v.checked) //检测这个checkbox是否被选中

(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

8. 让滚动条保持在最底部

$('#content').scrollTop( $('#content')[0].scrollHeight );

一开始出错的原因是REACT内容渲染前就设置了高度，渲染后没有重新设置，因此写在componentDidUpdate函数里面，在state改变后自动调用！

componentDidUpdate(prevProps, prevState) {

var contentSH = $("#mobile-body-content")[0].scrollHeight;

var contentCH = $("#mobile-body-content")[0].clientHeight;

var scrollTopValue = contentSH - contentCH;

$("#mobile-body-content").scrollTop(scrollTopValue);

}

9. 与滚动栏适配的进度条

//与滚动栏适配的进度条
(function() {
var $w = $(window);
var $prog2 = $('.bottombar');
var wh = $w.height();
var h = $('body').height();
var sHeight = h - wh;
$w.on('scroll', function() {
window.requestAnimationFrame(function(){
//scrollTop()是滚了多少，sHeight是可以滚多少
var perc = Math.max(0, Math.min(1, $w.scrollTop() / sHeight));
updateProgress(perc);
});
});

function updateProgress(perc) {
$prog2.css({width: perc * 100 + '%'});
}

}());

10.

$(window).height(); //浏览器当前窗口可视区域高度

$(document).height(); //浏览器当前窗口文档的高度

$(document.body).height();//浏览器当前窗口文档body的高度

$(document.body).outerHeight(true);//浏览器当前窗口文档body的总高度包括border padding margin

$(window).width(); //浏览器当前窗口可视区域宽度

$(document).width();//浏览器当前窗口文档对象宽度

$(document.body).width();//浏览器当前窗口文档body的高度

$(document.body).outerWi dth(true);//浏览器当前窗口文档body的总宽度包

11.①Jquery里面的{}?——$().css设置多个属性时就是这么写

②各种高度和鼠标位置

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

③ 生命周期函数

④ 缓慢滑动到目标位置

http://www.daixiaorui.com/read/92.html

Jquery的offset()可以获得元素的位置，从而定位到元素所在处

⑤ 同步和异步的概念

http://blog.csdn.net/u013063153/article/details/52457307

异步代码会被放入一个事件队列，等到所有其他代码执行后才进行，而不会阻塞线程。

javascript最基础的异步函数是setTimeout和setInterval。setTimeout会在一定时间后执行给定的函数。它接受一个回调函数作为第一参数和一个毫秒时间作为第二参数。

12.JS的单线程和异步机制

https://www.zhihu.com/question/19732473

怎样理解阻塞非阻塞与同步异步的区别？

http://www.cnblogs.com/sxz2008/p/6513619.html

JavaScript单线程和异步机制

虽然JavaScript是单线程的，可是浏览器内部不是单线程的。你的一些I/O操作、定时器的计时和事件监听（click, keydown…）等都是由浏览器提供的其他线程来完成的。

如果想利用多线程处理一些耗时较长的任务，可以使用HTML5提出的Web Worker。

8-16

明天改改样式往github上面架一下

8-17

JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE

http://www.cnblogs.com/zhangmingze/p/4864367.html

background-image
https://sologgfun.github.io/
作者：Try
链接：https://www.nowcoder.com/discuss/19662?type=2&order=3&pos=21&page=1
来源：牛客网

以前都是在牛客看别人的面经,面试经验什么的,这次该换我来写了,

实习:

校招:

7.20开始投简历

蚂蚁金服UED

一面:55分钟

1.如何让各种情况下的div居中(绝对定位的div,垂直居中,水平居中)

2. display有哪些值？说明他们的作用

None,block,inline-block,table,cell

5. requirejs实现原理

基本原理是动态生成script标签，比如requirejs,seajs。还有一些是ajax请求js代码，然后eval执行的。另外可以关注一下MT.手机腾讯网，基于localstorage来做到路字符级别的增量更新

6. requirejs怎么防止重复加载

7.ES6里头的箭头函数的this对象与其他的有啥区别

8.tcp/udp区别

http://www.cnblogs.com/bizhu/archive/2012/05/12/2497493.html

小结TCP与UDP的区别：
1.基于连接与无连接；
2.对系统资源的要求（TCP较多，UDP少）；
3.UDP程序结构较简单；
4.流模式与数据报模式；
5.TCP保证数据正确性，UDP可能丢包，TCP保证数据顺序，UDP不保证。

tcp三次握手过程

TCP三次握手过程
1 主机A通过向主机B 发送一个含有同步序列号的标志位的数据段给主机B ,向主机B 请求建立连接,通过这个数据段,
主机A告诉主机B 两件事:我想要和你通信;你可以用哪个序列号作为起始数据段来回应我.
2 主机B 收到主机A的请求后,用一个带有确认应答(ACK)和同步序列号(SYN)标志位的数据段响应主机A,也告诉主机A两件事:
我已经收到你的请求了,你可以传输数据了;你要用哪佧序列号作为起始数据段来回应我
3 主机A收到这个数据段后,再发送一个确认应答,确认已收到主机B 的数据段:"我已收到回复,我现在要开始传输实际数据了
这样3次握手就完成了,主机A和主机B 就可以传输数据了.
3次握手的特点
没有应用层的数据
SYN这个标志位只有在TCP建产连接时才会被置1
握手完成后SYN标志位被置0

xss与csrf的原理与怎么防范

http://blog.csdn.net/koastal/article/details/52905358

①XSS定义的主语是“脚本”，是一种跨站执行的脚本，也就是JavaScript脚本，指的是在网站上注入我们的javascript脚本，执行非法操作。
CSRF定义的主语是”请求“，是一种跨站的伪造的请求，指的是跨站伪造用户的请求，模拟用户的操作。

②XSS攻击发生的条件是可以执行javascript脚本，一般在站点中总会有发表文章、留言等信息的表单，这种表单一般是写入到数据库中，然后在某个页面进行展示。我们可以在这些表单中直接编写javascript代码（<script>alert("hack sucess!");</script>）进行测试，看是否可以执行。如果在信息展示页面js代码可以执行，XSS攻击就成功了。

CSRF（Cross-site request forgery跨站请求伪造）是一种依赖web浏览器的、被混淆过的代理人攻击。CSRF定义的主语是”请求“，是一种跨站的伪造的请求，指的是跨站伪造用户的请求，模拟用户的操作。

GET和POST的使用

在web程序的设计原则上，GET传递参数的操作，不应该改变程序的内部结构，主要用于查询信息的过滤。对于数据库的更删改操作，一定要使用POST方式传值。

XSS和CSRF攻击的防御

防御XSS攻击可以通过以下两方面操作：
1，对用户表单输入的数据进行过滤，对javascript代码进行转义，然后再存入数据库；
2，在信息的展示页面，也要进行转义，防止javascript在页面上执行。

CSRF攻击的防御可以通过以下两方面操作：
1，所有需要用户登录之后才能执行的操作属于重要操作，这些操作传递参数应该使用post方式，更加安全；

2，为防止跨站请求伪造，我们在某次请求的时候都要带上一个csrf_token参数，用于标识请求来源是否合法，csrf_token参数由系统生成，存储在SESSION中。

mysql与 MongoDB的区别

关系型数据库：最常见应用最广的一类数据库，建立在关系模型基础上数据模型大致上就是二维表，一个突出的特点是用SQL进行操作，能满足大部分需求。常见的MySQL，Oracle，Microsoft SQL Server等。

MySQL，开源的关系型数据库，在现代数据库中比较典型，能满足你大部分需求，毕竟Oracle很贵。一般用起来要运行一个MySQL的服务，然后用客户端去连接它，比如在Java里或者用shell连接127.0.0.1:3306。之后就可以愉快地执行SQL语句增删查改了。

例子：比如学生信息管理系统，服务器123.123.123.123:306上用的MySQL，另一个服务器上的Web应用可以连接到它，学生基本信息一个表，班级信息一个表。学生的班级id字段是外键连接到班级信息表的班级id。

SQLite，一个非常迷你的关系型数据库，麻雀虽小五脏俱全。（需要远程连服务器上的数据库还是乖乖用MySQL），连接数据库就像是打开个db文件，比如用shell或者编程语言连接到e:\example.db。之后就可以愉快地用SQL语句增删查改了。非常适合嵌入到应用内部，比如android应用。显然，如果你写的程序访问的数据想存成一个本地文件，你自己设计文件格式存数据很麻烦不如用这个。比如做个名片管理app，内嵌mingpian.db来保存名片。

非关系型数据库：由于关系型数据库虽然数据结构很严谨规范，有一大堆约束（比如保证每个数据主键唯一啊，存在别的表里的数据用外键连接啊之类的），但是在某些时候存在不足，比如我从今天开始存的数据都比昨天的多了俩字段，或者今天开始每条数据里面嵌入了一个列表，这时候关系型数据库就不好用了（要么建新表，要么alter旧表，然而改变里面存了N多数据的旧表的结构代价很大），再比如数据以增加为主，并且修改一条记录某个字段时要求旧的版本不能丢。

为了满足这些需求，就出现了非关系型数据库，也有人称之为NoSQL数据库，放弃一部分关系型数据库的“严谨”，而支持各种别的特性。常见的有HBase、MongoDB、Redis等等。 MongoDB按分类可以算“基于文档的数据库”，里面数据的“长相”参见JSON格式。然而在我看来，很多吵吵着用MongoDB的情况MySQL完全可以胜任。

腾讯TST微信(第一次,内推)

一面:50分钟

5.gulp与webpack区别

7.说下你知道的响应状态码

10.对nodejs了解多少

二面:90分钟 (视频面)

首先是两个编程题

2.实现一个可拖动的div(要考虑到浏览器兼容性)

http://www.w3school.com.cn/html5/html_5_draganddrop.asp

二面:40分钟

1.遇到过哪些浏览器兼容性问题

2. 清除浮动有哪几种方式,分别说说

http://www.cnblogs.com/Lu-Lu/p/6253714.html

最强浮动解决帖！

js继承

http://www.cnblogs.com/humin/p/4556820.html

三面:90分钟

1.你学过数据结构没,说说你都了解些什么

2.你学过计算机操作系统没,说说你都了解些什么

3.你学过计算机组成原理没,说说你都了解些什么

4.你学过算法没,说说你都了解些什么

5.说下选择排序,冒泡排序的实现思路

复习技术之瞳

7.让你设计一个前端css框架你怎么做

12.浏览器缓存的区别

http://www.techweb.com.cn/network/system/2016-01-05/2252395.shtml

17.js中上下文是什么

https://segmentfault.com/q/1010000008295253/a-1020000008297388

箭头函数没有自身的 this, arguments, super, new.target, 而是通过上溯词法作用域找到最近定义的那个.

var obj = {

foo: () => console.log(this)

}

这段代码里箭头函数里头的 this 指向的是定义了箭头函数的那个执行上下文, 显然即 window.

ES6 箭头函数中的 this？你可能想多了（翻译）

http://www.cnblogs.com/vajoy/p/4902935.html

当有人说“变量所处的上下文”时，实际指“词法环境”，或者我们常说的作用域，即规范中的Lexical Environment。
当有人说“函数的上下文”时，实际指“函数的执行环境”，即规范中的Execution Context。
当有人说“call、apply和bind会改变函数执行的上下文”时，实际指“函数执行时的this”，即规范中的this binding。
当有人说“你这段代码要结合上下文才能看出具体含义”时，此处的上下文就是我们日常生活中说的上下文。

21.平常在项目中用到过哪些设计模式,说说看

美团

一来给了张纸要求写js自定义事件

http://www.jb51.net/article/83911.htm

https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Creating_and_triggering_events

h5有个api能定位你知道是哪个吗

Geolocation

5.webpack怎样配置

7.link和@import有什么区别

link属于html标签，而@import是css提供的。
页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
link方式样式的权重高于@import的。

11.出了道url去参数的题让在纸上写

小结：题目暂时就先这么多，先把书看完

8-18

写个后台程序，时而跑一下验证登录效果

前台是用servlet写得

8-19

学弟网站，S流，面试题，第二份简历
Font Awesome矢量字体图标

3． Var k; alert(k);

4. 二叉树资料

http://blog.csdn.net/fansongy/article/details/6798278/

5. 在Linux上，对于多进程，子进程继承了父进程的下列哪些？

父进程和子进程拥有独立的地址空间和PID参数。

'a'=97
'A'=65

最短寻道时间优先算法

微软操作系统（DOS、WINDOWS等）中磁盘文件存储管理的最小单位叫做“簇”
扇区：硬盘不是一次读写一个字节而是一次读写一个扇区（512个字节）
簇：系统读读写文件的基本单位，一般为2的n次方个扇区(由文件系统决定)

块可以包含若干页，页可以包含若干簇，簇可以包含若干扇区

电脑的最小存储单位是字节Byte，一个字节，是由八位二进制位组成的,就是这八位数字只是由“0”和“1”两个数字组成，例如：11111000，00000001，00000101等，1个英文字母、英文标点、半角数字在计算机是以八位二进制数保存就是一个字节大小，1个汉字(包括中文标点全角数字)就是2个字节 (十六位二进制)

1位二进制大小就是1bit

10.

DNS知识点

A：DNS就是将域名翻译成IP地址。

B：主要用UDP，但是当请求字节过长超过512字节时用TCP协议，将其分割成多个片段传输。

C：DNS协议默认端口号是53。

D：操作系统的DNS缓存：windows DNS缓存的默认值是 MaxCacheTTL，它的默认值是86400s，也就是一天。macOS 严格遵循DNS协议中的TTL。

游览器的DNS缓存：chrome对每个域名会默认缓存60s；IE将DNS缓存30min；Firefox默认缓存时间只有1分钟；Safari约为10S。

11.

看二分法实现细节，取中值时：mid=low+((high-low)/2);是取左中值

12.

线性结构是一个有序数据元素的集合。[1]

常用的线性结构有：线性表，栈，队列，双队列，数组，串。

关于广义表，是一种非线性的数据结构。

常见的非线性结构有：二维数组，多维数组，广义表，树(二叉树等)，图。

特征

1．集合中必存在唯一的一个"第一个元素"；

2．集合中必存在唯一的一个"最后的元素"；

3．除最后元素之外，其它数据元素均有唯一的"后继"；

4．除第一元素之外，其它数据元素均有唯一的"前驱"。

数据结构中线性结构指的是数据元素之间存在着“一对一”的线性关系的数据结构。

如（a0,a1,a2,.....,an）,a0为第一个元素，an为最后一个元素，此集合即为一个线性结构的集合。

相对应于线性结构，非线性结构的逻辑特征是一个结点元素可能对应多个直接前驱和多个后继。

13.

C语言，设有宏定义：

1 2	#define A 4+5 #define B A*A

则表达式B*B的值为

4+5*4+5*4+5*4+5=69

14.pure

https://www.purecss.cn/start.html

http://www.cnblogs.com/2050/p/3877280.html

15.CSS媒体查询

CSS 语法

@media mediatype and|not|only (media feature) {
CSS-Code;
}

你也可以针对不同的媒体使用不同 stylesheets :

@media 媒体类型and （媒体特性）{你的样式}

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

8-22

基于pure的CSS框架
React-native

http://www.jianshu.com/p/b88944250b25

思路一：仅后台间隔执行的话，不用到前台的话无法显示验证码

思路二：

8-23

前端性能优化

https://segmentfault.com/a/1190000000490328#articleHeader4

class是js关键字，这里要用className。对于E选项，在jsx中直接写行内样式时不能采用引号，而是style={{color:'red'}}的方式

数组方法

本题需要将数组a=[1,2,3]变成[1,2,3,4],需要改变原数组a。

Array对象常用方法中：

不改变原数组：

1、 concat()

连接两个或多个数组

不改变原数组

返回被连接数组的一个副本

2、join()

把数组中所有元素放入一个字符串

不改变原数组

返回字符串

3、 slice()

从已有的数组中返回选定的元素

不改变原数组

返回一个新数组

4、 toString()

把数组转为字符串

不改变原数组

返回数组的字符串形式

改变原数组：

5、 pop()

删除数组最后一个元素，如果数组为空，则不改变数组，返回undefined

改变原数组

返回被删除的元素

6、 push()

向数组末尾添加一个或多个元素

改变原数组

返回新数组的长度

7、 reverse()

颠倒数组中元素的顺序

改变原数组

返回该数组

8、 shift()

把数组的第一个元素删除，若空数组，不进行任何操作，返回undefined

改变原数组

返回第一个元素的值

9、 sort()

对数组元素进行排序(ascii)

改变原数组

返回该数组

10、 splice()

从数组中添加/删除项目

改变原数组

返回被删除的元素

11、 unshift()

向数组的开头添加一个或多个元素

改变原数组

返回新数组的长度

A选项，a.reverse()后返回值即数组a变成[3,2,1],再使用unshift()方法在数组开头添加一个4，a数组就变成了[4,3,2,1]。注，unshift()返回新数组的长度，此处为4。正确。

B选项，push()方法返回新数组的长度，是一个number类型，不是数组，所以不能再用“.”操作符继续执行reverse()方法。错误。

C选项，正确。

D选项，splice()语法：arrayObject.splice(index,howmany,item1,.....,itemX)。
参数：
index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany：必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX：可选。向数组添加的新项目。
返回值：
Array：包含被删除项目的新数组，如果有的话。

由于a.splice(3,1,4)中的index为3，超过了数组a的下标，所以3后面的1也不会起作用。a.splice(3,1,4)会将4插入到数组a末尾。但splice()返回值是被删除项目的新数组，由于a.splice(3,1,4)并没有删除元素，所以返回的新数组为空，对空数组reverse()还是空。(如果D选项改成a.splice(3,1,4);a.reverse()就正确了。)错误。

4. HTTP2.0

https://www.zhihu.com/question/34074946

多路复用

多路复用允许同时通过单一的 HTTP/2 连接发起多重的请求-响应消息。

众所周知 ，在 HTTP/1.1 协议中 「浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞」。

可以给请求添加优先级

服务器主动推送 server push

首部压缩：HTTP2的头部会减小，从而减少流量传输

5. position: sticky

　　CSS属性选择用于定位元素的替代规则，被设计为对脚本动画效果有用。position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果

我们需要实现动态加载一个 JavaScript 资源，但是有几处不知道如何处理，需要您的帮助完成这一项工作

var script = document.createElement(“script”);

var head = document.getElementsByTagName(“head”)[0];

script.type = “text/javascript”;

script.src = “//i.alicdn.com/resource.js”;

// 绑定资源加载成功事件

script. 1 = function( ){

// 判断资源加载状态是否为加载成功或加载完成

if( 2 . test (script. 3 ) ) {

script.onreadystatechange = null;

. . . .

}

};

// 绑定资源加载失败事件

script. 4 = function( ) {

. . . .

};

head.insertBefore (script , head.firstChild)

(1) onreadystatechange
(2) /^(loaded|complete)$/
(3) readyState
(4) onerror

http://www.cnblogs.com/dailc/archive/2016/10/04/5930238.html

Native App

即传统的原生APP开发模式,Android基于Java语言,底层调用Google的 API;iOS基于OC或者Swift语言,底层调用App官方提供的API。体验最后。

Web App

即移动端的网站,将页面部署在服务器上,然后用户使用各大浏览器访问。一般泛指 SPA(Single Page Application)模式开发出的网站。体验最差。

Hybrid App

即混合开发,由Native通过JSBridge等方法提供统一的API,然后用Html5+JS来写实际的逻辑,调用API,这种模式下,由于Android,iOS的API一般有一致性,而且最终的页面也是在webview中显示,所有有跨平台效果

React Native App

Facebook发起的开源的一套新的APP开发方案,使用JS+部分原生语法来实现功能。初次学习成本较高,但是在入门后,经过良好的封装也能够实现大部分的跨平台。而且体验很好。

对比Hybird和React Native

hybird的出现仅仅是为了呈现，说实话如果没有css，或许hybird这种东西就不会出现。如果你打算做一个新闻客户端，hybird绝对是不二的选择。而交互永远是hybird的痛，且不说android局部滚动和ios的各种fixed与input的基情，就算是各种屏幕分辨率的处理方案都得恶心的想吐了。

而rn这种东西，其实你把语言换成java oc一样可以实现，只不过模块化弱类型动的js写这种东西更舒服而已。由于是基于native实现，rn可以避免掉我们上面说的所有问题，但是hybird带来的优势也会大打折扣: write once,use anywhere降级成了learn once,write anywhere，当然了业务逻辑还是可以复用的。同样的强大的css被阉割掉了很多属性和全部的层次选择器，展现力没有那么强了，但终归还是强的。
链接：https://www.zhihu.com/question/38123798/answer/75028325

IndexdDB 是 HTML5 的本地存储，把一些数据存储到浏览器（客户端）中，当与网络断开时，可以从浏览器中读取数据，用来做一些离线应用。

Cookie 通过在客户端 ( 浏览器 ) 记录信息确定用户身份，最大为 4 kb 。

url 参数用的是 get 方法，从服务器上获取数据，大小不能大于 2 kb 。

Session 是服务器端使用的一种记录客户端状态的机制。

post 是向服务器传送数据，数据量较大。

local Storage 也是 HTML5 的本地存储，将数据保存在客户端中。

原型链找不到时，返回的是undefined而不是null;

9.
输出对象中值大于2的key的数组

var data = {a: 1, b: 2, c: 3, d: 4};

Object.keys(data).filter(function(x) { return 1 ;})

期待输出：[“c”,”d”]

参考答案
(1) data[x]>2

Object.keys(Object)

Array.filter(function)

Object是包含属性和方法的对象，可以是创建的对象或现有文档对象模型 (DOM) 对象。

Object.keys(object)的返回值是一个数组，其中包含对象的可枚举属性和方法的名称。

Array.filter(function)对数组进行过滤返回符合条件的数组。

Object.keys(data)的返回值为数组["a","b","c","d"]，经过 filter(function(x) { return ; })过滤，返回值大于2的key的数组。x为返回数组的属性名称即“a"、"b"、"c"、“d”，则对应的属性值为data[x]，比较语句为data[x]>2。

10.

.sub{

width: 100px;

float: left;

}

.extra{

width: 200px;

float: right;

}

.main{

margin-left: 100px;

margin-right: 200px;

}

.sub, .extra {

position: absolute;

top: 0;

width: 200px;

}

.sub {

left: 0;

}

.extra {

right: 0;

}

.main {

margin: 0 200px;

}

.layout {

display: flex;

}

.main {

flex: 1;

}

.aside {

width: 200px;

}

11.没数据的时候的饼图

12.IPV6和IPV4的区别

http://blog.csdn.net/zjuxsl/article/details/44757791

13. 前端里神奇的BFC 原理剖析

http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

14. ES6块级作用域及新变量声明（let）

http://www.cnblogs.com/snandy/p/4485832.html

15.ES6模块的实现

http://www.cnblogs.com/vs1435/p/6553134.html

16.阐述现代前端组件化框架一些关键特性实现的原理

组件化机制

数据绑定机制

上下级组件之间数据传递的机制

17.函数柯里化

8-24

1.箭头函数能否作为构造函数

2.react写一个倒计时（聚划算这种）

（自身和服务器时间的同步问题？）

3.元素相对于浏览器左上角的距离

rectObject = object.getBoundingClientRect();

返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合。

DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

——————————————————————————————————————

1.您是一个什么样的人？请您选取三个词描述自己。为了描述更生动，每个描述词后请举例说明。（限300字）

友善：从小到大每个集体总有因为各种原因显得很弱势的人，我都会在看不下去的时候拉一把。
活力：虽然研究生毕业已经25岁了，但是我可能因为家里有个姐姐，所以我的心态更年轻，碰到挫折也不容易受到打击。
上进：虽然不是计算机系，但是我对计算机的热爱促使我克服了种种困难完成学业的同时掌握了多方面的技能。

2.未来，您希望自己成为一个什么样的人？为此您付出了哪些努力？（限300字）

未来我希望从事计算机方面的工作，在技术方面多加磨炼，成为一个领域的大牛。
我本科和研究生虽然均不是计算机系，由于对计算机编程的热爱，从研究生入学起，两年时间的项目开发经验，使得自己的编程能力有了很大的提高。有记录和分享的习惯，有自己长期更新的技术博客。技术方面对计算机网络，基本算法及数据结构有较好的掌握。熟练掌握JavaScript语言，包括ES6部分特性，原生JS 基础扎实。熟练掌握HTML5,CSS技术，包括但不限于跨域，Session，flex布局等技术。熟悉Web 框架Backbone,React，JS框架Jquery,underScore,Css框架Bootstrap等主流框架，并且对vue也有所了解，并且对源码有过学习和研读。后端上在自己的项目中使用过PHP和Node.js，使用express框架配合moongoose使用了MongoDB,了解并会使用MySql数据库，熟悉数据库的基本处理。此外，在本科和研究生期间，积极参加校内校外实践活动，并多次获得奖学金，研究生学业奖学金两次。语言方面通过CET-6,具备阅读英文文献和基本的沟通能力。

3.您怎么看待自己毕业后的第一份工作？为什么？（限300字）

第一份工作我认为能进大公司就进大公司，中国移动就是其中的典型，以中国移动举例，中国移动的平台是非常大的，作为国家背景的运营商旗下的子公司物联网公司也是一样。在这里面项目的水平和数量都是很高的，对自己是很好的锻炼，而且我本身是南京人，不希望到处奔波，最好能在一个稳定的公司里面一直努力成长就好了。

4.您为什么选择应聘中移物联网有限公司？您希望中移物联网有限公司能给您带来什么？（限300字）

中国移动作为现在三大运营商里面的龙头，中移物联网公司作为他旗下的互联网公司，既有国企规范的优势，也有互联网迅捷的特点，选择这样的公司作为第一份工作室理所应当的。
我个人希望公司可以给我成长的平台和稳定的发展，我相信我和中移的实力会越来越强。

8-25

判断check是否选中？如果选中check元素？
HTTPS加密原理

http://www.cnblogs.com/Yfling/p/6670495.html

前端安全学RSA非对称加密，DES对称加密
可以提问给面试官的前端DES这种对称加密有什么用？前端加密是否有意义？
ParyTheLord 16:13:49

ParyTheLord 16:13:49

邱总，额我想问一下，，我要写那个定时调度的话，写在那个项目的哪里阿？，，

邱添 16:14:55

你会spring框架么

邱添 16:15:09

你可以写一个基于spring框架的调度

邱添 16:15:21

项目里面内置了spring框架

邱添 16:15:43

或者你可以写一个java程序，然后再linux做调度任务邱总，额我想问一下，，我要写那个定时调度的话，写在那个项目的哪里阿？，，

模拟HTTP请求http://blog.csdn.net/pathuang68/article/details/6920076

8-28

8-29

首先，并不是说你一打开一个页面就会产生一个session。
所谓session你可以这样理解：当你与服务端进行会话时，比如说登陆成功后，服务端会为你开壁一块内存区间，用以存放你这次会话的一些内容，比如说用户名之类的。那么就需要一个东西来标志这个内存区间是你的而不是别人的，这个东西就是session id(jsessionid只是tomcat中对session id的叫法，在其它容器里面，不一定就是叫jsessionid了。),而这个内存区间你可以理解为session。
然后，服务器会将这个session id发回给你的浏览器，放入你的浏览器的cookies中（这个cookies是内存cookies，跟一般的不一样，它会随着浏览器的关闭而消失）。
之后，只有你浏览器没有关闭，你每向服务器发请求，服务器就会从你发送过来的cookies中拿出这个session id,然后根据这个session id到相应的内存中取你之前存放的数据。
但是，如果你退出登陆了，服务器会清掉属于你的内存区域，所以你再登的话，会产生一个新的session了。
不好意思，我可能说得不太清楚，但这方面的知识网上有不少，你可以了解下session的原理。

8-30

JS异步（通俗）http://www.cnblogs.com/penghuwan/p/7451409.html
没有IE就没有伤害！浏览器兼容性问题解决方案汇总

http://www.cnblogs.com/huang361964533/p/7451956.html

8-31
1.

3.BFC

4.事件节流

5.回调XX（没听懂）

6.实现一个浏览器内部标签页间的通讯用什么方式

7.垃圾回收

8.状态码304

9.文档过期时间怎么设置

10.ES6语法

11.怎么设置一个在PC端与手机端都可以浏览的页面

12.怎么实现自适应布局，媒体查询

13.JS模块化，AMD,CMD。。。

14.代码组织方式

15.怎么学习前端

16.跨域JSONP前后端有什么约定吗

身为非科班出身，感觉任重道远，努力加油吧，很多看过没用过，面试问的很详细，很多扩展，感觉比较注重“你用过吗？”，这似乎是面试中出现频率最高的词了，当然还有“没事”。

各位加油吧！！

promise，asyn await，还说了一个es6的一个异步处理关键字，
defer关键字，闭包，局部变量提升作用域，页面渲染，页面加载过程，图片懒加载，还有，但现在不记得了，让我慢慢想想，我再加上来

9-4

美图

编程题

1.$.extend

2.DOM操作

3.正则

4.去重和合并

简答

跨域
性能优化
ES6

9-6

羡辙的CV
出入栈和LINUX问题技术之瞳里面有

9-7

投简历，改论文，笔，网站，技术之瞳
个人评价：聪明，乐观，皮实，自省（技术之瞳P8）
面试：比较大的问题可以自己查到，个性化的问题：推荐适合我的书，论坛等，JS安全性
计算机网络

面试常考：https://www.nowcoder.com/discuss/1937

① 网络协议三要素：语义，语法，交换规则

② 在公钥密码体制中，不公开的是 (私钥) 。

③ 表示层的主要功能是--关注所传递的信息的结构，语法和语义

④ 从运输层的角度看，通信的真正端点是--进程。

⑤ 关于IP地址

https://www.nowcoder.com/test/question/done?tid=10715152&qid=3488#summary

5. flex布局中align-items 和align-content的区别

6. 求各位数字和：利用432/10=>43的特性，得到去一位的数字，不断%10得到每一位。

7. 对行内元素设置margin-top 和margin-bottom是否起作用

不起作用。（需要注意行内元素的替换元素img、input，他们是行内元素，但是可以为其设置宽高，并且margin属性也是对其起作用的，有着类似于Inline-block的行为）

8. 对内联元素设置padding-top和padding-bottom是否会增加它的高度

不会。同上题，要注意行内元素的替换元素，img设置padding-top/bottom是会起作用的。

9.问：如果设置<p>的font-size: 10rem;那么当用户重置或拖拽浏览器窗口时，它的文本会不会受到影响？

答：不会。

rem是css3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

9-11

SMTP ：全称是“Simple Mail Transfer Protocol”，即简单邮件传输协议。它是一组用于从源地址到目的地址传输邮件的规范，通过它来控制邮件的中转方式。SMTP 协议属于 TCP/IP 协议簇，它帮助每台计算机在发送或中转信件时找到下一个目的地。SMTP 服务器就是遵循 SMTP 协议的发送邮件服务器。

POP3：是Post Office Protocol 3的简称，即邮局协议的第3个版本,它规定怎样将个人计算机连接到Internet的邮件服务器和下载电子邮件的电子协议。它是因特网电子邮件的第一个离线协议标准,POP3允许用户从服务器上把邮件存储到本地主机（即自己的计算机）上,同时删除保存在邮件服务器上的邮件，而POP3服务器则是遵循POP3协议的接收邮件服务器，用来接收电子邮件的。

博客中介绍，pop3：从服务器下载到本地；SMTP：发送或者中转邮件。

java/struts2/spring/ant.maven/devops
4. 计算机网络动态路由协议，子网掩码的作用，网络地址划分，各类地址的作用

9-12

1.JS在线编程格式

https://segmentfault.com/a/1190000010715910

2. 《计算机网络》第五版复习笔记

http://blog.csdn.net/hcbbt/article/details/18271491

9-13

1.烽火每年来校招的时间都很早，9月初，在宣讲会的前一天我粗略看了java基础（准备的太晚），笔试有选择题（比较基础）、简答题（较多，涉及java基础，网络TCP/IP，多线程等）、一道字符串反转编程题，两道智力题（如用两个容器分水的问题，很常见），最后一道主观题，总体来说题目不难，比较基础，只是我没有复习到位，但是还是被通知了一面，也有很多同学被刷了，看来刚开始好多人都没有好好复习，我归功于运气。一面有两个面试官，都很好，看我简历上写的是熟悉C++和java,就问我java和C++的区别，还有就是问项目，但我做的java的项目比较久了，我也没有好好准备，总之面的不好，就这样还是被通知了二面，说是人事面，一个HR面2个人，大概就是如何沟通处事，HR面前有一张纸，我看到了自己的成绩，笔试和一面的成绩，都比较低，后来HR跟我说一面的面试官觉得我Java基础一般，建议我转测试，让我等测试的面试通知。但是后来也没有通知了，我的运气到此用完了。不要相信运气，主要靠实力。笔试成绩很重要，总之要早做准备，要不然只能眼睁睁看着机会从眼前流失。一开始我并不是很想进烽火，没有认真对待，但后来发现以自己的实力烽火已经不错了，后面的很多公司还不如烽火，后悔自己没有好好准备，希望大家吸取我的教训。收起

面试官的问题：

问java和C++的区别？

答我第一反应是java没有指针，当然这不是答案，面试宝典都有，不细说了

问java的开发经验？

答我记得不清楚了，没怎么说，自己要好好准备项目。

问写一段代码实现继承和多态

答只写了继承

问项目中有没有用到数据库连接池？

答没有也要说有，这是很常见的题，目前常用的是c3p0连接池，自己百度

问java设计模式还是数据库范式？

7.以下的哪一种颜色格式支持上百万种颜色，但是不支持无损压缩？

A、bmp

B、jpg

C、gif

D、tif

答案：A

http://blog.csdn.net/xq2768637066/article/details/50894608

9-18

手写filter

var arr = [1,2,3];

arr.filter2 = filter2;

var re = arr.filter2(mid);

function filter2(mid){

var hehe = [];

for(var i of this){

var rer = mid(i);

console.log(rer);

if(rer){

console.log(i);

hehe.push(i);

}

console.log(hehe);

}

function mid(z){

if(z<2){return true}

else{return false}

}

2.内存泄漏

http://www.cnblogs.com/libin-1/p/6013490.html

3. 彻底弄懂HTTP缓存机制及原理

http://www.cnblogs.com/chenqf/p/6386163.html

5. 跨域

http://www.cnblogs.com/cndotabestdota/p/7150552.html

6. 美团面经
东西非常杂，每个都是问一个小问题，把还能回忆起来的记录分享一下
js基础（闭包，作用域，es6，this，实现filter，内存泄漏）
css基础（重绘重排，选择器，伪类，继承，居中，布局）
http基础（三次握手，代理，缓存机制，method）
跨域
前后交互的数据
实现响应restful api的路由
遇到的性能优化和解决的问题

作者：Say37
链接：https://www.nowcoder.com/discuss/37841
来源：牛客网

一上来面试官就让我介绍下我做的项目。我介绍了之后，就没有然后了（当时我以为会深问）。

然后就是编程了。

1.经典的柯里化问题。编写一个函数，实现add(2)(3)。

2.作用域问题。

var length = 10;

function fn() {

console.log(this.length);

}

var obj = {

length: 5,

method: function(fn) {

fn();

arguments[0]();

}

};

obj.method(fn, 1);

问会输出什么？这个我回答的不好，但是面试官说(⊙v⊙)嗯，也没给我纠错。哎╮(╯▽╰)╭

3.第三个是输出<body>下面的四个<a>标签对应的索引。这个也总结过，但是写的时候有瑕疵，哎╮(╯▽╰)╭

4.用2到3行写出二维数组变成一维数组的函数。

我的思路是用slice接口把数组中的一位数字切出来，然后拼接concat下一位数字。有好的思路，留言哈

然后编程就结束了。其中最主要的是楼主没用过牛客网上的JavaScript（node 0.12.12）编程过，所以全程就相当于是在纸上写代码。会了就不会犯这么多低级错误了。（磕墙……）

之后问了一些问题。

1.三列布局怎么实现啊，都有哪些方法。

2.flex布局了解吗？

3.最近在看什么新技术？

4.看过哪些博客逛过哪些论坛？

5.怎么学习前端的？

6.你觉得自己还有哪些优点。

作者：Lx15
链接：https://www.nowcoder.com/discuss/37900
来源：牛客网

1. 自我介绍

2. 为什么选择前端

3. 说一下html5 与html4

4. html5 都包括什么，我提到语义化，然后问 em/strong/i 都怎么用的

5. canvas 与svg

6. requestAnimationFrame

7. http 协议的格式

8. base64 的原理

9. 表单上传图片的请求格式是怎样的

10. get post 区别

11. 同源策略

然后没了，，一共24min, 面试官很nice, 第一次打电话我在宿舍，第二次我在电梯，第三次才正式开始，希望nice的面试让过啊。。。。

作者：offer真的来了
链接：https://www.nowcoder.com/discuss/37117
来源：牛客网

2、bootstrap 布局，栅格布局，怎么处理不同设备上的差异

3、http 304 状态码是什么意思？其他状态码？HTTPS

4、ajax跨域，有哪些解决方法，举了几个实例让实现跨域，访问子域算不算跨域等等等

5、一两个简单的算法题（记不清了）

6、求数组中最大数

7、事件委托，点击 ul 中的li 弹出li内容，动态添加li

8、原型链继承： b.prototype =new a() 不对吗？

9、es6 ，异步原因，promise set map等等

10、事件流

11、cookie

12、数组去重

13、项目

9-20

1. http等方面总结http://www.cnblogs.com/haoyijing/p/5898420.html#html11

js实现跨域

9-22

1. css之父写的，前opera CEO 博士论文：层叠样式表
2. React 源码剖析系列－不可思议的 react diff

https://zhuanlan.zhihu.com/p/20346379

3.React源码分析1 -- 框架

http://blog.csdn.net/u013510838/article/details/55669742

3. 单向数据流 flux

她倡导使用flux模式来进行组件间数据传输，这种做法叫unidirectional data flow(单向数据流)，单向数据流的好处是与之前angularJS提出的two-way data binding相比较而言，因为单向，所以各种变化都是可预计、可控制的。不像two-way data binding那样，变化一但复杂起来，大家都互相触发变化，到最后一个地方变了，你根本猜不出来她还会导致其他什么地方跟着一起变。这个需要大量实践才能有所感受，如果你初学，那听听就算了，不必死磕。

4. Virtual dom

这个东西的好处是减少DOM操作，减少DOM操作的目的是提高浏览器的渲染性能

5. Diff算法

6．数据绑定

7. 组件化开发

8.react有什么用？优点和缺点有哪些？

喜欢React的人很多，但是喜欢它的原因都不太一样

比较现实的优点：

能够实现服务器端的渲染，便于搜索引擎优化。这一点要比Backbone, Angular 1.x和Ember早期强

能够很好的和现有的代码结合。React只是MVC中的View层，对于其他的部分并没有硬性要求。意味着很多公司在选择用Angular全部重构和用React部分重构的时候，选择了React部分重构

因为一切都是component，所以代码更加模块化，重用代码更容易

学起来非常容易，几个小时就可以入门

因为强调只从this.props和this.state生成HTML，写起来bug比较少

比较高大上的优点，就是大家在大会上会说的优点：

因为用了virtual dom，所以性能很好

因为强调只从this.props和this.state生成HTML，所以非常的functional programming

缺点：

并不是一个完整的框架，基本都需要加上ReactRouter和Flux才能写大型应用

9-25

1. DNS劫持的现象：你输入的网址是http://www.google.com，出来的是百度的页面。

HTTP劫持的现象：你打开的是知乎的页面，右下角弹出唐老师的不孕不育广告。

时间复杂度

http://www.cnblogs.com/huangbw/p/7398418.html

3. D3.js是一个数据可视化的库，看看他们的DEMO就可以知道，技术基础是SVG。兼容性是IE9+。

　　webgl是HTML5中提出的新技术，是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，关于它的教程可以看看hiwebgl。目前兼容性堪忧

　　three.js是以webgl为基础的库，封装了一些3D渲染需求中重要的工具方法与渲染循环。它的教程同样可以在hiwebgl里面找到。

　　three.js之于webgl，类似于windows版本的虚幻引擎之于D3D。当然，虚幻引擎的能力范围比three.js大得多。d3.js跟上面两者没有关系。

4. 　　这两个引擎各有所长的，具体那个好要看目的是什么。

　　OpenGL经过多年的洗刷，已经成为绘图引擎的标准，OpenGL的绘图质量毋庸置疑，是最高的，OpenGL的编程相对的也会比较复杂，但是上手很简单，OpenGL用来追求完美的绘图精确度，而且通常有各种辅助库可以用来往其他设备上输出数据，比如打印机。

　　DirectX的专为游戏而生，它的绘图精度满足一般游戏的所需，而且DirectX还包含了不少用来在游戏中处理其他数据的辅助库，包括声音数据，输入输出，等等等等。

　　所以，想专精追求绘图，OpenGL是首选，如果要编程效率和其他功能DirectX是首选。

5. 羡辙-着色器-卡通渲染 https://zhuanlan.zhihu.com/p/25595069

http://www.cnblogs.com/wanbo/p/6754066.html图解WebGL&Three.js工作原理

Three.js入门指南https://read.douban.com/ebook/7412854/

9-26. 邮科院被黑

9-27.

1.VPN原理

2. SSH原理与运用（一）：远程登录http://www.ruanyifeng.com/blog/2011/12/ssh_remote_login.html

3.cnpm真的好用！！！

gulp环境中 gulp-sass为何一直安装失败？

https://www.zhihu.com/question/48845226/answer/113193051

4. Gulp 方法

http://www.cnblogs.com/White-Quality/p/5756106.html

首先，gulp的源码里没有任何一部分是定义pipe的。

https://segmentfault.com/q/1010000003861104?sort=created

gulp的pipe方法是来自nodejs stream API的。
gulp本身是由一系列vinyl模块组织起来的。

http://www.ydcss.com/archives/424

6. 计算机工程与应用

http://muchong.com/html/201303/5591922.html

http://muchong.com/bbs/journal_cn.php?view=detail&jid=358

转载于:https://www.cnblogs.com/cndotabestdota/p/7656850.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/190506