Front笔记(一)

尤雨溪Live整理

1.多思考场景需求，多看看技术到底做了怎样的取舍
2.组件可以是函数
整个应用是一个大的函数，函数里面可以调用别的函数，每一个组件是一个函数，一个组件可以调用其他的函数，整个一个树状结构
3.组件是有分类的

• 纯展示型的组件，数据进，DOM出，直观明了
• 接入型组件，在React场景下的container
  component，这种组件会跟数据层的service打交道，会包含一些跟服务器或者说数据源打交道的逻辑，container会把数据向下传递给展示型组件
• 交互型组件，典型的例子是对于表单组件的封装和加强，大部分的组件库都是以交互型组件为主，比如说Element
  UI，特点是有比较复杂的交互逻辑，但是是比较通用的逻辑，强调组件的复用
• 功能型组件，以Vue的应用场景举例，路由的router-view组件、transition组件，本身并不渲染任何内容，是一个逻辑型的东西，作为一种扩展或者是抽象机制存在

4.变化侦测和渲染机制
vue的响应式数据或者RXJS的数据机制，在数据变动之后立刻就可以知道数据变动了，而且一定程序上我们会知道哪些数据变了，这样就可以进行相对更细粒度的更新，pull的这种更新是最粗粒度的，所以在大型应用里面我们要帮助系统来减少一些无用功，但是push的形式也有它的缺陷，粒度越细，你的每一个绑定都会需要一个observabel/watcher，这样会带来相应的内存以及依赖追踪的开销，所以在vue2里面选择的是一个比较中等粒度的方案，在组件级别是push，每一个组件是一个响应式的watcher，当数据变动时候我们可以对组件进行更新，在每个组件内部则是用Virtual Dom进行比对，push和pull之间的本质区别是在于用侦测成本换取一定程度的自动优化
5.状态管理
状态管理的本质是从源事件(source event)映射到状态的迁移和改变，然后在映射到UI的变化，状态管理实际上是如何管理将事件源映射到状态变化的过程，如何将这个映射的过程从视图组件中剥离出来，如何组织这一部分代码来提高可维护性，是状态管理要解决的本质问题
缺陷：一个是组件的局部状态和全局状态如何区分，另一个是全局状态和服务端数据之间，现有的方案是把服务端抓过来的数据塞到store里面去
6.路由
url就是一个序列化的状态
实际在SPA中去做一个你会发现路由会涉及到许多其他问题，比如说hash模式和history模式如何兼容，重定向，别名，懒加载，然后最复杂的是跳转，路由之间的跳转需要提供各种”钩子”，然后这些”钩子”里面又可能做异步操作，”钩子”里面也有可能取消这次跳转，使得这次跳转无效等等
7.构建工具

• 任务的自动化
• 开发体验和效率（新的语言功能，语法糖，hot reload 等等）
• 部署相关的需求
• 编译时优化

8.新规范
Web Component
Web Component 和类 React、Angular、Vue 组件化技术谁会成为未来？
9.技术方案都是先有问题，再有思路，同时伴随着取舍。在选择衡量技术的时候，尽量去思考这个技术背后是在解决什么问题，它做了怎样的取舍

---

---

基于 webpack 的持久化缓存方案

hash 的两种计算方式

• hash：在 webpack 一次构建中会产生一个 compilation 对象，该 hash 值是对 compilation
  内所有的内容计算而来的，
• chunkhash：每一个 chunk 都根据自身的内容计算而来。

要做到持久化缓存需要做好以下几点：

1. 对脚本文件应用 [chunkhash] 对 extractTextPlugin 应用的的文件应用 [contenthash]；
2. 使用 CommonsChunkPlugin 合理抽出公共库 vendor（包含社区工具库这些 如 lodash）,
   如果必要也可以抽取业务公共库 common(公共部分的业务逻辑)，以及 webpack的 runtime；
3. 在开发环境下使用 NamedModulesPlugin 来固化 module id，在生产环境下使用
4. HashedModuleIdsPlugin 来固化 module id
5. 使用 NamedChunksPlugin 来固化 runtime 内以及在使用动态加载时分离出的 chunk 的 chunk id。

---

---

JavaScript 如何工作：对引擎、运行时、调用堆栈的概述

1.V8 引擎使用在 Chrome 以及 Node 中

这个引擎主要由两部分组成:

• 内存堆：这是内存分配发生的地方
• 调用栈：这是你的代码执行时的地方

2.运行时

3.调用栈
只有一个调用栈，因此，它同一时间只能做一件事。
调用栈是一种数据结构，它记录了我们在程序中的位置。如果我们运行到一个函数，它就会将其放置到栈顶。当从这个函数返回的时候，就会将这个函数从栈顶弹出，这就是调用栈做的事情。

每一个进入调用栈的都称为调用帧
“堆栈溢出”，当你达到调用栈最大的大小的时候就会发生这种情况
4.并发与事件循环
当调用栈有函数要执行，浏览器就不能做任何事，它会被堵塞住。这意味着浏览器不能渲染，不能运行其他的代码，它被卡住了
解决方案就是异步回调

---

---

懒加载和预加载

1.懒加载也就是延迟加载。
当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来
2.懒加载的原理
页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。
懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把正真的路径存在元素的“data-url”（这个名字起个自己认识好记的就行）属性里，要用的时候就取出来，再设置
3.实现步骤

1. 首先，不要将图片地址放到src属性中，而是放到其它属性(data-original)中。
2. 页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中。
3. 在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中。

预加载
1.什么是预加载
提前加载图片，当用户需要查看时可直接从本地缓存中渲染
2.实现预加载的方法
方法一：用CSS和JavaScript实现预加载
方法二：仅使用JavaScript实现预加载
方法三：使用Ajax实现预加载
Javascript图片预加载详解

补充知识
获取元素的尺寸
(o).width()=o.style.width;(o).innerWidth() = o.style.width+o.style.padding;
(o).outerWidth()=o.offsetWidth=o.style.width+o.style.padding+o.style.border；(o).outerWidth(true) = o.style.width+o.style.padding+o.style.border+o.style.margin；
注意
要使用原生的style.xxx方法获取属性，这个元素必须已经有内嵌的样式，如

；
如果原先是通过外部或内部样式表定义css样式，必须使用o.currentStyle[xxx] || document.defaultView.getComputedStyle(0)[xxx]来获取样式值
获取元素的位置信息
getoffsetTop()

---

---

使用 JavaScript 实现分屏视觉效果

Demo地址
1.HTML结构
先把基础结构样式弄好，要实现这个效果，需要使用div来构建两个panel。第一个赋予bottom类，另外一个为top类。然后使用一个类名为splitview来包裹起来。
内容区域即content可以放任何东西，图片文字等等。
然后在splitview结构外面，再添加一个div类名为handle，用来加强表示分屏的视觉效果。
2.样式
确保top的z-index的值比另外一个panel大，就可以确保top这个panel在另外一个的上面。
需要把一个panel的宽度设置为整个宽度的一半，
3.定制handle
handle是用来加强分屏的视觉表现的。
为了加强分屏的视觉表现，这里handle是一个5px宽的黄色线条，高度和内容区域的高度一样，z-index是3保证它在两个panel之上。
4.移动handle
当在视图上移动鼠标的时候，通过监听鼠标事件可以获取鼠标的坐标值即event.clientX，比如left等值。然后把值赋值给handle的left，这样就可以使handle随着鼠标的移动而移动
同样为了实现跟随鼠标移动的分屏效果，还需要动态的改变panel的值，把panel的宽度实时根据鼠标移动的坐标值来改变即panel的宽度等于鼠标移动的值event.clientX