工作第一年成长计划篇

[linshuizhaoying]

基础 框架 所有相关的知识点归拢于此

第一期将只涉及校招方面的基础知识点(虽然已经令人绝望) 之后的将陆续以专题，以实践方面开展。

知识点可以认领的时候自己将其扩展。尽量越多越好。

Ecmascript

函数声明和函数定义的区别

认领者: 钱钱钱

截止日期: 17-10-25

建议扩充: 一些声明顺序的题

• [x] 是否完成

setTimeout与window.requestAnimationFrame相比有什么区别.JavaScript内部定时器和事件队列的原理

认领者: 钱钱钱

截止日期: 17-10-25

建议扩充: 原理图。

• [x] 是否完成

看过koa源码吗？知道怎么实现中间件机制的吗。koa2和koa1有什么区别知道吗

认领者: 钱钱钱

截止日期: 17-10-27

建议扩充: 源码剖析。

• [x] 是否完成

现在有一个下拉加载更多的列表，当加载的次数非常多时，页面的dom结构会变得非常复杂，会不会带来性能问题？怎么优化？

认领者:

截止日期:

建议扩充: 代码示例。上拉加载实现

• [x] 是否完成

写N个从服务器跨域取值的小例子

认领者:

deadline:

建议扩充: 代码示例

• [ ] 是否完成

说说electron的原理

认领者:

deadline:

建议扩充: 原理图。

• [x] 是否完成

说说RN的原理

认领者:

deadline:

建议扩充: 原理图。实际例子。

• [x] 是否完成

前端可以改变cookie吗？怎么改变？如何实现cookie跨域访问

认领者:

deadline:

建议扩充: 代码示例

• [x] 是否完成

实现一个对cookie的get，del方法（要求可以出现a=1；a=2这样的重复赋值）

认领者:

deadline:

建议扩充: 代码示例

• [x] 是否完成

防止csrf的几种方法.Csrf怎么防范,验证了origin和refer是否能完全避免?

认领者:

deadline:

建议扩充: 原理图。实际例子

• [x] 是否完成

如何设计一个订阅者发布者的基类

相关：

手写给出一个工厂方法实现
手写给出一个策略模式实现
手写给出一个装饰者模式实现

认领者:

deadline:

建议扩充: 代码示例。设计模式总结。

• [x] 是否完成

跨域方式（比如JSONP），而JSONP也有它对应的缺点，只能支持GET请求，只能解决跨域的HTTP请求。JSONP的原理，其他的跨域解决方案。

相关：

jsonp的可以使用POST方法吗？如果要传递的参数超过了get的最大长度，要怎么办？还有其他哪些跨域方法？

认领者:

deadline:

建议扩充: 实际例子。代码示例

• [x] 是否完成

说一说map，map存储原理

认领者:

deadline:

建议扩充: 原理图。

• [x] 是否完成

说一说hash

认领者:

deadline:

建议扩充: 原理图。实际例子

• [x] 是否完成

实现一个下载文件进度条，显示当前下载进度。

认领者:

deadline:

建议扩充: 实际例子。进度条的几种写法。

• [x] 是否完成

异步原理,macrotask和microtask

