ie6-8 avalon2 單頁應用項目實戰備忘

坑爹的ie，做爲小組leader，尼瑪，小夥伴兒們不樂意作的事情，我來作好了。。心累、、、

若是，各位同窗有定製開發ie6-8版本的需求，仍是儘可能不要用單頁應用模式了，也不要用avalon這類mvvm框架了，也不是不能作，這種mvvm模式寫起來仍是挺爽的。

只是一旦在 ie6上遇到奇葩問題，你會很鬧心，這個風險在工期約束比較緊的狀況下，尤爲須要注意。

 

基礎框架

本項目爲單頁應用，框架搭建爲：avalon（雙向數據綁定）+requireJS（js及模板動態加載）+director（路由管理）

avalon

• 只用到了數據綁定和指令，其餘如組件等未使用

requireJS

• 業務代碼（js&&html）模塊化加載
• html模板動態加載使用require的插件text.js實現

注：css在scss中引入命名空間，實現的模塊管理（原則上也能夠作require動態加載，可是沒大必要了）

director.js

• 很是優秀的路由管理庫。git地址：https://github.com/flatiron/director.js （調研過競品page.js，其開發文檔以及ie6-8支持度遠不如其文檔描述的那樣友好，果斷放棄）
• 一些源碼改動。由於業務中須要設置document.domain，這會致使ie6-8中操做或者訪問location對象或者iframe時遇到不一樣程度的「拒絕訪問」限制，因此，手動修改了director.js的源碼,改動部分見內網項目

js&&css 兼容性

最佳實踐:
儘可能避開使用ie6-8不支持的特性（如css屬性選擇器等等等等），由於多數polyfill並不像他們聲稱的那樣靠譜（好比ieBetter、selectivizr）

一些可用的polyfill

• 少許代碼段 一些特性幾句代碼便可支持，如html5標籤支持、IE6背景圖閃爍

• es6-promise

• jquery.placeholder（不是特完美）