onaug6th
onaug6th

Element el-scrollbar 源码解析

Element el-scrollbar 源码解析_第1张图片
image

前几天美化博客时发现滚动条在window下实在太难看，所以在基于vue的技术上寻找美化滚动条的方法。记得Element-ui源码中有名为 el-scrollbar 的滚动组件，虽然文档上没有提到，但使用的人还是不少。今天记录下源码的阅读心得。

在这之前

在看苦涩的代码前，先大概描述一下滚动条组件的用处和行为，方便理解代码逻辑。

因为操作系统和浏览器的不同，滚动条外观是不一样的。需要做风格统一时，就需要做自定义滚动条。当然也可以直接修改CSS3中的 ::-webkit-scrollbar 相关属性来达到修改原生滚动条外观，但这个属性部分浏览器上没有能够完美兼容。

在一个固定高度的元素中，如内部内容超出了父级元素的固定高。为了让用户浏览其余的内容，通常都会设置父级元素overflow-y: scroll 出现滚动条。允许用户以滚动的形式来浏览剩下的内容。

而自定义滚动条，是先通过偏移视图元素，达到隐藏原生滚动条的效果。同时在视图元素的右侧和下方，增加用标签写出的模拟滚动条。监听模拟滚动条的事件（按下滑块或点击轨道），来动态更新视图窗口的scrollTop或scrollLeft值。同样的，也会监听视图窗口的事件（滚动事件或视图窗口的尺寸缩放事件），来同步更新自定义滚动条的状态（滑块所处的位置或滑块长度）。

滚动条其实是当前已浏览内容的一个直观展示，在固定元素中，如果scrollTop发生改变往下滚动。滚动条中的滑块也会向下移动。此时能够通过滚动条来得知内容的已滚动程度和剩余程度。

我们将页面想象成一个很长的画布，而我们能看到的是一个移动的窗口。当页面往下滚动时，窗口在画布中也就往下移动，来查看被遮挡的内容。同样的，滚动块里的滑块也往下移动同样比例的距离。所以滚动条就是一个等比例的缩小模型。

也就是说，固定元素的高度clientHeight 除以 固定元素包括溢出的总高度scrollHeight。同等于 滑块的高度 除以 滚动条的高度。他们的比例是一样的。

Element el-scrollbar 源码解析_第2张图片
未滚动前的滚动条

Element el-scrollbar 源码解析_第3张图片
滚动后的滚动条

在大概了解滚动条的工作内容和计算公式后，看看源码中是如何处理他们之间的计算关系的。

文件

scrollbar组件在 package/scrollbar/index.js 中被导出，其中 package/scrollbar/src 是代码的核心部分，入口文件是 main.js。

结构

使用自定义标签 el-scrollbar 裹住使用的区域，scrollbar 组件会生成
view 和 wrap 两个父级元素包裹插槽中的内容，还有两种类型的自定义滚动条 horizontal 和 vertical。

Element el-scrollbar 源码解析_第4张图片
生成后的结构

main.js

main.js默认导出一个对象，接收一系列配置。

name: 'ElScrollbar',

components: { 
  //  滚动条组件，拥有水平与垂直两种形态
  Bar 
},

props: {
  native: Boolean,    //  是否使用原生滚动条，即不附加自定义滚动条
  wrapStyle: {},      //  wrap的内联样式
  wrapClass: {},      //  wrap的样式名
  viewClass: {},      //  view的样式名
  viewStyle: {},      //  view的内联样式
  noresize: Boolean,  //  当container尺寸发生变化时，自动更新滚动条组件的状态
  tag: {              //  组件最外层的标签属性，默认为 div
    type: String,
    default: 'div'
  }
},

data() {
  return {
    sizeWidth: '0',   //  水平滚动条的宽度
    sizeHeight: '0',  //  垂直滚动条的高度
    moveX: 0,         //  垂直滚动条的移动比例
    moveY: 0          //  水平滚动条的移动比例
  };
},

组件在render函数中生成结构。

tips：如果在.vue文件中同时存在 template 和 render 函数，组件实例会先取 template 模板来渲染组件模板，而不采用 render函数

render函数一开始会通过 scrollbarWidth 方法来计算当前浏览器的滚动条宽度。

