平台源码分析和扩展

talk is cheap, show me the code.

目录

假设我们已经对技术选型完毕，剩下就是对其进行demo编写，源码分析，和扩展了。yx为例进行源码分析。主要步骤是单元测试，demo编写，源码分析扩展点分析。

业务场景

我们按照上中下布局为例，分析相关实现。我们假设对yx为例进行源码分析。主要步骤是单元测试，demo编写，源码分析扩展点分析。

源码分析

1.定位到函数实现

在这里插入代码片// 上下结构
YuXP.createSplitY1 = function (_divid, _location, _buttons, _showSplitLines, _linesDragable, _linesClass) {
  var domParent = document.getElementById(_divid); // 先取得父亲结点
  if (domParent == undefined && domParent == null) {
    console.error('无法在[' + _divid + ']中创建分割器,因为还没有这个div,你可能入参_divid写错了!');
    return;
  }
  var domParentHeight = domParent.clientHeight; // 取得父亲结点的实际高度
  var domParentWidth = domParent.clientWidth; // 取得父亲结点的实际宽度
  // 如果是多页签,因为第三个可能是隐藏的,即计算出来的高度是0,则要取另一个实际高度
  if (domParent.getAttribute('data-yutype') == 'tabb' || domParent.getAttribute('data-yutype') == 'split') {
    domParentHeight = domParent.getAttribute('data-realheight'); // 实际高度
    domParentWidth = domParent.getAttribute('data-realwidth');// 实际宽度
  }

  var liThisSplitHeight = domParentHeight; // 分割条的实际高度
  var isHaveBtn = false; //
  // if (_buttons != undefined && _buttons != null && _buttons.length > 0) {
  //   isHaveBtn = true; //
  //   liThisSplitHeight = domParentHeight - YuXP._bottomBtnHeight; // 分割条的实际高度减去按钮的高度
  // }
  var enPosition = null;
  var btnHtml = '';
  if (_buttons != undefined && _buttons != null && _buttons.length > 0) {
    isHaveBtn = true; //
    liThisSplitHeight = domParentHeight - YuXP._bottomBtnHeight; // 分割条的实际高度减去按钮的高度
    var btnPosition = '下中';
    if(typeof _buttons === 'string'){
      var btnConfig = _buttons.split('#');
      if (btnConfig.length === 2) {
        btnPosition = btnConfig[0];
        _buttons = btnConfig[1];
      }
    }
    var enPosition = convertChinese(btnPosition);
    btnHtml = YuXP.getByButtonHtml(_buttons, enPosition[1], enPosition[0]);
  }

  var strHtml = '';
  var liHeightA = 0; // 上边的宽度
  var liHeightB = 0; // 下边的宽度
  if (typeof _location == 'string' && _location.indexOf('%') == _location.length - 1) {
    var liPercent = parseInt(_location.substring(0, _location.length - 1)); // 取得35%前面的35
    liHeightA = Math.round((liThisSplitHeight * liPercent) / 100); // 总高*35/100,计算面实际高度
    liHeightB = liThisSplitHeight - liHeightA - YuXP._splitXWidth; //
  } else {
    liHeightA = _location;
    liHeightB = liThisSplitHeight - liHeightA - YuXP._splitXWidth; //
  }

  strHtml = strHtml + '<div id="' + _divid + '_Split" data-splittype="上下" class="yuxp-split-up-down yuxp-split" data-ishavebtn="' + isHaveBtn + '" data-realheight="' + domParentHeight + '" style="height:' + domParentHeight + 'px;">\r\n';
  if(enPosition && enPosition.length > 0 && enPosition[0] === '上'){
    strHtml += btnHtml;
  }
  strHtml = strHtml + '<div id="' + _divid + '_A" class="yuxp-split-up-down__up yuxp-split-body" data-yutype="split" data-realwidth="'+domParentWidth+'" data-realheight="' + liHeightA + '" style="height:' + liHeightA + 'px;"></div>\r\n';
  if (_showSplitLines === false) { // 不显示分隔条
    strHtml = strHtml + '<div id="' + _divid + '_X" class="yuxp-split-up-down__bar yuxp-split-bar yuxp-hid-split"></div>\r\n';
  } else {
    strHtml = strHtml + '<div id="' + _divid + '_X" class="yuxp-split-up-down__bar yuxp-split-bar"';
    strHtml += _linesDragable === false ? '' : 'draggable="true" οndragstart="YuXP.dragStartSplit(\'' + _divid + '\',event,this);"  οndragend="YuXP.dragEndSplitSX(\'' + _divid + '\',event,this);"';
    strHtml += '></div>\r\n';
  }
  strHtml = strHtml + '<div id="' + _divid + '_B" class="yuxp-split-up-down__down yuxp-split-body" data-realwidth="'+domParentWidth+'" data-yutype="split" data-realheight="' + liHeightB + '" style="height:' + liHeightB + 'px;"></div>\r\n';
  if(enPosition && enPosition.length > 0 && enPosition[0] === '下'){
    strHtml += btnHtml;
  }
  // 如果有按钮,则外面包一层,下面还带按钮
  // if (isHaveBtn) {
  //   strHtml = strHtml + YuXP.getByButtonHtml(_buttons);
  // }
  strHtml = strHtml + '</div>\r\n';
  this.closeLoading();
  domParent.innerHTML = strHtml;
};

