原生JS封裝拖動(dòng)驗(yàn)證滑塊你會(huì)嗎？

高級(jí)前端進(jìn)階

關(guān)注

共 1235字，需瀏覽 3分鐘

 ·

2020-08-05 02:24

作者：_release
原文地址：https://juejin.im/post/5ed37a73e51d45788c739784

前言

閑著沒事，就想著寫寫原生js玩玩，在網(wǎng)上看了幾個(gè)效果后決定做這個(gè)效果，并且使用了prototype和eventEmitter封裝成了庫(kù)。

最終效果

分析

看到這個(gè)效果我們首先應(yīng)該想到和拖動(dòng)有關(guān)的api: onmousedown, onmousemove, onmouseup

其次要支持用戶傳入放置這個(gè)組件的dom元素和完成的回調(diào)事件。

最終如何使用？

我們先來看下使用方式，再來決定我們?cè)趺淳帉戇@個(gè)庫(kù)

具體使用就是這樣的，我們還想用戶能通過import等方式使用，所以我們就要支持esMoudule的導(dǎo)入方式。

編寫庫(kù)的整體初始框架

(function?()?{
????//?=================代碼塊1=========================================
????var?root?=?(typeof?self?==?'object'?&&?self.self?==?self?&&?self)?||
????????(typeof?global?==?'object'?&&?global.global?==?global?&&?global)?||
????????this?||?{};?
????var?util?=?{
????????extend:?function?(target)?{
????????????for?(var?i?=?1,?len?=?arguments.length;?i?????????????????for?(var?prop?in?arguments[i])?{
????????????????????if?(arguments[i].hasOwnProperty(prop))?{
????????????????????????target[prop]?=?arguments[i][prop]
????????????????????}
????????????????}
????????????}
????????????return?target
????????},
????????isValidListener:?function?(listener)?{
????????????if?(typeof?listener?===?'function')?{
????????????????return?true
????????????}?else?if?(listener?&&?typeof?listener?===?'object')?{
????????????????return?util.isValidListener(listener.listener)
????????????}?else?{
????????????????return?false
????????????}
????????},
????????addCSS:?function?(cssText)?{
????????????var?style?=?document.createElement('style'),??//創(chuàng)建一個(gè)style元素
????????????????head?=?document.head?||?document.getElementsByTagName('head')[0];?//獲取head元素
????????????style.type?=?'text/css';?//這里必須顯示設(shè)置style元素的type屬性為text/css，否則在ie中不起作用
????????????if?(style.styleSheet)?{?//IE
????????????????var?func?=?function?()?{
????????????????????try?{?//防止IE中stylesheet數(shù)量超過限制而發(fā)生錯(cuò)誤
????????????????????????style.styleSheet.cssText?=?cssText;
????????????????????}?catch?(e)?{

????????????????????}
????????????????}
????????????????//如果當(dāng)前styleSheet還不能用，則放到異步中則行
????????????????if?(style.styleSheet.disabled)?{
????????????????????setTimeout(func,?10);
????????????????}?else?{
????????????????????func();
????????????????}
????????????}?else?{?//w3c
????????????????//w3c瀏覽器中只要?jiǎng)?chuàng)建文本節(jié)點(diǎn)插入到style元素中就行了
????????????????var?textNode?=?document.createTextNode(cssText);
????????????????style.appendChild(textNode);
????????????}
????????????head.appendChild(style);?//把創(chuàng)建的style元素插入到head中
????????},
????????indexOf:?function?(array,?item)?{
????????????if?(array.indexOf)?{
????????????????return?array.indexOf(item);
????????????}?else?{
????????????????var?result?=?-1;
????????????????for?(var?i?=?0,?len?=?array.length;?i?????????????????????if?(array[i]?===?item)?{
????????????????????????result?=?i;
????????????????????????break;
????????????????????}
????????????????}
????????????????return?result;
????????????}
????????}
????}
????
????function?EventEmitter()?{
????????this._events?=?{}
????}

????EventEmitter.prototype.on?=?function?(eventName,?listener)?{
????????if?(!eventName?||?!listener)?return;
????????if?(!util.isValidListener(listener))?{
????????????throw?new?TypeError('listener?must?be?a?function');
????????}
????????var?events?=?this._events;
????????var?listeners?=?events[eventName]?=?events[eventName]?||?[];
????????var?listenerIsWrapped?=?typeof?listener?===?'object';
????????//?不重復(fù)添加事件
????????if?(util.indexOf(listeners,?listener)?===?-1)?{
????????????listeners.push(listenerIsWrapped???listener?:?{
????????????????listener:?listener,
????????????????once:?false
????????????});
????????}
????????return?this;
????};
????EventEmitter.prototype.once?=?function?(eventName,?listener)?{
????????return?this.on(eventName,?{
????????????listener:?listener,
????????????once:?true
????????})
????};
????EventEmitter.prototype.off?=?function?(eventName,?listener)?{
????????var?listeners?=?this._events[eventName];
????????if?(!listeners)?return;
????????var?index;
????????for?(var?i?=?0,?len?=?listeners.length;?i?????????????if?(listeners[i]?&&?listeners[i].listener?===?listener)?{
????????????????index?=?i;
????????????????break;
????????????}
????????}
????????if?(typeof?index?!==?'undefined')?{
????????????listeners.splice(index,?1,?null)
????????}
????????return?this;
????};
????EventEmitter.prototype.emit?=?function?(eventName,?args)?{
????????var?listeners?=?this._events[eventName];
????????if?(!listeners)?return;
????????for?(var?i?=?0;?i?????????????var?listener?=?listeners[i];
????????????if?(listener)?{
????????????????listener.listener.apply(this,?args?||?[]);
????????????????if?(listener.once)?{
????????????????????this.off(eventName,?listener.listener)
????????????????}
????????????}
????????}
????????return?this;
????};
????
????//?=================代碼塊2=========================================
????function?SliderTools(options)?{
????????this.options?=?util.extend({},?this.constructor.defaultOptions,?options)
????????this.init();
????????this.bindEvents();
????????this.diffX?=?0;
????????this.flag?=?false;//是否拖動(dòng)到最右側(cè)
????}

????SliderTools.defaultOptions?=?{
????????el:?document.body?//默認(rèn)放到body里
????};
????
????var?proto?=?SliderTools.prototype?=?new?EventEmitter();//SliderTools繼承emitter
????
????proto.constructor?=?SliderTools;//修正構(gòu)造器

????proto.init?=?function?()?{
????????this.createSlider();//創(chuàng)建插件所需要的dom元素
????????this.getElements();//獲取創(chuàng)建好的元素
????}
????
???//?=================代碼塊3=========================================
????if?(typeof?exports?!=?'undefined'?&&?!exports.nodeType)?{
????????if?(typeof?module?!=?'undefined'?&&?!module.nodeType?&&?module.exports)?{
????????????exports?=?module.exports?=?SliderTools;
????????}
????????exports.SliderTools?=?SliderTools;
????}?else?{
????????root.SliderTools?=?SliderTools;
????}
}());

