nej 搭配 vue 方案

此文已由作者张磊授权网易云社区发布。

欢迎访问网易云社区，了解更多网易技术产品运营经验。

前言

目前项目使用的技术是 nej + regular，路由方面是使用 nej 自带的，随着时间推移，项目已经上线很多模块，这时想尝试新技术，不可能推倒重来，只能边做边重构。想引入新技术，比如引入 vue，那么就会遇到一个问题，如何和已有的代码进行融合。

方案

方案整理下来有两种：

代码整合写在一起需要考虑的点：代码耦合在一起，在项目重构后期，需要剥离代码，那么就应该提前设计好方案，方便后续剥离代码。
新模块代码通过 iframe 加载引用好处的话，代码隔离，相当于新启一个项目，没有包袱，但坏处也有，由于加载时间过长会有一定时间的白屏。同时需要做好主页面和子页面的消息通知机制。

说明

这两种方案，都有特殊的一点，需要由 nej 路由去驱动 vue 路由。这样设计的目的，一方面在方案1的情况下，两个路由系统不会冲突，同时监听 location 变化，可能会出意料之外的问题；另一方面即使解决上一个问题，同时还需要适配 nej 路由的写法；再者，在后期即使想下掉 nej 路由，也只需要修改少量的代码即可；再者想在 url 处展示参数变化，也只需要做好同步机制，修改一个即可。那么想达到这样的方案，就需要其中一个路由系统可以不监听 location 的改变，刚好 vue-router 是支持的。有了 abstract 模式，就可以完美解决路由冲突。

Alt pic

实现

目前实现了方案1 的 demo。

首先在 nej 路由指定好路由起点

 ['/m/demo/', 'demo', 'module/demo/tmp.html', 'demo', ''],
 ['/m/demo2', 'demo', 'module/demo/tmp.html', 'demo2', ''],  // 加不加最后的 / 是有区别的

剩下的需要修改的文件均在这个链接的 demo 文件夹下，下载后放置正确即可。
运行后，会发现只能运行一次，第二次进入页面会失效。这个问题的原因是 nej 会缓存当前页面的 dom，结果把上次 vue 的内容给缓存下来了，再次进来的时候，相当于有两份相同的 dom，导致页面无法正常显示。解决问题的办法也很简单，找到 regularModule.js，添加 __resetBody 方法的调用。__resetBody 的方法已经写在 demo/index.js 内了。

    _pro.__build = function () {
+        this.__resetBody();

+    _pro.__resetBody = function __resetBody(params) {
+        if (this._$$InnerModule.__resetBody) {
+            this.__body = this._$$InnerModule.__resetBody(this.__body);
+        }
+    };