最近这两天一直在想一种实现方式。我们现在著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】的前端应用，实现上基于DOM是最好的最流原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】行的，不过，大部分前端都构建了自己的路有著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net系统，这又依赖BOM。也就是说，目前大部【原创不易，请尊重版权】【原创不易，请尊重版权】分前端应用，都是基于DOM/BOM实现的【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】。那么，我是否可以创建一个通用的DOM/本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。BOM平台，让这些应用跑在这个平台上。

【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。

让前端应用跑在一个DOM/BOM平台上，【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】听上去有点莫名其妙，为啥不跑在浏览器里面【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】？没错，我就是想脱离浏览器跑这些应用。比【原创不易，请尊重版权】【原创不易，请尊重版权】如在nodejs里面跑（目前有JSDOM【原创不易，请尊重版权】【转载请注明来源】可以支持这个效果），虽然没有界面可以看，【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。但是可以用来做一些单元测试的工作。比如在【转载请注明来源】未经授权，禁止复制转载。webworker中跑，众所周知，web转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】worker是没有DOM API的，假如【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】有了这个平台，那么就可以在worker中本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】跑一个vue应用（虽然没有界面）。同样的【原创内容，转载请注明出处】未经授权，禁止复制转载。道理，能否更远一点，跑在非js的环境中，【原创内容，转载请注明出处】【原创内容，转载请注明出处】比如flutter（目前阿里开源的Kra【关注微信公众号：wwwtangshuangnet】【作者：唐霜】ken支持这个效果）甚至C++写的原生应【转载请注明来源】【原创内容，转载请注明出处】用中。想一想，在一个树莓派中跑一个vue本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】应用。于是，我想出了这样一个架构：

原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。

著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net

其中，VBOM这一层和Driver fr【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netamework这一层是实现的核心。VBO【未经授权禁止转载】【本文首发于唐霜的博客】M是用纯js实现的DOM+BOM环境，只【本文首发于唐霜的博客】【本文受版权保护】要把已有的vue代码，包在一个VBOM实【转载请注明来源】【原创内容，转载请注明出处】例的闭包里面（用babel把全局变量的引【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。用切换到window上），那么vue代码【转载请注明来源】转载请注明出处：www.tangshuang.net所做的任何关于DOM/BOM的操作，都是【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。在这个VBOM的实例内部完成。Drive本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】r framework则是监听/操作这个未经授权，禁止复制转载。【转载请注明来源】VBOM实例，对接不同的平台，比如小程序【本文首发于唐霜的博客】【原创不易，请尊重版权】，由于小程序是js写的，所以，引用js-著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】driver，然后在driver的各个生本文版权归作者所有，未经授权不得转载。【转载请注明来源】命周期钩子函数上写小程序要做的事情，dr本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。iver会把VBOM中有关DOM/BOM转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。的变化告诉给小程序，也会把来自小程序的消转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】息发送给VBOM产生新的副作用。而flu转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】tter上，我们可以使用dart-dri【作者：唐霜】【关注微信公众号：wwwtangshuangnet】ver，原生应用可以使用cpp-driv转载请注明出处：www.tangshuang.net【版权所有，侵权必究】er，python-driver, ru著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。st-driver等等，通过driver本文作者：唐霜，转载请注明出处。原创内容，盗版必究。之后，终端代码里面只写终端语言代码，不需未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】要写任何js相关的东西。而回过来，应用这【转载请注明来源】【关注微信公众号：wwwtangshuangnet】端，开发者只需要写vue或react，不【版权所有，侵权必究】【本文首发于唐霜的博客】需要考虑自己的应用会在哪个环境里面去跑。

【本文受版权保护】转载请注明出处：www.tangshuang.net【未经授权禁止转载】

再用一个基于webworker的微前端方转载请注明出处：www.tangshuang.net【转载请注明来源】案的例子说明：

未经授权，禁止复制转载。【作者：唐霜】

本文版权归作者所有，未经授权不得转载。【本文受版权保护】【本文首发于唐霜的博客】

微前端要解决的是一个沙箱问题，比如一个v著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】ue应用，要在宿主应用中加载运行，那么，本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】这个vue应用里面可能操作DOM, lo【转载请注明来源】著作权归作者所有，禁止商业用途转载。cation, history等等，这些转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】东西会导致vue这个子应用和宿主应用去抢【未经授权禁止转载】【转载请注明来源】location, history进行操【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】作。我在mfy中的做法是创建一个ifra【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netme，然后把里面的window, loc原创内容，盗版必究。原创内容，盗版必究。ation, history借过来给子应著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。用去操作，通过监听，同步子应用和父应用的著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net相关信息，这样就不会出现抢的局面。但是，本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】由于浏览器环境中的特殊原因，目前所有的微【转载请注明来源】本文版权归作者所有，未经授权不得转载。前端方案，实现沙箱都需要借助Functi【作者：唐霜】【本文首发于唐霜的博客】on来实现，同时还需要用with这个性能【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net极差的语法（而且这个语法已经被抛弃了）来【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】解决全局变量修改问题（虽然也可以用bab【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】el进行编译处理来去掉with语法）。这【本文首发于唐霜的博客】【原创不易，请尊重版权】些方案都无法避免父子应用的某些冲突，特别未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。是子应用代码运行过程中发现当前提供的资源【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】不符合自己代码实现的逻辑，报错。

