鼠标框选（上篇）

　　好久没有更新博客了，感觉有些手生了，最近换了工作，有传统软件公司跳槽到互联网公司，由原来主做后端，兼职前端变成了全职前端；第一次进入互联网公司，感觉和传统软件公司或技术服务类公司相比，技术范围很浓，大家对技术更有追求，学习更主动，我很喜欢这种气氛，虽然很忙，但是感觉很充实，以后前端这部分开启，把所学所得记录下来，为自己也为分享，本篇作为开篇，聊聊鼠标框选操作。

1、应用描述

　　对于鼠标框选，网上已有粗糙的实现方案，这里也注重思路和方案，逐步对代码进行完善。

　　鼠标框选，其实是对传统选择的一个升级，想象这样一种场景，用户选择单选框／复选框，多行多列等，如果需要用户单击选择，数量越多，用户体验越差，对于用户来说，越简单的操作，体验越好，如果通关鼠标拖动，产生一个框选区域，可以对框选区域内所有元素进行操作，也不失为批量操作的一个选择。

2、实现思路

　　所谓框选，直白一点就是绘制一个矩形，而绘制矩形的方式有很多，比如创建一个div／基于cavans绘制一个矩形，创建一个svg矩形，这里我们以最简单的一种方式来实现，基于div来实现。

　　整个过程如下：

　　1、创建一个div

　　2、添加到dom

　　3、监听mousemove事件，重绘div

　　如果如果只是简单框选，该过程已ok，如果需要框选区高亮，则过程需要如下重构：

　　1、创建一个div作为选择框，创建四个div分表作为上、下、左、右四个mask

　　2、添加div到dom，同时添加mask到dom

　　3、监听mousemove事件，重绘div和mask

3、代码框架

　　今天作为上篇，仅提出实现思路及未经测试的非伪代码，下篇会加入继续完善，基本代码框架如下：

; (function ($) {

    /**
     * 坐标点
     * @param {*} x 
     * @param {*} y 
     */
    function Point(x, y) {
        this.x = x;
        this.y = y;
    }
    /**
     * 框选构造函数
     * @param {*} rangEl 容器元素
     * @param {*} options 选择项
     */
    function FrameSelection(rangEl, options) {
        this._rangeEl = rangEl;
        this._options = $.extend({}, { callback: function () { } }, options);

        this.init();
    }
    /**
     * 框选初始化
     */
    FrameSelection.prototype.init = function () {
        this.unbind();
        this.bind();
    }
    /**
     * 解除事件绑定
     */
    FrameSelection.prototype.unbind = function () {
        var $rangEl = $(this._rangeEl);
        $rangEl.off('mousedown');
        $rangEl.off('mousemove');
        $rangEl.off('mouseup');
    }
    /**
     * 绘制接口
     */
    FrameSelection.prototype.render = function (p1, p2) {
        this._renderMask();
        this._renderRect();

        typeof this._options.callback === 'function' && this._options.callback();
    }

    /**
     * 创建遮罩层
     */
    FrameSelection.prototype._renderMask = function (p1, p2) {
        this.create('div.mask', 4, $divs => {
            //TODO:计算位置
            //渲染到dom中
            $divs.appendTo($(this._rangeEl));
        })
    }
    /**
     * 创建矩形选框
     */
    FrameSelection.prototype._renderRect = function (p1, p2) {
        this.create('div.rect', 1, $div => {
            //TODO:计算位置
            //渲染到dom中
            $div.appendTo($(this._rangeEl));

        });
    }
    /**
     * 创建元素
     */
    FrameSelection.prototype.create = function (eleDes, n, callback) {
        var desArr = eleDes.split('.');
        var eleName = desArr[0], className = desArr[1] || '', eles = '';

        for (var i = 0; i < n; i++) {
            eles += '<${eleName} class="${className}"><${eleName}/>';
        }
        
        callback && typeof callback === "function" && callback($(eles));

    }
    /**
     * 注册事件绑定
     */
    FrameSelection.prototype.bind = function () {
        var $rangEl = $(this._rangeEl);
        var self = this;
        $rangEl.bind('mousedown', function (event) {
            var start = new Point(event.pageX, event.pageY);
            //绑定mousedown事件，

            $rangEl.bind('mousemove', function (e) {
                var end = new Point(e.pageX, e.pageY);
                //绘制
                self.render(start, end);

            })
        })
    }
})(window.jQuery);

说明：为了dom操作简单，这里假设以引入jquery，代码属于可以作为伪代码阅读，未经过测试，只是基本框架，下篇会进行完善，敬请期待。。。