7月前端知识点总结

今天已经7月31号，简单总结这个月的知识点和个人想法：

1、前端架构设计 view-model 分离思想：现在前端使用 React 框架。React 框架通过状态驱动，父子组件之间通过 props 进行数据传递，组件内部使用 state 控制行为。如果是组件自身的行为，控制行为的状态（state）需要存放在当前组件。如果是多个并行组件的行为，控制行为的状态需要放在公共的父组件中。界面状态（state，例如某个元素显示隐藏）和内容数据（例如单元格数据或者文本内容）需要分离。Model 视图函数处理数据请求相应，UI View 组件操作界面交互，这样做到视图和模板的分离。

2、数据流操作和界面：前端数据来源于服务器提供，或者用户交互。前者的数据是自顶向下，后者的数据是自下而上，这两个数据流需要明确的处理。具体操作：减少界面的请求数量，数据更新后通过回调函数改变界面的状态。如果数据复杂或者需要数据结构的转换，可以单独存放在一个数据处理文件。

3、react-mentions 组件：当输入框中输入特殊符号，例如邮箱、电话、姓名，组件会自动列出待选项。具体使用：新浪微博中输入@即可出现待选联系人。具体可以参考：https://mp.csdn.net/postedit/96875130。

4、ECMA 新标准：ES7 中 array.includes(item) 很好使用，new Set() 数据结构是不可重复数组，可以便捷数据去重。

5、favicon 尺寸问题：在性能显示兼容性评估，推荐使用32px的ico文件。

6、lodash 的 pick omit 方法使用：pick (obj, keys) 获取只包括这个属性的对象；omit（obj, keys）获取不包括这个属性的对象。可以可以将一个复杂的对象转化成简单的对象，不需要新建对象手动获取value。

7、UUID.js 可以产生一个UUID

8、drag 事件。拖拽的事件分成被拖拽的部分和拖放到DIV。不同对象有不同的事件。详情参考阮一峰老师的博客。

9、redo undo 操作：将编辑器中的每一个操作存放在两个数组中。如果正常编辑，清空 redo 数组，把这个操作放在undo数组中，执行 ctrl + Z , let operation = undo.pop(); let invert = operation.invert(); invert.apply(); redo.push(operation); contentchange() 执行 ctrl + shift + Z let operation = redo.pop(), operation.apply();undo.push(operation) contentchange()。ctrl + S undo.shift(-10); redo = []; 这就是基本思想。

10、避免事件频繁操作可以使用节流阀。节流阀的三种实现方式（参见阮一峰老师的博客）。节流和防抖的区别。

11、进程和线程的区别：这个在python操作中使用。简单理解，线程是基本的任务，一个进程包括不同线程。不同进程需要开辟不同的内存地址。如果一个线程挂了，那么同一个进程内的其他线程也会挂，其他进程通常不会受到影响。软件实现可以分为多进程、多线程、多进程多线程结合，这个根据性能和程序稳定性决定使用哪种方式。