UI可定制的地方:

  • 字体
  • 图片图标背景
  • 文案
  • 位置
  • 数量
  • 外观(形状背景)
  • 请求地址(通过标识的更改)

一个简单的栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.container {position: relative;background: #eee;width: 500px;height: 500px;}
.container div.text{
font-size: 14px;
color: black;
font-family: 'pingFang-HK';
}
.container div.img{
width: 200px;
height: 200px;
background:url(/static/old.png) no-repeat;
}
.container div.bg.shape{
background: black;
color: #fff;
width: 300px;
height: 100px;
}
.container div.postions{
width: 100%;
height: 50px;
background: #aaa;
position: absolute;
left: 0px;
bottom: 0px;
z-index: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="text">we are defalut black,but now..</div>
<div class="img"></div>
<div class="bg shape">change bg color width height...</div>
<div class="postions">We were in the bottom,but now..</div>
</div>
</body>
</html>

上面就是一个简单的静态页面,只要通过最简单的样式覆盖方式就可以实现样式的简单变更

覆盖样式

注意后面的样式覆盖前面的样式是在相同权重的情况下,不同权重之间覆盖容易出现问题。
例如#idA .classA p这个的权重是100+10+1,后面的覆盖样式的写法也要达到这样的权重。如果写成p这样是覆盖不了的,虽然样式后置了但是权重低。无条件使用!important(权重高于内联)和内联样式(权重1000)style=""的权重最高,无论如何后置和增加权重值都达不到效果覆盖的效果的,注意谨慎使用。
如果要覆盖前面的样式,需要做的就是把需要做调整的样式的选择器组拷到下面做样式重写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.container div.text{
font-size: 16px;
color: blue;
font-family: 'pingFang-HK';
}
.container div.img{
background:url(/static/new.png);
}
.container div.bg.shape{
background: blue;
color: red;
width: 400px;
height: 200px;
}
.container div.postions{
top: 100px;
}

好了这样就似乎完成了一个简单的小需求,修改了文字颜色,背景颜色,大小,位置。

进一步修改现有UI

如果是修改文案呢?在定制化中我不想要某个元素了,该如何修改元素的数量呢?随着定制化的深入用户点击某个按钮的请求地址的也要发生变化,这些好像不能用通过样式的覆盖去达到需求了。
解决这个问题其实很简单【莫装X:),白了少年头】

  • 如果你的页面是在服务端做渲染然后呈现给用户的,那么就用服务端的模板引擎在服务端解决这件事,比如java的模板引擎freemaker, node可以用Nunjucks。
  • 如果你是在我们客服端去做渲染页面的,你可以使用doTjs。
  • 通过操作dom方式,你说你既不想在服务端做,又不想用模板引擎方式,那只有操作dom方式了,或者利用write方式直接写,反正不怎么推荐。

这里不是介绍怎么使用引擎的,所以具体用法大致就这样:

page.jst

1
2
3
4
5
6
7
8
<div class="container">
<div class="text">{{= it.text}}</div>
{{? it.showImg}}
<div class="img"></div>
{{?}}
<div class="bg shape {{= it.requestClassName}}">{{= it.shapetext}}</div>
<div class="postions">We were in the bottom,but now..</div>
</div>

compile.js

1
2
3
4
5
import page from '/page.jst'
// 1. 编译模板函数
var tempFn = doT.template(page);
// 2. 多次使用模板函数
var resultText = tempFn({text: 'new text',showImg:false,requestClassName:'req1',shapetext:'new text'});

这样我们就可以通过js传入唯一标识去进一步实现定制化
到目前为止所做的只是简单的满足需求,去做一些样式覆盖文案或者id、class的替换工作,距离深层次的定制化其实还有很长远的路要走…

简单的封装

根据前端唯一标识定制化,也可以传回唯一标示请求配置数据,这涉及到后台配置系统,配置表等等。
先从最近刚做的根据pid定制样式,在还未使用配置系统的情况下举个例子
A是产品方,B,C,D,E是业务方,A需要根据BCDE的UI特点去分别满足他们的需求,如果是以后有更多的业务方还需要同样的满足。就算没有也业务方,其实时间空间也可以成为自己的业务需求方:早晨的UI和晚上的UI不同,北京地区的IP和上海地区的IP用户UI也不同,思考方向
总不能来一个业务就重新堆砌一堆代码,有句话叫以不变应万变,这里是以最小的变化应对千千万万个需求。
不同的业务方会有不同的id,这里的id暂且可以称为Pid,不同的环境终端也可以做标识(pc,h5),所以可以用这两个唯一标识作为参数去传入一个方法中,这个方法就是用来改变UI的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/**
* Created by xzhang on 2017/12/18.
*/
function customByPid(pid,env){
if(typeof pid !== 'string' || typeof env !== 'string') {
throw new Error('arguments is null or not typeof string');
};
var cssData = {}; // 样式数据 作为write写入的变量使用
window.tempData = {}; // 模板引擎数据,用来改变文案,数量,请求等
var cssCover_pc,cssCover_h5;
switch (pid) {
case '123456':
tempData.text= 'new text';
tempData.shapetext= 'new shapetext';
tempData.showImg= true;
tempData.requestClassName= 'req1';
cssData.imgSuffix = window.imgSuffix = '_blue';
cssData.txtcolor = '#666';
cssData.bgcolor = '#ffe400';
if(env === 'pc'){
cssData.bg_step = '#fcf2a2';
cssData.src_img = '/static/new.png';
}
break;
default:
break;
}
cssCover_h5 = '<style></style>';
cssCover_pc = '<style></style>';
if(env === 'pc'){
document.write(cssCover_pc);
}else if(env === 'h5'){
document.write(cssCover_h5);
}

因为tempData是挂载到window上的,因此它是全局变量可以被doTJs模板引擎作为数据参数使用。
调用方法

1
customByPid('123456','pc')

这样就可以只根据pid和目前的环境终端去自动生成我们需要的UI了

配置系统与配置表、配置项

未完待续,持续更新深入定制化配置系统和配置表

欢迎交流转载请注明出处