知识总结

[foxlele2014]

总得做点总结，以及下一步的准备。是不是？

[foxlele2014]

markdown

Mou

Overview

Mou, the missing Markdown editor for web developers.

Syntax

Strong and Emphasize

strong or strong ( Cmd + B )

emphasize or emphasize ( Cmd + I )

Sometimes I want a lot of text to be bold.
Like, seriously, a LOT of text

Blockquotes

Right angle brackets > are used for block quotes.

Links and Email

An email example@example.com link.

Simple inline link http://chenluois.com, another inline link Smaller, one more inline link with title Resize.

A reference style link. Input id, then anywhere in the doc, define the link with corresponding id:

Titles ( or called tool tips ) in the links are optional.

Images

An inline image , title is optional.

A reference style image.

Inline code and Block code

Inline code are surround by backtick key. To create a block code:

Indent each line by at least 1 tab, or 4 spaces.
var Mou = exactlyTheAppIwant; 

Ordered Lists

Ordered lists are created using "1." + Space:

1. Ordered list item
2. Ordered list item
3. Ordered list item

Unordered Lists

Unordered list are created using "*" + Space:

• Unordered list item
• Unordered list item
• Unordered list item

Or using "-" + Space:

• Unordered list item
• Unordered list item
• Unordered list item

Hard Linebreak

End a line with two or more spaces will create a hard linebreak, called <br /> in HTML. ( Control + Return )
Above line ended with 2 spaces.

Horizontal Rules

Three or more asterisks or dashes:

---

---

---

Headers

Setext-style:

This is H1

This is H2

atx-style:

This is H1

This is H2

This is H3

This is H4

This is H5

This is H6

Extra Syntax

Footnotes

Footnotes work mostly like reference-style links. A footnote is made of two things: a marker in the text that will become a superscript number; a footnote definition that will be placed in a list of footnotes at the end of the document. A footnote looks like this:

That's some text with a footnote.¹

Strikethrough

Wrap with 2 tilde characters:

Strikethrough

Fenced Code Blocks

Start with a line containing 3 or more backticks, and ends with the first line with the same number of backticks:

Fenced code blocks are like Stardard Markdown’s regular code
blocks, except that they’re not indented and instead rely on
a start and end fence lines to delimit the code block.

Tables

A simple table looks like this:

First Header	Second Header	Third Header
Content Cell	Content Cell	Content Cell
Content Cell	Content Cell	Content Cell

If you wish, you can add a leading and tailing pipe to each line of the table:

First Header	Second Header	Third Header
Content Cell	Content Cell	Content Cell
Content Cell	Content Cell	Content Cell

Specify alignment for each column by adding colons to separator lines:

First Header	Second Header	Third Header
Left	Center	Right
Left	Center	Right

Shortcuts

View

• Toggle live preview: Shift + Cmd + I
• Toggle Words Counter: Shift + Cmd + W
• Toggle Transparent: Shift + Cmd + T
• Toggle Floating: Shift + Cmd + F
• Left/Right = 1/1: Cmd + 0
• Left/Right = 3/1: Cmd + +
• Left/Right = 1/3: Cmd + -
• Toggle Writing orientation: Cmd + L
• Toggle fullscreen: Control + Cmd + F

Actions

• Copy HTML: Option + Cmd + C
• Strong: Select text, Cmd + B
• Emphasize: Select text, Cmd + I
• Inline Code: Select text, Cmd + K
• Strikethrough: Select text, Cmd + U
• Link: Select text, Control + Shift + L
• Image: Select text, Control + Shift + I
• Select Word: Control + Option + W
• Select Line: Shift + Cmd + L
• Select All: Cmd + A
• Deselect All: Cmd + D
• Convert to Uppercase: Select text, Control + U
• Convert to Lowercase: Select text, Control + Shift + U
• Convert to Titlecase: Select text, Control + Option + U
• Convert to List: Select lines, Control + L
• Convert to Blockquote: Select lines, Control + Q
• Convert to H1: Cmd + 1
• Convert to H2: Cmd + 2
• Convert to H3: Cmd + 3
• Convert to H4: Cmd + 4
• Convert to H5: Cmd + 5
• Convert to H6: Cmd + 6
• Convert Spaces to Tabs: Control + [
• Convert Tabs to Spaces: Control + ]
• Insert Current Date: Control + Shift + 1
• Insert Current Time: Control + Shift + 2
• Insert entity <: Control + Shift + ,
• Insert entity >: Control + Shift + .
• Insert entity &: Control + Shift + 7
• Insert entity Space: Control + Shift + Space
• Insert Scriptogr.am Header: Control + Shift + G
• Shift Line Left: Select lines, Cmd + [
• Shift Line Right: Select lines, Cmd + ]
• New Line: Cmd + Return
• Comment: Cmd + /
• Hard Linebreak: Control + Return

