摘要:最近用做了個單頁應(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 casenpm 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
摘要:最近用做了個單頁應(yīng)用的項目,頁面大概有個左右。詳見鏈接使用自定義事件的表單輸入組件優(yōu)雅解決的問題的問題由來已久,在單頁應(yīng)用中我們免不了需要處理這樣的。 最近用vue+vue-router做了個單頁應(yīng)用的項目,頁面大概有15個左右。積累了一些開發(fā)經(jīng)驗在此做一些記錄.本文主要從可維護性方面來考慮SPA的開發(fā)實踐 全站的顏色定義放在一個less或者scss的文件里,其他組件和頁面import...
摘要:最近用做了個單頁應(yīng)用的項目,頁面大概有個左右。詳見鏈接使用自定義事件的表單輸入組件優(yōu)雅解決的問題的問題由來已久,在單頁應(yīng)用中我們免不了需要處理這樣的。 最近用vue+vue-router做了個單頁應(yīng)用的項目,頁面大概有15個左右。積累了一些開發(fā)經(jīng)驗在此做一些記錄.本文主要從可維護性方面來考慮SPA的開發(fā)實踐 全站的顏色定義放在一個less或者scss的文件里,其他組件和頁面import...
摘要:雖然有著各種各樣的不同,但是相同的是,他們前端優(yōu)化不完全指南前端掘金篇幅可能有點長,我想先聊一聊閱讀的方式,我希望你閱讀的時候,能夠把我當作你的競爭對手,你的夢想是超越我。 如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能 我們每天都會瀏覽很多的Web頁面,使用很多基于Web的應(yīng)用。這些站點看起來既不一樣,用途也都各有不同,有在線視頻,Social Media,新聞,郵件客戶端...
摘要:原文首發(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 ...
摘要:前戲今年,對于我個人而言遭遇了三個重大的轉(zhuǎn)折點。盡可能的把溝通成本用約定和文檔降低。學習的這一年可以說年的學習,在上半年的精力,放在了技術(shù)上。而下半年則相反。 前戲 今年,對于我個人而言遭遇了三個重大的轉(zhuǎn)折點。 15年9月大三休學創(chuàng)業(yè),16年9月重新復學大三 在2016年4月順利引進天使輪,公司從廈門集美區(qū)搬到了深圳南山區(qū) 16年底,我們正在準備接入A輪 16年與15年相比,總體來...
閱讀 2283·2021-10-09 09:41
閱讀 1746·2019-08-30 15:53
閱讀 989·2019-08-30 15:52
閱讀 3443·2019-08-30 11:26
閱讀 767·2019-08-29 16:09
閱讀 3422·2019-08-29 13:25
閱讀 2260·2019-08-26 16:45
閱讀 1931·2019-08-26 11:51