(异步原理,macrotask和microtask)[https://segmentfault.com/a/1190000010913949]

认领者:

deadline:

建议扩充: 原理图。实际例子

• [x] 是否完成

webpack刷新原理.webpack本地开发怎么解决跨域的

认领者:

deadline:

建议扩充: 原理图。实际例子

• [x] 是否完成

server push和websocket

认领者:

deadline:

建议扩充: 原理图。实际例子

• [ ] 是否完成

url长度为什么受限制

认领者: CIN

deadline: 17-11-26

建议扩充: 原理图。实际例子

• [x] 是否完成

XHR如何传递二进制流

认领者:

deadline:

建议扩充: 原理图。实际例子

• [x] 是否完成

vue构建过程原理,具体流程

认领者:

deadline:

建议扩充: 原理图。实际例子

• [ ] 是否完成

一个promise有多个then，如果第一个then出错，后面的还会执行吗，如何捕获异常。 如果第一个then出错了，我还想要后面的继续执行，应该怎么做？promise的catch方法回调函数出错会发生什么

认领者:

deadline:

建议扩充: 原理图。实际例子。示例代码

• [x] 是否完成

组件热加载方案

认领者:

deadline:

建议扩充: 原理图。实际例子。示例代码

• [x] 是否完成

为什么使用websocket？ websocket是怎么连接的，一定需要通过http协议吗？ 短轮询、commet、长轮训都介绍一下。各有什么优缺点。

认领者:

deadline:

建议扩充: 原理图。实际例子

• [x] 是否完成

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

认领者:

deadline:

建议扩充: 原理图。实际例子。浏览器加载原理。每个阶段做什么。每个阶段发生的事件。

• [x] 是否完成

dropdown的效果，根据服务器返回的数据来更新dropdown列表的内容，如何实现，并且对于请求是否需要进行延迟操作，也就是debounce，手写了debounce的代码。

认领者:

deadline:

建议扩充: 示例代码。

• [x] 是否完成

设计一个轮播图效果，你会如何设计图片切换。图片轮播只给三个标签加载100张图片怎么做

认领者:

deadline:

建议扩充: 原理图。实际例子。纯CSS实现轮播。 3D轮播

• [x] 是否完成

前端PV和UV统计的实现

认领者:

deadline:

建议扩充: 原理图。实际例子

• [x] 是否完成

node.js microtask和task

认领者:

deadline:

建议扩充: 原理图。实际例子

• [x] 是否完成

jQuery的delegate事件代理，写出 polyfill

认领者:

deadline:

建议扩充: 原理图。实际例子

• [x] 是否完成

iframe加载完后，将高度变为指定的px

认领者:

deadline:

建议扩充: 原理图。实际例子

• [x] 是否完成

闭包的内部实现

认领者:

deadline:

建议扩充: 原理图。示例代码

• [x] 是否完成

实现bind方法，写出 polyfill(考察apply、原型链)

认领者: 墨白

deadline: 17-10-29

建议扩充: 原理图。示例代码

• [x] 是否完成

用原生JS实现一个类似百度搜索框的自动完成控件，比如候选结果集arr=['aaa','abc','acc','dda',...]，用户输入'a'，下拉列表会出现以字母 a 开头的项'aaa', 'abc', 'acc'

要求：

1. 鼠标或键盘可以选中候选结果到输入框

2. 能做好兼容性有加分

3. 用原生 js 实现

(兼容下IE、面向对象的设计、输入延时、请求返回的顺序、字符串保存DOM，避免重复 DOM 插入造成的性能问题)

认领者:

deadline:

建议扩充: 设计思路图。示例代码

• [ ] 是否完成

Symbol，写一个应用实例，并说出它的其他应用场景

认领者:

deadline:

建议扩充: 原理图。示例代码

• [x] 是否完成

service worker。实际应用例子

认领者:

deadline:

建议扩充: 原理图。示例代码

• [x] 是否完成

express中间件为什么要重写res。koa为什么可以直接next()

认领者:

deadline:

建议扩充: 原理图。示例代码。两个框架源码剖析。原理剖析。

• [x] 是否完成

React特性、virtual dom、diff 、合成事件、调和等原理

认领者: 钱钱钱

deadline: 2017-10-27

建议扩充: 原理图。示例代码

• [x] 是否完成

为啥要给列表类组件设个key?

认领者:

deadline:

建议扩充: 原理图。示例代码。同理VUE是如何实现的。

• [x] 是否完成

Redux 是如何管理React

认领者:

deadline:

建议扩充: 原理图。示例代码

• [x] 是否完成

Redux 有哪些优缺点

认领者:

deadline:

建议扩充: 原理图。示例代码

• [x] 是否完成

Redux-saga，它比thunk、promise有啥好处？

认领者:

deadline:

建议扩充: 原理图。示例代码

• [ ] 是否完成

React、React-Router、Redux、Vue的大致的实现原理

认领者:

deadline:

建议扩充: 原理图。示例代码

• [ ] 是否完成

HOC实现组件的封装，antd是如何实现组件的封装的，React-Redux的HOC的实现，connect函数的实现

认领者:

deadline:

建议扩充: 原理图。示例代码

• [x] 是否完成

Css

css管理页面布局的方法？

认领者: 夏雨不打伞

deadline: 17-10-22

建议扩充: css的一些新属性

• [ ] 是否完成

栅格怎么实现的

认领者: 夏雨不打伞

deadline: 17-10-22

建议扩充: 原理图。示例代码

• [x] 是否完成

sass跟less的区别

认领者:

deadline:

建议扩充: 原理图。示例代码。实际项目中用法。环境配置。

• [x] 是否完成

css盒模型。ie盒模型和一般盒模型的区别

认领者:

deadline:

建议扩充: 原理图。示例代码。常见IE hack

• [x] 是否完成

怎样获得页面上所有的dom节点（*通配符）

认领者:

deadline:

建议扩充: 原理图。示例代码。js如何做到

• [x] 是否完成

position有几个属性，默认值是什么

相关：

css3动画keyframe可以使用哪些属性

认领者:鲤鱼

deadline: 17-10-29

建议扩充: 原理图。示例代码。其他常用的属性的默认值和属性

• [x] 是否完成

CSS3实现卡片翻转?

认领者: 鲤鱼

deadline: 17-10-29

建议扩充: 原理图。示例代码

• [x] 是否完成

选择器权值

认领者: 仙人掌

deadline: 17-10-29

建议扩充: 原理图。

• [x] 是否完成

移动端适配的几种方案

认领者:

deadline:

建议扩充: 原理图。通用方案整理。

• [x] 是否完成

请解释*{box-sizing:border-box;}的作用，并说明使用它的好处

认领者:

deadline:

建议扩充: 原理图。reset.css和normalize.css和Reboot.css 对比三者

Html

计算机基础

http协议了解哪些 HTTP请求报文

认领者:

deadline:

建议扩充: 原理图。常见前端HTTP问题整理。

• [x] 是否完成

304和200的区别是什么。 状态码

认领者:

deadline:

建议扩充: 原理图。实际例子。其余状态码剖析。

• [x] 是否完成

说一下强缓存和协商缓存？ 浏览器的缓存机制

认领者:

deadline:

建议扩充: 原理图。

• [x] 是否完成

浏览器解析过程

认领者:

deadline:

建议扩充: 原理图。

• [x] 是否完成

浏览器不同内核之间的区别

认领者:

deadline:

建议扩充: 原理图。

• [x] 是否完成

Webpack 打包出来的文件如何拆包？

HTTPS 服务端和客户端连接的原理？（SSL 验证原理）

手写代码找出二叉树节点的最长距离？ 手写代码实现链表的逆序？ 手写代码找出数组中的最长递增序列？（动态规划）

CSS Flex 弹性布局的应用场景

React 组件的生命周期、通信方式 手写实现 React 高阶组件 手写实现一个 Redux 中的 reducer (state, action) => newState React 受控组件和非受控组件的区别

Webpack 常用的插件

箭头函数的应用场景 ES6 的 Class 继承和 ES5 有什么不同？ ES6 的模块化解决了哪些问题？如何进行编译的？

Async/Await 的使用场景

Iterator（迭代器）、Generator（生成器）的用法？

假设有一个列表的数据，React 如何更快的加载数据？（优化方法）

说出以下代码的输出结果：

console.log(null == undefined) // output console.log(null === undefined) // output console.log(typeof(new Object()) == typeof(null)) // output console.log(new Number('1') == 1) // output console.log(new Number('1') === 1) // output console.log(new Object('1') == 1) // output console.log(new Object('1') === 1) // output console.log(new Boolean() == false) // output console.log(new Boolean() === true) // output

var a = 1 if (true) { console.log(a) // output var a = 2 var b = 3 console.log(b) // output } console.log(a) // output console.log(b) // output b = 4

var a = 1 function a () {} console.log(a) // output

var a = 1 function fun(a, b) { a = 2 arguments[0] = 3 arguments[1] = 1 return a + b } console.log(fun(0, 0)) // output console.log(a) // output

for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i) // output }, 0) } console.log(i) // output

function A() { this.num1 = 1 } A.prototype.num2 = 2 function B() { this.num1 = 3 } B.prototype = new A() var b1 = new B() console.log(b1.num1) // output console.log(b1.num2) // output var b2 = B() console.log(b2.num1) // output console.log(b2.num2) // output

手写代码 判断是否是浏览器环境

sessionid的生成规则？

手写一个NodeJS的fs.readFile方法的Promise封装。 手写一个Ajax的Promise封装。

从一个文件中读取另外一个文件的名字，然后再读取另外一个文件的内容，用之前写的fs.readFile的Promise来进行实现，用catch来进行reject的捕获

不使用defineProperty，还可以使用什么实现双向绑定

[linshuizhaoying]

1.说一下你熟悉的设计模式 2.说一下你理解的模块机制 3.MVVM原理 4.最熟悉的框架路由机制 5.状态管理 6.统计字符串中单词出现次数

1.说一下你熟悉的设计模式 我最熟悉的设计模式：工厂模式（ES5），组件设计模式（ES6） 工厂模式（ES5，基于prototype。此例中基类Base，子类Factory) var Factory = function () { if(!(this instanceof Factory)){ return new Factory(); } } Factory.prototype = Object.assign(new Base(), { version: '0.0.1', defaultOption:{ title:'标题' }, init:function (cfg) { this.title = cfg.title || ''; this.currentOption = Object.assign(this.defaultOption,{ //... }) }, render: function () { var option = this.currentOption; this.chart.setOption(option); }, showTitle: function () { this._showTitle(); } }) 组件设计模式（ES6，基于class，方便继承和初始化，也是React组件的推荐写法，我比较喜欢。此例中父类Compnent，子类Retrive） class Retrive extends Component { constructor (props) { super(props); this.state = { name:'' }; this.getRemoteData = this.getRemoteData.bind(this); } getRemoteData (data) { this.state.retriveResult = data; } render(){ return (

查询

    );
}

} 2.说一下你理解的模块机制 AMD: 异步模块加载规范。 a.js，定义一个依赖jQuery和echrts的组件。 define(['jquery', 'echarts'], function ($, echarts) { var AMD = function(){} AMD.prototype = { title:'', foo: function(){}//AMD类或者继承AMD类的子类的属性 } function bar(){}//返回，公共属性 function baz(){} //未返回，私有属性 return { main:AMD, bar: bar } });

如果b.js依赖a.js，可以这样 define(['./a'], function (a) { //调用构造函数,foo var instance_amd = new a.main(); instance_amd.foo() //调用bar a.bar() }); ES6 modules: 和python的包机制很类似，导入import，导出export。 1.场景：vue，react推荐机制，需要babel转义成es5以兼容浏览器。 2.关于import...(from...) ①.import...from...的from命令后面可以跟很多路径格式，若只给出vue，axios这样的包名，则会自动到node_modules中加载；若给出相对路径及文件前缀，则到指定位置寻找。 ②.可以加载各种各样的文件：.js、.vue、.less等等。 ③.可以省略掉from直接引入。 3.关于export ①.导出的可以是对象，表达式，函数，类 ②.导出是为了让别人导入 4.言外话:使用es6的话，有一个特别好的规范去遵守，airbnb的es6规范（https://github.com/airbnb/javascript）

CommonJS：nodejs中使用较多，关键词是require，没写过node包，只引用过别人的模块，所以内部实现原理不是很清楚。 3.MVVM原理 MVVM是一种软件架构模式，MVVM有助于前后端分离。 View:视图层，粗略理解为DOM。 Model:与数据库对应的model，一般为json格式，作为req的body通过http(s)与数据库实现通信。 ViewModel:View与Model通过ViewModel实现双向绑定。 核心是提供对View和ViewModel的双向数据绑定，这样使得ViewModel的改变View立即变化，MVVM在前端的实现有：angular，vue，react。 vue中的常用数据双向绑定。 view:{{message}} viewModel v-model="message" model:message

{{ message }}

var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } }) 单文件组件中的话，就多了一个用html5的template标签将view和viewModel包裹起来，model部分停留在script标签部分。