render(h) {
    //  获取浏览器的滚动条宽度
    let gutter = scrollbarWidth();
    //  wrap内联样式
    let style = this.wrapStyle;
    
    ...

scrollbarWidth 方法在 scrollbar-width.js 中被默认导出。

import Vue from 'vue';

//  闭包变量，用于记录滚动条宽度
let scrollBarWidth;

export default function() {
  //  如果在服务端运行，返回 0
  if (Vue.prototype.$isServer) return 0;
  //  如存在滚动条宽度，直接返回
  if (scrollBarWidth !== undefined) return scrollBarWidth;

  //  创建outer标签并隐藏
  const outer = document.createElement('div');
  outer.className = 'el-scrollbar__wrap';
  outer.style.visibility = 'hidden';
  outer.style.width = '100px';
  outer.style.position = 'absolute';
  outer.style.top = '-9999px';
  document.body.appendChild(outer);

  //  记录没有滚动内容的宽度
  const widthNoScroll = outer.offsetWidth;
  //  设置外层div滚动属性
  outer.style.overflow = 'scroll';
  //  创建inner标签，并追加到outer标签中
  const inner = document.createElement('div');
  inner.style.width = '100%';
  outer.appendChild(inner);
  //  此时outer已经可以滚动，记录下inner元素的宽度
  const widthWithScroll = inner.offsetWidth;
  //  销毁outer元素
  outer.parentNode.removeChild(outer);
  //  滚动条宽度 = 没有滚动条时的outer宽度 减去 有滚动条的outer中的inner宽度
  scrollBarWidth = widthNoScroll - widthWithScroll;
  //  返回滚动条宽度
  return scrollBarWidth;
};

获取滚动条方法会进行以下步骤

  1. 创建outer容器，并记录outer容器的offsetwidth
  2. 设置outer容器overflow: scroll，并新建inner容器，追加到outer容器下
  3. 此时outer容器会带有滚动条，记录inner容器的offsetwitdh宽度
  4. 计算滚动条宽度，并返回
用于计算滚动条宽度的临时标签结构

outer宽

inner宽

从而得出此时的浏览器滚动条宽度为 100 - 83 = 17 像素

如果存在滚动条宽度，会将wrap设置偏移，达到隐藏原生滚动条的效果。

//  如果存在滚动条宽度
if (gutter) {
  //  设置偏移宽度，隐藏原生滚动条
  const gutterWith = `-${gutter}px`;
  const gutterStyle = `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};`;
  
  //  根据配置类型，生成样式
  /**
   * 如是对象数组属性 Array [{"background": "red"}, {"color": "red"}]
   * 则会被转为对象  {background: "red", color: "red"}
   */
  if (Array.isArray(this.wrapStyle)) {
    style = toObject(this.wrapStyle);
    style.marginRight = style.marginBottom = gutterWith;
  } 
  //  如是字符串，直接拼接
  else if (typeof this.wrapStyle === "string") {
    style += gutterStyle;
  }
  //  否则直接赋值
  else {
    style = gutterStyle;
  }
}
 
 
接着生成view结构，设置配置的样式名和内联样式，插槽中的默认内容会放入view下，同时给view增加ref索引，用于后续的事件绑定。
 
 
//  生成view
const view = h(
  //  view的标签类型
  this.tag,
  //  view的属性
  {
    class: ["el-scrollbar__view", this.viewClass],
    style: this.viewStyle,
    ref: "resize"
  },
  //  接收的插槽内容
  this.$slots.default
);

 
 
接着生成wrap结构，设置配置的样式名和内联样式，同时监听滚动事件
 
 
//  生成wrap，并监听滚动事件
const wrap = (
  

    {[view]}
  

);

 
 
接着根据 native 配置，拼接组件的最终结构。
 
 
//  如果不使用原生滚动条，则添加自定义滚动条
if (!this.native) {
  /**
   * 使用自定义滚动条
   * 

   *  

   * 

   * 
   * 
   */
  nodes = [
    wrap,
    ,
    
  ];
} else {
  /**
   * 否则使用原生滚动条
   * 
   * 
 wrap并无监听滚动事件
   *  

   * 

   */
  nodes = [
    

      {[view]}
    

  ];
}

//  返回最终结构
return h("div", { class: "el-scrollbar" }, nodes);
//  render函数结束

 
 
在组件 mounted 和 beforeDestroy 时，根据配置进行事件监听。
 
 
mounted() {
  //  如使用原生滚动条，返回
  if (this.native) return;
  //  在下一更新循环结束执行更新方法
  this.$nextTick(this.update);
  //  根据配置进行监听内容窗口大小重置事件，执行更新方法
  !this.noresize && addResizeListener(this.$refs.resize, this.update);
},

beforeDestroy() {
  //  如使用原生滚动条，返回
  if (this.native) return;
  //  根据配置移除监听内容窗口大小重置事件的执行更新方法
  !this.noresize && removeResizeListener(this.$refs.resize, this.update);
}

 
 
addResizeListener 方法在 resize-event.js 中被导出，方法接收两个参数。监听的DOM节点和回调事件。
 
 
/**
 * 窗口缩放执行回调
 */
function resizeHandler(entries) {
  //  entry是ResizeObserver构造函数执行时传入的参
  for (let entry of entries) {
    //  取出之前声明的回调函数数组
    const listeners = entry.target.__resizeListeners__ || [];
    //  遍历执行回调
    if (listeners.length) {
      listeners.forEach(fn => {
        fn();
      });
    }
  }
}

/**
 * 添加尺寸改变时事件监听
 * @param {HTMLDivElement} element 元素
 * @param {Function} fn 回调
 */
const addResizeListener = function(element, fn) {
  if (!element.__resizeListeners__) {
    //  设置当前元素的事件回调数组
    element.__resizeListeners__ = [];
    //  实例化Resize观察者对象
    element.__ro__ = new ResizeObserver(resizeHandler);
    //  开始观察指定的目标元素，当元素尺寸改变时，会执行resizeHandler方法
    element.__ro__.observe(element);
    window.ro = element.__ro__;
  }
  //  往回调数组中添加本次监听事件
  element.__resizeListeners__.push(fn);
};

/**
 * 移除尺寸改变时事件监听
 * @param {HTMLDivElement} element 元素
 * @param {Function} fn 回调
 */
const removeResizeListener = function(element, fn) {
  if (!element || !element.__resizeListeners__) return;
  //  数组中移除
  element.__resizeListeners__.splice(
    element.__resizeListeners__.indexOf(fn),
    1
  );
  //  取消目标对象上所有对element的观察
  if (!element.__resizeListeners__.length) {
    element.__ro__.disconnect();
  }
};

 
 
这样，main.js的实例化过程就结束了。接着我们看wrap绑定的滚动回调handleScroll方法，和生命周期钩子中见到的update方法。
 
 
在wrap窗口滚动时，会执行method中的handleScroll方法，更新data中的moveY和moveX属性。
 moveY和moveX会作为配置属性传给Bar滚动条组件，实时更新Bar的 translateY(moveY%) 或 translateX(moveX%)作为滑块的滚动位置。
 
 
handleScroll() {
  const wrap = this.wrap;

  this.moveY = (wrap.scrollTop * 100) / wrap.clientHeight;
  this.moveX = (wrap.scrollLeft * 100) / wrap.clientWidth;
},

 
 
moveY和modeX的计算逻辑，一开始看着有点迷糊。
 但是调转一下计算顺序，就恍然大悟了。
 
 
handleScroll() {
  const wrap = this.wrap;

  this.moveY = (wrap.scrollTop / wrap.clientHeight) * 100;
  this.moveX = (wrap.scrollLeft / wrap.clientWidth) * 100;
},

 
 
这里是在求滚动高度与可见高度的比例。
 上面我们已经知道，固定元素的高度clientHeight除以 固定元素包括溢出的总高度scrollHeight。同等于 滑块的高度 除以 滚动条的高度。
 所以当scrollTop发生改变时，我们能够计算出比例关系来更新滑块的正确位置。
 
 
假设我们的wrap高度为300px，当前的滚动高 scrollTop 为0，滚动块的位置是贴紧顶部的，此时Bar组件的 translateY是 0%。
 注意，图中右边的滚动条和左侧的视图内容，并不真正同高。仅仅是比例尺关系。
 
 
 
 
  
 
   
 
    Element el-scrollbar 源码解析_第5张图片 
   
 
  
 
  

    当scrollTop为0时 
  
 
 
 
 
 
 
当向下滚动时，scrollTop刚好为300px（一个Wrap的高度），侧边的滚动块也应该往下移动刚好一个身位。也就是滚动块的自身的高度。
 
 
 
 
  
 
   
 
    Element el-scrollbar 源码解析_第6张图片 
   
 
  
 
  

    当scrollTop为300px时 
  
 
 
 
 
 
 
当wrap区域往下滚动刚好一整个wrap的高度时，侧边的滚动块也会往下移动一整个滚动块的长度。此时Bar组件的 translateY应该是 100%。
 
 
计算公式成立：scrollTop（300px）/ scrollHeight（300px）* 100 = 100。
 
 
这里乘100是因为Bar组件中 translateY 是以百分比为单位设置属性。
 继续滚动到底部时，此时的scrollTop已经为550px，根据公式计算，550 / 300 * 100 滚动块的位置为 translateY(183.333%)。约要偏移1.8个滚动块自身的长度，Bar才能反映出wrap中container的当前展示位置。
 
 
 
 
  
 
   
 
    Element el-scrollbar 源码解析_第7张图片 
   
 
  
 
  

    当scrollTop为550px时，滚动块已经到了底部 
  
 
 
 
 
 
 update 方法负责更新 
 Bar 的滑块长度，在 
 mounted 生命周期钩子中，会根据 
 noresize 配置对view模板进行选择性监听窗口大小改变事件，当内容窗口大小发生改变时，会执行 
 update 方法。 
 
 
 
update() {
  let heightPercentage, widthPercentage;
  const wrap = this.wrap;
  if (!wrap) return;

  heightPercentage = (wrap.clientHeight * 100) / wrap.scrollHeight;
  widthPercentage = (wrap.clientWidth * 100) / wrap.scrollWidth;

  this.sizeHeight = heightPercentage < 100 ? heightPercentage + "%" : "";
  this.sizeWidth = widthPercentage < 100 ? widthPercentage + "%" : "";
}

 
 
update方法中，会计算出滚动块的百分比高度，然后赋值给sizeHeight或sizeWidth。更新Bar的滚动块宽度或高度。
 heightPercentage是由 可见区域高度 / 总滚动高度，计算出的占比。和滑块在滚动条轨道中的占比是一样的。
 
 
 
 
  
 
   
 
    Element el-scrollbar 源码解析_第8张图片 
   
 
  
 
  

    image 
  
 
 
 
 
 
 
this.sizeHeight = heightPercentage < 100 ? heightPercentage + "%" : "";

 
 
在计算sizeHeight时做了大于100判断，当尺寸改变后的内容大于滚动高度，说明就不需要滚动块了。
 至此，main.js 中的所有逻辑都已经过完了。简单总结一下 main.js 所做的事情。
 
 
     
  
  1. 接收配置参数。
    2.  
  
  2. 根据配置生成wrap与view结构包裹使用的区域，根据配置添加自定义滚动条Bar。
    3.  
  
  3. 对wrap进行滚动事件监听，对view进行窗口内容改变事件监听。
    4.  
  
  4. 在滚动或窗口改变时，更新Bar组件的滑块位置或滑块长度。
    5.  
 
 
 
然后来到Bar.js，在点击滑块和轨道时，如何处理视图窗口的更新。
 
 
Bar.js
 
 
Bar组件接收三个属性vertical，size，move，并在计算属性中添加了当前滚动块类型的属性集合bar，与父组件的wrap索引。
 
 
export default {
    name: 'Bar',

    props: {
        //  是否垂直滚动条
        vertical: Boolean,
        //  size 对应的是 水平滚动条的 width 或 垂直滚动条的height
        size: String,
        //  move 用于 translateX 或 translateY 属性中
        move: Number
    },

    computed: {
        /**
         * 从BAR_MAP中返回一个的新对象，垂直滚动条属性集合 或 水平滚动条属性集合
         */
        bar() {
            return BAR_MAP[this.vertical ? 'vertical' : 'horizontal'];
        },
        //  父组件的wrap，用于鼠标拖动滑块后更新 wrap 的 scrollTop 值
        wrap() {
            return this.$parent.wrap;
        }
    },
    ...
}

 
 
bar会返回当前滚动条类型的滚动条属性集合，并在后续的操作中取对应的值作为更新。
 
 
const BAR_MAP = {
    //  垂直滚动块的属性
    vertical: {
        offset: 'offsetHeight',
        scroll: 'scrollTop',
        scrollSize: 'scrollHeight',
        size: 'height',
        key: 'vertical',
        axis: 'Y',
        client: 'clientY',
        direction: 'top'
    },
    //  水平滚动块的属性
    horizontal: {
        offset: 'offsetWidth',
        scroll: 'scrollLeft',
        scrollSize: 'scrollWidth',
        size: 'width',
        key: 'horizontal',
        axis: 'X',
        client: 'clientX',
        direction: 'left'
    }
};

 
 
在render函数中，会对轨道区域和滑块进行鼠标按下事件进行监听，并对滑块进行内联样式绑定，在 size, move, bar 等属性发生改变时，动态的改变滑块的位置或长度。
 
 
render(h) {
    //  size: 'width' || 'height'
    //  move: 滚动块的位置，单位为百分比
    //  bar: 垂直滚动条属性集合 或 水平滚动条属性集合
    const { size, move, bar } = this;

    return (
        

            

            

        

    );
}

 
 
我们以垂直类型的Bar组件为例，首先看绑定在轨道区域的鼠标点击事件回调 clickTrackHandler 方法。
 在点击轨道区域时，滑块会快速定位到该位置，并且更新视图的scrollTop。这就是 clickTrackHandler 处理的事情。
 
 
//  对按下 滚动条区域 的某一个位置进行快速定位
clickTrackHandler(e) {
    /**
     * getBoundingClientRect() 方法返回元素的大小及其相对于浏览器页面的位置。
     * this.bar.direction = "top"
     * this.bar.client = "clientY"
     * e.clientY 是事件触发时，鼠标指针相对于浏览器窗口顶部的距离。
     */
    //  偏移量            绝对值 （当前元素距离浏览器窗口的 顶部/左侧 距离     减去    当前点击的位置距离浏览器窗口的 顶部/左侧 距离）
    const offset = Math.abs(e.target.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]);
    //  滑动块一半高度
    const thumbHalf = (this.$refs.thumb[this.bar.offset] / 2);
    //  计算点击后，根据 偏移量 计算在 滚动条区域的总高度 中的占比，也就是 滚动块 所处的位置
    const thumbPositionPercentage = ((offset - thumbHalf) * 100 / this.$el[this.bar.offset]);
    //  设置外壳的 scrollHeight 或 scrollWidth 新值。达到滚动内容的效果
    this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100);
},

 
 
