以友好的方式整合DWZ
如果是一个临时项目，属于做完收工，不考虑后续扩展改进升级等问题的话，那么直接弄一份DWZ的拷贝放到项目下修修改改没有什么问题；但如果是一个产品，或者是一个基础的开发框架，那么更友好的整合DWZ应当是要考虑的问题。
?
我的应用场景是将DWZ整合到开发框架中，本身这个开发框架是需要持续改进的，所以我希望DWZ有新的版本时我可以更快的引入新的版本到开发框架中。
?
我不希望修改DWZ本身发布包中的任何文件，这样我就可以在下一次升级时直接将这些文件替换成新的，而不用考虑我曾修改过其中的某一块代码会被新版本的文件覆盖掉。
?
DWZ发布的文件可以放置在一个独立的目录下，结构像这样：
?
再创建一个用于修正DWZ的目录，结构像这样：
?
fix.js中可以写入对DWZ的一些修正或扩展方法，例如覆盖DWZ的一些js方法。而thems目录下的结构与DWZ是一致的，这里可以修正DWZ的core.css或皮肤下的style.css以及图片等。
?
除了DWZ本身所带的组件以外，或许我们还需要有自己的一些组件或自定义样式，那么依然可以按照上面的目录结构再创建一个扩展目录，像这样：
?
一旦使用了DWZ并且你希望应用系统能够无缝的使用DWZ提供的换肤功能，那么按照DWZ的换肤机制来设定你的扩展是最简便合理的一种方式，所以目录结构应当是保持一致的。
?
DWZ的换肤机制是采用js动态的修改首页中引用的样式来实现的，它给每种皮肤定义了一个名称并设定了该名称的目录名，换肤时将default下的style.css更换为其他几个目录下的style.css，于是整个应用的皮肤就会被新的样式渲染。在dwz.theme.js中我们可以看到源代码。
?
由于上面我们扩展了两个相同结构的目录，所以DWZ换肤的代码应当做相应的修改，在触发theme方法时，我们同时替换三个目录下的style.css文件，当然你如果乐意，也可以是四个、五个。这一段代码我是写在fix.js中的：
/** 覆盖DWZ的theme函数，支持多个部分的样式替换。*/$.fn.extend({theme : function(options) {var op = $.extend({dwzTheme : "coo/ui/dwz/themes",fixTheme : "coo/ui/fix/themes",xuiTheme : "coo/ui/xui/themes",appTheme : "themes"}, options);var dwzThemeHref = op.dwzTheme + "/#theme#/style.css";var fixThemeHref = op.fixTheme + "/#theme#/style.css";var xuiThemeHref = op.xuiTheme + "/#theme#/style.css";var appThemeHref = op.appTheme + "/#theme#/style.css";return this.each(function() {var jThemeLi = $(this).find(">li[theme]");var setTheme = function(themeName) {var dwzThemeLink = $("head").find("link[href^='" + op.dwzTheme + "'][href$='style.css']");var fixThemeLink = $("head").find("link[href^='" + op.fixTheme + "'][href$='style.css']");var xuiThemeLink = $("head").find("link[href^='" + op.xuiTheme + "'][href$='style.css']");var appThemeLink = $("head").find("link[href^='" + op.appTheme + "'][href$='style.css']");if(dwzThemeLink.size() > 0) {dwzThemeLink.attr("href", dwzThemeHref.replace("#theme#", themeName));}if(fixThemeLink.size() > 0) {fixThemeLink.attr("href", fixThemeHref.replace("#theme#", themeName));}if(xuiThemeLink.size() > 0) {xuiThemeLink.attr("href", xuiThemeHref.replace("#theme#", themeName));}if(appThemeLink.size() > 0) {appThemeLink.attr("href", appThemeHref.replace("#theme#", themeName));}jThemeLi.find(">div").removeClass("selected");jThemeLi.filter("[theme=" + themeName + "]").find(">div").addClass("selected");if($.isFunction($.cookie))$.cookie("dwz_theme", themeName);}jThemeLi.each(function(index) {var $this = $(this);var themeName = $this.attr("theme");$this.addClass(themeName).click(function() {setTheme(themeName);});});if($.isFunction($.cookie)) {var themeName = $.cookie("dwz_theme");if(themeName) {setTheme(themeName);}}});}});?其中appTheme是指当前应用的主题目录位置。dwzTheme/fixTheme/xuiTheme已封装到基础开发框架中供所有应用共用，而appTheme只应用于当前应用系统，适用于针对当前应用系统定制样式，例如应用logo、首页头部样式等。
?
最后需要注意的一点是在首页的head中引入css和js时应当注意顺序，依次是dwz->fix->xui->app，因为这里应用了页面引入css和js时的覆盖特性，顺序是很重要的。