从零开始编写一个js插件

什么是js插件

首先我们必须要明白什么是js插件，说的简单点，类似于

function add(a, b){ return a+b; }

这就是一种插件的雏形，因为它还没有封装起来，它会影响到工作区的其他参与者（函数），也就是说它有可能会影响到其他成员，这样并不好。

封装

想要插件不影响本身的命名空间的话，使用匿名函数是最好的方式之一，由于JavaScript本身是基于函数作用域的，也就是说只要是在自身的函数范围内，那么便不会与其他同名变量或者函数造成冲突。

匿名函数本身连函数名都可以不存在的（匿名函数同样可以命名，这可能多少有点矛盾，但的确如此），如此一来，我们的函数只要声明在一个匿名函数之下的话，那么就不可能会对其他作用域造成影响，如下：

(function(global){
    //some code...
}(this))

一些必要的讲解

这里的匿名函数传入的变量是this，而非window，这里主要是为了兼容到服务端，在node.js中，全局变量的名称为global，而this本身是基于调用上下文，所以传入this即可完成兼容。
此外传入this的最重要原因是为了能通过原型链prototype继承到全局变量this里边，进而可以在其他作用域中调用插件中的方法。

可拓展性

当我们有了自己的命名空间以后，我们自然是需要一些相应的代码来填充进去

不过由于插件本身也是一个function，但是他必须兼顾到可拓展可配置，所以如果使用普通函数的传参方式在实际拓展起来会较为麻烦，所以这里推荐的是使用一个Object作为参数，并且在函数内部声明一个常用的默认配置项

js插件其实有两个最为基础而且重要的内部函数，那就是config()和init()，一个是基本的配置，另一个则是初始化插件状态。这两个内部函数实际上不是非得要这么写，只是如果不使用这两个函数的话，在实际拓展和使用起来或许会较为困难

首先来看看config()的基本写法，很简单，只要传入一个opts参数，表示由用户配置的基本参数，然后再自己内部添加自己的默认参数，再与用户的参数进行比较，一旦用户有配置的参数便使用用户参数，反之则使用默认参数，最后输出即可。

这里其实就是函数式编程的一个体现，用户传入数据，函数返回数据，相同输入相同输出，没有任何的不确定性

// 该方法有问题的， 这里只是做一个示例
  function config(opts, options) {
    //默认参数
    if (!opts) return options;
    for (var key in opts) {
      if (!!opts[key]) {
        options[key] = opts[key];
      }
    }
    return options;
  }

初始化状态（即最基本的API）

在这里直接贴出代码估计也能看的懂，不过多少还需要再讲解下。

首先需要获取到自己在config()中配置的参数
其次就是根据获取的参数进行操作
作为入口函数使用

/**
     * @method 初始化
     * @param { object } 由@method config() 提供的配置参数
     */
    init: function (opts) {
      var _this = this;
      var option = config(opts, this.options);//用户配置
      var _elems = document.getElementsByClassName(option.elem);
      var _elemsLength = _elems.length;
      var index = null;

      initPreviewArea(_elems);

      var yPreviewImage = document.getElementById('yPreviewImage');
      var yPreviewArea = document.getElementById('yPreviewArea');

      for (var i = 0; i < _elemsLength; i++) {
        _elems[i].setAttribute('data-id', i);
        _elems[i].style.cursor = 'pointer';
        _elems[i].addEventListener('click', function () {
          var src = this.getAttribute('src');
          yPreviewImage.setAttribute('src', src);
          yPreviewImage.setAttribute('data-id', this.getAttribute('data-id'));
          show(yPreviewArea);
        })
      }
    }

架构

现在我们已经有了国土（匿名函数），资源（用户参数）和建筑（基本的API），那么还缺什么？没错，怎么把他们串联在一起。其实非常简单，只需要通过原型链继承即可。

在这里实现的主要步骤有这么几步

确定作用域，即匿名函数
使用严格模式
设置插件函数
配置函数原型链
将插件函数注册到全局参数中
恭喜你，你已经可以在你的js中调用该插件了
更加具体的请查看下方注释

2019.07.19

在这里更新一个新的用该方法写的一个基于localStorage的前端数据库插件的地址，有兴趣的朋友可以参考一下

https://github.com/LElysion/nothing/tree/master/yDB