方法中比较多的公式计算，一时之间比较难理解。下图是各变量的图示，接着我们一个一个拆解。
 
 
 
 
  
 
   
 
    Element el-scrollbar 源码解析_第9张图片 
   
 
  
 
  

    变量图示 
  
 
 
 
 
 在方法中，第一步会计算滑块的 
 偏移量（offset）。代码中的偏移量计算公式是： 
 
 
 点击元素距离浏览器窗口顶部的距离 减去 
 鼠标点击位置距离浏览器窗口顶部的距离，再求结果的绝对值。 
 
 
 
点击元素 实则就是轨道区域，其实公式可以换成这样看，会更加容易理解。
 
 
鼠标点击位置距离浏览器窗口顶部的距离 减去 滚动条区域距离浏览器窗口顶部的距离
 
 
因为根据scrollBar组件的使用位置不同（有的包裹整个页面窗口，有的包裹一小块菜单区域），滚动条区域也不一定完全贴紧浏览器窗口的顶部。所以这边需要用 鼠标点击位置距离浏览器窗口顶部的距离e[this.bar.client] 将 滚动条区域距离浏览器窗口顶部的距离e.target.getBoundingClientRect()[this.bar.direction] 减去，才能得出准确的 偏移量offset。
 
 
/**
 * getBoundingClientRect() 方法返回元素的大小及其相对于浏览器页面的位置。
 * this.bar.direction = "top"
 * this.bar.client = "clientY"
 * e.clientY 是事件触发时，鼠标指针相对于浏览器窗口顶部的距离。
 */

