开源日报 每天推荐一个 GitHub 优质开源项目和一篇精选英文科技或编程文章原文,坚持阅读《开源日报》,保持每日学习的好习惯。
今日推荐开源项目:《上古版本 98.css》
今日推荐英文原文:《Is Deep Cloning Coming to Our Browsers?》

今日推荐开源项目:《上古版本 98.css》传送门:GitHub链接
推荐理由:现在 UI 设计变得越来越友好,windows 98 风格的 UI 界面已经逐渐销声匿迹,不过有的时候为了特地表现出古老,没准还需要把它拿出来。这个项目是一个纯 CSS 库,里面充满了上古版本的 UI 界面,打开官网就会发现古老的气息扑面而来。

今日推荐英文原文:《Is Deep Cloning Coming to Our Browsers?》作者:Johannes Baum
原文链接:https://medium.com/better-programming/is-deep-cloning-coming-to-our-browsers-b703acde29eb
推荐理由:结构化克隆似乎能成为一种深度拷贝的解决方法

Is Deep Cloning Coming to Our Browsers?

Read about a possible exposure of the structured clone algorithm in major browsers

There are many discussions on the web about deep cloning in JavaScript. While there are native solutions like destructuring or Object.assign() for shallow clones, deep clones had to be created using third-party libraries like Lodash or abusing APIs like MessageChannel to take advantage of unexposed implementations of structured cloning as proposed by the HTML standard.

According to the usage of third-party libraries like Lodash, the popularity of questions regarding deep cloning in JavaScript on Stack Overflow, and the common (and in many cases problematic) usage of JSON.parse(JSON.stringify(...), there seems to be a large demand on the developer side for a native solution.

Structured Cloning

The structured clone algorithm was proposed by the HTML standard, already has an implementation in common browsers, and is used internally (i.e., for transferring data between web workers or for storing data with IndexedDB).

It recursively walks through the object to be cloned and maintains a map of visited references in order to avoid infinite cycles. Therefore circular structures are not a problem for this algorithm, compared to the JSON.parse(JSON.stringify(...)) approach, for example.

In the JavaScript realm, this means that most types (such as Date, RegExp, Array, Object, Map, and Set) are supported. However, the prototype chain is not considered and there are some more things to look after. If you’re interested, check out the link to the MDN Web Docs in the references below.

Structured clone vs. deep clone

A deep clone (also deep copy) is a copy of an object such that new copies are created for any referenced objects. What does that mean for JavaScript objects? Here it gets difficult. While some people might be satisfied with just the structural data, others might want to copy the prototype chain. So deep clone is a rather ill-defined term.

The structured clone algorithm, on the other hand, is a well-defined algorithm and therefore defines pretty well what a structured clone is. One could say it is a specific implementation of a deep clone.

Structured Cloning in Browsers?

While Node.js exposed the implementation of structured cloning by the v8 JS engine as their Serialization API, many people are still waiting for an exposed implementation of a browser. If you are one of these people, there is good news: A proposal in the HTML specification already exists.

Unfortunately, it seems that at the time writing, only Firefox is interested in implementing it. However, the topic is still discussed, so don’t give up hope if you are craving that feature.

Even if it is only at the stage of a proposal, it looks like the exposure will come in the form of a global function structuredClone() that will make structural clones as easy as:
const myClone = structuredClone(originalObject);
If you want that feature, I encourage you to advocate for the exposure of the structured clone algorithm so we might see it on top of the backlogs of major browsers soon
下载开源日报APP:https://openingsource.org/2579/
加入我们:https://openingsource.org/about/join/
关注我们:https://openingsource.org/about/love/