单页应用SPA开发最佳实践

最近使用vue+vue-router做了一个单页应用项目，大概有15页。积累了一些开发经验，在此做一些记录。本文主要从可维护性的角度考虑SPA的开发实践。整个站点的颜色定义放在一个less或者scss文件中，其他组件和页面导入这个配置来引用颜色。示例代码：define.scss$bgColor:#fff;$color:#619eee;$fontColor:#333333;$fontColor01:#A5A5A5;$fontColor02:#4a4a4a;$fontColor03:#448CFF;$color300:#ed5630;$color3001:#fbfbfb;$accpetColor:#2fbe27;$refusedColor:#de0101;$hrefColor:#4a90e2;$redColor:#ff4c4c;好处：方便维护整个站点的色彩风格，后期遇到VI升级改版可以偷偷玩玩。vue,vue-router单独解压，script标签引入badcasepminstallvuenpminstallvue-router//jsimportVuefrom'vue'importVueRouterfrom'vue-router'goodcase或好处：导入的js会和你的业务代码打包在一起。无谓地增加代码体积，vue等基础包的更新频率低于业务代码。分离和加载有利于浏览器缓存。分离的将减少大约30k的导入大小。将您的异步请求方法封装在一个基本组件中，例如：//myTool.jsfunctionget(param){$.get(param);}functionpost(param){$.post(param)}您可能会质疑。.这有什么用？1、当你的应用运行在多个容器中时，比如手机淘宝，它有mtop请求方式（一种接口调用方式），比如需要运行在钉钉中。只需要判断容器环境就可以区分对应的api调用方法ex:functionget(param){switch(container){case"taobao":mtop.request(param);休息;case"web":$.get(param)break;case"weixin"://balabalabreak;默认值：中断；}}2.当遇到csrf攻击时，需要为每个请求添加一个token。如果你不知道csrf是什么，请点击这里3.你可以在这里为每个请求添加一个加载模态框，免去了每次方法调用前自己添加的麻烦ex:functionget(param){varshow=param.showloading===undefined?true:param.showloading;如果（显示）{$.showPreloader();}$.get(param);}4.v-model和v-on：输入坑ex:vue2.2.0+当你在myInput方法中做一些操作，比如验证输入值，你会发现数据没有更新到相应的输入。这是因为v-model也监听了输入框的input事件。解决方法：绑定值，js更新值对于中文：v-model不是很适用于IME要求（如中文、日文、韩文等）.)（IME的意思是“输入法”），您会发现v-model不会根据ime输入进行更新。如果您也想实现更新，请使用输入事件。详见链接Forminputcomponentsusingcustomevents5.优雅解决ios的固定问题ios的固定问题由来已久，我们在单页应用中难免需要处理这样的bug。如何优雅的解决这个问题如图所示：这是一个经典的移动端布局。页眉和页脚相对于浏览器是固定的，主体的高度是可变的。这样的布局在单页上并不难。但是当你把footer设置为fixed时，你会在ios上看到奇怪的效果。当单页应用中有很多这样的页面，而且header的高度不固定时，你会发现每个页面都用CSS固定body的高度有点麻烦。.有没有一种优雅的方法可以做到这一点。使代码更易于维护。这种布局的难点在于如何获取不同模型上的body高度。如果用纯css来做，可能需要用到calc，或者boder等，而且每个页面和header不同，需要重新计算body的高度。虽然我们不推荐使用js来布局，但是是时候使用js来处理body的高度了。步骤：我们需要获取容器的高度。varw_height=$(window).height();获取header、footer等固定元素的高度这里我们可以给需要固定的元素添加自定义属性fixed-box="true"