//  偏移量            绝对值 （当前元素距离浏览器窗口的 垂直/水平 坐标     减去    当前点击的位置距离浏览器窗口的 垂直/水平 坐标）
const offset = Math.abs(e.target.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]);


 
 
 
  
 
   
 
    Element el-scrollbar 源码解析_第10张图片 
   
 
  
 
  

    offset的计算 
  
 
 
 
 
 
 
接下来计算的是滑动块一半的高度，用于后续逻辑处理。
 
 

//  滑动块一半高度
const thumbHalf = (this.$refs.thumb[this.bar.offset] / 2);


 
 
 
 
 
  
 
   
 
    Element el-scrollbar 源码解析_第11张图片 
   
 
  
 
  

    滚动块一半高度计算 
  
 
 
 
 
 根据浏览器滚动条操作行为，一般我们点击轨道某个点时，滑块的中心总会在我们的落点位置。 
 
 在用偏移量 
 offset 减去滚动块的一半高度 
 thumbHalf 后得出 
 滑块总移动的长度。再用 
 滑块总移动的长度 除 
 滚动区域的总高度，得出 
 滚动比例thumbPositionPercentage。 
 
 得出 
 滚动比例 后，因为滚动条和视图是一个缩放的比例尺关系。此时用 
 滚动比例 乘 
 wrap的 scrollHeight 得出滚动距离，再对 
 wrap 的 
 scrollTop 进行赋值，视图便滚动到需要更新展示的内容中。 
 
 
 

//  计算点击后，根据 偏移量 计算在 滚动条区域的总高度 中的占比，也就是 滚动块 所处的位置
const thumbPositionPercentage = ((offset - thumbHalf) * 100 / this.$el[this.bar.offset]);

//  设置外壳的 scrollTop 或 scrollLeft 新值。达到滚动内容的效果
this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100);


 
 
 
  
 
   
 
    Element el-scrollbar 源码解析_第12张图片 
   
 
  
 
  

    计算wrap需要滚动的距离 
  
 
 
 
 
接下来是滑块监听的鼠标按下事件，clickThumbHandler。
 
 
clickThumbHandler 方法会在鼠标按下滑块时，监听鼠标移动事件和鼠标按键释放事件，更新滑块位置的同时，也更新视图窗口的滚动位置。
 
 
//  按下滑动块
clickThumbHandler(e) {
    /**
     * 防止右键单击滑动块
     * e.ctrlKey: 检测事件发生时Ctrl键是否被按住了
     * e.button： 指示当事件被触发时哪个鼠标按键被点击 0，鼠标左键；1，鼠标中键；2，鼠标右键
     */
    if (e.ctrlKey || e.button === 2) {
        return;
    }
    //  开始记录拖拽
    this.startDrag(e);
    //  记录点击滑块时的位置距滚动块底部的距离
    this[this.bar.axis] = (
        //  滑块的高度
        e.currentTarget[this.bar.offset] - 
        //  点击滑块距离顶部的位置 减去 滑块元素距离顶部的位置
        (e[this.bar.client] - e.currentTarget.getBoundingClientRect()[this.bar.direction])
    );
},

 
 
开始先判断是否鼠标右键触发的事件，如真返回。接着执行 startDrag 方法。
 最后会计算点击滑块时的位置距滚动块底部的距离。然后赋值给this[this.bar.axis]，因为当前滚动条类型是垂直滚动条，所以this.bar.axis从计算属性中获取为字符串 Y，this['Y']会用于后续的计算。
 this['Y'] 的计算公式为：滑块的高度 减去 （点击滑块的位置距离页面窗口顶部的距离 clientY 减去 滑块元素距离页面窗口顶部的距离Rect.top）
 
 
 
  
 
   
 
    Element el-scrollbar 源码解析_第13张图片 
   
 
  
 
  

    变量图示 
  
 
 
 
 
this.bar.axis 从计算属性中获取，返回的是字符串，X 或 Y。但在Bar组件的 data 中，并没有对 this['X'] 或 this['Y'] 这两个属性进行声明。
 原因是因为Bar组件有两种类型，垂直或水平。所以作者没有选择一开始就声明，而是通过后续的操作再动态挂上 X 或 Y 属性
 需要注意的是，这样动态添加的属性，并不是一个响应式的属性。即未被vue进行getter/setter重写，在数据发生改变后视图是不会同步更新的。
 但是这里仅仅用于数据层面上的使用，并不在视图上使用。问题不大。
 具体可以查阅文档, 深入响应式原理
 
 
在startDrag方法中，会记录按下状态，并监听鼠标移动和鼠标按钮松开事件。
 
 
//  开始拖拽
startDrag(e) {
    //  停止后续的相同事件函数执行
    e.stopImmediatePropagation();
    //  记录按下状态
    this.cursorDown = true;
    //  监听鼠标移动事件
    on(document, 'mousemove', this.mouseMoveDocumentHandler);
    //  监听鼠标按键松开事件
    on(document, 'mouseup', this.mouseUpDocumentHandler);
    //  拖拽滚动块时，此时禁止鼠标长按划过文本选中。
    document.onselectstart = () => false;
},

 
 
on方法和off方法在 utils/dom 中被导出，在导出时会对环境进行兼容处理，导出对应的事件监听处理函数。
 
 
/* istanbul ignore next */
export const on = (function() {
  //  查询实例是否在服务端运行，与是否支持 addEventListener，返回对应处理监听函数
  if (!isServer && document.addEventListener) {
    return function(element, event, handler) {
      if (element && event && handler) {
        //  适用于现代浏览器的监听事件 addEventListener
        element.addEventListener(event, handler, false);
      }
    };
  } else {
    return function(element, event, handler) {
      if (element && event && handler) {
        //  用于 ie 部分版本浏览器的监听事件 attachEvent
        element.attachEvent('on' + event, handler);
      }
    };
  }
})();

/* istanbul ignore next */
export const off = (function() {
  //  查询实例是否在服务端运行，与是否支持 removeEventListener，返回对应处理监听函数
  if (!isServer && document.removeEventListener) {
    return function(element, event, handler) {
      if (element && event) {
        //  适用于现代浏览器的移除事件监听 removeEventListener
        element.removeEventListener(event, handler, false);
      }
    };
  } else {
    return function(element, event, handler) {
      if (element && event) {
        //  用于 ie 部分版本浏览器的移除事件监听 detachEvent
        element.detachEvent('on' + event, handler);
      }
    };
  }
})();

 
 
在鼠标移动时，会执行mouseMoveDocumentHandler事件。
 方法进入会判断cursorDown和this.['Y']是否存在，如果为假。说明方法并不是正常操作触发，结束返回。
 在鼠标的不断移动中，计算按住滑块移动时的位置距离轨道顶部的实际距离offset，同时用之前记录下来的this['Y']计算出按下滑块时距离滑块顶部的距离thumbClickPosition。
 此时offset减去thumbClickPosition，就是滑块在轨道中实际移动的距离。再用此值除以轨道长度。便是滚动比例thumbPositionPercentage。
 最后用thumbPositionPercentage乘视图窗口的滚动高度，便是视图窗口需要更新滚动的距离。
 
 