Edit

• Auto complete current word: Esc
• Find: Cmd + F
• Close find bar: Esc

Post

• Post on Scriptogr.am: Control + Shift + S
• Post on Tumblr: Control + Shift + T

Export

• Export HTML: Option + Cmd + E
• Export PDF: Option + Cmd + P

And more?

Don't forget to check Preferences, lots of useful options are there.

Follow @Mou on Twitter for the latest news.

For feedback, use the menu Help - Send Feedback

Footnotes

1. And that's the footnote. ↩

[foxlele2014]

tips

使用#号进行标题的划分（h1~h6）,#和内容用一个空格隔开（标准写法）

• ddd

aaaa

aaaa

aaaaaa

---

---

---

---

aaaa

ceshiceshi

ceshicheshi

ceshiceshiceshi

function test() {
	return 1;
}
//dddd

test1	test 2
shenme	shenme

表头1	表头2
Content Cell	Content Cell
Content Cell	Content Cell

表格可以指定对齐方式

左对齐 | 居中  | 右对齐 |

:------------ |:---------------:| -----:|
col 3 is | some wordy text | $1600 |
col 2 is | centered | $12 |
zebra stripes | are neat | $1 |

为了美观，可以使用空格对齐不同行的单元格，并在左右两侧都使用 | 来标记单元格边界：

name	age
LearnShare	12
Mike	32

ref

Markdown

---

基本过了一遍大概知道了用法。平时可以多熟练下就ok了。

[foxlele2014]

HTTP

http学习

[foxlele2014]

CSS

1.css module
react 中使用css module
它是如何做到让css本地化的，难道只是它对class name进行了重新的命名编码吗？？？
css module 介绍
查了下这篇，让它本地化即拥有局部作用域的方法就是产生独一无二的class 名字= =。
2、styled component
定义带基础样式的组件 styled
自定义样式props
以及继承之后再定义特殊的
有点function css的感觉

3、原子css
这个有点像回来以前学习bootstrap 的感觉，就是定义了一堆基础的class，
用到哪个就要查找一下表。
不喜欢这个。

[foxlele2014]

JS

[foxlele2014]

node

node知识记录

• .on addListener
• .emit dispatch event

[foxlele2014]

GIT

git知识记录，使用命令行主要是为了熟悉原理，熟悉了再使用sourcetree过一遍原理

[foxlele2014]

webpack

webpack配置了解，能了解下原理就更好了

1.happypack

[foxlele2014]

babel 原理

babel原理
稍微简单的介绍

[foxlele2014]

抓包工具

wireshark、fiddler

看了下wireshark的一本书，发现wireshark真的好强大。感觉配合http权威指南、之前网络的课本一起食用效果会超级棒。有种实践在真实事件身上一样。

fiddler真的很好用。（当然也得推荐调试接口时，postman，这个也很好用啊，）
这里总结下用法：

[foxlele2014]

part1

• 大概了解http头部、请求提之类的。
• 大概了解了webpack的配置
• markdown能使用常用的
• git能使用命令行操作，不过有些命令依旧不太熟悉，不过暂时不影响工作。

[foxlele2014]

part2（20171204~20171215）

• 查阅其他资料总结复习http，补漏。
• webpack插件编写及实践应用
• markdown编写文档。（练手）
• 继续熟悉git常用命令（顺便可以了解下原理）

[foxlele2014]

资料

资料大全

[foxlele2014]

part2失败。未按时完成。（主要在webpack这方面还是不能独自写插件，对于理解它的各种event还是好复杂，不懂什么时候要再哪个event里操作。）简单的很普通的配置还是很简单的，都差不多。

[foxlele2014]

part3（20180101~20180115）

• 看两本js的书籍（js精粹、js设计模式）
• 看react-redux的书籍（之前看了4章，我觉得我得重新再开始看）
• electron来搭建项目（主要是为了熟练react、redux、react-router、webpack的使用和原理）

[foxlele2014]

