单页应用SPA开发最佳实践

williamwen1986 发布于2019-08-29 13:25 / 3379人阅读

摘要：最近用做了个单页应用的项目，页面大概有个左右。详见链接使用自定义事件的表单输入组件优雅解决的问题的问题由来已久，在单页应用中我们免不了需要处理这样的。

最近用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

或者

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

解决办法：绑定value值，js更新value

对于中文：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"



//balabalaba

在每个页面被路由到加载的时候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

GPU云服务器云服务器最佳实践 webrtc最佳实践 cdn最佳实践 vpc最佳实践

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112591.html

单页应用SPA开发最佳实践

摘要：最近用做了个单页应用的项目，页面大概有个左右。详见链接使用自定义事件的表单输入组件优雅解决的问题的问题由来已久，在单页应用中我们免不了需要处理这样的。最近用vue+vue-router做了个单页应用的项目，页面大概有15个左右。积累了一些开发经验在此做一些记录.本文主要从可维护性方面来考虑SPA的开发实践全站的颜色定义放在一个less或者scss的文件里，其他组件和页面import...

mingzhong 2019-08-01 17:35 评论0 收藏0
单页应用SPA开发最佳实践

摘要：最近用做了个单页应用的项目，页面大概有个左右。详见链接使用自定义事件的表单输入组件优雅解决的问题的问题由来已久，在单页应用中我们免不了需要处理这样的。最近用vue+vue-router做了个单页应用的项目，页面大概有15个左右。积累了一些开发经验在此做一些记录.本文主要从可维护性方面来考虑SPA的开发实践全站的颜色定义放在一个less或者scss的文件里，其他组件和页面import...

不知名网友 2019-08-21 16:25 评论0 收藏0
前端优化 - 收藏集 - 掘金

摘要：虽然有着各种各样的不同，但是相同的是，他们前端优化不完全指南前端掘金篇幅可能有点长，我想先聊一聊阅读的方式，我希望你阅读的时候，能够把我当作你的竞争对手，你的梦想是超越我。如何提升页面渲染效率 - 前端 - 掘金Web页面的性能我们每天都会浏览很多的Web页面，使用很多基于Web的应用。这些站点看起来既不一样，用途也都各有不同，有在线视频，Social Media，新闻，邮件客户端...

VincentFF 2019-08-20 17:15 评论0 收藏0
Vue SPA(单页应用)首屏优化实践

摘要：原文首发代码压缩如果你用的是服务器，请修改配置文件其他类似在里加入开启或者关闭模块，这里使用表示启动设置允许压缩的页面最小字节数默认值是，不管页面多大都压缩设置系统获取几个单位的缓存用于存储的压缩结果数据流代表以为单位，按照原始数据大原文首发：　https://shuirong.github.io/ 1.代码压缩(gzip) 如果你用的是nginx服务器，请修改配置文件(其他web ...

wall2flower 2019-08-21 11:41 评论0 收藏0
毫无色彩的二哲和他的巡礼之年

摘要：前戏今年，对于我个人而言遭遇了三个重大的转折点。尽可能的把沟通成本用约定和文档降低。学习的这一年可以说年的学习，在上半年的精力，放在了技术上。而下半年则相反。前戏今年，对于我个人而言遭遇了三个重大的转折点。 15年9月大三休学创业，16年9月重新复学大三在2016年4月顺利引进天使轮，公司从厦门集美区搬到了深圳南山区 16年底，我们正在准备接入A轮 16年与15年相比，总体来...

Alex 2019-08-20 14:05 评论0 收藏0