06 | 如何通过模块化、异步和观察做到动态加载？

石川

你好，我是石川。
在前面几节讲函数式编程的课程里，我们了解了在函数式编程中副作用通常是来自于函数外部，多在输入的过程中会出现副作用。这实际上是从空间的角度来看的。
而今天这节课，我们会从时间的角度来看看异步中的事件如何能引起副作用，以及要如何管理这种副作用。
如何处理异步事件中的时间状态？实际上，在函数式编程中我们在讨论异步的时候，经常会说到信任（trustable）和承诺（promise）。这个其实是源自于合同或者是契约法中的一个概念，而且它不只限于经典的合同，我们说的智能合约之类的概念中，底层逻辑也都源于契约和共识。
那么，为什么我们在处理异步时需要用到这个概念呢？下面我就先带你来看看在异步时，程序都会遇到哪些问题。
假设，我们有以下 getUser 和 getOrders 两个函数，分别通过用户 ID 来获取用户信息和订单信息。如果 getUser 先得到响应的话，那么它就没法获得订单信息。同样地，如果 getOrders 先得到响应的话，那么它就没办法获得用户信息。
这样一来，我们说这两个函数就形成了一个竞争条件（Race Condition）。
var user;
getUser( userId, function onUser(userProfile){
    var orders = user ? user.orders : null;
    user = userProfile;
    if (orders) {
        user.orders = orders;
    }
} );
getOrders( userId, function onOrders(userOrders){
    if (!user) {
        user = {};
    }
    user.orders = userOrders;
} );

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

本文介绍了在前端开发中处理页面内容的动态加载时使用的一些方法，主要围绕动态导入展开讨论。文章首先介绍了动态导入的两种类型：可视时加载和交互时加载，并解释了它们的应用场景和重要性。随后，文章提到了在初始化加载和动态加载中需要关注的指标，以及通过预加载和预获取来提升用户体验的方法。此外，文章还探讨了动态加载在客户端渲染和服务器端渲染模式下的应用，并指出了在交互驱动的动态加载中可能遇到的问题及解决方法。最后，文章总结了函数式编程和响应式编程中处理异步事件的重要性，以及通过promise和观察者模式来优化资源浪费的方式。总的来说，本文通过丰富的实例和技术概念，为读者提供了在前端开发中处理动态加载的实用方法和技术思路。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《JavaScript 进阶实战课》，新⼈⾸单¥59

立即购买

登录后留言

全部留言(5)

最新
精选

WGH丶
干掉时间这一最难管理的状态---我们这里干掉的是时间的不确定性带来的烦恼，干不掉的是时间造成的实际等待。想要更好地优化后者，也有很多技术，主要有：可视时加载、交互时加载、预加载。
作者回复: 很好的补充
2022-12-18归属地：海南

2
lemon
“在初始化的加载中，我们关注的通常是首次渲染时间（CFP，First Contentful Paint）”，这里应该是 FCP
作者回复: 谢谢指正！是个勘误，我也编辑老师也说一声。
2022-10-06归属地：北京

2
南城
cdn化，cdn后根据屏幕来计算需要的图片资源裁剪，http2或者3的使用，
作者回复: 是一种方法
2022-10-23归属地：北京

1
朱基
一、在第3个代码示例中，第2行的var eagerProducer =...，和第5行的var consumer = producer.map....,两个变量 eagerProducer 和 producer 是否应该一致？二、在第4个代码示例中，第2行 var producer = Rx.Observable 中变量Rx指什么，对Rx加个小注释，增加用户体验。
作者回复: 谢谢指正！已经修改了。
2022-11-10归属地：海南


Nuvole Bianche
var user; getUser( userId, function onUser(userProfile){ var orders = user ? user.orders : null; user = userProfile; if (orders) { user.orders = orders; } } ); getOrders( userId, function onOrders(userOrders){ if (!user) { user = {}; } user.orders = userOrders; } ); 是我看不懂吗？没发现这段代码有排他性，如果都是网络请求，那最后user上面不都会有userProfile和userOrders信息吗？除非userProfile是一个非引用类型的数据. 如果getUser先回来，那么在onUser回调函数执行后，user的值就是userProfile了，然后getOrders后回来，那么userOrders还是会最后挂在到user.orders上，原来的userProfile也没有被覆盖呀？
2023-03-23归属地：上海



收起评论