代碼塊1是在判斷是在瀏覽器環(huán)境還是nodeJS環(huán)境，方便代碼三后期使用，代碼塊2聲明了一個(gè)對(duì)象SliderTools,將用戶傳進(jìn)來的option和默認(rèn)的defaultOption進(jìn)行合并

編寫核心函數(shù)1(創(chuàng)建dom和css)

proto.createSlider?=?function?()?{
????this.options.el.innerHTML?=?'

拖動(dòng)滑塊驗(yàn)證

編寫核心函數(shù)2(綁定事件)

proto.bindEvents?=?function?()?{
????var?self?=?this;
????self.handler.onmousedown?=?function?(e)?{
????????self.diffX?=?e.clientX?-?self.handler.offsetLeft;
????????util.setClassName(self.slider,?'unselect');?//禁止選擇樣式
????????document.onmousemove?=?function?(e)?{
????????????let?deltaX?=?e.clientX?-?self.diffX;
????????????if?(deltaX?>=?self.slider.offsetWidth?-?self.handler.offsetWidth)?{?//拖動(dòng)到了最右側(cè)
????????????????deltaX?=?self.slider.offsetWidth?-?self.handler.offsetWidth;
????????????????self.flag?=?true;
????????????}?else?if?(deltaX?<=?0)?{
????????????????deltaX?=?0;
????????????????self.flag?=?false;
????????????}?else?{
????????????????self.flag?=?false;
????????????}
????????????util.setInlineStyle([self.handler],?'left',?deltaX?+?'px');
????????????util.setInlineStyle([self.drag_bg],?'width',?deltaX?+?'px');
????????}
????????document.onmouseup?=?function?(e)?{
????????????util.setClassName(self.slider,?'')
????????????if?(self.flag)?{
????????????????util.setClassName(self.slider,?'slide_ok')?//拖動(dòng)完成后的樣式
????????????????util.addClass(self.handler,?'handler_ok_bg')////拖動(dòng)完成后的樣式
????????????????self.handler.onmousedown?=?null?//防止拖動(dòng)完成后再次拖動(dòng)
????????????????self.emit('complete')//emit通知使用者的回調(diào)事件
????????????}?else?{
????????????????util.setInlineStyle([self.handler],?'left',?0?+?'px');
????????????????util.setInlineStyle([self.drag_bg],?'width',?0?+?'px');
????????????}
????????????document.onmousemove?=?null;
????????????document.onmouseup?=?null;
????????}
????}
}

添加工具方法(核心函數(shù)2中用到的)

var?util?=?{
????//?...初始框架里的那部分
????setClassName(selector,?className)?{
????????selector.className?=?className;
????},
????addClass(selector,?className)?{
????????selector.classList.add(className);
????},
????setInlineStyle(selector,?attr,?content)?{
????????let?length?=?selector.length;
????????for?(let?i?=?0;?i?????????????selector[i].style[attr]?=?content;
????????}
????},
}

最終完整可運(yùn)行代碼

(function?()?{
????var?root?=?(typeof?self?==?'object'?&&?self.self?==?self?&&?self)?||
????????(typeof?global?==?'object'?&&?global.global?==?global?&&?global)?||
????????this?||?{};
????var?util?=?{
????????extend:?function?(target)?{
????????????for?(var?i?=?1,?len?=?arguments.length;?i?????????????????for?(var?prop?in?arguments[i])?{
????????????????????if?(arguments[i].hasOwnProperty(prop))?{
????????????????????????target[prop]?=?arguments[i][prop]
????????????????????}
????????????????}
????????????}
????????????return?target
????????},
????????setClassName(selector,?className)?{
????????????selector.className?=?className;
????????},
????????addClass(selector,?className)?{
????????????selector.classList.add(className);
????????},
????????setInlineStyle(selector,?attr,?content)?{
????????????let?length?=?selector.length;
????????????for?(let?i?=?0;?i?????????????????selector[i].style[attr]?=?content;
????????????}
????????},
????????isValidListener:?function?(listener)?{
????????????if?(typeof?listener?===?'function')?{
????????????????return?true
????????????}?else?if?(listener?&&?typeof?listener?===?'object')?{
????????????????return?util.isValidListener(listener.listener)
????????????}?else?{
????????????????return?false
????????????}
????????},
????????addCSS:?function?(cssText)?{
????????????var?style?=?document.createElement('style'),??//創(chuàng)建一個(gè)style元素
????????????????head?=?document.head?||?document.getElementsByTagName('head')[0];?//獲取head元素
????????????style.type?=?'text/css';?//這里必須顯示設(shè)置style元素的type屬性為text/css，否則在ie中不起作用
????????????if?(style.styleSheet)?{?//IE
????????????????var?func?=?function?()?{
????????????????????try?{?//防止IE中stylesheet數(shù)量超過限制而發(fā)生錯(cuò)誤
????????????????????????style.styleSheet.cssText?=?cssText;
????????????????????}?catch?(e)?{

????????????????????}
????????????????}
????????????????//如果當(dāng)前styleSheet還不能用，則放到異步中則行
????????????????if?(style.styleSheet.disabled)?{
????????????????????setTimeout(func,?10);
????????????????}?else?{
????????????????????func();
????????????????}
????????????}?else?{?//w3c
????????????????//w3c瀏覽器中只要?jiǎng)?chuàng)建文本節(jié)點(diǎn)插入到style元素中就行了
????????????????var?textNode?=?document.createTextNode(cssText);
????????????????style.appendChild(textNode);
????????????}
????????????head.appendChild(style);?//把創(chuàng)建的style元素插入到head中
????????},
????????indexOf:?function?(array,?item)?{
????????????if?(array.indexOf)?{
????????????????return?array.indexOf(item);
????????????}?else?{
????????????????var?result?=?-1;
????????????????for?(var?i?=?0,?len?=?array.length;?i?????????????????????if?(array[i]?===?item)?{
????????????????????????result?=?i;
????????????????????????break;
????????????????????}
????????????????}
????????????????return?result;
????????????}
????????}
????}

????function?EventEmitter()?{
????????this._events?=?{}
????}

????EventEmitter.prototype.on?=?function?(eventName,?listener)?{
????????if?(!eventName?||?!listener)?return;

????????if?(!util.isValidListener(listener))?{
????????????throw?new?TypeError('listener?must?be?a?function');
????????}

????????var?events?=?this._events;
????????var?listeners?=?events[eventName]?=?events[eventName]?||?[];
????????var?listenerIsWrapped?=?typeof?listener?===?'object';

????????//?不重復(fù)添加事件
????????if?(util.indexOf(listeners,?listener)?===?-1)?{
????????????listeners.push(listenerIsWrapped???listener?:?{
????????????????listener:?listener,
????????????????once:?false
????????????});
????????}

????????return?this;
????};
????EventEmitter.prototype.once?=?function?(eventName,?listener)?{
????????return?this.on(eventName,?{
????????????listener:?listener,
????????????once:?true
????????})
????};
????EventEmitter.prototype.off?=?function?(eventName,?listener)?{
????????var?listeners?=?this._events[eventName];
????????if?(!listeners)?return;

????????var?index;
????????for?(var?i?=?0,?len?=?listeners.length;?i?????????????if?(listeners[i]?&&?listeners[i].listener?===?listener)?{
????????????????index?=?i;
????????????????break;
????????????}
????????}

????????if?(typeof?index?!==?'undefined')?{
????????????listeners.splice(index,?1,?null)
????????}

????????return?this;
????};
????EventEmitter.prototype.emit?=?function?(eventName,?args)?{
????????var?listeners?=?this._events[eventName];
????????if?(!listeners)?return;

????????for?(var?i?=?0;?i?????????????var?listener?=?listeners[i];
????????????if?(listener)?{
????????????????listener.listener.apply(this,?args?||?[]);
????????????????if?(listener.once)?{
????????????????????this.off(eventName,?listener.listener)
????????????????}
????????????}
????????}
????????return?this;
????};

????function?SliderTools(options)?{
????????this.options?=?util.extend({},?this.constructor.defaultOptions,?options)
????????this.init();
????????this.bindEvents();
????????this.diffX?=?0;
????????this.flag?=?false;
????}

????SliderTools.VERSION?=?'1.0.0';

????SliderTools.defaultOptions?=?{
????????el:?document.body
????};

????var?proto?=?SliderTools.prototype?=?new?EventEmitter();

????proto.constructor?=?SliderTools;

????proto.init?=?function?()?{
????????this.createSlider();
????????this.getElements();
????}

????proto.createSlider?=?function?()?{
????????this.options.el.innerHTML?=?'