首页 > 代码库 > hybird之web动态换肤实现
hybird之web动态换肤实现
前言
最近在重构个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 }})();
代码很简单，看看就明白
总结
我的实现方法很简单，当然所能更换的内容也较少且固定，但这对hybird应用的换肤已经是够的了。既能动态换肤，而且效率是不错的。
——技术只是技术，工具只是工具，不能为用而用。
（本篇完）
hybird之web动态换肤实现