2018/10第四周杂记

既然是杂记,就当流水账写吧。

deepin开发者与用户大会 - 南京站

上周偶然看见了deepin在南京举办开发者与用户大会的消息,虽然我不是开发者但好歹算个常年双系统的用户吧,于是周末本着打酱油的心态去了趟南京,开会的地方是真偏呐。下了地铁就去签到了,书包里背了两块中秋节公司发的月饼也没好意思拿出来吃。。deepin的分享都很精彩,羡慕他们始终如一的坚持自由和开源的信仰,特别是见证了这三年间deepin从交互界面到系统软件优化以及对常用软件进行linux适配的进步,虽然说光有情怀等于画饼充饥,但是我觉得没点情怀也很难做到这么多年面对质疑和唱衰的坚守。oray CTO分享了花生壳向日葵等产品,我用过向日葵的远控,了解过花生壳的内网穿透。我用过windows的原生远控,用过国外的team viewer,实话实说向日葵应该是最好用的,而且单个远程主机免费还不像team viewer那么多限制。不过让我觉得励志的是,这个CTO大学学的是柴油机。。虽然我也很喜欢deepin,但是用deepin还咋玩游戏。。

嗯。。以上是上周断更的原因。

关于工作

为了寻求不写lowB代码的方法,我看了几章设计模式,虽说有所启发,但是还觉得哪里我没领悟到,或者说缺失了什么。这一周给我的需求页面比较复杂,一个页面十几个echarts折线图,为了让他们互不干涉,写了很多if判断用了很多全局变量,代码结构不清晰,逻辑也显得很混乱,有的函数接收四五个参数或者写了快100行。阳哥建议我有空重构一下,emmm我自己都不知道从何下手,况且我也没有更好的办法分离它们。平均一个需求页面要写800到1000行js(jq),有些重复代码不知道如何抽象出来,用到全局变量的地方也没什么好的办法约束它们。。我又买了几本书,希望看完能有点启发吧。

写了二十多个echarts之后,我终须下定决心动手写个echart类,一个实例对应一个图表,每个实例维护自己的配置参数,也许能改善重复的配置过程,增加一点复用。用后端给的接口数据做了下测试,渲染个折线图也不成问题,但是还觉得有些地方没考虑到,或者结构划分的还不是太好。代码放在github,下周如果再有echarts的需求,也许就能想到改进方案了。

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
function Chart (IDselector) {
this.selector = IDselector;
}
Chart.prototype = {
generateData, // 生成data
generateDate, // 生成时间date
timeFormater, // 格式化时间戳
generateSeries, // 生成series
dataFormater, // 格式化数据,返回数组[格式化后的数据,单位]
generateOption, // 生成option
renderChart // 渲染图表
}
// res -- ajax传回的用于渲染表格的数据,数组。property -- 生成表格的字段,数组。formatFlag -- 是否对数据格式化
function generateData (res,property,formatFlag = ture) {
var args = {};
var data = [];
if(!Array.isArray(property)){
console.warn('property should be a array')
}else{
for(let i = 0; i < property.length; i++){ // 取出property中存的字段名
args[property[i]] = [];
for(let j = 0; j < res.length; j++){
if(formatFlag){
args[property[i]].push(this.dataFormater(res[j][property[i]])[0]) // 根据拿到的字段名格式化后取值,作为数组存在data变量中
}else{
args[property[i]].push(res[j][property[i]])
}
}
}
}
this.unit = this.dataFormater(res[0][property[0]])[1] // 记录单位
this.data = args;
}
// data -- 含有时间戳数据的数组 timestemp -- 时间戳的字段名,fmt -- 时间格式
function generateDate (data,timestemp,fmt){
var timeArray = []
for(let i = 0; i < data.length; i++){
timeArray.push(new Date(data[i][timestemp]*1000).format(fmt))
}
this.formatedDate = timeArray;
}
// 给时间戳类型的时间转换时间格式
function timeFormater (date,fmt) {
var formatedDate = []
for(let i = 0; i < date.length ; i++){
var temp = new Date(date[i])
formatedDate.push(temp.format(fmt))
}
this.formatedDate = formatedDate;
}
// 格式化处理单个数据,返回处理后的数字和单位组成的数组
function dataFormater (byte) {
if(byte == 0){
return ['0','']
}
var k = 1024;
var sizes = ['','K', 'M', 'G', 'T'];
var i = Math.floor(Math.log(byte) / Math.log(k));
// 返回数组 [缩小后保留一位小数的数字,单位]
return [(byte / Math.pow(k, i)).toFixed(1),sizes[i]]
}
// 生成series,data为包含几个属性名命名的数组的对象,property需要生成series的属性名的数组,name为series的name数组
function generateSeries (property,name) {
var arr = []
if(!name){ // 如果不传name数组则以property作为name
name = property
}
for(let i = 0; i < property.length; i++){
let series = {
name:name[i],
type:'line',
showAllSymbol:true,
itemStyle:{
normal:{
color:'gray'
}
},
lineStyle:{
normal:{
color: '#007FFF'
}
},
label: {
normal: {
show: true,
distance:10,
position: 'top',
formatter: '{c}'
}
},
data:this.data[property[i]].reverse()
}
arr.push(series)
}
return this.series = arr;
}
// 设定option, dataTime时间数组,series,unit单位,legend折线标识
function generateOption (legend) {
var that = this;
var option = {
color:['#007FFF','#FF0000'],
xAxis : [
{
type : 'category',
axisLine:{ //坐标轴线相关设置
lineStyle:{
color: '#90A0AE'
}
},
data:this.formatedDate,
splitLine: {
show: false
}
}
],
yAxis : [
{
type : 'value',
axisLine:{ //坐标轴线相关设置
lineStyle:{
color: '#90A0AE'
}
},
axisLabel:{formatter:'{value}'+ this.unit}
}
],
tooltip : { //鼠标放上去的提示
trigger: 'item',
formatter: function(params){
return params.name+'<br/>'+ params.seriesName + ':' + params.data + ' 单位:' + that.unit;
}
},
dataZoom: [{
type: 'inside', //slider表示有滑动块的,inside表示内置的
start: 0,
end: 100
}, {
start: 0,
end: 100,
handleSize: '90%',
handleStyle: {
color: '#000',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
series: this.series,
legend:{
show:false,
data:[],
// selected:{
// 'prop':false,
// }
}
};
if(legend){
option.color = ['#007FFF','#FF0000']
option.legend.show = true;
option.legend.data = legend
}
this.option = option;
}
// 渲染图表
function renderChart (option){
let chart = echarts.init(document.getElementById(this.selector))
chart.setOption(this.option);
}

这样可以把从ajax数据处理到生成echarts的过程简化为

1
2
3
4
5
6
var a = new Chart('emm')
a.generateData(res.data,['ifout','pkt_speed'],'ts','MM-dd');
a.generateDate(res.data,'ts','hh:mm');
a.generateSeries(['ifout','pkt_speed']);
a.generateOption(['ifout','pkt_speed']);
a.renderChart()

option的配置好像不咋灵活。。

关于读书

从我觉得看设计模式的书不能直接帮助我改善代码,就开始有点懈怠。几个设计原则和编程技巧,其实我也没怎么能切实的领悟到并运用好,没人review代码以及没个师傅真是个头疼的事。。我开始看《代码整洁之道》,每天翻几页,希望体现在代码上有直接的效果吧。。

0%