海鹰斯坦的个人主页

基于原生js实现滑块验证思考组件的封装

前言

本文具体的代码实现转载自_release的原生JS封装拖动验证滑块你会吗？，大部分的代码实现来自原作者，本人基于原作者的实现加入了一些自己的思考，总结了一下封装一个组件常见的思路。

预览效果

最终使用

  1. 引入
<script src = "./slider.js"></script>

或者

import SliderTools from './slider.js'
  1. 初始化
    <div class="slider-wrapper"></div>   
    <script>
        var slider = new SliderTools({
            el:document.querySelector('.slider-wrapper'),
            complete:function(){
                alert('验证成功啦!!!');
            }
        })
    </script>

原生JS封装一个组件的常见步骤：

想要封装一个原生的JS组件库，我们常常无从下手，这时候最简单的办法就是先不去封装成库，而是只在页面中实现这个组件的功能。然后在这个功能实现的基础上进行代码抽离，实现封装。常见的封装组件的实现步骤如下：

  1. 闭包中封装一个类
  2. 类的参数统一化
  3. 类中执行init函数
  4. 其他功能的实现
  5. 导出类

接下来，我们就按照这个思路来封装一下这个滑块验证组件。

1. 闭包中封装一个类

我们将组件封装到闭包中，是为了避免组件受到全局变量的污染，或者污染全局变量。

// 闭包
(function(){
   //  SliderTools就是一个类，这里我们没有使用ES6中的Class
   function SliderTools(options){
    // 暂时没有代码
   }
})()

闭包中的类就是用来实现这个组件的全部功能，通过原生js来实现组件，通常是将其功能挂载到类的实例上。

2. 类的参数统一化

我们知道要实现一个组件，必然需要支持参数的传递，我们需要给用户提供较多的参数进行个性化定制，但是用户可能并不会每个参数都传递，也就是说我们需要一些默认参数。因此，我们首先就需要对用户传入的参数和默认参数进行合并，甚至很多时候还需要对用户传入参数进行校验,比如要求用户传入对象，却传入了数组等等。这些都可以统称为参数的统一化。

 function SliderTools(options){
    // 默认参数
    var defaultOptions = {
      el: document.body,
      complete:this.complete
    };
    // 合并参数
    this.options = Object.assign({},defaultOptions,options);
 }

3. 类中执行init函数

类在外界实例化时，必须进行初始化，也就是说必须提供一个入口来实现组件的功能，通常是定义一个init函数，初始化时就执行这个init函数，所有的功能都从init函数开始。

  function SliderTools(options){
    var defaultOptions = {
      el: document.body,
      complete:this.complete
    };
    this.options = Object.assign({},defaultOptions,options);
    this.init();   // 初始化
    this.diffX = 0;
    this.flag = false;   // 是否推动到最右侧
  }
  // 原型上挂载init函数
  SliderTools.prototype.init = function(){
    this.createSlider();
    this.bindEvents();
  }

4. 其他功能的实现

我们可以看到init函数中执行了createSlider函数和bindEvents函数，这些函数就是具体的组件功能函数了。一般想要封装一个组件，需要将HTML元素插入进来，将Css样式插入进来，将事件进行绑定等。这里的createSlider就是添加元素和添加样式。我们可以看下具体的实现：

    SliderTools.prototype.createSlider = function(){
        this.options.el.innerHTML = `
        <div id="slider">
            <div class="drag_bg"></div>
            <div class="drag_text" onselectstart="return false;" unselectable="on">拖动滑块验证</div>
            <div class="handler handler_bg"></div>
        </div>
        `;
        util.addCss(
            ` #slider {position: relative;background-color: #e8e8e8;width: 300px;height: 34px;line-height: 34px;text-align: center;}
            .slide_ok { color: #fff;}`
        );
    }

这里我们只是展示了部分样式，在封装组件的过程中，我们通常还会用到一些工具类函数，这些工具类函数用于帮助我们实现特定的功能，比如上面的util.addCss就是用来添加CSS样式。

5.导出类

到目前为止，如果我们已经实现了一个类的全部功能，那么我们需要将其导出才能进行使用。由于我们使用的是原生js，因此我们需要判断一下试运行在浏览器环境还是node.js环境，不同的环境导导出方式不同。

    var root = (typeof self == 'object' && self.self == self && self) ||
    (typeof global == 'object' && global.global == global && global) ||
    this || {};
    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实现一个滑动验证(具体实现不是目的)，总结了原生JS封装一个组件的常见步骤，主要包括：

  1. 闭包中封装一个类
  2. 类的参数统一化
  3. 类中执行init函数
  4. 其他功能的实现
  5. 导出类

以后我们自己再进行组件封装，就可以按照这些步骤照葫芦画瓢。掌握一个组件的实现不是目的，关键是掌握一系列方法论，举一反三。

完整的滑块验证组件实现源码可以查看：原生JS实现滑块验证

【002】从输入URL到页面加载全过程 →