神州之心項目總結(jié)

ie8的css兼容性問題

1.不支持box-shadow屬性。

解決方法：

使用-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#C7C9CD')";

說明：strength是陰影大小后雷，direction是陰影方位吧史，單位為度，可以為負數(shù)蕴轨，color是陰影顏色 （不支持rgba格式）使用IE濾鏡實現(xiàn)盒子陰影的盒子必須是行元素或以行元素顯示（block或inline-block;）

box-shadow: 0 5px 10px rgba(33,36,41,0.2);/* for opera or ie9 */  
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#C7C9CD')";

2.不支持rgba()格式的顏色

如果設置的背景色有一個透明度港谊，則ie8及以下都不支持
解決辦法：使用filter濾鏡設置漸變。設置startColorstr和stopColorstr為相同的顏色尺棋，相同的透明度封锉，即可達到半透明的背景效果绵跷。其中顏色字符串中，第1,2個字符表示透明度成福，例如當前的7f表示0.5的透明度碾局，其他值自行去查；后面6個字符既是顏色的十六進制格式奴艾。

background-color: rgba(29,61,103,.5); 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f1D3D67,endColorstr=#7f1D3D67);

3.不支持opacity屬性

解決方法： 使用filter濾鏡净当。注意：在使用filter濾鏡設置不透明度時，需要給該元素設置背景色蕴潦，否則設置的不透明度將沒有任作用像啼。這個屬性一旦設置成功，那么該屬性里的元素或者文字都會有設置的透明度潭苞。

background: #fff; 
opacity: 0; 
filter: alpha(opacity=0);/*兼容ie8及以下*/

4.常用的css3選擇器的支持性

1）支持:first-child忽冻，不支持:last-child選擇器，盡量避免使用last-child選擇器 此疹。
2）支持:after和:before選擇器
3)  不支持:nth-child選擇器
4）不支持:not()選擇器
5）不支持:checked僧诚，:disabled
6）支持屬性選擇器，如[attribute^=value]蝗碎，[attribute$=value]湖笨，[attribute*=value]等

5.不支持border-radius屬性

解決方法，可通過pie.js補丁文件解決
下載pie補丁文件蹦骑，放入項目中

image

然后在頁面中引用

<!-- [if it ie 9] -->  
<!-- <script src="/static/plugins/pie/PIE.js"></script> -->
<!-- <[!endif] -- >

在css中使用：

border-radius: 4px;
behavior: url(/static/plugins/pie/PIE.htc);

但是使用這個補丁可能會有一些意想不到的問題慈省，所以根據(jù)實際情況而定

6.ie9及以下都不支持漸變

解決方法：使用如下方法代替。startColorstr眠菇，endColorstr漸變的開始顏色和結(jié)束顏色边败，格式是AARRGGBB，gradiendtType是漸變的方向琼锋，1是水平漸變放闺，0是垂直漸變。

progid:DXImageTransform.Microsoft.gradient(startColorstr='#B2FFFFFF',endColorstr='#00FFFFFF',GradientType=0 );

7.其他屬性兼容性說明

1）ie9及其以下都不支持css3的@keyframe 規(guī)則或 animation 屬性缕坎，盡量避免使用
2）不支持css3的transform屬性（ie9支持代替的-ms-transform屬性怖侦，僅適用于2D轉(zhuǎn)換
3）不支持background-size屬性和border-image屬性

8.不支持canvas，和svg

解決方法：使用vml代替谜叹，繪制圖形

9.不支持placeholder屬性

解決方法：自己寫一個input組件匾寝，使用blur和focus事件來實現(xiàn)placeholder的效果。

import styles from './index.scss';
import React, { Component } from 'react';
import classNames from 'classnames';
class Input extends Component {
    constructor(props) {
        super(props);
        this.state = {
            supportPlaceholder: false
        };
    }

    /**
     * @param input  輸入框
     * @param  text  placeholder
     */
    placeholder = (input, text = '') =>{
        var defaultValue = input.defaultValue;

        if(!defaultValue){
            input.val(text).addClass('phcolor');
        }

        input.unbind('focus', 'F');
        input.unbind('blur');

        input.focus(function F(){
            if(input.val() === text){
                $(this).val('');
            }
        });

        input.blur(function(){
            if(input.val() === ''){
                $(this).val(text).addClass('phcolor');
            }
        });

        // 輸入的字符不為灰色
        input.keydown(function(){ 
            $(this).removeClass('phcolor');
        });
    }

