單頁(yè)應(yīng)用SPA開發(fā)最佳實(shí)踐

不知名網(wǎng)友發(fā)布于2019-08-21 16:25 / 549人閱讀

摘要：最近用做了個(gè)單頁(yè)應(yīng)用的項(xiàng)目，頁(yè)面大概有個(gè)左右。詳見鏈接使用自定義事件的表單輸入組件優(yōu)雅解決的問(wèn)題的問(wèn)題由來(lái)已久，在單頁(yè)應(yīng)用中我們免不了需要處理這樣的。

最近用vue+vue-router做了個(gè)單頁(yè)應(yīng)用的項(xiàng)目，頁(yè)面大概有15個(gè)左右。積累了一些開發(fā)經(jīng)驗(yàn)在此做一些記錄.本文主要從可維護(hù)性方面來(lái)考慮SPA的開發(fā)實(shí)踐

全站的顏色定義放在一個(gè)less或者scss的文件里，其他組件和頁(yè)面import這個(gè)配置來(lái)引用顏色。

示例代碼：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;

好處：

方便維護(hù)整站的色彩風(fēng)格，后續(xù)遇到VI升級(jí)改版等，你就偷著樂吧。

vue，vue-router多帶帶抽出來(lái)，用script標(biāo)簽引入 bad case

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

good case

或者

當(dāng)你在myInput方法里做一些操作，比如校驗(yàn)輸入值,你會(huì)發(fā)現(xiàn)數(shù)據(jù)并沒有更新到對(duì)應(yīng)的input,這是因?yàn)関-model也監(jiān)聽了輸入框的input事件

解決辦法：綁定value值，js更新value

對(duì)于中文：v-model也不是很適用

對(duì)于要求 IME (如中文、 日語(yǔ)、 韓語(yǔ)等) (IME意為’輸入法’)的語(yǔ)言，你會(huì)發(fā)現(xiàn)v-model不會(huì)在 ime 輸入中得到更新。如果你也想實(shí)現(xiàn)更新，請(qǐng)使用 input事件。

詳見鏈接使用自定義事件的表單輸入組件

5. 優(yōu)雅解決ios的fixed問(wèn)題

ios的fixed問(wèn)題由來(lái)已久，在單頁(yè)應(yīng)用中我們免不了需要處理這樣的bug。如何優(yōu)雅解決這個(gè)問(wèn)題

如圖：這是一個(gè)經(jīng)典的移動(dòng)端布局。header和footer相對(duì)于瀏覽器固定，body高度可變。

這樣的布局多帶帶一個(gè)頁(yè)面沒什么難度。不過(guò)當(dāng)你把footer設(shè)為fixed的時(shí)候會(huì)在ios上看到奇異的效果。

當(dāng)單頁(yè)應(yīng)用里有很多個(gè)這樣的頁(yè)面，而且header的高度也不是固定的時(shí)候，你就會(huì)發(fā)現(xiàn)每個(gè)頁(yè)面都需要搞定body的高度css還是有點(diǎn)繁瑣的。。

有沒有一個(gè)優(yōu)雅的方式來(lái)做這個(gè)事情。讓代碼可維護(hù)性更好。

這個(gè)布局的難點(diǎn)在于如何搞定body在不同機(jī)型上的高度。如果用純css來(lái)做，可能需要用到calc，或者boder等之類的，而且針對(duì)每個(gè)頁(yè)面不header不同，需要重新計(jì)算body的高度。

雖然我們?cè)诓季址矫娌煌扑]使用js來(lái)處理，不過(guò)在是個(gè)時(shí)候是使用js處理body的高度的時(shí)候了。

步驟：

我們需要獲取容器的高度。

var w_height = $(window).height();

獲取header和footer的等f(wàn)ixed元素的高度

這里我們可以給需要fixed的元素加個(gè)自定義屬性

fixed-box="true"



//balabalaba

在每個(gè)頁(yè)面被路由到加載的時(shí)候mounted觸發(fā)一個(gè)事件，告知js需要計(jì)算處理body高度

mounted: function() {
            _body.trigger("mounted");        
         },

在main.js等入口函數(shù)里監(jiān)聽這個(gè)事件處理相關(guān)邏輯

jWin.on("mounted", function () {  
  //元素加載后計(jì)算可滾動(dòng)元素的區(qū)域?qū)挾?   
      var height = 0;    
      $("[fixed-box="true"]").each(function () {
                              height = height + $(this).height();   
                             }); 
      var h = w_height - height; 
      $("[fixed-box="scroll"]").height(h);
  });

這樣整個(gè)頁(yè)面的布局都可以在這個(gè)js里處理，后續(xù)新增頁(yè)面只需要做兩個(gè)事情：

1.給頁(yè)面加fixed屬性。

2.在mounted方法里觸發(fā)事件。

6.如何拉起其他app

webapp拉起其他native app是常見的場(chǎng)景，通常我們都通過(guò)scheme來(lái)拉起其他app

不過(guò)在ios中偶爾會(huì)遇到這個(gè)拉起的動(dòng)作偶爾會(huì)被一些web容器記錄在history里。為了處理這個(gè)情況通常在ios里面我們都是建立一個(gè)iframe的元素然后把iframe的src指向這個(gè)schema，然后把iframe插入dom，在延時(shí)刪除這個(gè)元素。這樣history里就不會(huì)有這個(gè)記錄了。不過(guò)此方法對(duì)安卓無(wú)效。

同步更新在我的個(gè)人博客https://www.56way.com/p/108.html