閱讀(13k) 書簽贊(0) 我要糾錯

DWZ框架常見問題及解決

2018-11-17 15:41 更新

DWZ中如何整合第三方j(luò)Query插件

jQuery插件一般是$(document).ready()中初始化

$(document).ready(function(){
// 文檔就緒,初始化jQuery插件
});
//或者或縮寫形式
$(function(){
           // 文檔就緒,初始化jQuery插件
});

因?yàn)镈WZ RIA是富客戶端思路，第一次打開時加載界面到瀏覽器端，之后和服務(wù)器的交互是存數(shù)據(jù)交互，不占用界面相關(guān)的網(wǎng)絡(luò)流量。

也就是說，只需要在一個完整的頁面（通常是起始頁，如index.aspx/index.php/index.jsp等），只有這個頁面包含完整的html結(jié)構(gòu)(<head><body>)，<head>中引入全部css、js 。其它的頁面只需要頁面碎片，就是<body></body>中的部分。

因?yàn)閍jax加載基本原理是：ajax加載一段html代碼片段放到當(dāng)前頁面的某個容器中（通常是一個div）。當(dāng)然也可以是xml結(jié)構(gòu)、json結(jié)構(gòu)，只是在插入到當(dāng)前頁面之前也要轉(zhuǎn)化成html代碼片段。如果你ajax加載一個完整的頁面(就是包括<head><body>標(biāo)簽的)，插入的當(dāng)前document就有問題了，因?yàn)橐粋€document不可能有多個<head><body>標(biāo)簽。

理解了富客戶端思路你也就明白了為什么DWZ框架中整合第三方j(luò)Query插件不能在<head>中通過$(document).ready()初始化。

DWZ1.5.2之后版本初始化第三方j(luò)Query插件方式：

V1.5.2版本調(diào)整DWZ插件注冊和初始化機(jī)制。方便DWZ和其它第三方j(luò)Query插件整合，不需要修改dwz.ui.js源碼，可以按照DWZ插件注冊機(jī)制引入外部js。建議把第三方j(luò)Query插件注冊相關(guān)代碼放到外部js文件中，方便以后DWZ版本升級。

第三方j(luò)Query插件注冊示例：

DWZ.regPlugins.push(function($p){
// $p 是作用域， jQuery選擇器從$p這個父容器中選擇，如果沒寫會引起第三方插件被重復(fù)初始化問題
$("img.lazy",  $p).lazyload({effect : "fadeIn"});
 
// $("xxxSeletor",  $p).xxxPlugin();
});

Error loading XML document:dwz.frag.xml

直接用IE打開index.html彈出一個對話框：Error loading XML document: dwz.frag.xml

原因：dwz.frag.xml是一個核心文件，需要加載才可以正常使用。IE ajax laod本地文件有限制, 是ie安全級別的問題, 不是框架的問題.

解決方法：放到apache或iis下就可以了. 如果不想安裝apache或iis用firefox打開就正常了。

IIS不能用Ajax訪問*.html后綴的頁面

Ajax訪問*.html后綴的頁面在Apache很好的工作,但在IIS不行,IIS下firebug調(diào)試報(bào)錯ajax 405Method Not Allowed。

Http405原因是IIS不允許ajax post方式訪問*.html后綴的頁。

IIS在使用Ajax post方式請求頁面時,一定要動態(tài)網(wǎng)頁后綴的或者用改用get方式！這是IIS的問題，不是框架bug。

也可以試試修改IIS配置，添加擴(kuò)展名（.html）的腳本映射。

多個navTab頁面或dialog頁面ID沖突，解決方法

如果多個navTab頁面或dialog頁面有相同的ID，假設(shè)這個ID為：xxxId

$("#xxxId",navTab.getCurrentPanel()); //獲取當(dāng)前navTab中的xxxId

$("#xxxId",$.pdialog.getCurrent()); // 獲取當(dāng)前dialog中的xxxId

jQuery1.4.2和jquery.validate.js在IE的兼容問題

jQuery1.4.2和jquery.validate.js在IE有兼容問題，ajax表單提交在IE不能觸發(fā)formonsubmit事件。

導(dǎo)致form提交后跳轉(zhuǎn)到了一個白頁面。

升級jQuery1.4.2注意事項(xiàng)

jQuery1.4.2對json要求非常嚴(yán)格key、value都要用引號抱起來，否則就無法解析。jQuery1.3.2以前版本沒有這種限制。

{"statusCode":"200","message":"操作成功"}