part3失败= =。每个都失败也是很伤感。

[foxlele2014]

part4（20180115~20180214）

• Q&A里的问题过一遍咯~（还剩几个未x的）
• 再看一遍es6的文档
• part3 的项目实现以及加上尝试自动化测试吧

[foxlele2014]

面试问题收集

111
222
333 这个比较有营养

1.算法问题（手写如排序，去重，查找的算法）
2.react配合redux的工作的流程。
3.http连接的过程，以及一些状态码，cookie的作用，http是无状态协议，它是如何保持登陆状态等。以及缓存，重形象，https
4.数据结构，如何用一个数据结构描述一个关系（如描述一个学校，有多个学院，有多个年纪，多个班级，以及每个学生，还有各种社团。然后根据这个数据结构，统计出xxx社团在每个年级，每个学院，每个班的情况）
5.跨域问题（这个问题一般是考察开发的时候如何和后端联调。因为之前工作，虽然是前后端分离，但不是纯粹的分离，部署还是和后端是一块的，只是分为web端，service端，还有client端。所以都直接在本机环境装了nginx，php，所以有对应的服务，还可以搭建本地数据库。
所以这里可以自己弄一个集成环境的docker镜像，这样就可以不用每个人都重复一遍搭建环境的操作了。）mock数据，还可以提供node作为中间层，除了使用mockjs，还可以在请求的时候模拟请求，如提供一个mock的文件夹，对应里边存放了每个接口返回的json数据，然后在请求的统一处理函数时，判断是否是出于mock环境下，是的话，就请求本地的mock文件夹的数据，当然需要有一个配置mock：true的入口。）还有就是当调用公司的第三方登陆时，这个也需要考虑跨域。之前开发的时候遇到过。还有代理（使用代理做一层转发，还有访问的域对需要访问的域开启cors的权限。还有一些img ，link，script标签，浏览器对这些开放了跨域权限。
6.开发中遇到的难题。
7.git工作流程
8.linux的使用（以及一些常用命令）

待补充。。。

mock搭建
react 的新api

[foxlele2014]

动画性能

111

[foxlele2014]

websocket 和socket.io

关键点：即时通讯，推送

常见实现：
1.短轮询： client每隔一段时间向server发送请求获取数据，server不管数据有没有更新都返回数据
2.1comet类的长轮询： client每隔一段时间向server发送请求，server在数据没有更新的情况下，不返回数据，继续保持这个连接，直到数据有更新才返回
2.2 comet 类的流技术：基于iframe标签的src属性，src属性会保持对server的长连接请求，

websocket：是w3c为了解决server能向client主动发消息这个问题而在HTML5里新加的一个基于TCP的全双工通讯的协议。与http协议兼容。

websocket 和 http 都是应用层的协议，都是基于tcp协议。

websocket建立连接时需要依靠http协议。

client和server都能互相发送消息。

socket 是一套接口。为了方便上层的应用能更好的调用底层的协议（如tcp之类的

websocket 和socket.io

[foxlele2014]

浏览器的同源策略

概念：只要协议、域名、端口有任何一个不同，都被当作是不同的源。

对style,img,script 这些html的不限制域的问题。可以引用。

但是ajax请求不能跨域。

两个域名之间不能跨过域名进行发送请求或者请求数据，否则就是不安全的。

上边就是跨域产生的原因。

如何解决呢？

1.jsonp
2.服务端设置header头的cors配置，来允许对应的源访问
3.服务端进行代理转发
4.iframe，通信用postMessage（html5)

jsonp的原理，主要是有src这个属性，浏览器对这些标签的这个属性进行了开放操作，不限制。
就是会下载到本地，缺点就是只能进行get请求获取。

注意：
CORS 分为简单请求和预检请求，预检请求会预先发送一个 OPTIONS 请求进行预检，有可能服务器端禁止了 OPTIONS 方法导致无法进行正常的跨域请求。

同源策略的作用：
防止CSRF安全问题。

[foxlele2014]

搭建npm私有仓库

作用：
1.可以快速拉取公有包
2.定制的组件可以共享
3.共享一些内部快速开发的脚手架工具
4。。。。。

操作：

npm私有仓库网上比较推荐的有：

1.cnpmjs
2.sinopia

docker-cnpm搭建私有仓库

sinopia搭建私有仓库

三种方法搭建私有仓库

[foxlele2014]

可视化

