从零开始编写一个js插件

最新推荐文章于 2024-05-16 03:26:59 发布
最新推荐文章于 2024-05-16 03:26:59 发布
阅读量4.3k 收藏 14
点赞数 4
分类专栏： JavaScript知识点 前端 文章标签： javascript node.js vue.js
原文链接：https://www.jianshu.com/p/0a3127d301b1
版权

什么是js插件

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

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

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

封装

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

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

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

一些必要的讲解

  1. 这里的匿名函数传入的变量是this，而非window， 这里主要是为了兼容到服务端，在node.js中，全局变量的名称为global，而this本身是基于调用上下文，所以传入this即可完成兼容。
  2. 此外传入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）

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

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

/**
     * @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），那么还缺什么？没错，怎么把他们串联在一起。其实非常简单，只需要通过原型链继承即可。

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

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

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))

转自https://www.jianshu.com/p/0a3127d301b1

 

IT 哈
关注
  • 4
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript用浏览器书签制作插件(爬虫)
Π指针
08-13 1987
学习JavaScript通过浏览器的书签去实现爬虫等功能 书签也可以直接操作网页的DOM结点
如何编写一个 npm 插件？
止喜的博客
02-15 2278
提到写 npm 插件，很多没搞过的可能第一感觉觉得很难，无从下手，其实不然。 我们甚至写个简单的 console.log('hello word)，都是可以当成一个插件发布上去的。 其实无从下手的主要难点还是在于你的具体要做的功能逻辑，这个理清楚了，写插件并没有想象的那么难。 接下来，我们来看下具体插件编写的思路。 一、webpack 和 rollup ...
用js开发一个简单的谷歌插件
weixin_40381947的博客
06-09 2124
要开发一个谷歌插件，我们首先需要了解一下插件的基本架构和工作原理。
JavaScript进阶：如何创建与框架无关的JavaScript插件
前端全栈开发者
11-14 478
微信搜索【前端全栈开发者】关注这个脱发、摆摊、卖货、持续学习的程序员，第一时间阅读最新文章，会优先两天发表新文章。关注即可大礼包，准能为你节省不少钱！ JavaScript中的插件使我们能够扩展语言，以实现所需的某些强大（或不够强大）的功能。插件/库本质上是打包的代码，可以使我们免于一遍又一遍地编写相同的东西（功能）。 在JavaScript生态系统中，有数百个框架，这些框架中的每一个都为我们提供了一个创建插件的系统，以便为框架添加新的东西。 如果你看一下NPM注册表，几乎所有的JavaScript插..
十分钟实现自己动手写一个vscode插件，实现插件自由！_vscode插件怎么写
最新发布
2401_85015152的博客
05-16 582
4、安装生产插件代码的工具：Yeoman和VSCode Extension generator。1、在cmd命令行中执行以下命令，自动生成一个工程的基本代码。2、在extension.js文件中添加相关代码。1、安装Visual Studio Code。1、在package.json中添加相关代码。3、外部文件wordCounter.js文件。2、安装Node.js。
原生JS插件（超详细）
weixin_33772645的博客
04-25 4342
作为一个前端er，如果不会写一个小插件，都不好意思说自己是混前端界的。写还不能依赖jquery之类的工具库，否则装得不够高端。那么，如何才能装起来让自己看起来逼格更高呢？当然是利用js纯原生的写法啦。以前一直说，掌握了js原生，就基本上可以解决前端的所有脚本交互工作了，这话大体上是有些浮夸了。不过，也从侧面说明了原生js在前端中占着多么重要的一面。好了。废话不多说。咱们就来看一下怎么去做一个自己的...
javascript插件的几种写法
小小阳
07-07 5186
一、js原生插件的写法 （1）工厂模式 var Helloword = function(objId){ var _get_dom = function(Id){ return document.getElementById(Id); } var _aim_obj = _get_dom(objId); var _say_hello = funct
js插件怎么写？
银贝斯的专栏
10-24 1891
教你如何写js插件
写好JS的原则之组件封装
1900's 88 keys的博客
01-22 2487
目录写好JS的原理组件封装例子结构设计：HTML展现效果：CSS行为设计：API行为设计：控制流重构：插件化重构：模板化重构：组件框架总结： 写好JS的原理 想要成为一名前端工程师，JavaScript这门编程语言是极其重要的，在我们学习JS中，也会遇到很多的问题，很多人也会拿各类语言和JavaScript语言进行比较优劣，但是总体是编程语言只是一门工具，决定代码的好坏是工程师本身。那么怎么样的代码才算是一段好的JavaScript代码呢？应当遵循以下的三个原则： 各司其职：–>点击链接 组件封装
用js写谷歌浏览器插件
小小的博客
04-28 3398
需求 在工作中，如果我们需要修改别人网页的内容，因为我们没有别人的代码，所以我们不能靠修改源代码的方式解决。但是谷歌浏览器提供了插件功能，我们可以自己编写插件实现浏览指定网页，修改网页的内容。 步骤 在桌面创建一个文件夹，命名demo 在demo文件夹下创建一个文件夹，命名content 然后再content文件夹下创建一个js文件夹和一个manifest.json文件。 最后在js文件夹下创建一个index.js文件，最终目录格式如下 示例 举例修改百度首页中，“百度热榜”四个字的颜色，如下 m
深入javascript的主流的模块规范
saucxs
04-18 876
一、前言 目前主流的模块规范： 1、UMD通用模块 2、CommonJs 3、es6 module 二、UMD模块（通用模块） (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = fact...
JS插件，网页查看各种格式视频插件
09-18
网页查看各种格式视频插件
javascript插件
03-22
NULL 博文链接：https://imagehongyao.iteye.com/blog/901857
从零开始学习jQuery word格式完整版
05-28
《从零开始学习jQuery》是一本面向初学者的教程，旨在帮助读者系统地掌握JavaScript的基础以及jQuery库的应用。本文档采用Word格式，由知名博主“子秋”编写，提供了全面而深入的学习路径。 1. 你必须知道的...
从零开始学jquery
02-24
【从零开始学jQuery】这个教程旨在帮助初学者全面理解并掌握jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互，是Web开发中的常用工具。 ### (一) 开天辟地入门篇 在入门...
vue从零实现一个消息通知组件的方法详解
10-15
在这个教程中，我们将深入探讨如何从零开始在Vue中实现一个消息通知组件。消息通知组件在许多应用中都很常见，用于向用户显示短暂的信息，如成功提示、错误警告或一般通知。 首先，我们需要规划组件的文件结构。...
详解如何从零开始搭建Express+Vue开发环境
10-18
本文将详细介绍如何从零开始搭建一个基于Express（Node.js的Web应用框架）和Vue（渐进式JavaScript框架）的开发环境。 首先，我们需要准备以下工具： 1. **前端预处理和资源管理**： - **JavaScript预处理**：...
从零开始学习JQuery
03-08
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章...
手把手教您编写一个简单的vue3插件
BradenHan的专栏
04-10 1848
插件是自包含的代码，通常向 Vue 添加全局级功能。你如果是一个对象需要有install方法Vue会帮你自动注入到install 方法 你如果是function 就直接当install 方法去使用.并在文件夹中新建.vue组件和一个index.js文件.vue文件作为自定义插件.组件就是把图形非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在Vue中每一个.vue文件都可以视为一个组件。
Vue.js 3.0编写一个插件
06-06
好的，下面是编写 Vue.js 3.0 插件的步骤： 1. 创建插件 在插件文件中，首先需要导出一个对象，该对象包含一个 install 函数。install 函数将在 Vue.use() 方法中调用。 ``` // plugin.js export default { install: function (Vue, options) { // your plugin code here } } ``` 2. 注册插件 接下来，在应用程序中注册插件。可以使用 Vue.use() 方法来完成此操作。 ``` // main.js import MyPlugin from './plugins/plugin.js' Vue.use(MyPlugin) ``` 3. 使用插件 安装插件后，就可以在 Vue 实例中使用插件。插件可以添加全局方法或混入，也可以添加实例方法。 ``` // component.vue export default { mounted() { this.$myPluginMethod() } } ``` 以上就是 Vue.js 3.0 编写插件的基本步骤。在 install 函数中，可以添加任何功能。例如，添加一个全局方法： ``` export default { install: function (Vue, options) { Vue.myGlobalMethod = function () { console.log('Hello from my global method!') } } } ``` 这样就可以在 Vue 实例中使用该全局方法： ``` export default { mounted() { Vue.myGlobalMethod() } } ``` 希望能对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值