小編這次要給大家分享的是原生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 &#63; 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如何實現封裝拖動驗證滑塊-創新互聯
路徑分享：http://vcdvsql.cn/article6/cscoig.html

成都網站建設公司_創新互聯，為您提供自適應網站、網站營銷、網頁設計公司、移動網站建設、手機網站建設、虛擬主機

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