webGIS ,d3,echart,svg，threeJs，OpenGL等。
待补充。

最近在慕课看一门计算机图形学的入门课程。
希望来这边做好笔记。

[foxlele2014]

使用node作为中间层，向后端发起请求，给前端提供api接口

这个是一直想尝试的，但是在的公司一直没有这种项目。

node作为中间层的好处：
1.mock提供
2.服务端渲染模板，利于页面seo（ SPA 的 SSR ( 服务端渲染 )，用来解决 SPA 的 SEO 问题）
3.node过滤前端请求，保护后端数据，减少接口调用

按照这个看，我们之前的是用一个php的框架包裹了前端的东西，
所以首页初始化加载的时候是经过渲染的，但是因为spa页面，所以渲染的字符串也基本上没有任何页面内容。所以也是不利于seo的，

登陆的时候的问题
node 应用场景预研

[foxlele2014]

脚手架

自定义各种配置，希望能一键生成。
这时就需要弄个脚手架了。

[foxlele2014]

rn、flutter、electron等

在学习

[foxlele2014]

PWA

[foxlele2014]

难解决的问题分为两种：

1.业务问题，需求不清。这时需要拉上懂业务的同事理清需求，必要的时候需要调整设计。同时自主学习，增强对业务的了解。2.技术问题，可能是由于之前技术栈限制导致需求难以实现，或者说现有技术导致实现需求会有性能、可维护性问题，或者是自身储备或者周边资源不足(比如说没有现成的组件库)导致工期比预想长。可以通过最小限度实现需求、请教公司或同项目组的同事寻找合适的工具、交叉集成其他框架等方式解决，但最重要的是及早沟通。

闭包：
一个函数可以访问自由变量（它不属于这个函数，也不是这个函数的参数）
自由变量的执行上下文已经被销毁了，但是它依旧可以被这个函数访问。
使用场景：给setTimeout传参。私有变量。函数嵌套。
类似于快照。给某些元素遍历赋值一个执行函数，但是这个函数需要使用当时那个某个参数（这个参数会随着时间变化一直改变）

原型：
对象，需要构造函数，进行new实例化。继承相关的属性。
函数对象和普通对象，对象都有__proto__属性，
函数对象才有prototype 属性
proto 指向一个对象(是某个实例的原型,原型也是对象)，它有两个属性，constructor(构造函数)和__proto__
tom.proto === Person.prototype
Person.prototype.constructor === Person
Object.getPrototypeOf(tom) === Person.prototype
Person.prototype.proto === Object.prototype
Object.prototype.proto === null?

共有属性.

promise：
异步编程的解决方案。
回调函数。事件监听。（当事人）
发布订阅（这个相当于有个中间者存在取调控，注册到调度中心，调度中心分配，dispatch）
pending，fulfilled，rejected，
generator（可以控制函数的执行，停止，继续
async（generator的语法糖）

事件循环：
js是单线程，顺序执行。同步和异步（宏任务和微任务）
执行机制，执行栈
主线程。
渲染。控制在16.66ms
浏览器是多进程的。主进程。渲染进程。（gui渲染，js引擎，互斥）

浏览器渲染过程：
解析网址，构造http请求，发起请求前，会检查请求头的相关字段，是否存在缓存策略。expires和cache-control。这俩没有的话，就会发起请求，会检查If-Modified-Since和If-None-Match，这里就是协商缓存。没有的话，会向服务端请求资源。状态码可以查看
转成成ip地址（涉及到dns查询）
tcp三次握手，建立连接。返回信息。
浏览器渲染。构建dom树，style树。合并成渲染树，绘制，展示。
回流和重绘。文档流。

vue是如何实现响应式：
vue2 是

拷贝：
数据类型。值类型和引用类型。存储的方式。堆栈。指针。

vue2 的diff和3的有啥区别
构建虚拟dom树的时候，标识了常量和变量。比较的时候只需要比较变量。

事件循环，按理论微任务特别多，大于浏览器一次渲染的周期时，这个时候浏览器是如何处理的？

JavaScript 是单线程的，但提供了很多异步调用方式比如 setTimeout，setInterval，setImmediate，Promise.prototype.then，postMessage，requestAnimationFrame， I/O，DOM 事件等。 这些异步调用的实现都是事件循环，但根据插入的队列不同和取任务的时机不同他们的表现也不同。 尤其在涉及与页面渲染的关系时。

https://cloud.tencent.com/developer/article/1843653（参考文章，这篇写得很好）