著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】

既然浏览器环境下沙箱问题这么多，性能这么【本文首发于唐霜的博客】【原创不易，请尊重版权】差，那么我能不能把沙箱迁移到一个webw未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。orker中，在worker环境下，根本【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】不存在抢资源问题，也不需要用Functi【本文首发于唐霜的博客】【未经授权禁止转载】on来包裹vue代码。但是，worker【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】中没有DOM啊，也没有location,本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net history，所以就想到了，我们需要【本文受版权保护】转载请注明出处：www.tangshuang.net自己造一套DOM/BOM的环境，然后把这【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net套环境放在webworker中，这样可以著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。让vue应用在worker中跑起来，vu【本文受版权保护】未经授权，禁止复制转载。e操作的，是VBOM，虽然不会报错，但是【版权所有，侵权必究】【作者：唐霜】没有任何界面效果。

【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】

所以，接下来，就需要driver出场，d【未经授权禁止转载】【未经授权禁止转载】river监听VBOM中的变化，把这些变【转载请注明来源】本文版权归作者所有，未经授权不得转载。化交给controller（contro未经授权，禁止复制转载。【原创不易，请尊重版权】ller是微前端框架基于js-drive【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】r实现的一个运行在webworker中的【原创内容，转载请注明出处】【作者：唐霜】控制器），controller通过pos【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。tMessage发送给主线程，由主线程的【原创内容，转载请注明出处】原创内容，盗版必究。renderer收到message之后决【原创不易，请尊重版权】原创内容，盗版必究。定怎么修改DOM。当用户点击子应用区域内本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net的某个按钮之后，renderer将该点击本文作者：唐霜，转载请注明出处。【未经授权禁止转载】事件postMessage给contro【本文首发于唐霜的博客】【原创不易，请尊重版权】ller，由controller分析并把著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。对应的DOM事件发送给driver，dr【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】iver知道这个事件发生在哪个DOM节点原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】上，于是在VBOM中对应的节点上触发该事【原创内容，转载请注明出处】【版权所有，侵权必究】件，VBOM实际上是vue的运行环境，v本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。ue组件上的事件被触发，回调函数被执行，著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】引发新的DOM更新，再次走一遍前面的过程【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。。

【本文受版权保护】【原创不易，请尊重版权】【转载请注明来源】

【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。

看上去好绕啊！！！但是，你要知道，其中，本文版权归作者所有，未经授权不得转载。【转载请注明来源】对于框架开发者而言，他们维护的是微前端框【本文受版权保护】【作者：唐霜】架，对于宿主开发者而言，他们维护的是微前【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net端框架的配置，对于子应用开发者而言，他们本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】维护的是vue这个应用。真正需要经常调整原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。、修改的，是vue应用这一层，其他两者基本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】本上是以逸待劳，一劳永逸。所以，一旦这一【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。套跑起来之后，不管是vue也好，reac本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】t也好，开发者只需要了解自己熟悉的基于D【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】OM/BOM的web开发即可，不需要关心【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。自己是在什么环境下运行。这对小程序的开发本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】者而言，肯定深有感触，小程序开发因为有线本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】程约束，导致开发者有的时候非常痛苦，翻边【原创内容，转载请注明出处】【本文首发于唐霜的博客】开发文档都找不到问题的根源。而如果有了上未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。面这一套方案，开发者只需要考虑在自己熟悉【未经授权禁止转载】【转载请注明来源】的web平台上开发即可，而不需要考虑其他本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】。

【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。

补充一点，如果需要调用原生的能力，需要框转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】架开发者在driver那一层，向VBOM【本文受版权保护】本文版权归作者所有，未经授权不得转载。提供某些接口的能力，比如提供调用摄像头的【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net能力，比如提供app是否被切换到后台运行未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net的事件等等（很多hybird的操作手法）【作者：唐霜】著作权归作者所有，禁止商业用途转载。。对于应用的开发者而言，无非是增加了一些【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。特殊接口和事件，仍然还是DOM/BOM那转载请注明出处：www.tangshuang.net【本文受版权保护】一套。

【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】转载请注明出处：www.tangshuang.net【转载请注明来源】