背景

习惯了这样的写法了,上来先来一个背景,交待一下事情的起因。事情的起因很简单,用惯了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;
}
});

vue使用之剑走偏锋——菜单组件篇的更多相关文章

  1. Vue 2.0 右键菜单组件 Vue Context Menu

    Vue 2.0 右键菜单组件 Vue Context Menu https://juejin.im/entry/5976d14751882507db6e839c

  2. 阅读vue源码-----内置组件篇(keep-alive)

    1.前言: <keep-alive>是vue实现的一个内置组件,也就是说vue源码不仅实现了一套组件化的机制,也实现了一些内置组件. <keep-alive>官网介绍如下:&l ...

  3. Android开发工程师文集-提示框,菜单,数据存储,组件篇

    提示框,菜单,数据存储,组件篇 Toast Toast.makeText(context, text, 时间).show(); setDuration();//设置时间 setGravity();// ...

  4. 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  5. vue学习指南:第六篇(详细) - Vue的组件 component

    1. 什么是组件?有两种解释 1. 第一种解释: 什么是组件? 1. 组件是 vue 中的一个可复用的实例,所以new Vue() 是vue中最大的那个组件(根组件),有名字,使用的时候以单标签或双标 ...

  6. vue.js之组件篇

    Vue.js 组件 模块化:是从代码逻辑的角度进行划分的: 组件化:是从UI界面的角度进行划分的. 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重 ...

  7. JS列表的下拉菜单组件(仿美化控件select)

    JS列表的下拉菜单组件(仿美化控件select) 2014-01-23 23:51 by 龙恩0707, 1101 阅读, 6 评论, 收藏, 编辑 今天是农历23 也是小年,在这祝福大家新年快乐!今 ...

  8. asp.mvc中的vue分页实例,分页组件无法重置reload,解决点击查询按钮后,分页不刷新的问题

    刚刚接触Vue.js,现在需要做一个查询功能,并且进行服务端分页.主要思路是在页面中注册一个分页组件,然后进行调用.代码如下 1.引用vue.js,具体去网上下载 2.在html的body中添加如下代 ...

  9. 【分享】Vue 资源典藏(UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例)

    Vue 资源典藏,包括:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...

随机推荐

  1. JQ封装图片预加载插件

    我们知道,图片的加载,特别是资源较大的图片,加载相当耗费时间.为了提高用户体验,不得不使用图片预加载技术来提前加载,以提高用户在浏览时的流畅度. 先来弄明白图片的懒加载和预加载的不同: 1)概念:懒加 ...

  2. angularjs应用prerender.io 搜索引擎优化实践

    上一篇博文(http://www.cnblogs.com/ideal-lx/p/5625428.html)介绍了单页面搜索引擎优化的原理,以及介绍了两个开源框架的优劣.prerender框架的工作原理 ...

  3. dd的用法

    1.生成一个空的,大小为1G的文件(有洞的文件)$ dd if=/dev/zero of=winxp.img bs=1k seek=1024k count=1 2.读软盘,并以16进制保存到文件中#d ...

  4. Nignx入门location、root配置

    nginx的配置.首当其冲的就是location配置了,下面是笔记参考的博文链接 http://www.cnblogs.com/sunkeydev/p/5225051.html   location匹 ...

  5. [转]AngularJS 之 ng-options指令

    原文地址 一. 基本下拉效果(lable for value in array) 其中select标签中的ng-model属性必须有,其值为选中的对象或属性值. <div ng-controll ...

  6. Python模块之subprocess--使用Popen来调用系统命令

    当我们需要调用系统的命令的时候,最先考虑的os 模块.用os.system()和os.popen()来进行操作.但是这两个命令过于简单,不能完成一些复杂的操作,如给运行的命令提供输入或者读取命 令的输 ...

  7. 微信jssdk分享功能,jssdk成功调用,分享内容自定义失败

    前提:调用微信jssdk分享功能,通过微信开发者工具调试,调用正常,无任何报错信息. 问题:调用成功,且开发者工具正常显示,但是通过真机调试,分享出去后,自定义内容失效,为微信自动获取的默认内容!截止 ...

  8. Javaee需不需要培训?培训完可以顺利找到工作吗?

    Javaee需不需要培训?培训完可以顺利找到工作吗? 在IT行业中Java以它通用性.高效性.平台移植性和安全性遍布各个领域,它的火热也给IT市场发展带来一定影响,随着Java技术的广泛运营,企业对J ...

  9. javascript实现禁止右键和F12查看源代码

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  10. Iconfont 矢量图标库的应用

    前言: 在项目开发中,不免在标签栏,工具栏等应用各种各样的小图标. 然后老旧的做法就是要UI设计出各种图标并生成图片给到我们,但是这样就存在了一个问题,每次请求页面的时候就需要发送请求请求图片,这样不 ...