标签： 核心

目录

• 目录
• 沙箱
  • CSS 沙箱
  • JS 沙箱
• Shadow DOM
• WindowProxy
• Object.getOwnPropertyDescriptor()
• Window.top/parent/self/window

沙箱

在微服务中，主要要解决两个沙箱问题，分别是 CSS 沙箱和 JS 沙箱。对于 JS 沙箱而言，主要也要解决两个问题，一个是沙箱的隔离作用，二是沙箱间、沙箱与基座应用间的通信机制。在沙箱这一部分，我们主要解析 CSS 沙箱的实现原理和 JS 沙箱的实现原理。

CSS 沙箱

实现 CSS 沙箱主要有以下几种方案：

• BEM CSS。给 CSS class 添加约定的类进行区分。
• Module CSS。模块化的 CSS 能够让 CSS 在一定的 scope 以内生效。
• CSS In JS。CSS-in-JS 的实现方法上区分大体分为两种：唯一 CSS 选择器和内联样式（Unique Selector VS Inline Styles）。这两种方法都可以达到隔离 CSS 的作用。参考：阮一峰：CSS in JS 简介 (opens new window)
• ShadowDOM
• namespace：每个业务模块或者团队使用不同的样式前缀。
• Dynamic StyleSheet：动态的注入或者删除样式表。

JS 沙箱

• 代理沙箱（ProxySandbox）
• 快照沙箱（SnapshotSandbox）

Shadow DOM

Method of establishing and maintaining functional boundaries between DOM trees and how these trees interact with each other within a document, thus enabling better functional encapsulation within the DOM & CSS.

Web components 的一个重要属性是封装 —— 可以将标记结构、样式和行为隐藏起来，并与页面上的其他代码相隔离，保证不同的部分不会混在一起，可使代码更加干净、整洁。其中，Shadow DOM 接口是关键所在，它可以将一个隐藏的、独立的 DOM 附加到一个元素上。

注意

Shadow DOM 不支持 IE 浏览器，查看支持情况 (opens new window)，但是可以通过 polyfill (opens new window) 获取支持。

参考：

• Using shadow DOM (opens new window)
• 深入理解 Shadow DOM v1 (opens new window)

参考：

• 15 分钟快速理解 qiankun 的 js 沙箱原理及其实现 (opens new window)

WindowProxy

A WindowProxy object is a wrapper for a Window object. A WindowProxy object exists in every browsing context. All operations performed on a WindowProxy object will also be applied to the underlying Window object it currently wraps. Therefore, interacting with a WindowProxy object is almost identical to directly interacting with a Window object. When a browsing context is navigated, the Window object its WindowProxy wraps is changed.

参考：

• WIKI：WindowProxy (opens new window)

Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor () 方法返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）。

该方法允许对一个属性的描述进行检索。在 Javascript 中， 属性 由一个字符串类型的 “名字”（name）和一个 “属性描述符”（property descriptor）对象构成。更多关于属性描述符类型以及他们属性的信息可以查看：Object.defineProperty.

• MDN: Object.getOwnPropertyDescriptor() (opens new window)

Object.defineProperty(obj, prop, descriptor)

Window.top/parent/self/window

• Window.top (opens new window): Returns a reference to the topmost window in the window hierarchy. This property is read only.
• Window.parent (opens new window)
• Window.self (opens new window): Returns an object reference to the window object itself.
• Window.window (opens new window): Returns a reference to the current window.

参考：

• MDN：Window (opens new window)