//  按下滚动条，并且鼠标移动时
mouseMoveDocumentHandler(e) {
   //  如果按下状态为假，返回
   if (this.cursorDown === false) return;
   //  点击位置时距滚动块底部的距离
   const prevPage = this[this.bar.axis];
   
   if (!prevPage) return;

   //              （滑块距离页面顶部的距离                            减  鼠标移动时距离顶部的距离） * -1
   const offset = ((this.$el.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]) * -1);
   
   //  按下滑块位置距离滑块顶部的距离
   const thumbClickPosition = (this.$refs.thumb[this.bar.offset] - prevPage);
   //  滑动距离在滚动轨道长度的占比
   const thumbPositionPercentage = ((offset - thumbClickPosition) * 100 / this.$el[this.bar.offset]);
   //  根据比例，更新视图窗口的滚动距离
   this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100);
},


 
 
 
  
 
   
 
    Element el-scrollbar 源码解析_第14张图片 
   
 
  
 
  

    mouseMoveDocumentHandler中的变量图示 
  
 
 
 
 
 
 
在鼠标松开时，重置各记录的状态，并取消监听的鼠标移动事件。
 
 
//  按下滚动条，并且鼠标松开
mouseUpDocumentHandler(e) {
    //  重置按下状态
    this.cursorDown = false;
    //  重置当前点击在滚动块的位置
    this[this.bar.axis] = 0;
    //  移除监听鼠标移动事件
    off(document, 'mousemove', this.mouseMoveDocumentHandler);
    //  拖拽结束，此时允许鼠标长按划过文本选中。
    document.onselectstart = null;
}

 
 
源码到这里已经全部解读结束，因个人水平有限，难免会有不准确或者存在歧义的地方，希望能够不吝赐教，共同交流进步。
 祝你有个愉快的劳动节假期。:)
 
 
Have a nice day.
 
 
参考资料
 
 
     
  
  1. ResizeObserver
    2.  
  
  2. 深入响应式原理
    3.  
 
 

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    
                

            
        
    
    

        
你可能感兴趣的:(Element el-scrollbar 源码解析)

        

            

                
    
                    
  • element实现动态路由+面包屑
                        软件技术NINI
vue案例vue.js前端
                        
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
    
                    
    • 
                    
  • ArrayList 源码解析
                        程序猿进阶
Java基础ArrayListListjava面试性能优化架构设计idea
                        
    ArrayList是Java集合框架中的一个动态数组实现，提供了可变大小的数组功能。它继承自AbstractList并实现了List接口，是顺序容器，即元素存放的数据与放进去的顺序相同，允许放入null元素，底层通过数组实现。除该类未实现同步外，其余跟Vector大致相同。每个ArrayList都有一个容量capacity，表示底层数组的实际大小，容器内存储元素的个数不能多于当前容量。当向容器中添
    
                    
    • 
                    
  • vue项目element-ui的table表格单元格合并
                        酋长哈哈
vue.jselementuijavascript前端
                        
    一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
    
                    
    • 
                    
  • 遥感影像的切片处理
                        sand&wich
计算机视觉python图像处理
                        
    在遥感影像分析中，经常需要将大尺寸的影像切分成小片段，以便于进行详细的分析和处理。这种方法特别适用于机器学习和图像处理任务，如对象检测、图像分类等。以下是如何使用Python和OpenCV库来实现这一过程，同时确保每个影像片段保留正确的地理信息。准备环境首先，确保安装了必要的Python库，包括numpy、opencv-python和xml.etree.ElementTree。这些库将用于图像处理
    
                    
    • 
                    
  • Vue( ElementUI入门、vue-cli安装)
                        m0_l5z
elementuivue.js
                        
    一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
    
                    
    • 
                    
  • vue + Element UI table动态合并单元格
                        我家媳妇儿萌哒哒
elementUIvue.js前端javascript
                        
    一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre
    
                    
    • 
                    
  • 使用由 Python 编写的 lxml 实现高性能 XML 解析
                        hunyxv
