国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

williamwen1986 / 3421人閱讀

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

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

全站的顏色定義放在一個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;

好處:

方便維護整站的色彩風格,后續(xù)遇到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方法里做一些操作,比如校驗輸入值,你會發(fā)現(xiàn)數(shù)據(jù)并沒有更新到對應(yīng)的input,這是因為v-model也監(jiān)聽了輸入框的input事件

解決辦法:綁定value值,js更新value


對于中文:v-model也不是很適用

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

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

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

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

如圖:這是一個經(jīng)典的移動端布局。header和footer相對于瀏覽器固定,body高度可變。

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

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

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

這個布局的難點在于如何搞定body在不同機型上的高度。如果用純css來做,可能需要用到calc,或者boder等之類的,而且針對每個頁面不header不同,需要重新計算body的高度。

雖然我們在布局方面不推薦使用js來處理,不過在是個時候是使用js處理body的高度的時候了。

步驟:

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

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

獲取header和footer的等fixed元素的高度

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

fixed-box="true"

//balabalaba

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

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

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

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

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

1.給頁面加fixed屬性。

2.在mounted方法里觸發(fā)事件。
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

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

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/112591.html

相關(guān)文章

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

    摘要:最近用做了個單頁應(yīng)用的項目,頁面大概有個左右。詳見鏈接使用自定義事件的表單輸入組件優(yōu)雅解決的問題的問題由來已久,在單頁應(yīng)用中我們免不了需要處理這樣的。 最近用vue+vue-router做了個單頁應(yīng)用的項目,頁面大概有15個左右。積累了一些開發(fā)經(jīng)驗在此做一些記錄.本文主要從可維護性方面來考慮SPA的開發(fā)實踐 全站的顏色定義放在一個less或者scss的文件里,其他組件和頁面import...

    mingzhong 評論0 收藏0
  • 單頁應(yīng)用SPA開發(fā)最佳實踐

    摘要:最近用做了個單頁應(yīng)用的項目,頁面大概有個左右。詳見鏈接使用自定義事件的表單輸入組件優(yōu)雅解決的問題的問題由來已久,在單頁應(yīng)用中我們免不了需要處理這樣的。 最近用vue+vue-router做了個單頁應(yīng)用的項目,頁面大概有15個左右。積累了一些開發(fā)經(jīng)驗在此做一些記錄.本文主要從可維護性方面來考慮SPA的開發(fā)實踐 全站的顏色定義放在一個less或者scss的文件里,其他組件和頁面import...

    不知名網(wǎng)友 評論0 收藏0
  • 前端優(yōu)化 - 收藏集 - 掘金

    摘要:雖然有著各種各樣的不同,但是相同的是,他們前端優(yōu)化不完全指南前端掘金篇幅可能有點長,我想先聊一聊閱讀的方式,我希望你閱讀的時候,能夠把我當作你的競爭對手,你的夢想是超越我。 如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能 我們每天都會瀏覽很多的Web頁面,使用很多基于Web的應(yīng)用。這些站點看起來既不一樣,用途也都各有不同,有在線視頻,Social Media,新聞,郵件客戶端...

    VincentFF 評論0 收藏0
  • Vue SPA(單頁應(yīng)用)首屏優(yōu)化實踐

    摘要:原文首發(fā)代碼壓縮如果你用的是服務(wù)器,請修改配置文件其他類似在里加入開啟或者關(guān)閉模塊,這里使用表示啟動設(shè)置允許壓縮的頁面最小字節(jié)數(shù)默認值是,不管頁面多大都壓縮設(shè)置系統(tǒng)獲取幾個單位的緩存用于存儲的壓縮結(jié)果數(shù)據(jù)流代表以為單位,按照原始數(shù)據(jù)大 原文首發(fā): https://shuirong.github.io/ 1.代碼壓縮(gzip) 如果你用的是nginx服務(wù)器,請修改配置文件(其他web ...

    wall2flower 評論0 收藏0
  • 毫無色彩的二哲和他的巡禮之年

    摘要:前戲今年,對于我個人而言遭遇了三個重大的轉(zhuǎn)折點。盡可能的把溝通成本用約定和文檔降低。學習的這一年可以說年的學習,在上半年的精力,放在了技術(shù)上。而下半年則相反。 前戲 今年,對于我個人而言遭遇了三個重大的轉(zhuǎn)折點。 15年9月大三休學創(chuàng)業(yè),16年9月重新復學大三 在2016年4月順利引進天使輪,公司從廈門集美區(qū)搬到了深圳南山區(qū) 16年底,我們正在準備接入A輪 16年與15年相比,總體來...

    Alex 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<