"use strict";

  var yPreview = function () { }

  // 有必要调用到插件本身this的， 就放在prototype上边， 功能函数尽量放在下方工具中
  yPreview.prototype = {

    options: {
      name: 'yPreview',
      elem: 'preview-images'
    },
    index: null,
    /**
     * @method 初始化
     * @param { object } 由@method config() 提供的配置参数
     */
    init: function (opts) {
      var _this = this;
      var option = config(opts, this.options);//用户配置
      var _elems = document.getElementsByClassName(option.elem);
      var _elemsLength = _elems.length;
      var index = null;

      initPreviewArea(_elems);

      var yPreviewImage = document.getElementById('yPreviewImage');
      var yPreviewArea = document.getElementById('yPreviewArea');

      for (var i = 0; i < _elemsLength; i++) {
        _elems[i].setAttribute('data-id', i);
        _elems[i].style.cursor = 'pointer';
        _elems[i].addEventListener('click', function () {
          var src = this.getAttribute('src');
          yPreviewImage.setAttribute('src', src);
          yPreviewImage.setAttribute('data-id', this.getAttribute('data-id'));
          show(yPreviewArea);
        })
      }
    }
  }

  global.yPreview = yPreview;//注册到全局中， 届时可以直接new yPreview() 实例化对象

调用

let yn = new yPreview();
    yn.init({
      name: 'yourNewName',
      elem: 'preview-image'
    });

用处

市面上已经有大量的插件了，为什么我们还要自己造轮子？答案很简单，市面上再好的插件他们也不是根据你的需求所定制的，灵活性和可拓展性自然有所缺陷，而自己配置一个插件库便可以完全的为需求所服务，甚至可以将其更加完善从而更好的适应其他需求。

最后

上方的一个图片预览插件，不完善，但是单用作学习已经足够了
index.html

<style>
.wrap{ max-width: 750px; margin: 0 auto; }
.preview-image  { width: 120px; color:rgb(89, 21, 21);}
</style>

 <div class="wrap">
    <img src="img/1.jpg" alt="" class="preview-image">
    <img src="img/2.jpg" alt="" class="preview-image">
    <img src="img/3.jpg" alt="" class="preview-image">
  </div>

preview.js

let yn = new yPreview();
yn.init({
    name: 'yourNewName',
    elem: 'preview-image'
  });

