最近用vue+vue-router做了个单页应用的项目,页面大概有15个左右。积累了一些开发经验在此做一些记录.本文主要从可维护性方面来考虑SPA的开发实践

全站的颜色定义放在一个less或者scss的文件里,其他组件和页面import这个配置来引用颜色。

示例代码: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标签引入

bad case

npm install vue
npm install vue-router
//js
import Vue from 'vue'
import VueRouter from 'vue-router'

good case

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

或者

<script src="https://g.alicdn.com/cn-yz/bmw/0.2.5/vendor/vue??2.2.0.js,vue-router.min.js“></script>

好处:

import过来的js会和你的业务代码打包在一起。无谓的增加代码的体积,而且vue这类基础包的更新频率是低于业务代码的。单拆出来加载有利于浏览器缓存

拆出来的会比import在一起的体积减小30k左右

把你的异步请求方法封装在一个基础组件里

ex:

//myTool.js

function get(param){
$.get(param);
}
function post(param){
$.post(param)
}

你可能会质疑。。这样有什么用

  • 1.当你的应用跑在在多个容器的场景,比如手淘,他有个mtop的请求模式(一种接口调用方式),比如还需要跑在钉钉里面。你只需要在里判断一下容器环境就可以区分对应的api调用方式

ex:

function get(param) {
switch (container) {
case "taobao":
mtop.request(param);
break;
case "web":
$.get(param)
break;
case "weixin":
//balabala
break;
default:
break;
}
}
  • 2.当你遇到csrf攻击需要给每个请求添加token。如果你不知道什么是csrf,请点击这里

  • 3.你可以在这里给每个请求添加一个loading模态框,免去每个方法调用前自己添加的烦恼

ex:

function get(param){
var show = param.showloading===undefined?true:param.showloading;
if(show){
$.showPreloader();
}
$.get(param);
}
  • 4.v-model与v-on:input的坑

ex:vue 2.2.0+

<input type="text" v-model="a" v-on:input="myInput"/>
<script>
function myInput(){
this.a = "abc";
}
</script>

当你在myInput方法里做一些操作,比如校验输入值,你会发现数据并没有更新到对应的input,这是因为v-model也监听了输入框的input事件

解决办法:绑定value值,js更新value

<input type="text" :value="a" v-on:input="myInput"/>
<script>
function myInput(){
var formattedValue = "abc";
this.a = formattedValue;
this.$refs.input.value = formattedValue
this.$emit('input', Number(formattedValue))
}
</script>

对于中文:v-model也不是很适用

对于要求 IME (如中文、 日语、 韩语等) (IME意为’输入法’)的语言,你会发现v-model不会在 ime 输入中得到更新。如果你也想实现更新,请使用 input事件。

详见链接使用自定义事件的表单输入组件

5. 优雅解决ios的fixed问题

ios的fixed问题由来已久,在单页应用中我们免不了需要处理这样的bug。如何优雅解决这个问题

如图:这是一个经典的移动端布局。header和footer相对于浏览器固定,body高度可变。

这样的布局单独一个页面没什么难度。不过当你把footer设为fixed的时候会在ios上看到奇异的效果。

当单页应用里有很多个这样的页面,而且header的高度也不是固定的时候,你就会发现每个页面都需要搞定body的高度css还是有点繁琐的。。

有没有一个优雅的方式来做这个事情。让代码可维护性更好。

这个布局的难点在于如何搞定body在不同机型上的高度。如果用纯css来做,可能需要用到calc,或者boder等之类的,而且针对每个页面不header不同,需要重新计算body的高度。

虽然我们在布局方面不推荐使用js来处理,不过在是个时候是使用js处理body的高度的时候了。

步骤:

  • 我们需要获取容器的高度。

var w_height = $(window).height();
  • 获取header和footer的等fixed元素的高度

这里我们可以给需要fixed的元素加个自定义属性

fixed-box="true"

<div class="header" fixed-box="true"></div>
<div class="body " fixed-box="scroll">
//balabalaba
</div>
<div class="footer" fixed-box="true"></div>
  • 在每个页面被路由到加载的时候mounted触发一个事件,告知js需要计算处理body高度

mounted: function() {
_body.trigger("mounted");
},
  • 在main.js等入口函数里监听这个事件处理相关逻辑

jWin.on("mounted", function () {
//元素加载后计算可滚动元素的区域宽度
var height = 0;
$("[fixed-box='true']").each(function () {
height = height + $(this).height();
});
var h = w_height - height;
$('[fixed-box="scroll"]').height(h);
});

这样整个页面的布局都可以在这个js里处理,后续新增页面只需要做两个事情:

1.给页面加fixed属性。

2.在mounted方法里触发事件。

6.如何拉起其他app

webapp拉起其他native app是常见的场景,通常我们都通过scheme来拉起其他app

不过在ios中偶尔会遇到这个拉起的动作偶尔会被一些web容器记录在history里。为了处理这个情况通常在ios里面我们都是建立一个iframe的元素然后把iframe的src指向这个schema,然后把iframe插入dom,在延时删除这个元素。这样history里就不会有这个记录了。不过此方法对安卓无效。


同步更新在我的个人博客https://www.56way.com/p/108.html

