jQuery-ui源代码重点难点分析

本文以jquery-ui sortable排序功能插件为例分析jquery-ui源代码重点难点。

jquery-ui-sortable插件非常复杂深奥,本来是针对鼠标操作设计的,在手机运行无效,因为手机没有mouse事件,更没有drag事件。

但增加一个jquery-ui-touch-punch.js文件之后在手机运行也有效,touch有效,原理在于sortable源代码不是针对鼠标drag and drop设计的,而是针对mouse事件中的位置数据设计的,底层有复杂的算法,touch事件数据也包含位置数据,因此sortable能兼容touch,很强大。

sortable插件的调用方式是$().sortable(opts),那么sortable()函数就是入口初始化函数,我们从这个入口初始化函数源代码开始分析。

$.widget.bridge = function( name, object ) {
  var fullName = object.prototype.widgetFullName || name;
  $.fn[ name ] = function( options ) { // 此即为sortable()函数代码

    this.each(function() { // this是$()元素集合,一般只有一个节点,$().each()就是循环一次,元素就是container元素。
      var instance = $.data( this, fullName ); // this是元素集合里面每一个元素对象,这是从元素对象取比如ui-sortable属性值是一个实例
      if ( instance ) {
        instance.option( options || {} );
        if ( instance._init ) {
          instance._init();
        }
      } else {
        $.data( this, fullName, new object( options, this ) ); // 如果没有就建一个实例保存到元素属性中

          constructor = $[ namespace ][ name ] = function( options, element ) { // object代码
            // allow instantiation without "new" keyword
            if ( !this._createWidget ) {
              return new constructor( options, element );
            }

            // allow instantiation without initializing for simple inheritance
            // must use "new" keyword (the code above always passes args)
            if ( arguments.length ) {
              this._createWidget( options, element );                  

                $.Widget.prototype = {
                  _createWidget: function( options, element ) {

                    this._create(); // 调sortable插件的内置方法初始化sortable插件,由于加了一层封装,用apply方式调用

                       

                        var sortable = $.widget("ui.sortable", $.ui.mouse, { // sortable插件的定义
                          _create: function() {

                            this.refresh();//根据已经存在的网页中的列表创建一套items[]
                            this._mouseInit(); //调用mouse插件的通用初始化方法,这是juqery-ui-touch修改之后的init代码

                              $.ui.mouse.prototype._mouseInit=function(){
                                var _this=this; 

                                _this.element.bind("touchstart",$.proxy(_this,"_touchStart"))

                                  .bind("touchmove",$.proxy(_this,"_touchMove"))

                                  .bind("touchend",$.proxy(_this,"_touchEnd"));
                                  oldMouseInit.call(_this);

                              };

                          };                     

                      this._trigger( "create", null, this._getCreateEventData() );
                      this._init(); // 空函数
                    }

sortable入口函数就是创建一个实例保存在container元素属性中,先调用通用插件widget代码创建实例,再调用sortable插件的初始化方法,sortable插件初始化方法
创建items[]保存在sortable实例中,执行mouse初始化代码,如果执行了jquery-ui-touch-punch.js,mouse初始化代码被jquery-ui-touch修改了,就是绑定touch事件,touch事件会转换为mouse事件。

因此执行$().sortable()之后,创建了sortable实例,进行了初始化,绑定了touch事件,当touch操作时,执行mouse事件绑定的handler实现拖拽功能。

下面来看sortable插件的重点函数代码:

var sortable = $.widget("ui.sortable", $.ui.mouse, { // sortable的内置方法都加了一层封装,用value.apply方式调用
  _mouseDrag: function(event) { //拖拽时会连续执行多次,拖拽时处理网页样式变化,把placeholder插入到目标元素之前,sortable不修改items[]原数据  

    //Compute the helpers position
    //当拖动一个元素时,其class增加helper成为helper,成为浮动元素,元素跟着拖动浮动,离开了列表,helper的意思就是预览让人能看见元素被拖动走了。

    //placeholder是新建一个元素代替它占据在列表中的位置,就是被拖动元素在列表中的替身,当拖动元素时,placeholder元素就插入相应的位置,这样就能预览插入的效果

    

    this.position = this._generatePosition(event); // 计算helper的位置,来自touch event x/y位置数据,拖动时位置不断变化,helper跟着拖动走
      _generatePosition: function(event) {
        event中有touch位置x/y,计算时涉及到父容器scroll,要把父容器scroll去掉简化处理,调插件传参scroll:false忽略scroll处理。
        return {
          top: (
            pageY - // The absolute mouse position
            this.offset.click.top - // Click offset (relative to the element)
            this.offset.relative.top - // Only for relative positioned nodes: Relative offset from element to offset parent
            this.offset.parent.top + // The offsetParent's offset without borders (offset + border)
            ( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) ))
          ),
          left: (
            pageX - // The absolute mouse position
            this.offset.click.left - // Click offset (relative to the element)
            this.offset.relative.left - // Only for relative positioned nodes: Relative offset from element to offset parent
            this.offset.parent.left + // The offsetParent's offset without borders (offset + border)
            ( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() ))
          )
        };
      }

    

    //Rearrange,产生placeholder元素插入到touch位置
    for (i = this.items.length - 1; i >= 0; i--) { //

      intersection = this._intersectsWithPointer(item); // intersect是touch与元素重叠的意思

          

        _intersectsWithPointer: function(item) {
          var isOverElementHeight = (this.options.axis === "x") || this._isOverAxis(this.positionAbs.top + this.offset.click.top, item.top, item.height),
            isOverElementWidth = (this.options.axis === "y") || this._isOverAxis(this.positionAbs.left + this.offset.click.left, item.left, item.width),

            _isOverAxis: function( x, reference, size ) { // x-touch位置 reference-元素位置
              return ( x >= reference ) && ( x < ( reference + size ) ); // 判断touch位置是否在元素中,在水平方向和垂直方向分别判断
            }

            isOverElement = isOverElementHeight && isOverElementWidth,
              verticalDirection = this._getDragVerticalDirection(),
              horizontalDirection = this._getDragHorizontalDirection();

            return this.floating ?
              ( ((horizontalDirection && horizontalDirection === "right") || verticalDirection === "down") ? 2 : 1 )
                : ( verticalDirection && (verticalDirection === "down" ? 2 : 1) );

     

      if (!intersection) {
        continue;
      }
      //如果item与touch重叠,要修改列表,把placeholder插入到item元素之前
      this._rearrange(event, item); 

          _rearrange: function(event, i, a, hardRefresh) {  // i是touch目标item元素            

              i.item[0].parentNode.insertBefore(this.placeholder[0], (this.direction === "down" ? i.item[0] : i.item[0].nextSibling));
              //向上向左拖时direction=down,向下向右拖时direction=up,placeholder插入位置有可能是item之前,也有可能是item下一个元素之前

      this._trigger("change", event, this._uiHash());

    }

    

    //Call callbacks
    this._trigger("sort", event, this._uiHash()); //如果有绑定"sort"逻辑事件,则执行handler,实际上没有

  }

  

  _mouseStop: function(event, noPropagation) { // 单步看开始执行之前start/end元素已经交换了位置,是由drag过程处理的,stop只是善后处理
    $.ui.ddmanager.drop(this, event); // debug看没有处理内容
    that._clear(event);

      _clear: function(event, noPropagation) {

        this.placeholder.before(this.currentItem); // sortbale实例里面的placeholder对象的before方法

            before: function() {
              return domManip( this, arguments, function( elem ) {
                  if ( this.parentNode ) {
                    this.parentNode.insertBefore( elem, this ); // elm是helper(drag)元素,this是placeholder,把拖动的元素插入到placeholder位置,这也是整个sortable操作的最终目的,helper元素已经在网页中,insert只是移动位置,插入之后还要修改css样式(修改class即可)。
                  }
              } );
            }

                

                function domManip( collection, args, callback, ignored ) { // dommanip非常复杂
                  callback.call( collection[ i ], node, i );
                  return collection;
                }

          

        this._trigger("update", event, this._uiHash());
        this._trigger("beforeStop", event, this._uiHash());
        this.placeholder[0].parentNode.removeChild(this.placeholder[0]); // 删除placeholder
        this._trigger("stop", event, this._uiHash());

sortable处理网页在拖动时插入placeholder最后再把拖动的元素插入到placeholder位置。

sortable是根据鼠标的位置数据进行计算判断目标位置元素,所以也适用于touch触发,因为touch事件数据中含位置数据,只要把touch事件转换成mouse事件即可,
如果sortable是按drag target元素设计的,就没法适用于touch,因为touchend没有target元素,没法获取到target元素。

sortable插件代码非常复杂,很难控制,本人参考它的处理思路和算法,自己写了一个简化的sortable插件来实现touch触发排序,测试效果没问题:

因为用前端框架比如vue开发,touch拖动时无需处理拖拽效果(实际上鼠标操作时h5会自动产生拖拽效果),只需要在touchend时计算出target元素,有了start元素和end元素,只需要把原数组变换一下,框架会自动更新页面,无需写代码处理页面更新,而jquery-ui-sortable的功能就是在拖拽时更新页面效果,我不需要它这个功能,只需要参考它计算mouseup/touchend元素的算法,它的算法很复杂,简化一下测试结果也是可以的。

_touchEnd(e){
  //console.log(e);
  e.preventDefault();
  e.stopPropagation();
  var _this = this;
  var intersection = false;
  $("#tf_box > li").each(function(k,v){
    //console.log(v.offsetLeft);
    intersection = _this._intersectsWithTouch(e,v);
    if (intersection) {
      //item与touchend位置重叠,则item即为touchend/drag目标元素,修改原数组交换start/end元素
      _this.endIndex = k;
      _this.updateData(); // 修改原数组,页面会自动更新显示拖拽交换后的效果
    }
  });
},
_intersectsWithTouch(event,item) { // 计算touchend元素位置
  var touchY = event.originalEvent.changedTouches[0].clientY; // 注意不要用screenX/Y,那是在屏幕中的位置,要用在浏览器窗口中的位置
  var touchX = event.originalEvent.changedTouches[0].clientX;
  //console.log(touchX+":"+item.offsetLeft);
  var isOverElementHeight = touchY >= item.offsetTop && ( touchY < ( item.offsetTop + item.offsetHeight )),
    isOverElementWidth = touchX >= item.offsetLeft && ( touchX < ( item.offsetLeft + item.offsetWidth )),
    isOverElement = isOverElementHeight && isOverElementWidth;
    //console.log(isOverElementHeight+":"+isOverElementWidth);

    if (!isOverElement) {
      return false;
    }

    return true;

},

本来无意研究jquery-ui源代码,因为发现有些sortble程序在手机运行无效果,有些在手机运行有效果,而jquery-ui-sortable在手机运行也是有效的,有点好奇,才研究了jquery-ui-sortable源代码,搞清楚了其中的是非,涉及到mouse/touch/drag事件原理和算法,还是非常复杂的,拖拽比较复杂,比拖拽更复杂的就是动画了。

文中错误之处欢迎大家指正交流。

你可能感兴趣的:(ui,jquery,javascript)