小編這次要給大家分享的是原生JS如何實(shí)現(xiàn)封裝拖動(dòng)驗(yàn)證滑塊，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

目前成都創(chuàng)新互聯(lián)公司已為上千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、綿陽服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、慶元網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

前言

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

最終效果

分析

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

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

最終如何使用？

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

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

編寫庫的整體初始框架

(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'), //創(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 < 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';
  // 不重復(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 < 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;//是否拖動(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;
 }
}());

文章標(biāo)題：原生JS如何實(shí)現(xiàn)封裝拖動(dòng)驗(yàn)證滑塊-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://weahome.cn/article/cscoig.html