CSS 换肤实现

一、换肤原理

网页换肤的基本原理：

使用 JS 切换对应的 CSS 样式表。例如导航网站 Hao123 的右上方就有网页换肤功能。除了切换 CSS 样式表文件之外，通常的网页换肤还需要通过 Cookie或者H5的session技术 来记录用户之前更换过的皮肤，这样下次用户访问的时候，就可以自动使用上次用户配置的选项。

工作流程就出来了：访问网页——JS 读取 Cookie || session ——如果没有，使用默认皮肤——如果有，使用指定皮肤；用户点击换肤选项——JS 控制替换对应的 CSS 样式表——将皮肤选项写进 Cookie | | session 保存。

 

逻辑思维图:

 

 

二、搭建前端工程

 

1、单项目换肤实现

 

 

1、css文件：

 

全局：global.css

全局样式为全站公用，为页面样式基础，页面中必须包含。

结构：layout.css

页面结构类型复杂，并且公用类型较多时使用。多用在首页级页面和产品类页面中。

私有：style.css

独立页面所使用的样式文件，页面中必须包含。

模块 module.css

产品类页面应用，将可复用类模块进行剥离后，可与其它样式配合使用。

主题 themes.css

实现换肤功能时应用。

2、data目录

用于存放测试接口数据，用于前后台对接之前测试功能。通长用json格式文件模拟

 

3、Framework目录

用于存放框架

 

 

4、JS目录

JS文件以功能切割js文件代码

 

App.js:存放页面MVC框架

Controller：存放功能模块的控制器

Directive：存放操作dom的指令

Filter：过滤器操作

Service：公用服务类

5、Less目录

 

Less:文件目录用于存放控制全局的基础样式，如需变更颜色字体等将会在less中修改一次性装换为CSS.

6、src目录

 

用于存放静态资源：图片，背景等。

7、tpls目录

 

如果是单页面应用将会存放：文档片段代码。

非单页面应用：将会存放分页html.

2、多项目工程之间应用换肤

不同的项目可能定制不同的主题皮肤，虽有不同但又共通点，要实现换肤功能在不同项目之间反复使用，需要前期规划号CSS方向。

 

相同点：

1、所有项目项目之间引用相同的模板初始化化文件。统一所有浏览器的基础样式

2、定义相同的class类名，即使不同项目，样式不同，但其中的web组件相同，通过定义web组件名从而通过名称控制CSS样式。达到样式的复用。

如：手风琴组件 class名称统一为accordion 公共CSS文件中定义accordion的基础样式，在各自的项目中也可以操作accordion CSS从而定制不同颜色，背景。

不同点：

1、各个项目之间的样式风格不统一，每个项目都有自己不同的themes css文件，根据客户的要求进行样式调整。

2、Web项目布局不统一，如手风琴导航与面包屑导航，对不同的项目应当合理引入组件CSS，而不能为了省事加载所有公共类样式，这样只会增加不必要的请求书与客户端内存的压力。

多工程目录

 

commonProject为公共基础目录

里面的css文件下

Common放入的是全局静态的CSS如页面初始化

webAppSubgroup文件夹下放入是web基础组件，如accordion与slide等基础组件

ProjiectA与ProjectB结构相同 目录功能参考单个项目

项目与项目之间的引入可以通过require.js或者依赖javaWeb基础类库实现,

达到按需载入的目的。

3、换肤动态加载CSS模板

HTML代码如下：

<p>前端开发是我的一个职业目标，我喜欢前端开发，热爱前端开发，喜欢制作各种各样的页面效果</p><inputtype="button" data-value="default" class="targetElem" value="default"/><inputtype="button" data-value="green" class="targetElem" value="green"/><inputtype="button" data-value="red" class="targetElem" value="red"/><inputtype="button" data-value="orange" class="targetElem" value