摘要:本文將針對使用生態開發完成的網站,以版本為基礎兼容目標,實現全功能正常使用的全面兼容解決方案。這樣做的目的,是逐步減少全局性方法,使得語言逐步模塊化。此外,使用這個,一旦頁面不處于瀏覽器的當前標簽,就會自動停止刷新。
前言
背景情況
vue - 2.5.11
vue-cli 使用模板 webpack-simple
http請求:axios
Vue 官方對于 ie 瀏覽器版本兼容情況的描述是 ie9+,即是 ie9 及更高的版本。經過測試,Vue 的核心框架 vuejs 本身,以及生態的官方核心插件(VueRouter、Vuex等)均可以在 ie9 上正常使用。
Vue 的作者尤雨溪對于 Vue 的學習建議 中有提及為了將項目更好的生態化/工程化,要盡可能學習及使用新的 ECMAScript 規范。目前 ES6/ES2015 是可用度和穩定度較高的規范,文檔齊全,國內還有 阮一峰 《ECMAScript 6 入門》 做了大量的文檔翻譯,開發環境可謂完善。然而版本較舊的瀏覽器并不支持 es6 規范,尤其是 ie 瀏覽器,即使是最高的 ie11 版本,對于 es6 規范也支持得并不全。如此則需要對所有原生不支持 ES6 特性的瀏覽器做兼容性處理。
本文將針對使用 Vue 生態開發完成的網站,以 ie9 版本為基礎兼容目標,實現全功能正常使用的全面兼容解決方案。
ES6兼容在 ie9 的環境上,es6 的部分新對象、表達式,并不支持,解決方案是使用 babel-polyfill 組件,它可以將 es6 的代碼翻譯成低版本瀏覽器可以識別的 es5 代碼
npm i babel-polyfill --save-dev
安裝完成后,在項目的主入口文件 main.js 的首行就可以直接引用
import "babel-polyfill";
在項目使用 vue-cli 生成的代碼中,根目錄有一個 .babelrc 文件,這是項目使用 babel 的配置文件。在默認生成的模板內容中,增加 "useBuiltIns": "entry" 的設置內容,這是一個指定哪些內容需要被 polyfill(兼容) 的設置
useBuiltIns 有三個設置選項
false - 不做任何操作
entry - 根據瀏覽器版本的支持,將 polyfill 需求拆分引入,僅引入有瀏覽器不支持的polyfill
usage - 檢測代碼中 ES6/7/8 等的使用情況,僅僅加載代碼中用到的 polyfill
這里推薦設置為 entry ,完整的 .babelrc 內容如下:
{ "presets": [ [ "env", { "modules": false, "useBuiltIns": "entry" } ], "stage-3" ] }
加入這些代碼后,工程里的大部分內容已可兼容到 ie9 版本
Number對象即使在使用 babel-polyfill 做代碼翻譯后,發現還是有一些 es6 的新特性并沒有解決,比如說 Number 對象的 parseInt 和 parseFloat 方法
es6 將全局方法 parseInt() 和 parseFloat() ,移植到 Number 對象上面,行為完全保持不變。這樣做的目的,是逐步減少全局性方法,使得語言逐步模塊化。
解決這個問題不需要引入包來解決,同樣在項目主入口文件 main.js 加入以下代碼(代碼盡可能靠前,最好是在引用 babel-polyfill 之后 )
if (Number.parseInt === undefined) Number.parseInt = window.parseInt; if (Number.parseFloat === undefined) Number.parseFloat = window.parseFloat;requestAnimationFrame方法
window.requestAnimationFrame 是瀏覽器用于定時循環操作的一個接口,類似于 setTimeout,主要用途是按幀對網頁進行重繪。
requestAnimationFrame 的優勢,在于充分利用顯示器的刷新機制,比較節省系統資源。顯示器有固定的刷新頻率(60Hz或75Hz),也就是說,每秒最多只能重繪60次或75次,requestAnimationFrame 的基本思想就是與這個刷新頻率保持同步,利用這個刷新頻率進行頁面重繪。此外,使用這個API,一旦頁面不處于瀏覽器的當前標簽,就會自動停止刷新。這就節省了CPU、GPU和電力。
不過有一點需要注意,requestAnimationFrame 是在主線程上完成。這意味著,如果主線程非常繁忙,requestAnimationFrame 的動畫效果會大打折扣。
window.requestAnimationFrame() 方法告訴瀏覽器您希望執行動畫并請求瀏覽器在下一次重繪之前調用指定的函數來更新動畫。該方法使用一個回調函數作為參數,這個回調函數會在瀏覽器重繪之前調用。
有部分第三方組件就使用了這個方法,例如部分文件上傳、圖片處理類的組件;那么在這類型的組件在 ie9 下使用時,會報出
SCRIPT5007: Expected object.
window.requestAnimationFrame() 的最低兼容 ie 版本為 10,那么在 ie9 上做兼容就需要制作 requestAnimationFrame polyfill
(function() { var lastTime = 0; var vendors = ["ms", "moz", "webkit", "o"]; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+"RequestAnimationFrame"]; window.cancelAnimationFrame = window[vendors[x]+"CancelAnimationFrame"] || window[vendors[x]+"CancelRequestAnimationFrame"]; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) { clearTimeout(id); }; }());
Gist:requestAnimationFrame polyfill
這部分代碼同樣是盡可能在網站入口處就執行
http網絡請求(跨域)在大多數的 Web 項目中(以 JavaWeb 為例),網站的頁面和服務(至少是 controller 層)在同一個工程進行開發和部署,在大前端的新型模式下,我們建議盡可能對網站的前端和后端進行完全分離,前后端分離的好處和意義這里不再贅述。
既然是前后端分離,那么部署也必然是各自獨立部署,不同的訪問路徑,就會產生跨域訪問的問題(同一站點,不同端口號也是跨域)
在此設定背景情況:
服務端已完整開啟 CROS 跨域支持
http 組件使用 axios
axios 設置 withCredentials 為 true 開啟跨域訪問時攜帶 cookie 數據
高版本瀏覽器(ie10+ 或 chrome, ff)僅需要完成背景情況中的功能,即可支持跨域數據請求功能
axios 進行數據請求時,默認使用 XMLHttpRequest 對象,在檢測到當前請求是跨域訪問時,axios 會測試瀏覽器是否支持 XDomainRequest 對象,若支持則優先使用。
ie8 / ie9 的 XMLHttpRequest 對象,不支持跨域訪問,該對象在 ie10 后才原生支持跨域訪問。微軟的解決方案是在 ie8 / ie9 中提供了 XDomainRequest(XDR) 對象來進行解決跨域問題,雖然使用該對象可以跨域訪問成功,并返回數據,但它卻依然是一個功能不完整的半成品,它的使用有諸多限制:
XDR 僅支持 GET 與 POST 兩種請求方式
XDR 不支持自定義的請求頭,若服務端使用 header 的自定義參數進行做身份驗證,則不可用
請求頭的 Content-Type 只允許設置為 text/plain
XDR 不允許跨協議的請求,如果網頁在 HTTP 協議下,就只能請求 HTTP 協議下的接口,不能訪問 HTTPS 接口
XDR 只接受HTTP/HTTPS 的請求
發起請求的時候,不會攜帶 authentication 或 cookies
微軟雖然提供了解決方案,但卻是不折不扣的雞肋,根本無法勝任系統中各種場景的數據請求需求,至此,axios 對 ie9 的跨域數據請求已無能為力。
完美解決方案:代理(proxy)雖然 axios 對 ie9 跨域已無能為力,但前端項目打包的解決方案 webpack 提供了一個優雅而徹底解決問題的方式:代理
devServer.proxy
webpack 的 devServer.proxy 的功能是由 http-proxy-middleware 項目來實現的
實現原理是將目標位置的請求代理為前端服務本地的請求,既然是代理成為本地的請求,就不存在跨域的問題,axios 就會用回 XMLHttpRequest 對象進行數據請求,一切都恢復正常了,header、cookies、content-type、authentication 等內容都被正確傳遞到服務端。
項目中 webpack.config.js 的配置
devServer: { historyApiFallback: true, noInfo: true, overlay: true, proxy: { "/api": { target: "http://localhost:8081/myserver", pathRewrite: { "^/api": "" } } } }
配置中指定了將 http://localhost:8081/myserver 服務的位置代理為本地前端服務的 http://localhost:8080/api。例如需要讀取用戶信息的原請求是 http://localhost:8081/myserver/user/zhangsan,代理后,就變為 http://localhost:8080/api/user/zhangsan。
即是 /api 的前綴代表了服務端,所以在使用 axios 時,需要對每個服務端請求都增加上 /api 的前綴;通常在項目開發中,需要對數據請求組件 axios 進行二次封裝,以達到統一設置默認參數,統一數據請求入口等目的,那么此時就只需要在二次封裝的文件里統一調整請求前綴即可。
不過,webpack 的 devServer.proxy 僅在開發模式下可用,生產模式下無法使用。開發模式下,調試服務可以讀取 webpack.config.js 中的配置內容進行實時代理,而項目在部署到生產環境前,需要將工程進行編譯轉換成靜態的 js 文件,沒有調試服務的支撐自然是無法進行請求代理的。
nginx 配置
雖然 devServer.proxy 的功能僅能工作于開發模式,那么在生產模式下,自然也是有解決方案的;通常 Vue 的項目在編譯成最終的 js 文件后,僅需要靜態服務器即可,這其中又以 nginx 為最優選擇方案,輕量、高性能、高并發、反向代理服務等均為其優點,這里需要做的數據請求代理的功能就使用到了 nginx 的 反向代理 功能
conf/nginx.conf 文件配置增加以下內容
location /api/ { proxy_pass http://localhost:8081/myserver/; }
該配置同樣是將 http://localhost:8081/myserver/ 的目標服務端位置代理為本地服務的 /api 路徑,如此,生產環境下的數據請求問題也得以解決
個人原創內容,轉載請說明出處
完整內容:https://github.com/TerryZ
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/95509.html
摘要:官方的意思是項目可以在以上的版本中運行但其實使用構建的項目也還是不能在以上的版本中運行下面就來講如何在以上版本中運行安裝在項目入口文件,如本項目中的文件中引用修改配置文件到此編譯項目之后該項目就可以成功在以上的瀏覽器中打開 showImg(https://segmentfault.com/img/bVbkQJ9?w=662&h=172);vue官方的意思是vue項目可以在ie8以上的i...
摘要:一開發背景為了全面的熟悉技術棧,結合的開放開發了這個簡潔版的。在線預覽來自官方以及的整理。當頁面刷新后也無法顯示,請查看控制臺的異步請求是否返回。 一、開發背景 為了全面的熟悉Vue+Vue-router+Vuex+axios技術棧,結合V2EX的開放API開發了這個簡潔版的V2EX。 在線預覽 API來自官方以及djyde的整理。 在線訪問請節制使用,跨域是通過Nginx配置反向代...
摘要:原來對全局的事件進行監聽,一旦發現就會嘗試觸發當前文檔激活對象的事件。事件需要注意的點事件只能綁定在接口對象上,其他元素綁定無效,而且不可以取消也不能冒泡需要注意的是上右鍵菜單的剪切并不會觸發事件瀏覽器從開始支持相關文檔 文章起因 看Vue源代碼內置指令時,發現了Vue對于IE9的selectionchange事件做了特殊處理,這引起了我的興趣。原來Vue對全局的selectionch...
摘要:也能使用更復雜的,更頁面增加更強的效果。這是因為當頂級頁面設置為或,里面的頁面設置不起作用,它的文檔模式顯示的是。參考參考使用來搞定瀏覽器兼容模式強制標準模式標準模式與兼容模式設置背景 因為歷史原因,之前很多的系統都會是 頂級頁面+Iframe來加載子級頁面的這種模式構件系統,而且系統都只能運行在IE6或者IE 高版本兼容模式下(IE 7模式)。 隨著現在的審美原來越高,腳本能里越來越強,...
摘要:公司新開發的項目需要兼容到就在頁面加入不起作用總結方法兼容可能會遇到語法或者錯誤,安裝在頁面入口配置中引入解決編譯錯誤重要重新安裝一下如果有淘寶鏡像也可使用修改下安裝根目錄下新建以上操作完成后運行 公司新開發的項目需要兼容到IE9+ 就在index.html頁面加入 不起作用 總結方法: 兼容IE9/IE10可能會遇到語法或者 Promise錯誤,安裝 babel-polyfill...
閱讀 3621·2021-09-30 09:59
閱讀 2229·2021-09-13 10:34
閱讀 576·2019-08-30 12:58
閱讀 1507·2019-08-29 18:42
閱讀 2198·2019-08-26 13:44
閱讀 2922·2019-08-23 18:12
閱讀 3321·2019-08-23 15:10
閱讀 1625·2019-08-23 14:37