fe-star / 2017.8 Goto Github PK

基础类（10懂得5）

• 如何实现一个三栏布局，要求两边固定宽度，中间自适应
• 说一下自己对 Javascript 变量提升的理解
• 下面代码会打印什么？为什么?

function A() {
    this.name = 'Daniel'
}
A.prototype.test = function () {
    setTimeout(function () {
        console.log(this.name)
    }, 1000)
}
var a = new A()
a.test()

• setTimeout 和 setInterval 有什么差别？
• 如何实现类似 jQuery 的链式调用？
• Yslow 和 PageSpeed 你知道怎么用吗？你记得其中多少规则？
• HTTP请求头中，状态码分别是：200、301、302、304 分别代表什么意思？
• PNG 和 JPG 有什么差别？
• 事件冒泡和事件捕获有什么区别？
• 你遇到过兼容性问题吗？最令你影响深刻的兼容问题是什么？

工程类（6懂得2）

• 你使用过构建工具来编译前端代码吗？你使用过 Grunt、Gulp、webpack、FIS 其中之一吗？
• CDN是什么？为什么能资源加速？
• 你使用过React、Vue、Angular其中之一吗？
• 你知道前端怎么样能拿到DNS的查询时间吗？
• 你能拿 localStorage 来做些什么？
• 设计一个广告系统，类似广告联盟，如何对没有登录态的用户做跟踪？

鉴于大家反馈，我们修改一下，大致上是一半时间讲知识，一半时间做练习。练习尽量提早做吧，上课做应该不完全来得及。

在这里说明一下，我们课程重要的不是上课这三小时，三小时最多只能带你入门。更多的东西要大家看文档，和做练习来思考。我们希望的方式是：“尽可能的模拟真实工作场景，让大家在不断的解决问题过程中提高”。我认为这比讲知识点来的实际，深刻，有意义。

比如我们第一课的设计内容就是一定要所有人学会测试，因为这是之后模拟真实工作场景的基础。这里面我们大纲标明的内容是：

• 学会自己使用 mocha 搭建测试环境
• 学会使用 assert 和 should.js，自己体验这里面的差异
• 学会使用 CI 进行集成测试
• 学会使用 Karma 做真实浏览器测试

可能有同学觉得内容少了，但我真正担心的是如果课上不实操，很多同学可能下课就不会去碰了。而且，有心的话，其实很多东西可以挖掘。

比如：

• 在你的场景，你会对哪些东西做测试？为什么？你要解决什么问题？
• awesome-node 里面那么多测试框架，排在前列的 ava、mocha、tap 有什么差别？
• 对于你的场景而言 ava、mocha、tap 你会选择哪个作为你的测试框架？为什么？
• assert 和 should.js 其实是 TDD 和 BDD 的差别，那 TDD 和 BDD 差别在哪里？对于你的场景而言你会选择哪个库来做测试？
• should.js 是如何做到能够在值后面.should的？
• 我们可以用 CI 来做什么别的事情？
• karma 的实现原理是什么？他如何做到把浏览器的测试结果同步给 Node 的？

有发现什么吗？对的，要不就是深入原理，要不就是在自己的场景为了解决什么问题，要怎么选择？

前者需要大家花时间去研究实现细节，这在三小时是讲不完的，因为实在太多东西了。

后者是一个言之有理即可的问题，没有唯一答案，甚至没有正确答案。

请记住，知识点，不是中级前端或高级前端和初级前端的差距，真正的差距是：能根据当前问题，给出多种方案，并能根据问题所处的场景，找出当前最佳的解。这个解只要言之有理即可。

最后，在前端目前的环境来说，会写测试用例，会自己整套CI环境，已经是非常加分的了= =

本周大纲上主要内容是：

• 复习一下this
• 学习AJAX模型，要弄清楚所有 readyState
• 同源策略以及为什么需要同源策略，比如，AJAX为什么需要同源策略大家记得吗？
• 熟知跨域5种前端解决方案的实现，能根据其实现原理在合适的场景作出选择
• 弄清楚ES6和ES5中的继承
• 了解回调地狱以及弄清Promise怎么用，如何做到链式调用

超纲内容思考：

• Koa 入门
• Egg 入门
• 分别用 Koa 和 Egg 搭建一个 Hello world 服务感受一下差别
• 洋葱模型以及洋葱模型对比connect之类的中间件模型好在哪里？

作业内容：

• 随便给你一个新库，能不能快速学会使用，这次主要使用tapable，因为之后讲webpack的时候就会相对简单些
• 怎么利用插件机制把代码分离干净，让核心足够简单，新加功能很容易利用插件机制来添加

大纲内容

• Stream 用法
• Generator 用法
• async function 用法
• RxJS 体验
• AMD & CMD 的差别
• CommonJS
• 加载器基本原理

超纲内容

• 尝试一下写一个 gulp 插件
• 自己写一个加载器

本周作业不需要交，但是期望大家有时间做一下，可以扩展一下知识面，记得做homework3，我等了好久了～～

• 尝试使用 grep 来分析log
• 在云上搭一个badjs应用来使用，可参考腾讯云 Badjs 镜像使用入门

建议大家读一下这个文章，工作中其实不会遇到，但对自己Javascript的理解有帮助。

https://github.com/denysdovhan/wtfjs

应该会长期有些补课，3.4日晚上8点-9点有时间的同学请回复一下。应该会和新的一期同学一起上～