以友好的方式整合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时的覆盖特性，顺序是很重要的。

评论

1 楼 yulyfish 2014-06-17  

你的这文篇对我很有启发，但现在图片看不到，希望作者修订一下，谢谢