gw5700

5700奥义

FE部分

HTML 部分
localStorage 和 cookies
// localStorage、 sessionStorage 与 cookies 的区别
// localStorage 用于多页面通信

FormData
// 上传文件需要用到这个对象

File API
// 预览图片使用




CSS 部分
float
position
display
    flex (用 flexbox froggy 或者阮一峰的博客去学)
水平居中
    inline 的水平居中
    block 的水平居中
垂直居中
    有完整的套路
    父节点为 position: relative
    自己为   position: absolute
            top: 50%
            transform: translateY(-50%)
响应式设计
移动开发
    主要是微信网页开发



JS 部分
值类型与引用类型
//
var a = {
    v: 1
}
var b = a
console.log(b.v)
// 1

a.v = 2
console.log(b.v)
// 2

a = {
    v: 3
}
console.log(b.v)
// 2




// 变量声明提升(这是一个特性)
// 这段代码
console.log(a)
var a = 1
// 相当于
var a
console.log(a)
a = 1


// 所有以 function 函数名() {} 方式定义的函数都相当于提前定义了一遍
// 这段代码
console.log(b())
function b() {
    return 2
}
// 相当于
var b = function() {
    return 2
}
console.log(b())


// 这段代码
console.log(c())
var c = function() {
    return 3
}
// 相当于
var c
console.log(c())
c = function() {
    return 3
}
// 所以 console.log 会报错, 因为 c 在那个时候还不是一个函数, 只是 undefined


// 注意，let 或者 const 声明的变量不具备 变量声明提升 的特性
console.log(d)
let d = 4




// this
//
var x = 0
function test() {
    console.log(this.x)
}
var o = {}
o.x = 1
o.m = test
o.m()
o['m']()
o.m.apply()
// apply 请看 apply bind call this 那节课


// this + arguments
var gua = 'name 001'
var foo = function(){
    // arguments 并不是数组, 只是行为恰好和数组一样, 一般称为奇异数组
    // 这个函数的 this 是 arguments
    console.log(arguments['0']())
    // console.log(arguments[0]())
}

var o = {}
o.gua = 'name 000'
o.func = foo
o.func(function(){
    return this.gua
})

o.func2 = function(){
    arguments.gua = 'gua'
    // 这个函数的 this 是 arguments, 所以输出是 'gua'
    console.log(arguments[0]())
}

o.func2(function(){
    return this.gua
})


// prototype
// 原型链
//
function Foo() {
    this.name = 'a'
}

var f1 = new Foo()
f1.name = 'b'
console.log(f1.name)

var f2 = new Foo()
console.log(f2.name)






arguments
//
(function() {
    return typeof arguments
})()

(function() {
    console.log(arguments)
})(1, 2, 3)

(function(...args) {
    console.log(args)
})(1, 2, 3)



call, apply, bind
// call, apply 和 bind 的区别

setTimeout 和 setInterval
// 两者的区别

setTimeout 与循环结合
// 下面的输出全是 5, 因为引用的是 i 这个变量
// 注意超时时间是 1000
// 引用的 i 可以在函数内部访问到这件事称之为 闭包
for(var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(new Date(), i)
    }, 1000)
}
console.log(new Date(), i)


// 皇帝的闭包问题
// 这根本不是闭包的问题
// 因为 setTimeout 即便第二个参数是 0 也会在循环结束之后才执行函数
// 所以 5 个输出都是 5
for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(new Date(), i)
    }, 0)
}

for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(new Date(), i)
    }, 0)
}

let i = 0
for (; i < 5; i++) {
    setTimeout(function() {
        console.log(new Date(), i)
    }, 0)
}



事件冒泡, 事件捕获, 事件委托
// 讲清楚这三个概念

闭包
// 所谓经典的闭包面试题(上面讲过的皇帝的闭包)
// 使用闭包实现如下程序
// 函数每调用一次，该函数的返回值加 1
var foo = function(){
    var i = 0
    return function(){
        i++
        return i
    }
}
var a = foo()
a()
a()

clone 和 deepClone
// 实现 clone 和 deepClone 函数
// 用 JSON.stringify 和 JSON.parse 实现 deepClone 是一个很有新意的方式
// 具体实现会在 面试大全 里


ajax（可能需要手写原生的 ajax）
// 实现原生的 ajax 函数
// readyState 0 1 2 3 4 各代表什么含义



HTTP 请求方法, 常见状态码, 头部常见字段
// HTTP 有哪些常见请求方法 GET POST PUT PATCH DELETE
// HTTP 常见状态码有哪些 200 301 302 403 404 500 502
// HTTP 头部常见字段有哪些
    Content-Type
    Content-Length


跨域 （jsonp, postMessage, cors, 用服务器(比如 node)转发请求和响应）
// 跨域有哪些常见的解决方式

网络安全: xss, csrf
// xss 和 csrf 的原理是什么

DOM 操作（查找, 添加, 删除, 修改）
// DOM 查找/添加/删除/修改对应的 API 是什么

jQuery 常见 API
// jQuery 常见 API




数据结构
数组
对象
队列
栈
数组、对象、字符串的想换转化
比如 a=1&b=2&c=3 怎样转成对象, 复习基础课程的作业就可以
// 有这样一个 url： http://vip.qq.com/a.java?a=1&b=2&c=3&d=xxx&e
// 写一段 JS 程序将 url 的参数转成对象的形式
{
    a: 1,
    b: 2,
    c: 3,
    d: 'xxx',
    e: '',
}




ES6
ES6 的面试题一般是概念性质的, 所以清楚下面的概念就可以了
let 和 const, 有一个 TDZ （暂时性死区的概念，了解下即可）
箭头函数
解构
剩余参数(扩展符号)
Promise, 可能会附带 async await
class
Set

