hybird之web动态换肤实现

浏览数：21 / 时间：2015年06月09日

前言

最近在重构个hybird（原生的壳包着Web页面）的UI框架，进行到了做换肤功能的阶段，所以这里是我思考的解决的方法。

预想

目前实现换肤的功能无非就两种做法。

1.写几个皮肤文件，然后切换使用这几个文件达到换肤的目的。

不得不说这是最常见的方式，效果也比较明显，但是它有几个缺点。

缺点：

1.如果更改一个皮肤的内容，那其他的皮肤文件也要做相应修改（这挺麻烦，不过可以用less管理css解决，所以也不是什么大问题）。

2.它是固定的，在使用的时候皮肤文件已经是写好的了，而当我需要动态设置一些属性的时候就无可奈何了。

2.使用less这种工具，在页面加载时才动态生成皮肤样式。

但这种方式的缺点却很明显。

缺点：

1.效率低，为了一个换肤的功能，却要引一个less工具（压缩后大概126KB），在终端Web是无法忍受的。

2.速度慢，因为有一个皮肤文件编译（姑且把它叫做编译）生成的过程，在终端也难以接受（有可能还出现页面皮肤闪），如果更换皮肤又要重新编译。

考虑

鉴于上面两种方法的缺点，一种无法动态，另一种效率低。

所以上面两种方法没办法使用，只能思考另外的方法了，于是就分析哪些是hybird 页面需要换肤的元素

有几个需要换肤的元素：

1.导航栏

2.底部栏

3.默认图标

而又寻找需要设置的属性：

1.背景色

2.字体颜色

3....（主要是这两个）

根据上面的两个东西，我发现没必要把页面换肤想成那么复杂一件事，不是需要用什么工具或切换css文件。是不是可以获取需要动态设置的属性，然后然后设置到需要换肤的元素就可以了（就是这个简单想法）。

PS:有人会说皮肤怎么会需要动态生成。我只能说有可能某些皮肤属性是页面启动时才知道，又或者支持自定义皮肤的。

实现

说干就干，实现起来代码很少，就直接贴出来给大家看看。

ui.Skin = (function(){

     var skinTagId = "BINGOTOUCH-SKIN", TEMPLATE = {
          BGCOLOR : "@selector { background-color : @BGCOLOR !important; }",
          COLOR : "@selector { color : @COLOR !important; }"
     }    

     var init = function (options){
         var settings = {
              changeColorSelector : [ ".header", ".footer"],
              color : "#FFFFFF",
              changeBgColorSelector : [ ".header", ".footer"],
              bgColor : "#278cca",
              appendElement : "head"
          }

          $.extend(settings,options);
          $("#" + skinTagId).remove();
          
          var html = "<style id=‘" + skinTagId + "‘>";
              html += _createCss(settings.changeColorSelector, "COLOR", settings.color);
              html += _createCss(settings.changeBgColorSelector, "BGCOLOR", settings.bgColor);
              html += "<style>";
          $(settings.appendElement).append(html);
     }

     var _createCss = function(changeSelectors, colorType, color){
         var html = "";
           $.each(changeSelectors ,function(i, selector) {  
             html += TEMPLATE[colorType].replace("@selector", selector).replace("@" + colorType, color);
        });        
           return html;
     }

     return { 
         init : init
     }

})();