$.ajax()發(fā)送ajax請求成功后調(diào)用success方法,success根據(jù)dataType來解析返回的內(nèi)容httpData()。

分析jQuery1.4.2源碼發(fā)現(xiàn)dataType=”json”的處理方式完全不一樣了。1.3.2之前版本是用window.eval()來解析JSON結(jié)構(gòu),1.4.2版本添加了paseJSON()方法來解析。

估計(jì)是window.eval()存在安全漏洞，1.4.2版本進(jìn)行了改進(jìn)，對JSON格式也要求更嚴(yán)格了。

ECMAScript 5發(fā)布有段時間了，其中就包括了解析JSON的原生API-JSON.parse。許多瀏覽器已經(jīng)支持了。

主流js庫如JQuery，Ext，Prototype都優(yōu)先使用JSON.parse，不支持該方法的瀏覽器則使用newFunction或eval。

為何優(yōu)先使用JSON.parse，我想一個就是性能，原生的總是要快一些吧。此外JSON.parse較eval也更安全。

這里也當(dāng)然不能落后了，優(yōu)先使用JSON.parse，不行再用newFunction方式。最后失敗了會給failure的第二個參數(shù)msg賦值為"parsejson error"

parseJSON: function( data ) {
    if ( typeof data !== "string"|| !data ) {
       return null;
    }
 
    data = jQuery.trim( data );
 
    if ( /^[\],:{}\s]*$/.test(data.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, "@")
       .replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, "]")
       .replace(/(?:^|:|,)(?:\s*\[)+/g, "")) ) {
 
       return window.JSON && window.JSON.parse ?
           window.JSON.parse( data ) :
           (new Function("return " +data))();
 
    } else {
       jQuery.error( "Invalid JSON: " + data );
    }
}

weblogic訪問xml問題

weblogic訪問xml文件，需要在web.xml中加入下面的聲明

<mime-mapping>

<mime-type>text/xml</mime-type>

</mime-mapping>

這時再次訪問時weblgoic就給加上contentType了

如何自定義DWZ分頁參數(shù)參數(shù)

pagerForm默認(rèn)使用的當(dāng)前頁參數(shù)是pageNum, 每頁顯示條數(shù)numPerPage,查詢排序字段名orderField, 升序降序orderDirection, 更改其它參數(shù)需要設(shè)置DWZ.init(pageFrag,options)的options[“pageInfo”]:

<form id="pagerForm" action="xxx" method="post">
      <input type="hidden" name="pageNum"value="1" />/><!--【必須】value=1可以寫死-->
      <input type="hidden" name="numPerPage"value="20" /><!--【可選】每頁顯示多少條-->
      <input type="hidden" name="orderField"value="xxx" /><!--【可選】查詢排序字段-->
      <input type="hidden" name="orderDirection" value="asc|desc" />/><!--【可選】升序|降序-->
 
</form>
<script type="text/javascript">
$(function(){
    DWZ.init("dwz.frag.xml",{
       loginUrl:"login.html",   // 跳到登錄頁面
       statusCode:{ok:200, error:300, timeout:301}, //【可選】
       pageInfo:{pageNum:"pageNum", numPerPage:"numPerPage",orderField:"orderField",orderDirection:"orderDirection"}, //【可選,這里自定義分頁參數(shù)】
       debug:false,  // 調(diào)試模式 【true|false】
       callback:function(){
           initEnv();
           $("#themeList").theme({themeBase:"themes"});
       }
    });
});
</script>

如何關(guān)閉loading

dwz的ajax方法每次調(diào)用都會出現(xiàn)讀取數(shù)據(jù)的loading，怎么修改可選的？我自己寫了一個局部更新的ajax函數(shù)，結(jié)果loading太煩人怎么關(guān)掉好？

dwz.ui.js中注冊了ajax全局事件：

 var ajaxbg = $("#background,#progressBar");
    ajaxbg.hide();
    $(document).ajaxStart(function(){
       ajaxbg.show();
    }).ajaxStop(function(){
       ajaxbg.hide();
    });

$.ajax() 有個參數(shù)global (Boolean) : (默認(rèn): true) 是否觸發(fā)全局 AJAX 事件.設(shè)置為 false 將不會觸發(fā)全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。

DWZ局部刷新怎樣做?

API調(diào)用方式：

$("#xxxId").loadUrl(url,data, callback);

html擴(kuò)展鏈接方式：

<a href="url" target="ajax"rel="xxxId"></a>

以上內(nèi)容是否對您有幫助：

← DWZ框架-Javascript混淆和壓縮

DWZ版本升級 →

寫筆記

我要補(bǔ)充