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

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的需求，也许就能想到改进方案了。

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的过程简化为

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代码以及没个师傅真是个头疼的事。。我开始看《代码整洁之道》，每天翻几页，希望体现在代码上有直接的效果吧。。