单页应用SPA开发最佳实践的更多相关文章

  1. iOS应用开发最佳实践

    <iOS应用开发最佳实践> 基本信息 作者: 王浩    出版社:电子工业出版社 ISBN:9787121207679 上架时间:2013-7-22 出版日期:2013 年8月 开本:16 ...

  2. MongoDB开发最佳实践

    MongoDB开发最佳实践 连接到MongoDB · 关于驱动程序:总是选择与所用之MongoDB相兼容的驱动程序.这可以很容易地从驱动兼容对照表中查到: · 如果使用第三方框架(如Spring Da ...

  3. 【社区公益】送《Web前端开发最佳实践》给需要的人

    算起来至今,我进入软件开发行业已经有11年之久.从最初的研究人工智能,到后来的Web开发,控件开发,直到现在纯粹的Web前端开发.虽然没有大的作品问世,但也是勤勤恳恳,踏实做事,低调做人.从来不吹牛逼 ...

  4. Web前端开发最佳实践(1):前端开发概述

    引言 我从07年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法.可以说,博客园是我参与技术讨论的一个主要的平台.在这其间,随着接触技术的广度和深度的增加,也写了一些得到了 ...

  5. Web前端开发最佳实践(2):前端代码重构

    前言 代码重构是业内经常讨论的一个热门话题,重构指的是在不改变代码外部行为的情况下进行源代码修改,所以重构之前需要考虑的是重构后如何才能保证外部行为不改变.对于后端代码来说,可以通过大量的自动化测试来 ...

  6. Web前端开发最佳实践(4):在页面中添加必要的meta信息

    meta标签放置在HTML页面的head中,主要用于标识网站.其中基本上包含了网站的一些描述信息,例如,简介.作者等.这些信息有助于搜索引擎更准确地识别网页的内容,也有助于第三方工具抓取网站基本信息. ...

  7. Web前端开发最佳实践(3):前端代码和资源的压缩与合并

    一般在网站发布时,会压缩前端HTML.CSS.JavaScript代码及用到的资源文件(主要是图片文件),目的是加快文件在网络中的传输,让网页更快的展现.当然,CDN分发.缓存等方式也是加快代码或资源 ...

  8. 单页应用SPA做SEO的一种清奇的方案

    单页应用SPA做SEO的一种清奇的方案 网上有好几种单页应用转seo的方案,有服务端渲染ssr.有预渲染prerender.google抓AJAX.静态化...这些方案都各有优劣,开发者可以根据不同的 ...

  9. 从单页应用(SPA)到服务器渲染(SSR)

    从单页应用(SPA)到服务器渲染(SSR) 情景回顾 在学习Vue开发一个电商网站的管理后台时,使用到了一个组件 vue-quill-editor 主要是一个快捷的一个富文本编辑器 在使用这个组件的组 ...

随机推荐

  1. ABP 使用ElasticSearch、Kibana、Docker 进行日志收集

    ABP 使用ElasticSearch.Kibana.Docker 进行日志收集 后续会根据公司使用的技术,进行技术整理分享,都是干货哦别忘了关注我!!! 最近领导想要我把项目日志进行一个统一收集,因 ...

  2. SQL Server内置的HTAP技术

    SQL Server内置的HTAP技术 目录 背景 SQL Server在OLAP上的发展 SQL Server的初代HTAP SQL Server逐渐增强的HTAP SQL Server列存总结 H ...

  3. 矩池云安装gdal五种解决方案

    1.最快最靠谱的是conda conda install gdal 命令行conda/pip search gdal查看版本,选择合适的版本,例如:conda search gdal 命令行conda ...

  4. 《手把手教你》系列基础篇(七十六)-java+ selenium自动化测试-框架设计基础-TestNG实现DDT - 下篇(详解教程)

    1.简介 今天这一篇宏哥主要是结合实际工作中将遇到的测试场景和前边两篇学习的知识结合起来给大家讲解和分享一下,希望以后大家在以后遇到其他的测试场景也可以将自己的所学的知识应用到测试场景中. 2.测试场 ...

  5. Owin + WebApi + OAuth2 搭建授权模式(授权码模式 Part I)

    绪 最近想要整理自己代码封装成库,也十分想把自己的设计思路贴出来让大家指正,奈何时间真的不随人意. 想要使用 OWIN 做中间件服务,该服务中包含 管线.授权 两部分.于是决定使用 webapi .O ...

  6. 机器学习之BP神经网络

    import random import math #神经元的定义 class Neuron: def __init__(self,bias): self.bias = bias self.weigh ...

  7. JavaWeb——服务器

    作用:服务器是一种被动的操作,用来处理用户的一些请求和给用户的一些响应 相关软件:tomcat Tomcat是Apache 软件基金会(Apache Software Foundation)的Jaka ...

  8. SQL语句大全,所有的SQL都在这里

    转自微信公众号-我是程序汪 一.基础 1.说明:创建数据库CREATE DATABASE database-name2.说明:删除数据库drop database dbname3.说明:备份sql s ...

  9. Java基础知识 String StringBuffer StringBuilder三者的区别(面试题)

    相同点:String.StringBuffer.StringBuilder最终底层存储与操作的都是char数组,StringBuffer和StringBuilder都继承了AbstractString ...

  10. [bzoj1791][ioi2008]Island 岛屿(基环树、树的直径)

    [bzoj1791][ioi2008]Island 岛屿(基环树.树的直径) bzoj luogu 题意可能会很绕 一句话:基环树的直径. 求直径: 对于环上每一个点记录其向它的子树最长路径为$dp_ ...