2.实现原理：
先创建一个div,在div的基础上创建不同分割的布局。

实例

我们如何创建三分布局呢，做一个局部的拓展呢？这个简单的拓展实现呢？

扩展点分析

知道了上述的原理，我们更改代码如下：

在这里插入代码片// 上下结构
YuXP.createSplitY1 = function (_divid, _location,  _showSplitLines, _linesDragable) {
  var domParent = document.getElementById(_divid); // 先取得父亲结点
  if (domParent == undefined && domParent == null) {
    console.error('无法在[' + _divid + ']中创建分割器,因为还没有这个div,你可能入参_divid写错了!');
    return;
  }
  var domParentHeight = domParent.clientHeight; // 取得父亲结点的实际高度
  var domParentWidth = domParent.clientWidth; // 取得父亲结点的实际宽度
  // 如果是多页签,因为第三个可能是隐藏的,即计算出来的高度是0,则要取另一个实际高度
  if (domParent.getAttribute('data-yutype') == 'tabb' || domParent.getAttribute('data-yutype') == 'split') {
    domParentHeight = domParent.getAttribute('data-realheight'); // 实际高度
    domParentWidth = domParent.getAttribute('data-realwidth');// 实际宽度
  }

  var liThisSplitHeight = domParentHeight; // 分割条的实际高度
  var isHaveBtn = false; //
  // if (_buttons != undefined && _buttons != null && _buttons.length > 0) {
  //   isHaveBtn = true; //
  //   liThisSplitHeight = domParentHeight - YuXP._bottomBtnHeight; // 分割条的实际高度减去按钮的高度
  // }
  var enPosition = null;
  var btnHtml = '';

  var strHtml = '';
  var liHeightA = 0; // 上边的宽度
  var liHeightB = 0; // 中边的宽度
  var liHeightC = 0; //下边的宽度
  if (typeof _location == 'string' && _location.indexOf('%') == _location.length - 1) {
    var liPercent = parseInt(_location.substring(0, _location.length - 1)); // 取得35%前面的35
    liHeightA = Math.round((liThisSplitHeight * liPercent) / 100); // 总高*35/100,计算面实际高度
    liHeightB = liThisSplitHeight - liHeightA - YuXP._splitXWidth; //
  } else {
    liHeightA = _location;
    liHeightB = liThisSplitHeight - liHeightA - YuXP._splitXWidth; //
	liHeightC = liThisSplitHeight-(liHeightA+liHeightC)-YuXP._splitXWidth;
  }

  strHtml = strHtml + '<div id="' + _divid + '_Split" data-splittype="上下" class="yuxp-split-up-down yuxp-split" data-ishavebtn="' + isHaveBtn + '" data-realheight="' + domParentHeight + '" style="height:' + domParentHeight + 'px;">\r\n';
  if(enPosition && enPosition.length > 0 && enPosition[0] === '上'){
    strHtml += btnHtml;
  }
  strHtml = strHtml + '<div id="' + _divid + '_A" class="yuxp-split-up-down__up yuxp-split-body" data-yutype="split" data-realwidth="'+domParentWidth+'" data-realheight="' + liHeightA + '" style="height:' + liHeightA + 'px;"></div>\r\n';
  if (_showSplitLines === false) { // 不显示分隔条
    strHtml = strHtml + '<div id="' + _divid + '_X" class="yuxp-split-up-down__bar yuxp-split-bar yuxp-hid-split"></div>\r\n';
  } else {
    strHtml = strHtml + '<div id="' + _divid + '_X" class="yuxp-split-up-down__bar yuxp-split-bar"';
    strHtml += _linesDragable === false ? '' : 'draggable="true" οndragstart="YuXP.dragStartSplit(\'' + _divid + '\',event,this);"  οndragend="YuXP.dragEndSplitSX(\'' + _divid + '\',event,this);"';
    strHtml += '></div>\r\n';
  }
  strHtml = strHtml + '<div id="' + _divid + '_B" class="yuxp-split-up-down__down yuxp-split-body" data-realwidth="'+domParentWidth+'" data-yutype="split" data-realheight="' + liHeightB + '" style="height:' + liHeightB + 'px;"></div>\r\n';
  //
  strHtml = strHtml + '<div id="' + _divid + '_C" class="yuxp-split-up-down__down yuxp-split-body" data-realwidth="'+domParentWidth+'" data-yutype="split" data-realheight="' + liHeightC + '" style="height:' + liHeightC + 'px;"></div>\r\n';
  if(enPosition && enPosition.length > 0 && enPosition[0] === '下'){
    strHtml += btnHtml;
  }
  // 如果有按钮,则外面包一层,下面还带按钮
  // if (isHaveBtn) {
  //   strHtml = strHtml + YuXP.getByButtonHtml(_buttons);
  // }
  strHtml = strHtml + '</div>\r\n';
  this.closeLoading();
  domParent.innerHTML = strHtml;
};

参考资料和推荐阅读：

1. 上中下布局.
2. 实现上中下布局.

欢迎阅读，各位老铁，如果对你有帮助，点个赞加个关注呗！~