    componentDidMount() {
        let THIS = this;
        let self = this.textInput;
        this.props.callback && this.props.callback();
        $(function(){
            // 判斷瀏覽器是否支持placeholder屬性
            var supportPlaceholder = 'placeholder' in document.createElement('input');
            if(!supportPlaceholder){               
                if($(self).attr('type') === 'text'){
                    THIS.placeholder($(self), THIS.props.placeholder);
                }
            }
        });
    }

    componentDidUpdate(){
        let supportPlaceholder = 'placeholder' in document.createElement('input');
        let self = this.textInput;
        let THIS = this;

        if($(self).val() || document.activeElement === this.textInput){
            return false;
        }
        
        if(!supportPlaceholder){               
            if($(self).attr('type') === 'text'){
                THIS.placeholder($(self), THIS.props.placeholder);
            }
        }
    }

    render() {
        const { supportPlaceholder } = this.state;
        let {className, style, ...other} = this.props;
        style = style || {
            // height: '40px',
            // width: 'auto'
        };
        return (
            <input 
                type="text"
                className={classNames('input', 'border_color_gray', 'synBlockBg', className)}
                {...other}
                style={style}
                ref={(input) => { this.textInput = input; }} 
            />
        );
    }
}

export default Input;

ie8的javascript兼容性問題

1.不支持indexOf()方法和trim()方法

在全局js中給string對象添加這兩個方法荷腊，具體如下

if (!Array.prototype.indexOf){
        Array.prototype.indexOf = function(elt /*, from*/)
        {
            var len = this.length >>> 0;
            var from = Number(arguments[1]) || 0;
            from = (from < 0)
                ? Math.ceil(from)
                : Math.floor(from);
            if (from < 0)
            from += len;
            for (; from < len; from++)
            {
            if (from in this &&
                this[from] === elt)
                return from;
            }
            return -1;
        };
        if (!String.prototype.trim) {
            String.prototype.trim = function () {
                return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
            };
        }
    }

2.不支持es6語法艳悔，只支持部分es5的語法

解決方法，使用es3ifyPlugin插件女仰，講es5和es6的語法編譯成es3猜年，讓ie8完全支持
在配置文件中添加該插件

plugins: [
        extractVendor,
        extractStyle,
        new es3ifyPlugin(),
        ...
]

項目中遇到的問題

1.餅圖默認選中某條數(shù)據(jù)的功能實現(xiàn)

  • 想要達成的效果：如圖抡锈，頁面加載完成之后，默認選中最大數(shù)據(jù)的那一項乔外，當鼠標移到其他項時床三，取消默認選中，當鼠標移開圖表時杨幼，回復圖表的默認選中撇簿。


    QQ截圖20180119155953.png
  • 實現(xiàn)方法
    默認選中時，使用圖表實例的dispatchAction()方法差购，代碼如下四瘫。
 /**
     * 初始選中最大數(shù)據(jù)
     */
    initBigData = (pieChart = this.pieChart.getEchartsInstance()) => {
        const {heightLight} = this.state;
        if(heightLight){
            setTimeout(() => { // 由于在執(zhí)行此方法的時候，圖表不一定就渲染完畢欲逃，所以設置了一個定時器
                pieChart.dispatchAction({
                    type: 'highlight', // 選中
                    name: heightLight // 選中的項的名字找蜜，這里是“私營企業(yè)”
                });
            }, 10);
        }
    }

方法使用示例，在圖表init了之后稳析，獲取到實例后锹杈，再執(zhí)行該方法，

 renderEchartDom(flag) {
        let echartObj = echarts.init(this.echartsDom, themeStrSession);
        echartObj.setOption(this.props.option, true, true);
        initBigData  && initBigData (echartObj); // 餅圖默認選擇最大的值  
        return echartObj;
    }

