vue使用之剑走偏锋——菜单组件篇

背景

习惯了这样的写法了，上来先来一个背景，交待一下事情的起因。事情的起因很简单，用惯了mvc框架，想来一发前后端完全分离的框架试试。选用的人员和技术是这样子的，让原本做java的web开发的人员使用vue，在visual studio code里面写纯前端的代码，然后由.net的同事，提示webapi2的接口。关于这个设计中的权限验证等问题，会单独一篇笔记进行介绍。

这里要说的是，由于前后端分离，导致没有了后台的java模板或者.net的razor之类的视图引擎。没有了这种东西会很尴尬，因为需要用ajax来获取数据，获取到数据之后呢，用jquery的选择器选择dom然后一个个填充，提交的时候再用jquery的选择器选择dom取其值——。这样子的话，估计我要被同事们骂死……。为了邻里和谐，我觉得vue比较流行，而且它的mvvm据说速度不错，试用了一下，觉得简单方便条条框框少，毕竟我只是要用它的mvvm功能，只是为了把对象与dom绑定，把事件相绑定。

单面（SPA） vs 多页

这个是我比较头疼的问题，其实个人比较倾向单面应用，因为直观上觉得虽然第一次要加载的东西比较多，但是，由于浏览器有缓存以及做好载入界面，用户其实是容易接受的。而多页面每次都要加载许多东西，虽然也有缓存，但是许多对象都需要初始化，直觉上就知道总的性能不如单页应用。然后我就开始搭建vue的spa了，用了vue的webpack模板，搭建出来的项目如下：

由于使用的工具是vscode，所以，输入命令，调用bower,npm等还是比较爽的，而且可以直接开发了。但是，我发现，我想使用的是一个开源的基于bootstrap的后台管理系统模板，这个模板相互依赖特别多，我理了半天，没理清楚，更别说把它做成vue的组件化了。没过多久，我就放弃了这条我其实比较喜欢的路。

放弃了spa，选择了多页，但是，多页又带来了另外一个问题，就是是用iframe将菜单、导航等独立在外以便共用，还是每个页面都带一个菜单、导航。

iframe VS 纯多页

公司的项目一直都是在使用iframe，但是，这次的项目有个明确的要求，就是要自适应布局，要能在手机上无缝转换，这个，就是我很不放心iframe，我试着将iframe放在bootstrap自适应的布局中，确实也可以很好的进行工作，但是，总觉得有一天它无故导致出现滚动条，无故导致某些东西展示不全。同时，它还有一个致命的问题，就是模态弹窗只能遮住iframe，而非整个浏览器页面，这就很头疼。这样用户的操作流程就是开放性的了，很难摸清楚用户的实际操作流程，会导致什么意外的情况发生。

所以，最后，只能用纯多页的了。

纯多页的前端

纯多页其实也存在一个问题，就是上面所说的，共用区域在每个页面里面都要写一次，其实，头部导航、左边菜单，还是很烦的，加上没有后台帮助渲染，前端的代码少不了。所以，我自己写了一个方法，用来将其它的html页面加载至当前界面的当前位置，其实类似于include。

function HtmlInclude(url) {
    var req = false;

    // Safari, Firefox, 及其他非微软浏览器
    if (window.XMLHttpRequest) {
        try {
            req = new XMLHttpRequest();
        } catch (e) {
            req = false;
        }
    } else if (window.ActiveXObject) {

        // For Internet Explorer on Windows
        try {
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                req = false;
            }
        }
    }
    if (req) {
        // 同步请求，等待收到全部内容
        req.open('GET', url, false);
        req.send(null);
        document.write(req.responseText);
    } else {
        document.write("对不起，你的浏览器不支持" +
            "XMLHTTPRequest 对象。这个网页的显示要求" +
            "Internet Explorer 5 以上版本, " +
            "或 Firefox 或 Safari 浏览器，也可能会有其他可兼容的浏览器存在。");
    }
}

调用的方法如下：

这样，在

<script>
        HtmlInclude("snip/menu_left.html");
      </script>

的位置，最终就会变成"snip/menu_left.html"中的代码，简单完美！但是，在后面的调试过程中发现，浏览器中根本无法调试"snip/menu_left.html"中的代码，这就很尴尬了~~~

vue组件的剑走偏锋

vue的组件化提供了相当牛逼的特性，但是，对于单文件的支持非常地不行，只能在webpack等“编译”功能的前提下，才可以使用.vue文件之类的组件单文件模式。但是，公司内部其实连html,css,javascript是非常模糊，让一下子跃过html,css,js直接去用webpack编译，估计不仅调试起来让人崩溃，甚至连开始都开始不了。所以，咱们还是从实际出发，以html为骨骼，以css为皮肉， 以javascript为筋脉。

查阅了一下，vue提供了另外两个模式的方式，其一是内联模板，这种内联模板其实是让组件的调用者给予组件的template内容，这相当于在每个页面里面都要把对应的组件的模板写一遍，与我们的需求不符。其二便是X-Templates，这个东西与我们需要的功能类似。它将template内容单独写成html格式的js文件，然后可以通过<script type='text/x-template' src='' id''>去加载，在之后再加载与之对应的组件js文件，并在组件的template处写上面那个x-template标签中的id。这下又尴尬了，每个组件的引用必须引用两个文件，而且还分先后，并且，引用模板的js文件时，需要特殊指定type，同时，因为是js文件，编辑器对html提示功能就瞎了。所以，vue内置的这两种模式并不适合我。

我的方案

可能是经历的原因，我觉得，我的任何项目里面都要有jquery，虽然vue提供了ajax的请求插件，但是，我依然觉得有必须引用一下jquery，有了它，我才有安全感，客户的各种奇葩需求，我心中才有底，不然今天动画，明天校验的，我能给愁死。

于是，我做了另外一个打算，既然

Vue.component('my-component', {
  template: ""
});

我给template这个对象字符串，而我又想给它的是html页面，那么我用jquery请求就是喽，如下：

Vue.component('my-component', {
  template: $.getSync("templates/com1.html")
});

这样子的话，我只需要在templates文件夹中增加这个com1.html，供vue使用即可。这个$.getSync是我实现的一个jquery的扩展方法，因为jquery的同步请求只有$.ajax中才有，而且还是要通过回调，$.get方法是异步的，除非设置全局同步，全局同步会影响其它的功能代码，所以，万船无奈自己用$.ajax封装了一个$.getSync方法。

jQuery.extend({
      getSync:function(url){
        var result=null;
        $.ajax({
          url:url,
          async:false,
          success:function(data){
            result=data;
          }
        });
        return result;
      }
    });