(function (global) {

  "use strict";

  var yPreview = function () { }

  // 有必要调用到插件本身this的， 就放在prototype上边， 功能函数尽量放在下方工具中
  yPreview.prototype = {

    options: {
      name: 'yPreview',
      elem: 'preview-images'
    },
    index: null,
    /**
     * @method 初始化
     * @param { object } 由@method config() 提供的配置参数
     */
    init: function (opts) {
      var _this = this;
      var option = config(opts, this.options);//用户配置
      var _elems = document.getElementsByClassName(option.elem);
      var _elemsLength = _elems.length;
      var index = null;

      initPreviewArea(_elems);

      var yPreviewImage = document.getElementById('yPreviewImage');
      var yPreviewArea = document.getElementById('yPreviewArea');

      for (var i = 0; i < _elemsLength; i++) {
        _elems[i].setAttribute('data-id', i);
        _elems[i].style.cursor = 'pointer';
        _elems[i].addEventListener('click', function () {
          var src = this.getAttribute('src');
          yPreviewImage.setAttribute('src', src);
          yPreviewImage.setAttribute('data-id', this.getAttribute('data-id'));
          show(yPreviewArea);
        })
      }
    }
  }

  function hide(elem) {
    elem.style.display = 'none';
  }
  function show(elem) {
    elem.style.display = 'block';
  }

  function setStyle(elem, styles) {
    for (var key in styles) {
      elem.style[key] = styles[key]
    }
  }

  function initPreviewArea(elems) {
    var imgsrcs = [];
    var elemsLength = elems.length;
    for (var i = 0; i < elemsLength; i++) {
      imgsrcs.push({
        src: elems[i].getAttribute('src'),
        id: i
      })
    }

    var div = document.createElement('div');
    div.setAttribute('id', 'yPreviewArea');
    var divStyle = {
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100%',
      height: window.innerHeight + 'px',
      background: 'rgba(0, 0, 0, .6)',
      display: 'none',
      userSelect: 'none'
    }
    var img = document.createElement('img');
    img.setAttribute('id', 'yPreviewImage');
    var imgStyle = {
      position: 'relative',
      top: '50%',
      left: '50%',
      maxHeight: window.innerHeight + 'px'
    }
    setStyle(img, imgStyle);
    img.style.transform = 'translate(-50%, -50%)';
    // img.addEventListener('click', function () {
    //   div.style.display = 'none';
    // })
    div.appendChild(img);

    var next = document.createElement('a');
    next.innerText = '>';
    var nextStyle = {
      position: 'absolute',
      top: '50%',
      right: 0,
      margin: '12px',
      width: '42px',
      height: '42px',
      lineHight: '42px',
      display: 'block',
      background: '#1E67B9',
      cursor: 'pointer',
      color: '#fff',
      textAlign: 'center',
      fontSize: '27px',
      borderRadius: '50%'
    }
    setStyle(next, nextStyle);
    next.addEventListener('click', function () {
      var idx = img.getAttribute('data-id');
      if ((elemsLength - 1) > idx) {
        var _idx = parseInt(idx);
        img.setAttribute('src', elems[_idx + 1].getAttribute('src'));
        img.setAttribute('data-id', elems[_idx + 1].getAttribute('data-id'));
      } else {
        img.setAttribute('src', elems[0].getAttribute('src'));
        img.setAttribute('data-id', elems[0].getAttribute('data-id'));
      }
    })
    div.appendChild(next);

    var prev = document.createElement('a');
    prev.innerText = '<';
    var prevStyle = {
      position: 'absolute',
      top: '50%',
      left: 0,
      margin: '12px',
      width: '42px',
      height: '42px',
      lineHight: '42px',
      display: 'block',
      background: '#1E67B9',
      cursor: 'pointer',
      color: '#fff',
      textAlign: 'center',
      fontSize: '27px',
      borderRadius: '50%'
    }
    setStyle(prev, prevStyle);
    prev.addEventListener('click', function () {
      var idx = img.getAttribute('data-id');
      if (idx != 0) {
        var _idx = parseInt(idx);
        console.log(elems[_idx - 1].getAttribute('src'))
        img.setAttribute('src', elems[_idx - 1].getAttribute('src'));
        img.setAttribute('data-id', elems[_idx - 1].getAttribute('data-id'));
      } else {
        img.setAttribute('src', elems[elemsLength - 1].getAttribute('src'));
        img.setAttribute('data-id', elems[elemsLength - 1].getAttribute('data-id'));
      }
    })
    div.appendChild(prev);

    var close = document.createElement('a');
    close.innerText = '×';
    var closeStyle = {
      position: 'absolute',
      top: '12px',
      right: '12px',
      display: 'block',
      fontSize: '32px',
      color: '#fff',
      cursor: 'pointer',
      zIndex: 99
    }
    close.addEventListener('click', function () {
      hide(div);
    })
    setStyle(close, closeStyle);
    div.appendChild(close);

    setStyle(div, divStyle);
    document.body.appendChild(div)
  }

  function getNodeClass(className) {
    var _elems = document.getElementsByClassName(className);
    return _elems
  }

  // 工具函数
  // 检查非空
  function isEmpty(val) {
    return val != '' && val != null && val != undefined ? false : true;
  }

  /**
   * @method 配置
   * @param opts { object } 用户提供的参数，在没有提供参数的情况下使用默认参数 
   * @param options { object } 默认参数
   * @return options { object } 返回一个配置对象
   */
  function config(opts, options) {
    //默认参数
    if (!opts) return options;
    for (var key in opts) {
      if (!!opts[key]) {
        options[key] = opts[key];
      }
    }
    return options;
  }

  global.yPreview = yPreview;//注册到全局中， 届时可以直接new yPreview() 实例化对象

}(this))

最后编辑于：2019.07.19 14:47:08

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 159,569评论 4赞 363
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,499评论 1赞 294
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 109,271评论 0赞 244
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,087评论 0赞 209
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,474评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,670评论 1赞 222
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,911评论 2赞 313
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,636评论 0赞 202
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,397评论 1赞 246
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,607评论 2赞 246
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,093评论 1赞 261
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,418评论 2赞 254
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,074评论 3赞 237
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,092评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,865评论 0赞 196
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,726评论 2赞 276
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,627评论 2赞 270

从零开始编写一个js插件

什么是js插件

封装

可拓展性

初始化状态（即最基本的API）

架构

调用

用处

最后

推荐阅读更多精彩内容