移除圖表再恢復默認選中的方法

 /**
     * 取消餅圖某個模塊的選中狀態(tài)
 */
    reSet = () => {
        const {heightLight} = this.state;
        if(heightLight){
            this.pieChart.getEchartsInstance().dispatchAction({
                type: 'downplay', // 取消選中的標識
                name: heightLight // 取消選中項的名字
            });
        }
    }

使用時迈着，給圖表的外框加一個鼠標移除的事件(mouseleave)，在該事件的方法中執(zhí)行reSet()方法即可邪码。
注意：mouseleave()和mouseout()方法的區(qū)別.
mouseout 事件在鼠標指針離開被選元素或任意子元素時都會被觸發(fā)裕菠，mouseleave 事件只有在鼠標指針離開被選元素時被觸發(fā)。

2.echarts圖標的主題色切換

在項目中闭专，有些時候設計到換膚的功能奴潘，一套淺色一套深色，這個時候影钉，echarts圖表的主題該怎么設置才能滿足要求呢画髓。
這時我們使用echarts主題色，配置兩套主題平委，一套深色主題奈虾，一套淺色主題，（具體主題色的配置自行查閱）在init方法時使用


QQ截圖20180119164830.png
require('./echartDarkTheme'); // 引入深色主題
require('./echartLightTheme');   // 引入淺色主題
getEchartsInstance() {
        const themeStrSession = sessionStorage.getItem('skinNum') === 'dark' ? 'echartDarkTheme' : 'echartLightTheme';
        return echarts.init(this.echartsDom, themeStrSession);
    }

3.react事件和原生事件混用所產(chǎn)生的問題

react事件是合成事件廉赔，使用了事件委托的方法肉微，將所有的事件綁定在了document上，并且在事件冒泡的過程中執(zhí)行對應的回調(diào)方法蜡塌。而原生事件是直接綁定在了dom上碉纳，所以，當一個dom上用了react綁定了事件馏艾，有用原生方法綁定了事件之后劳曹，我們并不能確定是哪一次綁定的回調(diào)函數(shù)會先執(zhí)行奴愉，因此會有很多意想不到的問題，所以我們要盡量避免react和原生事件混用的情況铁孵。

4.前端輪詢監(jiān)聽報報告是否生成或下載成功

在生成一個報告的過程中锭硼，怎么監(jiān)聽報告什么時候生成完畢呢，在前端的話库菲，我們需要輪詢
監(jiān)聽方法

/**
    * 監(jiān)聽是否生成成功
    */
   addListerReport = () => {
       const reportInfo = JSON.parse(JSON.stringify(this.state.reportInfo));
       const {intervalTime} = this;
       addListerReport({
           reportId: reportInfo.reportId
       }).then(data => {
           if(!data.success){
               return messager.error('報告生成失敗账忘，請重新生成！');
           }
           if(data.data) {
               reportInfo.reportStatus = 'SUCCESS';
               clearInterval(intervalTime);
               // clearTimeout(outTime);
               this.setState({
                   operateText: '',
                   reportInfo
               });
           }
       });
   }

方法的調(diào)用

 /**
     * 點擊生成報告
     */
    reGenerateReport = (isNewReport) => {
        const reportInfo = JSON.parse(JSON.stringify(this.state.reportInfo));
        const {companyId, reportTime, companyName} = reportInfo;
        generateReport({
            companyId,
            companyName,
            remakes: isNewReport
        }).then(data => {
            if(!data.success) {
                return messager.error('生成失敗熙宇，請重新生成鳖擒！');
            }
            this.intervalTime = setInterval(() => { // 輪詢調(diào)用監(jiān)聽方法，每個5秒調(diào)用一次
                this.addListerReport();
            }, 5000);
        });
    }

注意：在組件卸載之前要先清除該定時器烫止，否則該方法會一直執(zhí)行

 componentWillUnmount() {
        const {intervalTime, outTime} = this;
        clearInterval(intervalTime);
    }

5.地圖下潛和返回是總有一種閃現(xiàn)的情況

