简易版主题切换功能的实现

前言：作为行业中的一个小菜，我希望能够不断的工作实践和学习探讨中慢慢成长。

因为公司最近的业务需要，平台要做一套主题切换的功能，起初采取的每套主题一个文件夹（含有多个css文件）的形式，然后在点击不同主题的时候调用不同的文件夹。后来经过查阅博客资料更换为动态修改css文件的形式。以下分别是两种方式实现过程：

1）原始方法

分别将每套风格的css都引入，然后设置缺省风格，将其他风格的css文件disabled掉，之后切换不同的风格调用不同的css

2）javascript动态修改css文件

1.关于css文件如何设置变量的具体实现可点击这里

2.css中设置的变量，那么我们就可以通过动态的改变变量值来达到切换主题的效果，查看具体的实现步骤请点击这里

3.到了这一步基本上已经成功实现了切换主题的功能，但还有个问题：页面刷新的时候主题还会恢复到原来的样子，即无法保存切换后的主题。我采用的实现方式是在数据库中新建一张主题表，将所有的主题全部放在这张表里面，通过using字段控制是否为当前使用的主题，具体代码如下。

doSave:function(){
		 var color = this.view.down('textfield[name=color]').getValue();
		 var type = "^#[0-9a-fA-F]{6}$" ;  
		 var re = new RegExp(type); //自定义主题功能的格式判定
	     var  type0 = "^[rR][gG][Bb][\(]((2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),){2}(2[0-4]\\d|25[0-5]|[01]?\\d\\d?)[\)]{1}$";  
		 var  re0 = new RegExp(type0);
		 if(re.test(color)){
		     _APP.doChangeTheme(color);
		 }else if(re0.test(color)){
			 _APP.doChangeTheme(color);
		 }else{
			 return  KPSFT.pop.msg('操作结果','颜色值:'+color+' 有误、请重新输入!'); 
		 }
		var item = {idx:1,color:color,time:new Date(),using:1}; //将切换后的主题using值改为1
		var odata = THEME_INFO;
		odata.using = 0; //将其他主题的using值改为0
		var step=[{
			JSCODE:G_SAVE,CODE:G_UPDATE, DATA:item,RCODE:'SAVA_THEME',CLAZZ:'GR_THEME'
		},{
			JSCODE:G_SAVE,CODE:G_UPDATE, DATA:odata,RCODE:'SAVA_THEME',CLAZZ:'GR_THEME'
		}];
		__EXC_STEP(step,this,function(data,response){	//向后台发送ajax，请求成功后将当前的主题信息保存到全局变量THEME_INFO中，每次页面刷新的时候直接从THEME_INFO中取值，而不用去数据库再次查询		
			THEME_INFO = item;
		});
	},