自定义时间线插件

入职已有两个月了，从以前的前后台均开发到目前的专向做前端，最大的感触便是更加有耐心了，不管什么样的效果及布局，都能静下心来从解决方案到观摩别人解决方案，进而实现。这样看来人的精力是有限的是对的。然而写着写着会越加意识到自己该提高下代码质量，特别是对于日渐庞大的工程及需要不断维护和拓展的实现来说，代码规范、高质量是至关重要的一个环节，这是自己接下来需要提高和注意的地方。

在此以自己近期遇到的一个开发任务：时间线的开发过程，来记录下自己此刻的思路与状态。最终实现效果如下图：

整体布局思路：纯css布局，大小采用百分比，以便适应各种分辨率环境；

时间轴算法：依据已有时间点，找出最大时间及最小时间，以最小时间为起点，包含最大时间且为6的倍数时间点为结束时间；

时间段定位：根据开始时间点及时间段跨度，进行百分比绝对定位；

时间线绘制：利用模板，动态添加dom元素；

js实现过程：插件化，便于移植、复用和维护。无奈当前水平首先，封装的不好，以后要多看看别人源码，学习模块化，面向对象js编程了。个人封装js逻辑如下：

//时间线刷新定时器
var timeLineTimer=null;
//当前时间线渲染数据集，用来控制定时器中时间线是否需要刷新
var currentData="";
// 时间线类
function OwnTimeLine (arg) {
    var $that=this;
    //告警时间线主体参数
    var timeLineArg={"entityName":"告警描述信息","alarmCount":"0条告警","okNum":0,"infoCount":0,
        "warningCount":0,"errorCount":0,"minTime":new Date(),"maxTime":new Date(),"alarms":[]};
    //告警时间线参数(示例)
    var timeParam={"timelines":[{"beginPriorityColor":OwnTimeLine.alarmlevel[1],"endPriorityColor":OwnTimeLine.alarmlevel[0],
        "beginTime":"2016/4/7 10:00:","endTime":"2016/4/7 10:10"}],"alarmName":"Test"};
    if(arg==null||arg==undefined){
        arg=timeLineArg;
    }
    //主告警名称
    this.entityName=arg.entityName;
    //告警总数
    this.alarmCount=arg.alarmCount;
    //正常告警数量
    this.okNum=arg.okNum==null?0:arg.okNum;
    //提示告警数量
    this.infoCount=arg.infoCount==null?0:arg.infoCount;
    //警告告警数量
    this.warningCount=arg.warningCount==null?0:arg.warningCount;
    //验证告警数量
    this.errorCount=arg.errorCount==null?0:arg.errorCount;
    // 时间轴开始时间
    this.minTime=arg.minTime==null?new Date():arg.minTime;
    // 最大结束时间
    this.maxTime=arg.maxTime==null?new Date():arg.maxTime;
    // 时间线跨度（分钟为单位）
    this.timeLineWidthMins=60;
    //初始化时间线对象
    this.initAll();
    //初始化时间线
    if(arg.alarms!=null&&arg.alarms.length>0){
        $.each(arg.alarms,function(index,item){
            $that.appendTimeArr(item);
        });
    }
}

// 渲染子告警及其时间线数据
OwnTimeLine.prototype.appendTimeArr = function (param) {
    $that=this;
    if(param.timelines!=null && param.timelines.length>0){
        //console.log(JSON.stringify(param.timelines));
        if(OwnTimeLine.currentTimeNo>OwnTimeLine.timeTotal){
            this.appAlarmDom();
            OwnTimeL