該情況主要產(chǎn)生的原因是蒋荚，在下潛時，省的名已經(jīng)傳遞給了下層組件馆蠕，用于繪制期升，但此時，該省的地圖json數(shù)據(jù)還沒有拿到互躬，這時如果其他地方使用了setState播赁，發(fā)生了render的話那么下層組件就會重新繪制地圖，但是由于省的名字和地圖json數(shù)據(jù)對應不上吼渡，就又一次繪制了全國地圖容为，這時就會有一個中間的過程，導致地圖閃一下才會繪制出對應的省的地圖寺酪。
解決辦法撩笆，省的名字和地圖的json數(shù)據(jù)同時設置桶略，并且同時使用，盡量避免沒有必要的渲染。例如：這里一起設置了三個值之后南片，進行渲染寸士，就不會產(chǎn)生跳動的情況

 $.getJSON(mapUrl, (mapjson) => {
            this.setState({
                  jsonData: mapjson,  // 地圖的json數(shù)據(jù)
                  mapChinaOption: option,  // option對象
                  province: this.mapInfo.province }); // 下潛的省市名稱
        });

6.ie8下使用vml繪制的圖表的層級問題

ie8不支持canvas权悟，所以我們使用vml來代替繪制圖表锌订。但是其繪制出來的圖表的層級很高，導致了其覆蓋了我們項目中的其他的彈窗等

例如：
QQ截圖20180119172736.png
就會產(chǎn)生如下情況：
QQ截圖20180119172653.png

解決辦法急膀，針對ie8膜蛔，單獨設置彈窗的層級

 .bg{ 
        ...
        opacity: 0.4
        z-index: 1000;
        z-index: 50020\9;/*給背景蒙層設置層級  IE6、7脖阵、8識別*/
        filter: alpha(opacity=40);
    }
 .wrap{
       ...
        z-index: 1000;
        z-index: 50020\9;/*給彈窗的外層設置層級  IE6皂股、7、8識別*/
}
最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末命黔，一起剝皮案震驚了整個濱河市呜呐，隨后出現(xiàn)的幾起案子就斤，更是在濱河造成了極大的恐慌，老刑警劉巖蘑辑，帶你破解...
    沈念sama閱讀 206,839評論 6贊 482
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件洋机，死亡現(xiàn)場離奇詭異，居然都是意外死亡洋魂，警方通過查閱死者的電腦和手機绷旗，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來副砍，“玉大人衔肢，你說我怎么就攤上這事』眙幔” “怎么了角骤？”我有些...
    開封第一講書人閱讀 153,116評論 0贊 344
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長心剥。 經(jīng)常有香客問我邦尊，道長，這世上最難降的妖魔是什么优烧？ 我笑而不...
    開封第一講書人閱讀 55,371評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任蝉揍，我火速辦了婚禮，結(jié)果婚禮上畦娄，老公的妹妹穿的比我還像新娘疑苫。我一直安慰自己，他們只是感情好纷责，可當我...
    茶點故事閱讀 64,384評論 5贊 374
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著撼短，像睡著了一般再膳。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上曲横，一...
    開封第一講書人閱讀 49,111評論 1贊 285
  • 城市分裂傳說
    那天喂柒，我揣著相機與錄音，去河邊找鬼禾嫉。 笑死灾杰，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的熙参。 我是一名探鬼主播艳吠，決...
    沈念sama閱讀 38,416評論 3贊 400
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼孽椰！你這毒婦竟也來了昭娩？” 一聲冷哼從身側(cè)響起凛篙，我...
    開封第一講書人閱讀 37,053評論 0贊 259
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎栏渺，沒想到半個月后呛梆，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 43,558評論 1贊 300
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡磕诊，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,007評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年填物，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片霎终。...
    茶點故事閱讀 38,117評論 1贊 334
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡滞磺，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出神僵，到底是詐尸還是另有隱情雁刷，我是刑警寧澤，帶...
    沈念sama閱讀 33,756評論 4贊 324
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布保礼，位于F島的核電站沛励，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏炮障。R本人自食惡果不足惜目派，卻給世界環(huán)境...
    茶點故事閱讀 39,324評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望胁赢。 院中可真熱鬧企蹭，春花似錦、人聲如沸智末。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評論 0贊 19
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽系馆。三九已至送漠，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間由蘑，已是汗流浹背闽寡。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留尼酿，地道東北人爷狈。 一個月前我還...
    沈念sama閱讀 45,578評論 2贊 355
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像裳擎，于是被迫代替她去往敵國和親涎永。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 42,877評論 2贊 345