页面渲染/交互任务也会插入在 Task Queue 中，会与各种异步机制插入的任务交错执行。
Microtask Queue 会在下一个任务开始之前清空。
单个耗时任务和 Microtask Queue 都会阻塞页面交互，Task Queue 则不影响。
渲染时机可以通过 requestAnimationFrame 精确控制。
setImmediate 与 setTimeout 一样使用 Task Queue，但克服了 4ms 限制。

型的浏览器会在每秒插入 60 个渲染帧，也就是说每 16ms 需要一次渲染。 如果存在一个任务在 16ms 内未能执行结束，页面就会掉帧给人卡顿的感觉。

任务队列是先进先出。但是宏任务里，是需要区别执行先后的，如setTimeout的倒计时。

组件间如何通讯
props，emit（调用父亲的方法），vuex（数据管理的库），事件监听。

git fetch ，git pull的区别
git fetch是将远程主机的最新内容拉到本地，用户在检查了以后决定是否合并到工作本机分支中。
而git pull 则是将远程主机的最新内容拉下来后直接合并
git pull = git fetch + git merge

挑选某些commit，cherry-pick，以及如何去掉某些commit。git rebase

跨域通讯怎么处理（因为浏览器的同源策略）
jsonp（就是script），cors。
修改：document.domain
window.name
window.postMessage（h5）

http缓存（强缓存和协商缓存）

etag是怎么实现的？（nginx中 的是，last-modified以及content-length生成）
https://stackoverflow.com/questions/4533/http-generating-etag-header
header里的字段。
expires（服务器事件和客户端事件有差别时会产生误差）。cache-control。
浏览器会拦截请求，判断相关字段
假如符合就会，使用本地资源。
如不符合，则进入协商缓存（对比缓存）
由服务器来确定资源是否可用，
请求时带上last-modified（本地文件最后修改事件，服务器返回）或者Etag（资源hash值），（第一次）
后续会带上if-modified-since，if-none-match

Object.__proto__是啥（原型）
Function.prototype

//由问题带来的思考 🤔
问题1.Object._proto_指向谁？
1.Object是个啥:Object是个类，而类的本质是一个构造函数 Function
打印一下： console.log(Object.constructor)
2._proto_是个啥:_proto_可以找到很多东西的原型 prototype
补充知识：
①__proto__和constructor属性是对象所独有的；
② prototype属性是函数所独有的，因为函数也是一种对象，所以函数也拥有__proto__和constructor属性。
3.因为：Object = Function
proto = prototype
4.所以 Object.proto = Function.prototype

问题2.那么Function.__proto__指向谁？
1.Function是个啥：Function也是个类，而类的本质是一个构造函数 Function
2. 因为：Function(类) = Function(构造函数)
proto == prototype
所以 Function.proto = Function.prototype
3.Function是个特例，就这么神奇！！！

扩展知识：
1.函数：js中函数是一等公民
2. 对象：__proto__和constructor属性(对象独有)
函数：prototype属性(函数独有)
因为函数也是一种对象(js中万物皆对象，所以函数也有__proto__和constructor属性)

问题3.Object.prototype.__proto__指向谁？
null

electron进程间如何通讯
主进程和渲染进程是ipc通讯。
渲染进程间如何通讯。（类似事件监听，
渲染进程一般不推荐直接使用electron的方法，但是要想要用，要怎么安全使用

在主进程中注册相关的ipc事件，渲染进程中触发对应的事件则可以调用electron的api
ipcMain.on('xxx',() =>{})
web页面中
ipcRender.sendSync('xxx', () => {})

vue的定义data的时候为啥是一个函数。

如何描述一个项目。

一个字符串找出连续相同的字符串放入一个数组中。

ts相关的知识

[foxlele2014]

如何介绍项目：
项目背景。
你可以介绍最开始的需求是什么，你通过这个项目你解决了什么痛点，满足什么场景等
承担角色
说明你在项目当中是一个怎么样的角色，承担了那一部分的模块开发，如何处理技术难点与项目其余部分的对接工作
项目成果：
做出来一个什么样的效果，是否满足你们的预期方向，项目的真实周期有多久，项目的难度有多大等。也可以说一下上线之后的数据是怎么样的，途中发现过什么样的问题以及你是如何解决问题的，或者是否存在网络加载慢，你做了哪一些项目优化的。
总结：
复盘。