Web前端開發、常見問題及解決方法

Web前端很多問題主要來源於瀏覽器兼容性問題和某些前端技術自身存在的Bug問題，本文總結了工作中遇到的問題及解決方法。

先介紹Easy UI 的使用

      1、JQuery Easy UI環境搭建和調試

      2、初試JqueryEasyUI(附Demo)

      3、Easy UI項目（代碼）框架

      4、JQuery簡單的Ajax調用示例

      5、Easy UI管理后台模板（附源碼）

      6、Easy UI代碼調試：在需要斷點出添加"debugger;"，使用Google瀏覽調試時按f12當運行到對應代碼時會命中源碼中的debugger。

 debugger;

 

 

 

Easy UI 問題

1、Diaolog緩存引起Dialog內容重復的問題

     今天做項目時，遇到Easy UI  Dialog緩存引起彈窗中的form使用ajax無法保存的問題。發現在定義Dialog的Tab頁中打開Dialog后，關閉Tab頁，再打開彈窗保存失敗。

     出錯代碼：

    

<div id="dialog-staff" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'"
    style="width: 400px; padding: 10px;">
    <form id="form-staff">
        <table>...</table>        
    </form>
</div>

 

     經調試代碼，發現關閉Tab頁之后再打開Dialog，Dialog中的form按id獲取時增加了1個，每關閉打開一次增加一個。

     跟蹤代碼執行情況：

     

       解決方法：在使用ajax給form加載數據前，判定form是否冗余，如存在，則刪除冗余form。

        var length = $('#form-staff').length;
        if(length > 1){
            if (isIE() || isIE11()) {
                $("#form-staff").get(1).removeNode(true);
            } else {
                $('#form-staff').get(1).remove();
            }
        }
        
        $('#form-staff').form('clear');

 

2、Easy UI 不同選項卡沖突，參考鏈接：https://blog.csdn.net/yutian1993/article/details/39640463

     今天項目中發先同時打開兩個Tab頁並切換查詢時，提示排序用字段未定義。查詢博客，發現Easy UI不同Tab頁中的Id、函數名不能相同，否則容易出現錯誤。

 

3、 easyui combobox添加清除選項按鈕，參考鏈接：https://blog.csdn.net/wsongjun/article/details/60962415

<input class="easyui-combobox" name="appType"
data-options="
icons:[{
iconCls:'icon-clear',
handler: function(e){
$(e.data.target).combobox('clear');
}
}],
value:'',
valueField:'appId',
textField:'appName',
panelHeight:'auto'
url:'getAppTypeList.do'"/>

 

Echarts問題

1、echarts工具箱toolbox提示字顯示不全

2、Echarts柱狀圖tooltip超出外層div部分被擋住

3、echarts x軸文字顯示不全

4、基於echarts異步加載數據之多個series加載實例

5、echarts之折線圖配置

IE瀏覽器兼容性問題

1、IE不支持remove()方法

     今天做項目的過程中遇到remove在IE瀏覽器不支持，通過查詢資料，發現IE瀏覽器只支持removeNode方法。

     出錯代碼：

$('#form-staff').get(1).remove();

 

IE瀏覽器控制器錯誤提示：對象不支持“remove”屬性或方法

解決方法：

定義判斷瀏覽器方法，轉載自：https://blog.csdn.net/qq_22067469/article/details/86133011

/**
 * 判斷是否是IE
 * @returns boolean
 */
function isIE() {
    if (!!window.ActiveXobject || "ActiveXObject" in window) {
        return true;
    } else {
        return false;
    }
}
/**
 * 判斷是否是IE11
 * @returns boolean
 */
function isIE11(){
    if((/Trident\/7\./).test(navigator.userAgent)) {
        return true;
    } else {
        return false;
    }
}

在使用remove方法的地方先判斷瀏覽器是否為IE。

        if(length > 1){
            if (isIE() || isIE11()) {
                $("#form-staff").get(1).removeNode(true);
            } else {
                $('#form-staff').get(1).remove();
            }
        }

 

2、IE瀏覽器ajax get請求只執行一次的問題

     做項目是發現網頁上一個收到websocket消息后需要刷新內容的地方，在IE瀏覽器上只在登錄時刷新一次。經查詢博客，問題定位為ajax的get請求在IE瀏覽器中會被緩存，從第二次請求開始，一直都是請求緩存。

     參考博客：https://blog.csdn.net/HaHa_Sir/article/details/81019164

      解決方法：

            1、禁用ajax緩存，cache=false 。（默認 true，開啟緩存）

             2、變更請求方式為post，即： type='post'

 

        $.ajax({
         url:'/echarts/jsonData',
         type:'get',
         dataType:'json',
         cache:false,
         success:function(data){
            dosomething ... 
         }
      });

 

             3、請求url后面增加時間戳

var _v=new Date().getTime();
$.ajax({
    url:'/echarts/jsonData?v='+_v,
    type:'get',
    dataType:'json',
    success:function(data){
        dosomething ... 
    }
 });

 3、IE不支持for of語法

       在項目發現取easyui-combobox多選值時出現IE不支持for of語法問題

if(Array.isArray(obj.staffPkid)){        
            var temp = "";
            for (var value of obj.staffPkid) {
                temp = temp + "," + value;
            }            
            obj.staffPkid = temp.substr(1);;
        }

      解決方法：

   if(Array.isArray(obj.staffPkid)){        
            obj.staffPkid = obj.staffPkid.join(",");
        }