天璇
Search K

Appearance

特殊模式 ​

iframe模式 ​

ts
import { Merak } from 'merak-core'

const app = new Merak(name/** 子应用name */, url/** 子应用url */, { iframe: 'iframeid' })
import { Merak } from 'merak-core'

const app = new Merak(name/** 子应用name */, url/** 子应用url */, { iframe: 'iframeid' })

这会使子应用js在iframe中执行，

注意 ，同一个iframeid的子应用会被分配到同一个iframe中执行js，当一个iframeid中所有子应用都被销毁时，才移除该iframe

提醒

  1. 子应用可以不暴露钩子，原因详见详见，但必须保证该子应用的iframeid唯一
  2. 不暴露钩子时,这和无界的重建模式一致
  3. 不优先考虑，但如果子应用始终出现不明原因的错误，可以尝试一下
  4. 如果你需要同时打开子应用的两个路由页面，只需创建两个实例，保证iframeid不相同就好

库模式 ​

如果执意使用模块联邦等方案（引入的是js文件而非html）

当挂载一个组件时（如果对象只是一段普通脚本而非一个需要挂载的组件，意义较小，因为这样没有必要dom隔离），会给它提供一个单独的上下文进行,对其进行隔离

包括dom/style/js的隔离

js
import { Merak, createLibProxy } from 'merak-core'
const app = new Merak(name, url, { proxy: createLibProxy(name, url) })
import { Merak, createLibProxy } from 'merak-core'
const app = new Merak(name, url, { proxy: createLibProxy(name, url) })

提醒

  1. 优点\缺点和普通模式一样
  2. 没有对location,history的隔离

ssr ​

当主子应用均为ssr时，子应用的ssr效果能在主应用中起效

这倒也不一定，可以是一个网关之类的东西，反正能把子应用的html拼到主应用上，再返回给浏览器就行

服务端 ​

服务端需要做一定改造，需往主应用html中加入一段：

html
<html>
  ...
  <template data-merak-url="url">
    <!-- 子应用的ssr渲染结果(html) -->
  </template>
</html>
<html>
  ...
  <template data-merak-url="url">
    <!-- 子应用的ssr渲染结果(html) -->
  </template>
</html>

注意

请注意：这不是真正的ssr,它并不能“跑”在服务端中，毕竟，操作dom是不可回避的事情。

它只是通过注入一段template到html中，在客户端渲染时，直接拿到template进行渲染。

简而言之，对seo和首屏渲染均有助益，对ssr使用者应该足够有吸引力

也可以将template换成其他标签，使其不可见就行

客户端 ​

原理详见loader

也可以自己设计ssr的流程

ts
const loader = new SSRLoader()
const app = new Merak(id, url, {
  loader
})
const loader = new SSRLoader()
const app = new Merak(id, url, {
  loader
})

Released the MIT License.