// 用解构来简化参数列表
var gua = function({name, height}){
    console.log(name, height)
}
var gua2 = function(info){
    console.log(info.name, info.height)
}

var info = {
    name: 'gua',
    height: 169,
}

gua(info)


React
// React 也是概念性质的题目为主, 基本上不会考察写代码
React Angular 这 2 个一般只会一个就可以的, 所以这里只说 React 的情况
react 的广告
virtual dom
diff 算法的原理
state 和 props
组件生命周期
组件通信：父组件 -> 子组件, 子组件 -> 父组件, A 组件 -> B 组件
React Router（react 路由）
Redux/MobX
react ui 有两套很流行: Material UI 和 Ant Design, 国内流行的是 Ant Design

职业规划

写简历
    个人基本信息(姓名 邮箱 手机)
    技能
    项目
    教育经历
    工作经验


投简历
    拉勾(假公司比较多, 100 中 5 差不多, 用小号投)
    boss 直聘, 野鸡比较多(100 中 5)
    智联/51job(小城市)
    原则是海投海面 不要有感情
    注意不要被培训公司诈骗


面试
    记录面试情况, 有问题来找我反馈
    反馈的时候要提供以下信息
        1, 所在城市
        2, 投递的简历数量
        3, 面试次数
        4, 面试遇到的问题



工作
1, 工作之后的规划
    1) 规划跳槽, 从第一天起
        规划好自己半年/一年后的状态
        规划好达到那个状态需要做的计划
        不要对公司/老板有盲目的感恩之心，互利双赢才能长久
        要以自己的规划为主
    2) 要设定职业规划, 探索职业方向
        要照顾到自己的喜好, 做喜欢的事情
        要保护好自己的热情(做喜欢的事情, 尽量避免被公司业务污染)
            要符合自己的意义
            公务员的工作有意义，但是你不认同也会做着痛苦
    3) 认清自己的地位
        你做了自己的选择，并不只是运气好
        你只是一个流水线工人
        一个公司相当于一个作坊, 由 前端/后端/设计/产品/测试 合作完成一个东西
            资深工人
            多工种工人
    4) 个人增值的方式
        把某个技术做精, 变成专家级流水工
            坏处就是万一被淘汰就跪了
            还有就是鸡蛋放到一个篮子里面了
            选择的空间也少, 比如 nokia 和 moto 被裁员的员工
            为了避免这个窘况, 大家要做流行性高/通用性强的方向
                ios 安卓 就不行
                web 更长青
                编程能力是最重要的，切换语言很简单
                市场如果有需求，一夜之间千万 xx 语言码农就出来了
        横跨多个领域, 做复合型掏粪工
            比如全栈, 就是典型的复合型掏粪工( node.js )
                掏得越多越好 越快越好
                node 是趋势 前端没理由去接触别的语言
            比如技术和其他领域的结合
                软件 + 医疗
                互联网 +


2, 学习的计划
    合理正确的规划方式
        时间不要贪多, 以自己能接受为前提, 从小到大慢慢提高
            计划太多学不完
            学不完有负罪感
            然后就炸了
            所以要慢慢来，遵循客观规律
            不要妄自菲薄（我自控力差，我做不好事）
        目标要细化, 最好是把事情分解为 20 分钟甚至 10 分钟能解决的程度
            目标大了就会拖，拖了就做不完
            把目标写下来
            一条条做
        要合理看待不能完成的任务, 要有标准化的预案
            比如超过设定的极限时间不能解决就提问
    避免买包出斧心理
        买包就是试图付出 xx 资源来得到 yy 好处（无视客观规律）
        出斧就是情绪驱动，不按照客观规律做事
        不要试图通过去学一些奇怪的东西来提高能力
            我要看原版书，我看原版书，得到原汁原味的知识
                有些东西英语就是英语，用中文是无法表达的
            我要学 java
            我要学人工智能
            我要学底层（什么是底层？）
        不要被情绪驱动, 要按照计划来做事/学习
            不能说今晚做不出就不睡
            不能说我一定要自己想出来才是我的，该问就问


3, 前端知识点的聚合
    react grunt gulp webpack babel es6 less sass 这些都是花哨的名词而已
        都可以通过 阮一峰 的网站来了解
        仅限于阮一峰的网站中介绍的内容，其他一概忽略
    最重要的还是 js 编程能力
        比如不断地练习写程序来提高
        比如通过阅读《代码大全》这样的经典书籍来提高
            这本书可以随机读自己喜欢的章节
        编程能力在不同语言之间是互通的
    其次是 html 和 css 的运用能力
        多写
        多抄
        多看书
    任何工具都只是帮助你更好更方便地构建网站, 本质还是写网页


4, 其他
    倍速视频
        节约时间
        集中精力
    论坛提问的表格具有很高的价值, 要善加利用
        比提问的智慧简单很多
        是长期实践中归纳总结出来的方法
    怎样选择要读的书(不限于技术书)
        绝大部分书都是垃圾
        即便是好书, 大部分内容很可能也没什么用
        粗读, 不要精读
        绝不要去读原版
        这些是我长期实践的总结，仅供参考
    更多的训练项目
        electron 视频播放器
        天气应用
        计算器
        浏览器插件（GIF ZhiHu）
        爬虫
        爬虫结果的图表化数据分析（数据可视化、数据分析）
        markdown 编辑器
        美味便签
        小游戏(phaser.js 网站上学习)
    HTTP 协议(主要用在 AJAX 上)
        用到再学
    改键位和快捷键
        https://zhuanlan.zhihu.com/p/24020977
    KISS keep it simple stupid 要把事情做得简单(一个函数简短 并且完成一个功能)
    DRY dont repeat yourself 不要写重复代码
*/