网站开发的前后端是什么看书网站排名
2024-8-9 打卡第十天 学习视频链接
js延迟加载
- 延迟加载：等页面加载完成后再进行加载
- 提高页面加载速度
- defer属性，同步加载，让脚本与文档同步解析，顺序执行，当文档解析完成再执行defer，执行完再执行脚本，不会阻塞页面渲染，按顺序执行。
- async属性，会使脚本异步加载，不会阻塞页面解析过程，加载完会立马执行js脚本，这个时候如果文档还没有解析完成同样会阻塞，多个async执行顺序不可预测。
- 动态创建dom，对文档的加载事件进行监听，当文档加载完后再动态的创建script标签来引入js脚本
- setTimeout 延迟加载js脚本
- js最后加载
异步编程实现方式
- 回调函数，回调地狱，代码耦合度高，不利于代码维护，就是在一层理再调用一个接口，接口里再调用接口就是回调地狱。
- Promise，链式调用，解决了地狱回调，可能造成语意不够明确
- generator，同步顺序书写函数，控制权转移回来，需要有自动执行函数的机制
- async，其实是Promise和generator的语法糖，自带一个执行器，如果返回的是一个Promise对象，会等待返回变成resolve，因此可以将异步转为同步书写，并且和这个函数可以自动执行
简单说说对pnpm的理解
- 本质还是一个包管理器，跟npm和yarn相似，更加完善。
- 优势：
- 包安装速度很快
- 磁盘空间利用高效
怎么理解Promise
- 一个异步编程的解决方案，一个对象，可以获取异步操作的信息，出现改善了异步编程的困境，避免了回调地狱，降低了代码的耦合性。接受一个函数作为参数，返回Promise实例，如果传入一个值会导致值穿透，就是明明传入了数据，但是输出的还是上一次的内容。
- 一个容器，包含某个未来才会结束的事件，通常是一个异步操作的结果
- 三个状态：pending（进行中），resolved（已完成），rejected（已拒绝），状态不可逆
- 两个过程：
- pending-fulifilled就是Resolve 已完成
- pending-rejected就是Rejected 已拒绝
- 特点：
- 对象状态不受外界影响
- 只有异步操作的结果可以决定状态，其他操作无法改变。Promise是承诺的意思，可以理解一旦状态确定就不能改变
- 事件已经发生，在添加回调函数还是能打印出结果，但是普通函数事件发生后再监听就监听不到了
- 缺点：
- 无法取消，一旦构造Promise函数会立即执行，不设置回调函数得不到抛出的错误，无法确定是什么状态
Vuex中的核心重要属性
- state
- 单一状态树，页面数据从该对象中获取。
- 单一状态树包含了全部的应用层级状态，作为唯一的数据源，每个应用仅包含一个store实例
- 单一状态树能直接定位特定的状态片段，调试过程中获得当前应用状态的快照
- 不可直接对state进行更改，需要通过Mutation
- Vuex存储状态是响应式的，从store实例中读取状态最简单的方法就是在计算属性中返回某个状态
- Getter
- 可以认为是store的计算属性，对state加工衍生出来的数据
- 就像computed计算属性一样，getter会根据它依赖的值而缓存，只有当他的依赖值发生改变才会被重新计算
- 可以在多个组件中共享getter函数
- Mutation
- Vuex中store数据改变的唯一方法就是Mutation
- 通俗理解，mutation里面装着改变数据的方法集合，处理数据逻辑的方法全放在mutation里，使数据和视图分离
- action
- 类似mutation，不同的是action提交的是mutation，通过mutating改变state，而不是直接操作
- action可以包含任何异步操作
- module
- 由于使用单一树，所有对象会集中到一个较大的对象中，当应用非常复杂的时候，store对象就可能变得异常臃肿
- 为了解决上述问题，vuex允许将store分割成module，每个模块拥有自己的state,getter,mutation,action，甚至是嵌套子模型
什么是跨域，怎么解决跨域？
- 浏览器从一个域名的网页去请求另一个域名的资源时，域名，端口，协议任一不同，都是跨域
- CORS（跨资源共享）：W3C规范，允许在服务器设置特定头频字段来允许跨域请求