web app · 前端筆記

### 什么是web app [WebApp](https://baike.baidu.com/item/web%20app/9475982?fr=aladdin)是指基于Web的系統和應用，其作用是向廣大的最終用戶發布一組復雜的內容和功能。從一個簡單的幫助消費者計算汽車租借費用的網頁，到為商業人員和度假者提供全套旅游服務的大型復雜的WEB站點，都是WebApp。它包括一些完整的WEB站點，WEB站點的專門功能以及在Internet、Intranet或ExtraNet上的信息處理應用。 webapp 框架是一種簡單的與WSGI兼容的網絡應用程序框架，可以與 App Engine 配合使用。不必為了使用 App Engine 而使用 webapp：網絡服務器支持任何使用 CGI 的 Python應用程序。webapp 提供一種簡單的方式來開始為 App Engine 開發應用程序。響應式網頁設計的大部分技術，是可用在WebApp開發中的。移動端Web App和WAP有什么不同？最直接的區別就是功能層面。WAP更側重使用網頁技術在移動端做展示，包括文字、媒體文件等。而Web App更側重“功能”，是使用網頁技術實現的App。總的來說，Web App就是運行于網絡和標準瀏覽器上，基于網頁技術開發實現特定功能的應用。 * * * * * ### 擴展 [pjax是什么以及為什么要推薦給大家看完馬上就懂](https://www.toutiao.com/i6503489296748511757/) [Pjax是什么以及為什么推薦大家用 - Sub的個人頁面](https://my.oschina.net/sub/blog/123447) [defunkt/jquery-pjax: pushState + ajax = pjax](https://github.com/defunkt/jquery-pjax) [luruke/barba.js: Create badass, fluid and smooth transition between your website's pages.](https://github.com/luruke/barba.js) [關于innerHTML的試驗 · 前端筆記 · 看云](http://www.hmoore.net/xiak/quanduan/371061) [SUI Mobile](http://m.sui.taobao.org/) 算是pjax另一種實現吧，它甚至不要求服務端返回HTML片段，整個的頁面的也接受，它好像可以剝離，當然可能有一定剝離規則（也用了緩存，但把這么大頁面當做字符串緩存起來是不是也不太好啊，還有如果新頁面引入了外部文件怎么處理呢），然后再直接添加到容器節點上去替換上一個頁面，并轉場。花樣菜場就是這個。但總感覺這樣實現太粗暴了，不太好。（感覺這不是真正意義上的單頁，只是一種野蠻粗魯的做法。）過濾：怎么過濾，正則匹配出dom結構，外部資源，script，link等，太麻煩了吧。哈哈，其實，過濾，濾什么濾，直接用的find哈。還說正則匹配過濾，想多了，沒那么復雜。下面是關鍵代碼 ~~~ …… * 路由實現約定 * - 每個文檔的需要展示的內容必需位于指定的標識（routerConfig.sectionGroupClass）的元素里面，默認是: div.page-group （注意,如果改變這個需要同時改變 less 中的命名） * - 每個塊必需帶有指定的塊標識（routerConfig.pageClass），默認是 .page * * 即，使用路由功能的每一個文檔應當是下面這樣的結構（省略 <body> 等）: * <div class="page-group"> * <div class="page">xxx</div> * <div class="page">yyy</div> * </div> …… /** * 把一個頁面的相關信息保存到 this.cache 中 * * 以頁面的 baseUrl 為 key,而 value 則是一個 DocumentCache * * @param {*} doc doc * @param {String} url url * @private */ Router.prototype._saveDocumentIntoCache = function(doc, url) { var urlAsKey = Util.toUrlObject(url).base; var $doc = $(doc); this.cache[urlAsKey] = { $doc: $doc, $content: $doc.find('.' + routerConfig.sectionGroupClass) }; }; ~~~ 原來沒用整個頁面的，只緩存“容器”部分。但是這個還要這個$doc鍵做什么呢，浪費空間啊。所以如果新頁面需要引用外部資源，則需要放在div.page-group里面，否則沒用哦，另外它也強調建議了，返回文檔不要完整的文檔結構，多返回了沒用的html，浪費流量何必呢，何必呢，還是老老實實的按照pjax的建議吧： ~~~ 這個請求帶有X-PJAX的HEADER標識，服務器在收到這樣的請求的時候，就知道只需要渲染部分頁面返回就可以了。 xhr.setRequestHeader('X-PJAX', 'true') xhr.setRequestHeader('X-PJAX-Container', context.selector) ~~~ >[danger] **注意：**測試是否為單頁最好在PC瀏覽器上面看，跳轉新的頁面時**加載狀態**會轉，但是在微信（PC/手機）或者一些手機瀏覽器上面，由于沒有“轉”的狀態，而是用**頁面頂部加載進度條**的表示加載狀態，在手機端即使沒有跳轉頁面（PC瀏覽器上沒看到“狀態轉”），某個單頁需要加載圖片等資源，那么加載進度條還是會有，所以手機上面看不出來到底是跳轉還是單頁。電腦瀏覽器加載只要加載資源，沒有跳轉時**加載狀態**也會轉（**并且有時也不一定**），而且由于現代瀏覽器的優化，跳轉時出現“空白頁面”的情況基本不會出現，**所以表面上根本看不出來的頁面是單頁還是普通跳轉網頁。需要使用控制臺網絡調試，看Doc下面有沒有加載才能準確的看出有沒有跳轉頁面。** 經過一些分析，我們漸漸發現了單頁技術的實現方式，下面總結出了一些技術要點： 1. ajax 2. 自己拼接html字符串 3. 使用前端模板引擎，如[artTemplate](https://github.com/aui/artTemplate) 4. 后端直接返回的html片段 5. 后端返回完整/常規文檔也行（SUI Mobile這種，它會處理，但是這是錯誤的做法，后端應該要配合，別做蠢事） 6. react單頁（其實模板都是組件，打包編譯在js中了，另外它還有虛擬DOM算法，數據和視圖是綁定的，所以會數據變動時會自動改變DOM） 7. 路由（根據url做某動作/顯示某頁面，分兩種，一種單頁入口#后面，一種看不出的，前者做普通鏈接訪問時不會出現“跳轉”，后者則不能直接點擊“跳轉”，需要程序攔截原生鏈接事件，自己控制pushState ） 8. 轉場（兩個頁面間的切換效果，跟路由緊密相關） > 當然這些技術也可以相互結合使用，沒有規定說要怎么用，在最合適的時候用最合適的就是最好的。可以看到react最符合，最優雅，最適合做單頁，但是也有缺點，缺點就是一個單頁的模板都加載進來了（這也是有點，對于它來說，后面請求不需要任何模板了，只需要數據就可以，因為模板都在本地了，這種方式實在是太激進了，而pjax雖然實現了很好的效果，但還需要加載部分頁面，這還是浪費流量，所以pjax不是最完美的解決方案，相對于react時代來說已經是落后的東西了），首次比較慢，但是后期完全不需要從后端獲得任何html了，只需要純數據就可以渲染DOM了，后期訪問就會很快。當然這里面也有很多值得優化的地方，一般一欄為一個單頁（單頁入口/單頁著落點，這個需要規劃好，哪些頁面在是一個單頁上，哪些頁面做單頁入口，哪些頁面用普通的跳轉，就像后端的路由規劃一樣，也很重要），如果頁面比較大，也可以拆分出去，單獨做成普通頁面也可以。 > 在react時代來看 SUI Mobile 可以算是落后的產品了，但是SUI Mobile也是有意義的，算是傳統網頁向單頁頁面前進的重要一步，起碼思想上做到了，能夠不刷新頁面，可以說實現了“單頁”的體驗，可以說這是具有里程碑意義的，代表傳統網頁像單頁邁向了巨大的一步，其實這個算是利用了多個綜合技術實現的一個偽單頁。如果想改變用戶體驗，但是又不想改變傳統的開發模式，或者項目很難轉變過來，那么嘗試一下它也未嘗不可，畢竟很低的成本就能獲得和單頁差不多的用戶體驗性價比還是比較高的。看這段話： >[info] 人們對于單頁系統的加載時間容忍度與Web頁面不同，如果說他們愿意為購物頁面的加載等待3秒，有可能會愿意為單頁應用的首次加載等待5-10秒，但在此之后，各種功能的使用應當都比較流暢，所有子功能頁面盡量要在1-2秒時間內切換成功，否則他們就會感覺這個系統很慢。引自：[構建單頁Web應用](https://github.com/xufei/blog/issues/5) 還有一個哪兒看的記不清了，大體意思是： > 世界排名1000以內的網站幾乎都是使用了jQuery，但是科技類網站使用react的占比很高，說明先進的網站使用新技術。這是未來的一個方向。人們能感覺到這種頁面的特殊性，不需要刷新，沒有鏈接跳來跳去的，沒有白屏（其實現在瀏覽器優化的很好了，一般不會出現白屏的糟糕體驗），體驗和原生應用差不多，這種頁面人們愿意為它等待更多時間，因為人們知道，首次慢一點，之后的各種操作就會很快了。雖然很多體驗目前很多做得還不是很好，但這種web端全新的體驗對于傳統web頁來說已經是邁向很大的一步了。這正是單頁的魅力，未來各端的發展，設備的支持，我們有理由相信，一切都在向好的方向發展。 **關于salt-router的分析：** 這個轉場用的是釘釘客戶端JS-SDK，其實就是`location.href`只不過用的是釘釘的打開頁面，這其實根本就不是我們web app傳統意義上的轉場，傳統意義轉場使我們在單頁容器里面模擬出來的特效，salt-router這個其實利用的原生釘釘程序的特效，本質是`location.href`，所以這樣就導致一個問題，那就是沒有操作pushState了，每次都是重新加載頁面了，呵呵，這根本就不是路由好吧！如果不是#形式，會加載頁面，這根本就不是單頁的套路了好吧。所以這個只能算是JS-SDK的小玩意，好流氓。 update：2017-3-1 12:40:24 * * * * * ### 參考： - [web app - 百度百科](http://baike.baidu.com/link?url=gv7Po5g36CtBFZQLzkSOXcGu4jMowR8Mn-pnccPm9jjofA0wQNRAc9c4kd40WwVrvrvpDxVj0QOGLVmZsUxaRID_dL_D6GcWfbWuXQEfG13) - [Web App 和 Native App，哪個是趨勢？](https://www.zhihu.com/question/19558750) - [什么是 Native Web App ?](https://www.zhihu.com/question/27820437) - [什么算是webapp](https://segmentfault.com/q/1010000007190832) - [為什么單頁應用看起來很火，但都沒有看到大廠們的產品在用？](https://segmentfault.com/q/1010000006979251?_ea=1511534) - [也許，DOM 不是答案](http://www.ruanyifeng.com/blog/2015/02/future-of-dom.html) - [還要多少年, 前端開發才能像客戶端開發那樣輕松？](https://www.zhihu.com/question/22426434) - [寫一個頁面路由轉場的管理工具](http://www.hmoore.net/xiak/quanduan/280625) - [張鑫旭大神的 mobilebone.js](https://github.com/zhangxinxu/mobilebone) > **mobile移動端，PC桌面端頁面無刷新過場JS骨架，簡單、專注！。** 類似于SUI，值得參考借鑒 - [Ajax保留瀏覽器歷史的兩種解決方案（Hash&Pjax）](http://mp.weixin.qq.com/s/veJNxheh7WokkuKN4JJE-Q) - [如何讓搜索引擎抓取AJAX內容？](http://www.ruanyifeng.com/blog/2013/07/how_to_make_search_engines_find_ajax_content.html) - [URL的井號 - 阮一峰的網絡日志](http://www.ruanyifeng.com/blog/2011/03/url_hash.html) - [HTTP 協議入門](http://www.ruanyifeng.com/blog/2016/08/http.html?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io) - [瀏覽器同源政策及其規避方法](http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html) * * * * * - [單頁應用開發權威指南 - 寸志](http://island205.github.io/Single-Page-App-Break/) > [極客搜索為什么能夠快如閃電](http://mp.weixin.qq.com/s/9qviaQMoyVWm3qvR-M-Zuw) 關于單頁應用，推薦一本線上的電子書 [《移動端本地 H5 秒開方案探索與實現》](https://mp.weixin.qq.com/s/0OR4HJQSDq7nEFUAaX1x5A) * * * * * ### 其他 - [花樣菜場](http://m.hycaichang.com/) - [瀏覽器加載初探](http://www.hmoore.net/xiak/quanduan/245636) * * * * * ### 思考其實從簡單的web1.0時代到web2.0時代，網頁正變得越來越復雜，越來越像一個應用，從一個不用js階段到少量js階段，到使用ajax廣泛使用階段，“列表-加載更多”這種其實就有點單頁的雛形了，代表人們已經向不刷新頁面而更新頁面部分這種嘗試，以及傳統網頁的思維轉變，但是沒有大規模使用，然后就是PJAX時代，可惜很短，單頁框架就成熟了。不管什么時代，什么技術，我們都是希望我們的產品能夠好，不要為了設計而設計，有時候最好的不一定是最適合的，在們滿足需求的時候使用最合適的才是最好的。 [h5實現iPhone橫屏下的雙頁模式 - Addy的網絡日志](http://www.iamaddy.net/2016/11/h5-iphone-two-pages/) 中就說到了技術選型，單頁是最好的，但是過于復雜，時間上不允許，所以很多時候要做一些折中和妥協，最合適的才是最好的。 [webpack + gulp 在前端中的應用 - 前端拓荒 - SegmentFault](https://segmentfault.com/a/1190000005129121) 回答中也說到了 “所以有時候不要為了優化而優化”，不要忘記最終的目的我們都是為了產品更好用，更能體現出以人文本產品設計理念。 >[danger] 對于偏執狂，強迫癥，處女座開說無法忍受瑕疵，只要完美。這是個很情懷的問題，但是你的情懷只是你的，用戶并不會因為你的所謂情懷的而買賬，以產品好用為本，以人為本，這是初心，不能忘記，否則你就活在自己錯誤的世界里不斷徘徊、鉆牛角尖，在錯誤的迷途上越走越遠，一去不返，一黑到底，慢慢地離光明越來越遠！ ``` Linus Torvalds 極度熱愛技術，但并不是泛 IT 技術的追隨者，他從來沒有寫過 web 程序、不會設置 FTP 服務器的他有著很聚焦的技術關注點。Linus 的技術興趣很挑剔，“如果我被困在一個孤島上，唯一逃生的機會就是寫出一套漂亮的 UI，那么我死定了。所以人與人是不一樣的，我不是在找借口，我只是在解釋。” 但是，他并不是一根筋的潔癖開源理想者，很早他就思考了商業對開源的作用；他很開心也很感激商業公司和基金會幫他處理所有那些他不愿意處理的事情，并且可以做到完全放權、不管不問。“不同的人有不同的興趣，擅長不同的事情”。 ----------- ### 關鍵點： - Linus Torvalds 極度熱愛技術，但并不是泛 IT 技術的追隨者。 - 他有著很聚焦的技術關注點。 - 但是，他并不是一根筋的潔癖開源理想者 - 不同的人有不同的興趣，擅長不同的事情 ``` * * * * * >[danger] 傳統頁面，數據和模版大都是在服務端組裝的(ajax數據只是少量數據)，這樣數據沒出來網頁也就沒打開。單頁頁面的組裝在前端，后端只提供數據(當然一個著落頁是必須的)，這樣訪問頁面時經常出現的就是，頁面打開了，但是在等后端返回數據。 * * * * * ### 無法逾越的體驗障礙 [MUI開發注意事項 - DCloud問答](http://ask.dcloud.net.cn/article/122) **始終為button按鈕添加type屬性** 若button按鈕沒有type屬性，瀏覽器默認按照type=submit邏輯處理，這樣若將沒有type的button放在form表單中，點擊按鈕就會執行form表單提交，**頁面就會刷新，用戶體驗極差。** **頁面跳轉：拋棄href跳轉** 當瀏覽器加載一個新頁面時，若頁面DOM尚未渲染完畢，**頁面會先顯示空白**，然后等DOM渲染完畢后，再顯示具體內容，這是**WEB瀏覽器技術無法逾越的體驗障礙**；為解決這個問題，建議使用[mui.openWindow方法](http://dev.dcloud.net.cn/mui/window/#openwindow)打開一個新的webview，mui會自動監聽新頁面的loaded事件，若加載完畢，再自動顯示新頁面；擴展閱讀： * [hello mui中的無等待窗體切換是如何實現的](http://ask.dcloud.net.cn/article/106) * [提示HTML5的性能體驗系列之一避免切頁白屏](http://ask.dcloud.net.cn/article/25) * * * * * ### 相關閱讀 [《Web App和HTML5給Web前端帶來的變化 - 我們的html5游戲平臺之旅》](http://www.open-open.com/doc/view/aad511b71b6e4fe48c5db67df65dcca2) 《Web App和HTML5給Web前端帶來的變化》by 曹劉陽（阿當） ![img](http://cdn.aipin100.cn/18-1-12/81610607.jpg) [DHH 談混合移動應用開發 | | 酷殼 - CoolShell](https://coolshell.cn/articles/12225.html) [微信 WeixinJSBridge 原理_百度搜索](https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=%E5%BE%AE%E4%BF%A1%20WeixinJSBridge%20%E5%8E%9F%E7%90%86&oq=%25E5%25BE%25AE%25E4%25BF%25A1%2520js%2520api%2520%25E5%258E%259F%25E7%2590%2586&rsv_pq=e7cfa3c300064f46&rsv_t=6cdbOFrl6IyiDj7e1DHuxfR8s%2FXl7TaUOxAlHgumWODPKprTa8DfIIur6eU&rqlang=cn&rsv_enter=1&rsv_sug3=4&rsv_n=2&rsv_sug2=0&inputT=7743&rsv_sug4=7830) [微信小程序底層的實現原理是怎樣的？ - 知乎](https://www.zhihu.com/question/50920642?sort=created) [微信 JSBridge 原理_百度搜索](https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=%E5%BE%AE%E4%BF%A1%20JSBridge%20%20%E5%8E%9F%E7%90%86&oq=%25E5%25BE%25AE%25E4%25BF%25A1%2520%25E8%25B0%2583%25E7%2594%25A8%2520js%2520%25E5%258E%259F%25E7%2590%2586&rsv_pq=d3e70a150005daf6&rsv_t=121awpDYouAiGSEJR3hl3%2FzU%2BF263F1%2BCwER9UXq7BQitbCIHvn9RJiM8FE&rqlang=cn&rsv_enter=0&inputT=2810&rsv_sug3=13&rsv_n=2&rsv_sug4=2816) [Android JSBridge的原理與實現 - 阿里云](https://www.aliyun.com/jiaocheng/69342.html) > 首先我們來了解一下為什么要使用JSBridge,在開發中,為了追求開發的效率以及移植的便利性,一些展示性強的頁面我們會偏向于使用h5來完成,功能性強的頁面我們會偏向于使用native來完成,而一旦使用了h5,為了在h5中盡可能的得到native的體驗,我們native層需要暴露一些方法給js調用,比如,彈Toast提醒,彈Dialog,分享等等,有時候甚至把h5的網絡請求放著native去完成,而JSBridge做得好的一個典型就是微信,微信給開發者提供了JSSDK,該SDK中暴露了很多微信native層的方法,比如支付,定位等。 [用最簡單易懂的道理告訴你，為什么JavaScript在現代引擎（V8，JavaScriptCore）下，能表現出卓越性能！ - 前端基礎知識 - SegmentFault 思否](https://segmentfault.com/a/1190000005148418) [如何區別一個 App 是 Native App， Web App 還是 Hybrid app？ - 知乎](https://www.zhihu.com/question/23622875) [移動混合開發中的 JSBridge - CSDN博客](http://blog.csdn.net/lovenjoe/article/details/78423616) > 關于 JSBridge，絕大多數同學最早遇到的是微信的 WeiXinJSBridge（現在被封裝成 JSSDK），各種 Web 頁面可以通過 Bridge 調用微信提供的一些原生功能，為用戶提供相關的功能。 [初探微信 JSBridge · Ruby China](https://ruby-china.org/topics/28981) [微信小程序weapp的底層實現原理 - CSDN博客](http://blog.csdn.net/ListenToSennTyou/article/details/53258163) [JavaScriptCore全面解析（上篇） - SegmentFault 思否](https://segmentfault.com/p/1210000009199944) [深挖微信小程序！你需要先了解這三個內核 - SegmentFault 思否](https://segmentfault.com/p/1210000007318105) [我所理解的前端](https://mp.weixin.qq.com/s/wa-ih9szKVZJVw2PAfCbqA) > 前端是所有端，一切端，所有的產品都會以前端的形式展現給用戶（普通用戶，MySQL這種產品沒有界面），APP，網頁，小程序，不管是以哪種方式展示，都是產品功能的對外、對用戶的展現，它承載著產品的功能，所以對用戶來說，**產品 = 前端**。 > > 如果把把這種關系和后端做個比喻，那就是相當于說， **后端是一個黑色的錢包，前端可以隨時從錢包里面拿錢，拿到的錢可以買各種各樣的東西。** 這樣就形成了各式各樣的產品，前端永遠不會拘泥于某一種形式，而是靈活的，多種多樣的。用戶只關心這些買到的東西，而不關心后端錢包里面有多少錢。所以，前端是無限的，只要有足夠的錢，就能滿足用戶的任何需求。 > 后端對用戶是不可見的，前端是無形而勝有形的，是萬變的，是變幻無窮的。對用戶來說，前端即產品。只要后端提供了強大的接口功能支持，前端的能力是無限的，是可以做任何事情的，不會拘泥于任何東西，是無遠弗屆的。 [如何打造一款優秀的小程序](https://mp.weixin.qq.com/s/2G7UWNsC77lL1RlwQlu3Mw) > 前端不拘泥于任何形勢，服務就是用完即走的。 [趣圖：他居然在前端寫業務邏輯！](https://mp.weixin.qq.com/s/NGF88yCF8SXw_jAZIIECdg) > 它能從客觀上體現業務邏輯，但是它不代表業務邏輯。但它不是業務邏輯。（**嚴格意義上來說，前端其實做的是交互邏輯，視圖邏輯，它并不直接等于業務邏輯，業務邏輯是在后端定義的。**） [什么是 Native、Web App、Hybrid、React Native 和 Weex？](https://mp.weixin.qq.com/s/62fz0kQ2udoXKnB7nCa9pA) [Vue 頁面骨架屏注入實踐](https://mp.weixin.qq.com/s/z2NpqjyG0OrzjD5SQh9eMw) 微博：m.weibo.cn/beta 餓了么：h5.ele.me/msite [深入wepy源碼：wpy文件編譯過程](https://mp.weixin.qq.com/s/xpXZEYsUfOTdywwxZ9JJbg) [小程序開發：用原生還是選框架](https://mp.weixin.qq.com/s/PjKSFR3pLjxbJnbdwDcFPg) * * * * * last update：2018-5-9 12:34:18