好久没有更新博客了，感觉有些手生了，最近换了工作，有传统软件公司跳槽到互联网公司，由原来主做后端，兼职前端变成了全职前端；第一次进入互联网公司，感觉和传统软件公司或技术服务类公司相比，技术范围很浓，大家对技术更有追求，学习更主动，我很喜欢这种气氛，虽然很忙，但是感觉很充实，以后前端这部分开启，把所学所得记录下来，为自己也为分享，本篇作为开篇，聊聊鼠标框选操作。
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、代码框架
今天作为上篇，仅提出实现思路及未经测试的非伪代码，下篇会加入继续完善，基本代码框架如下：
代码语言：javascript复制 1 ; (function ($) {
2
3 /**
4 * 坐标点
5 * @param {*} x
6 * @param {*} y
7 */
8 function Point(x, y) {
9 this.x = x;
10 this.y = y;
11 }
12 /**
13 * 框选构造函数
14 * @param {*} rangEl 容器元素
15 * @param {*} options 选择项
16 */
17 function FrameSelection(rangEl, options) {
18 this._rangeEl = rangEl;
19 this._options = $.extend({}, { callback: function () { } }, options);
20
21 this.init();
22 }
23 /**
24 * 框选初始化
25 */
26 FrameSelection.prototype.init = function () {
27 this.unbind();
28 this.bind();
29 }
30 /**
31 * 解除事件绑定
32 */
33 FrameSelection.prototype.unbind = function () {
34 var $rangEl = $(this._rangeEl);
35 $rangEl.off('mousedown');
36 $rangEl.off('mousemove');
37 $rangEl.off('mouseup');
38 }
39 /**
40 * 绘制接口
41 */
42 FrameSelection.prototype.render = function (p1, p2) {
43 this._renderMask();
44 this._renderRect();
45
46 typeof this._options.callback === 'function' && this._options.callback();
47 }
48
49 /**
50 * 创建遮罩层
51 */
52 FrameSelection.prototype._renderMask = function (p1, p2) {
53 this.create('div.mask', 4, $divs => {
54 //TODO:计算位置
55 //渲染到dom中
56 $divs.appendTo($(this._rangeEl));
57 })
58 }
59 /**
60 * 创建矩形选框
61 */
62 FrameSelection.prototype._renderRect = function (p1, p2) {
63 this.create('div.rect', 1, $div => {
64 //TODO:计算位置
65 //渲染到dom中
66 $div.appendTo($(this._rangeEl));
67
68 });
69 }
70 /**
71 * 创建元素
72 */
73 FrameSelection.prototype.create = function (eleDes, n, callback) {
74 var desArr = eleDes.split('.');
75 var eleName = desArr[0], className = desArr[1] || '', eles = '';
76
77 for (var i = 0; i < n; i ) {
78 eles = '<${eleName} class="${className}"><${eleName}/>';
79 }
80
81 callback && typeof callback === "function" && callback($(eles));
82
83 }
84 /**
85 * 注册事件绑定
86 */
87 FrameSelection.prototype.bind = function () {
88 var $rangEl = $(this._rangeEl);
89 var self = this;
90 $rangEl.bind('mousedown', function (event) {
91 var start = new Point(event.pageX, event.pageY);
92 //绑定mousedown事件，
93
94 $rangEl.bind('mousemove', function (e) {
95 var end = new Point(e.pageX, e.pageY);
96 //绘制
97 self.render(start, end);
98
99 })
100 })
101 }
102 })(window.jQuery);说明：为了dom操作简单，这里假设以引入jquery，代码属于可以作为伪代码阅读，未经过测试，只是基本框架，下篇会进行完善，敬请期待。。。
