原生JS如何实现封装拖动验证滑块-创新互联
小编这次要给大家分享的是原生JS如何实现封装拖动验证滑块,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。
目前成都创新互联公司已为上千余家的企业提供了网站建设、域名、网络空间、绵阳服务器托管、企业网站设计、庆元网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。前言
星期六闲着没事,就想着写写原生js玩玩,在网上看了几个效果后决定做这个效果,并且使用了prototype和eventEmitter封装成了库。
最终效果
分析
看到这个效果我们首先应该想到和拖动有关的api: onmousedown, onmousemove, onmouseup
其次要支持用户传入放置这个组件的dom元素和完成的回调事件。
最终如何使用?
我们先来看下使用方式,再来决定我们怎么编写这个库
具体使用就是这样的,我们还想用户能通过import等方式使用,所以我们就要支持esMoudule的导入方式。
编写库的整体初始框架
(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 < len; 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'), //创建一个style元素 head = document.head || document.getElementsByTagName('head')[0]; //获取head元素 style.type = 'text/css'; //这里必须显示设置style元素的type属性为text/css,否则在ie中不起作用 if (style.styleSheet) { //IE var func = function () { try { //防止IE中stylesheet数量超过限制而发生错误 style.styleSheet.cssText = cssText; } catch (e) { } } //如果当前styleSheet还不能用,则放到异步中则行 if (style.styleSheet.disabled) { setTimeout(func, 10); } else { func(); } } else { //w3c //w3c浏览器中只要创建文本节点插入到style元素中就行了 var textNode = document.createTextNode(cssText); style.appendChild(textNode); } head.appendChild(style); //把创建的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 < len; 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'; // 不重复添加事件 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 < len; 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 < listeners.length; 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;//是否拖动到最右侧 } SliderTools.defaultOptions = { el: document.body //默认放到body里 }; var proto = SliderTools.prototype = new EventEmitter();//SliderTools继承emitter proto.constructor = SliderTools;//修正构造器 proto.init = function () { this.createSlider();//创建插件所需要的dom元素 this.getElements();//获取创建好的元素 } // =================代码块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; } }());
本文标题:原生JS如何实现封装拖动验证滑块-创新互联
URL分享:http://scyanting.com/article/cscoig.html