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

mingzhong 發(fā)布于2019-08-01 17:35 / 684人閱讀

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

最近用vue+vue-router做了個(gè)單頁(yè)應(yīng)用的項(xiàng)目，頁(yè)面大概有15個(gè)左右。積累了一些開(kāi)發(fā)經(jīng)驗(yàn)在此做一些記錄.本文主要從可維護(hù)性方面來(lái)考慮SPA的開(kāi)發(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í)改版等，你就偷著樂(lè)吧。

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

或者

好處：

import過(guò)來(lái)的js會(huì)和你的業(yè)務(wù)代碼打包在一起。無(wú)謂的增加代碼的體積，而且vue這類(lèi)基礎(chǔ)包的更新頻率是低于業(yè)務(wù)代碼的。單拆出來(lái)加載有利于瀏覽器緩存

拆出來(lái)的會(huì)比import在一起的體積減小30k左右

把你的異步請(qǐng)求方法封裝在一個(gè)基礎(chǔ)組件里

ex：

//myTool.js

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

你可能會(huì)質(zhì)疑。。這樣有什么用

1.當(dāng)你的應(yīng)用跑在在多個(gè)容器的場(chǎng)景，比如手淘，他有個(gè)mtop的請(qǐng)求模式(一種接口調(diào)用方式)，比如還需要跑在釘釘里面。你只需要在里判斷一下容器環(huán)境就可以區(qū)分對(duì)應(yīng)的api調(diào)用方式

ex：

function get(param) {
    switch (container) {
        case "taobao":
            mtop.request(param);
            break;
        case "web":
            $.get(param)
            break;
        case "weixin":
            //balabala
            break;
        default:
            break;
    }
}

2.當(dāng)你遇到csrf攻擊需要給每個(gè)請(qǐng)求添加token。如果你不知道什么是csrf，請(qǐng)點(diǎn)擊這里

3.你可以在這里給每個(gè)請(qǐng)求添加一個(gè)loading模態(tài)框,免去每個(gè)方法調(diào)用前自己添加的煩惱

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+

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

詳見(jiàn)鏈接使用自定義事件的表單輸入組件

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è)面沒(méi)什么難度。不過(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)繁瑣的。。

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

這個(gè)布局的難點(diǎn)在于如何搞定body在不同機(jī)型上的高度。如果用純css來(lái)做，可能需要用到calc，或者boder等之類(lèi)的，而且針對(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)聽(tīng)這個(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是常見(jiàn)的場(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

GPU云服務(wù)器云服務(wù)器最佳實(shí)踐 webrtc最佳實(shí)踐 cdn最佳實(shí)踐 vpc最佳實(shí)踐

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/51235.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

mingzhong

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

客戶(hù)在SaaS采用中面臨的主要挑戰(zhàn)_Saas

閱讀 1652·2021-10-14 09:42
簡(jiǎn)單的三步教你下載PyCharm漢化插件，讓你學(xué)習(xí)Python事功半倍

閱讀 3917·2021-09-07 09:59
前端菜鳥(niǎo)筆記 Day-3 CSS基礎(chǔ)

閱讀 1373·2019-08-30 15:55
表單元素中readonly和disabled的區(qū)別

閱讀 641·2019-08-30 11:17
CSS Module

閱讀 3403·2019-08-29 16:06
防止圖片拉伸的自適應(yīng)處理

閱讀 572·2019-08-29 14:06
實(shí)習(xí)筆記整理 html+css 篇

閱讀 3200·2019-08-28 18:14
馬蜂窩ABTest多層分流系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

閱讀 3720·2019-08-26 13:55

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章