python笔记pythonxml
                        
    转载自：文章lxml简介Python从来不出现XML库短缺的情况。从2.0版本开始，它就附带了xml.dom.minidom和相关的pulldom以及SimpleAPIforXML(SAX)模块。从2.4开始，它附带了流行的ElementTreeAPI。此外，很多第三方库可以提供更高级别的或更具有python风格的接口。尽管任何XML库都足够处理简单的DocumentObjectModel(DOM
    
                    
    • 
                    
  • vue render 函数详解 (配参数详解)
                        你的眼睛會笑
vue2vue.jsjavascript前端
                        
    vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素
    
                    
    • 
                    
  • 前端代码上传文件
                        余生逆风飞翔
前端javascript开发语言
                        
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
    
                    
    • 
                    
  • Istio pilot-discovery服务发现源码解析（1.13版本）
                        xidianjiapei001
#Istioistio云原生服务发现
                        
    Istiopilot-discovery服务发现介绍工作机制初始化初始化Config控制器初始化Service控制器controller初始化NamespaceServiceNodePodPilotDiscovery各组件启动流程DiscoveryServer接收Envoy的gRPC连接请求流程Config变化后向Envoy推送更新的流程总结参考介绍IstioPilot的代码分为Pilot-Dis
    
                    
    • 
                    
  • Vue + Express实现一个表单提交
                        九旬大爷的梦

                        
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
    
                    
    • 
                    
  • vant-element-ts一起使用存在的问题
                        flynn_
问题总结vue
                        
    由于vant-ui与element-ui部分组件存在冲突，导致在vue-typescript中出现错误:Subsequentpropertydeclarationsmusthavethesametype.Property'$notify'mustbeoftype'ElNotification',butherehastype'Notify'.方案：一个全局导入，一个按需导入,避免冲突的组件同时使用，
    
                    
    • 
                    
  • 基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台
                        网顺技术团队
成品程序项目javavue.js汽车课程设计springboot
                        
    基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台作者主页网顺技术团队欢迎点赞收藏⭐留言文末获取源码联系方式查看下方微信号获取联系方式承接各种定制系统精彩系列推荐精彩专栏推荐订阅不然下次找不到哟Java毕设项目精品实战案例《1000套》感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人文章目录基
    
                    
    • 
                    
  • 【前端】vue 报错:The template root requires exactly one element
                        程序员-张师傅
前端前端vue.jsjavascript
                        
    【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
    
                    
    • 
                    
  • Java集合类框架源码分析 之 RoleList源码解析 【6】
                        yunzhonghefei
Java集合类源码分析RoleList源码解析
                        
    该类继承于ArrayList，针对Role进行了一些扩展。其他方法和ArrayList中基本相同，源码不做针对性分析：看一下类简介：/***代表了一个roles的列表，作为方法setRoles()的参数，去创建一个关联关系，并且尝试在同一个关系中设置多个角色。*ARoleListrepresentsalistofroles(Roleobjects).Itisusedas*parameterwhen
    
                    
    • 
                    
  • SpringBoot 设置传入参数非必要
                        loveLifeLoveCoding
springbootspringbootjavaspring
                        
    查看RequestParam源码packageorg.springframework.web.bind.annotation;importjava.lang.annotation.Documented;importjava.lang.annotation.ElementType;importjava.lang.annotation.Retention;importjava.lang.annotat
    
                    
    • 
                    
  • VITS 源码解析2-模型概述
                        迪三
#NN_Audio音频人工智能
                        
    VITs是文本到语音(Text-to-Speech,TTS)任务中最流行的技术之一，其实现思路是将文本语音信息融合到了HiFiGAN潜空间内,通过文本控制HiFiGAN的生成器，输出含文本语义的声音。VITs主要以GAN的方式训练,其生成器G是SynthesizerTrn，判别器D是MPD。VITS的判别器几乎和HiFiGAN一样，生成器则融合了文本、时序、声音三大类模型1.文件概述模型部分包含三
    
                    
    • 
                    
  • 锋哥写一套前后端分离Python权限系统 基于Django5+DRF+Vue3.2+Element Plus+Jwt 视频教程 ，帅呆了~~
                        java1234_小锋
Python权限系统django权限系统pythonweb权限系统djangoDRFVUE权限python
                        
    大家好，我是java1234_小锋老师，最近写了一套【前后端分离Python权限系统基于Django5+DRF+Vue3.2+ElementPlus+Jwt】视频教程，持续更新中，计划月底更新完，感谢支持。视频在线地址：打造前后端分离Python权限系统基于Django5+DRF+Vue3.2+ElementPlus+Jwt视频教程（火爆连载更新中..）_哔哩哔哩_bilibili项目介绍本课程采
    
                    
    • 
                    
  • 前端HTML+CSS+JS的入门学习
                        俊昭喜喜里
前端htmlcss
                        
    一.HTMLHTML（HyperTextMarkupLanguage）即超文本标记语言，是用于创建网页和网页应用程序的标准标记语言。它不是一种编程语言，而是一种标记语言，通过一系列的元素（elements）来告诉浏览器如何显示网页上的内容，如文本、图片、链接、表格、列表等。HTML文档由一系列的标签（tags）组成，这些标签告诉浏览器如何显示内容。标签通常成对出现，例如和，其中是开始标签，表示一个
    
                    
    • 
                    
  • 2020-07-08在js文件中使用elementUi报错TypeError: _this10.$message is not a function
                        Kason晨

                        
    问题：全局挂在elementUi后，在js文件内调用，报错_this10.$messageisnotafunction原因：在js文件里找不到this.$message这个属性。#错误的写法：this.$message({message:"解除成功",type:"success"});解决方法（正确写法）：单独引入，和换一种方法使用：//引入import{Message}from"element-
    
                    
    • 
                    
  • document获取元素的方法
                        小成语
js平时js
                        
    js学习总结----DOM获取元素的方法（8个）DOM:documentobjectmodel文档对象模型DOM就是描述整个html页面中节点关系的图谱，可以如下图理解在DOM中，提供了很多的获取元素的方法和之间关系的属性以及操作这些元素的方法。1、获取页面中元素的方法1）、document.getElementById('元素的ID')在整个文档中，通过元素的ID获取到这个元素对象(获取的是一个
    
                    
    • 
                    
  • js原生给生成的html添加点击事件,原生js为动态元素添加监听事件
                        习翔宇

                        
    //已存在div//创建标签functioncreatepage(){varspan=document.createElement('span')span.innerHTML=“测试span”//设置属性span.setAttribute("class","gopage");varpagenum=document.getElementById("pagenum")pagenum.appendChi
    
                    
    • 
                    
  • 解决前端导出excel文件，打开为乱码
                        荔枝，你让我拿什么荔枝！
vue前端elementuivue.js
                        
    前端开发中，导入和导出文件是比较常见的业务场景，常见的情况是：后端返回一个二进制的流文件，前端将其转化为excel文件即可。但是往往会出现转化后的excel文件内容位乱码的情况，本文中提供了两个解决方案：方案一：用户自定义上传方法添加附件添加附件代码解读：上述代码采用了element-ui的el-upload文件上传的组件。改组件有两种文件上传的方式：1.组件自带的上传方法，只需要给其设置acti
    
                    
    • 
                    
  • WPF中的控件转换（Transform）
                        A_nanda
WPF赏析wpf
                        
    不可不知的WPF转换（Transform）在WPF开发中，经常会需要用到UI控件的2D转换（如：旋转，缩放，移动，倾斜等功能），本文以一些简单的小例子，简述如何通过Transform类实现FrameworkElement对象的2D转换，仅供学习分享使用，如有不足之处，还请指正。什么是Transform?转换（Transform）定义如何将控件从一个坐标空间映射或转换到另一个坐标空间。2D转换可以通
    
                    
    • 
                    
  • vue 两个弹窗时出现，打开第二个弹窗 是灰色的，再点击才是正常
                        光影3415
vue.jsjavascript前端
                        
    如果你使用的是ElementUI，el-dialog组件有一个append-to-body属性，这个属性可以将弹窗的DOM直接挂载到body标签上，这样可以避免一些层级嵌套问题：
    
                    
    • 
                    
  • 基于Google authentic实现的双因子登录认证系统前后台基于SSMP+Vue+Element（解决SecureRandom造成的服务器请求缓慢）
                        Tate_Brown
gitJAVAIDEADEBUGVUE
                        
    用md5两次加盐密码，可以灵活更换算法--直接上代码地址：JAVA后台：https://github.com/TateBrownJava/TwoFALogindemoBackendVue前端：https://github.com/TateBrownJava/TwoFALoginDemofrontend-------------------------------------------------
    
                    
    • 
                    
  • 【拖拽】自定义拖拽图标
                        风露_

                        
    一、知识点设置被拖拽的元素draggable为true(HTML5新特性)关键方法：voiddataTransfer.setDragImage(img,xOffset,yOffset);注意点：Note:Ifthe[Element]isanexisting[HTMLElement],itneedstobevisibleintheviewportinordertobeshownasadragfeed
    
                    
    • 
                    
  • Mac 技术篇-应用程序被锁定无法进行卸载问题解决方法，文件、文件夹被锁定无法移入废纸篓处理方法
                        lq9527_
Mac使用macos
                        
    在卸载Karabiner-Elements和Karabiner-EventViewer软件时，提示应用锁定，无法卸载。参照方法。在进行/bin/ls-dleO@App路径操作后，返回提示信息与链接方法略有区别。/bin/ls-dleO@App路径drwxr-xr-x@3root wheel uchg96 3 1 2022/Applications/Karabiner-Elements.appcom
    
                    
    • 
                    
  • 黄狄樊实训项目1.2.3
                        明年的牛肉干

                        
    .安装nodejs2.安装git3.下载vue-element-admin建议本项目的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。集成方案:vue-element-admin基础模板:vue-admin-template桌面终端:electron-vue-admin
    
                    
    • 
                    
  • vue3 - element-plus表格组件el-table实现鼠标拖曳排序功能，vue3 Table表格拖拽排序，表格每行使用鼠标拖动进行排序功能，表格拖拽排序实现（详细示例代码，一键复制开箱即用
                        街尾杂货店&
前端组件与功能(开箱即用)elementPlusvue3el-tableTable表格拖动时动态排序表格组件鼠标拖拽排序示例代码树型tree复杂表格拖曳排序element表格行可拖动排序
                        
    效果图在vue3+elementPlus网站开发中，详细完成el-table表格的鼠标拖拽/拖曳/拖动排序，vue3使用elementplus表格组件进行表格每行的拖动换位置排序功能（支持一键开启和关闭鼠标是否可拖动排序，代码易改造灵活），稍加改造可支持【树形复杂表格的排序】！详细示例源代码，复制运行稍微改下就能用了。准备开始首先，
    
                    
    • 
                                
  • java类加载顺序
                                    3213213333332132
java
                                    
    package com.demo;

/**
 * @Description 类加载顺序
 * @author FuJianyong
 * 2015-2-6上午11:21:37
 */
public class ClassLoaderSequence {
	
	String s1 = "成员属性"; 
	
	static String s2 = "
    
                                
    • 
                                
  • Hibernate与mybitas的比较
                                    BlueSkator
sqlHibernate框架ibatisorm
                                    
    第一章     Hibernate与MyBatis 
Hibernate 是当前最流行的O/R mapping框架，它出身于sf.net，现在已经成为Jboss的一部分。 Mybatis 是另外一种优秀的O/R mapping框架。目前属于apache的一个子项目。 
MyBatis 参考资料官网：http:
    
                                
    • 
                                
  • php多维数组排序以及实际工作中的应用
                                    dcj3sjt126com
PHPusortuasort
                                    
    自定义排序函数返回false或负数意味着第一个参数应该排在第二个参数的前面, 正数或true反之, 0相等usort不保存键名uasort 键名会保存下来uksort 排序是对键名进行的 
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8&q
    
                                
    • 
                                
  • DOM改变字体大小
                                    周华华
前端
                                    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml&q
    
                                
    • 
                                
  • c3p0的配置
                                    g21121
c3p0
                                    
    c3p0是一个开源的JDBC连接池，它实现了数据源和JNDI绑定，支持JDBC3规范和JDBC2的标准扩展。c3p0的下载地址是：http://sourceforge.net/projects/c3p0/这里可以下载到c3p0最新版本。 
以在spring中配置dataSource为例： 
<!-- spring加载资源文件 -->
<bean name="prope
    
                                
    • 
                                
  • Java获取工程路径的几种方法
                                    510888780
java
                                    
    第一种： 
File f = new File(this.getClass().getResource("/").getPath()); 
System.out.println(f); 
结果: 
C:\Documents%20and%20Settings\Administrator\workspace\projectName\bin 
获取当前类的所在工程路径; 
如果不加“
    
                                
    • 
                                
  • 在类Unix系统下实现SSH免密码登录服务器
                                    Harry642
免密ssh
                                    
    1.客户机 
    (1)执行ssh-keygen -t rsa -C "[email protected]"生成公钥，xxx为自定义大email地址 
    (2)执行scp ~/.ssh/id_rsa.pub root@xxxxxxxxx:/tmp将公钥拷贝到服务器上，xxx为服务器地址 
    (3)执行cat
    
                                
    • 
                                
  • Java新手入门的30个基本概念一
                                    aijuans
javajava 入门新手
                                    
    在我们学习Java的过程中,掌握其中的基本概念对我们的学习无论是J2SE,J2EE,J2ME都是很重要的,J2SE是Java的基础,所以有必要对其中的基本概念做以归纳,以便大家在以后的学习过程中更好的理解java的精髓,在此我总结了30条基本的概念。　　Java概述:　　目前Java主要应用于中间件的开发(middleware)---处理客户机于服务器之间的通信技术,早期的实践证明,Java不适合
    
                                
    • 
                                
  • Memcached for windows 简单介绍
                                    antlove
javaWebwindowscachememcached
                                    
    1. 安装memcached server 
a. 下载memcached-1.2.6-win32-bin.zip 
b. 解压缩，dos 窗口切换到 memcached.exe所在目录，运行memcached.exe -d install 
c.启动memcached Server,直接在dos窗口键入 net start "memcached Server&quo
    
                                
    • 
                                
  • 数据库对象的视图和索引
                                    百合不是茶
索引oeacle数据库视图
                                    
      
视图 
  
  视图是从一个表或视图导出的表，也可以是从多个表或视图导出的表。视图是一个虚表，数据库不对视图所对应的数据进行实际存储，只存储视图的定义，对视图的数据进行操作时,只能将字段定义为视图,不能将具体的数据定义为视图 
  
    为什么oracle需要视图; 
   &
    
                                
    • 
                                
  • Mockito(一) --入门篇
                                    bijian1013
持续集成mockito单元测试
                                    
            Mockito是一个针对Java的mocking框架，它与EasyMock和jMock很相似，但是通过在执行后校验什么已经被调用，它消除了对期望 行为（expectations）的需要。其它的mocking库需要你在执行前记录期望行为（expectations），而这导致了丑陋的初始化代码。 
 &nb
    
                                
    • 
                                
  • 精通Oracle10编程SQL(5)SQL函数
                                    bijian1013
oracle数据库plsql
                                    
    /*
 * SQL函数
*/

--数字函数
--ABS(n):返回数字n的绝对值
declare
  v_abs number(6,2);
begin
  v_abs:=abs(&no);
  dbms_output.put_line('绝对值：'||v_abs);
end;

--ACOS(n):返回数字n的反余弦值，输入值的范围是-1~1，输出值的单位为弧度
    
                                
    • 
                                
  • 【Log4j一】Log4j总体介绍
                                    bit1129
log4j
                                    
    Log4j组件：Logger、Appender、Layout 
  
Log4j核心包含三个组件：logger、appender和layout。这三个组件协作提供日志功能： 
 
 日志的输出目标 
 日志的输出格式 
  日志的输出级别(是否抑制日志的输出) 
  logger继承特性 
A logger is said to be an ancestor of anothe
    
                                
    • 
                                
  • Java IO笔记
                                    白糖_
java
                                    
    	public static void main(String[] args) throws IOException {
		//输入流
		InputStream in = Test.class.getResourceAsStream("/test");
		InputStreamReader isr = new InputStreamReader(in);
		Bu
    
                                
    • 
                                
  • Docker 监控
                                    ronin47
docker监控
                                    
             
目前项目内部署了docker，于是涉及到关于监控的事情，参考一些经典实例以及一些自己的想法，总结一下思路。 1、关于监控的内容 监控宿主机本身 
监控宿主机本身还是比较简单的，同其他服务器监控类似，对cpu、network、io、disk等做通用的检查，这里不再细说。 
额外的，因为是docker的
    
                                
    • 
                                
  • java-顺时针打印图形
                                    bylijinnan
java
                                    
    一个画图程序 要求打印出： 
 

1.int i=5;   
2.1  2  3  4  5  
3.16 17 18 19 6  
4.15 24 25 20 7  
5.14 23 22 21 8  
6.13 12 11 10 9  
7.  
8.int i=6  
9.1  2  3  4  5   6  
10.20 21 22 23 24  7  
11.19
    
                                
    • 
                                
  • 关于iReport汉化版强制使用英文的配置方法
                                    Kai_Ge
iReport汉化英文版
                                    
    对于那些具有强迫症的工程师来说，软件汉化固然好用，但是汉化不完整却极为头疼，本方法针对iReport汉化不完整的情况，强制使用英文版，方法如下： 
在 iReport 安装路径下的 etc/ireport.conf 里增加红色部分启动参数，即可变为英文版。   
# ${HOME} will be replaced by user home directory accordin
    
                                
    • 
                                
  • [并行计算]论宇宙的可计算性
                                    comsci
并行计算
                                    
     
 
      现在我们知道,一个涡旋系统具有并行计算能力.按照自然运动理论,这个系统也同时具有存储能力,同时具备计算和存储能力的系统,在某种条件下一般都会产生意识...... 
 
      那么,这种概念让我们推论出一个结论 
 
 
    &nb
    
                                
    • 
                                
  • 用OpenGL实现无限循环的coverflow
                                    dai_lm
androidcoverflow
                                    
    网上找了很久，都是用Gallery实现的，效果不是很满意，结果发现这个用OpenGL实现的，稍微修改了一下源码，实现了无限循环功能 
 
源码地址： 
https://github.com/jackfengji/glcoverflow 
 
 

public class CoverFlowOpenGL extends GLSurfaceView implements
		GLSurfaceV
    
                                
    • 
                                
  • JAVA数据计算的几个解决方案1
                                    datamachine
javaHibernate计算
                                    
    老大丢过来的软件跑了10天，摸到点门道，正好跟以前攒的私房有关联，整理存档。 
 
-----------------------------华丽的分割线------------------------------------- 
 
    数据计算层是指介于数据存储和应用程序之间，负责计算数据存储层的数据，并将计算结果返回应用程序的层次。J 
 &nbs
    
                                
    • 
                                
  • 简单的用户授权系统,利用给user表添加一个字段标识管理员的方式
                                    dcj3sjt126com
yii
                                    
    怎么创建一个简单的(非 RBAC)用户授权系统 
通过查看论坛，我发现这是一个常见的问题，所以我决定写这篇文章。 
本文只包括授权系统.假设你已经知道怎么创建身份验证系统(登录)。 数据库 
首先在 user 表创建一个新的字段(integer 类型),字段名 'accessLevel',它定义了用户的访问权限 扩展 CWebUser 类 
在配置文件(一般为 protecte
    
                                
    • 
                                
  • 未选之路
                                    dcj3sjt126com
诗
                                    
    作者:罗伯特*费罗斯特 
  
黄色的树林里分出两条路, 
可惜我不能同时去涉足, 
我在那路口久久伫立, 
我向着一条路极目望去, 
直到它消失在丛林深处. 
  
但我却选了另外一条路, 
它荒草萋萋,十分幽寂; 
显得更诱人,更美丽, 
虽然在这两条小路上, 
都很少留下旅人的足迹. 
  
那天清晨落叶满地, 
两条路都未见脚印痕迹. 
呵,留下一条路等改日再
    
                                
    • 
                                
  • Java处理15位身份证变18位
                                    蕃薯耀
18位身份证变15位15位身份证变18位身份证转换
                                    
      
15位身份证变18位，18位身份证变15位 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 
蕃薯耀 201
    
                                
    • 
                                
  • SpringMVC4零配置--应用上下文配置【AppConfig】
                                    hanqunfeng
springmvc4
                                    
    从spring3.0开始，Spring将JavaConfig整合到核心模块，普通的POJO只需要标注@Configuration注解，就可以成为spring配置类，并通过在方法上标注@Bean注解的方式注入bean。 
  
Xml配置和Java类配置对比如下： 
applicationContext-AppConfig.xml 
  
<!-- 激活自动代理功能 参看：
    
                                
    • 
                                
  • Android中webview跟JAVASCRIPT中的交互
                                    jackyrong
JavaScripthtmlandroid脚本
                                    
      在android的应用程序中,可以直接调用webview中的javascript代码,而webview中的javascript代码,也可以去调用ANDROID应用程序(也就是JAVA部分的代码).下面举例说明之: 
 
1 JAVASCRIPT脚本调用android程序 
   要在webview中,调用addJavascriptInterface(OBJ,int
    
                                
    • 
                                
  • 8个最佳Web开发资源推荐
                                    lampcy
编程Web程序员
                                    
    Web开发对程序员来说是一项较为复杂的工作，程序员需要快速地满足用户需求。如今很多的在线资源可以给程序员提供帮助，比如指导手册、在线课程和一些参考资料，而且这些资源基本都是免费和适合初学者的。无论你是需要选择一门新的编程语言，或是了解最新的标准，还是需要从其他地方找到一些灵感，我们这里为你整理了一些很好的Web开发资源，帮助你更成功地进行Web开发。 
这里列出10个最佳Web开发资源，它们都是受
    
                                
    • 
                                
  • 架构师之面试------jdk的hashMap实现
                                    nannan408
HashMap
                                    
    1.前言。 
  如题。 
2.详述。 
  (1)hashMap算法就是数组链表。数组存放的元素是键值对。jdk通过移位算法（其实也就是简单的加乘算法），如下代码来生成数组下标(生成后indexFor一下就成下标了）。 
 

static int hash(int h) 
{ 
    h ^= (h >>> 20) ^ (h >>>
    
                                
    • 
                                
  • html禁止清除input文本输入缓存
                                    Rainbow702
html缓存input输入框change
                                    
    多数浏览器默认会缓存input的值，只有使用ctl+F5强制刷新的才可以清除缓存记录。    
如果不想让浏览器缓存input的值，有2种方法： 
方法一： 在不想使用缓存的input中添加 autocomplete="off";  
<input type="text" autocomplete="off" n
    
                                
    • 
                                
  • POJO和JavaBean的区别和联系
                                    tjmljw
POJOjava beans
                                    
    POJO 和JavaBean是我们常见的两个关键字，一般容易混淆，POJO全称是Plain Ordinary Java Object / Pure Old Java Object，中文可以翻译成：普通Java类，具有一部分getter/setter方法的那种类就可以称作POJO，但是JavaBean则比 POJO复杂很多， Java Bean 是可复用的组件，对 Java Bean 并没有严格的规
    
                                
    • 
                                
  • java中单例的五种写法
                                    liuxiaoling
java单例
                                    
    /**
 * 单例模式的五种写法：
 * 1、懒汉
 * 2、恶汉
 * 3、静态内部类
 * 4、枚举
 * 5、双重校验锁
 */
/**
 * 五、 双重校验锁，在当前的内存模型中无效
 */
class LockSingleton
{

    private volatile static LockSingleton singleton;

    pri
    
                                
    •