JavaScript插件编写指南

简介: 在编写插件之前,大家要先了解做插件的几个要点:插件需要满足的条件一个可复用的插件需要满足以下条件:插件自身的作用域与用户当前的作用域相互独立,也就是插件内部的私有变量不能影响使用者的环境变量;插件需具备默认设置参数;插件除了具备已实现的基本功能外,需提供部分API,使用者可以通过该API修改插件功能的默认参数,从而实现用户自定义插件效果;插件需提供监听入口,及针对指定元素进行监听,使得该元素与插件响应达到插件效果;插件支持链式调用。

在编写插件之前,大家要先了解做插件的几个要点:

插件需要满足的条件

一个可复用的插件需要满足以下条件:

  1. 插件自身的作用域与用户当前的作用域相互独立,也就是插件内部的私有变量不能影响使用者的环境变量;
  2. 插件需具备默认设置参数;
  3. 插件除了具备已实现的基本功能外,需提供部分API,使用者可以通过该API修改插件功能的默认参数,从而实现用户自定义插件效果;
  4. 插件需提供监听入口,及针对指定元素进行监听,使得该元素与插件响应达到插件效果;
  5. 插件支持链式调用。

以下便针对这几点要求进行逐个讲解,以实现自定义的插件。

1、插件全局函数

实现私有作用域,最好的办法就是使用闭包。可以把插件当做一个函数,插件内部的变量及函数的私有变量,为了在调用插件后依旧能使用其功能,闭包的作用就是延长函数(插件)内部变量的生命周期,使得插件函数可以重复调用,而不影响用户自身作用域。

故需将插件的所有功能写在一个立即执行函数中:

(function () { 
//插件所有功能都写在这个函数下 
})();

2、插件默认参数

插件的主要功能可以总结至几个关键参数,通过这几个关键参数即可修改插件的主要功能,也是第三步API设置的关键参数。

将默认参数放置在全局函数的最前面,参数变量名为options,通过对象字面量进行赋值:

var options = {
    key1: para1,
    key2: para2,
    key3: para3,
    ...
    keyn: paran
}

key即为可以插件变量名字,para为该变量对应的值。如我需要编写一个设置颜色的插件,默认颜色为黑色,option应为:

var options = {
    color: '#333333'
}

编写功能部分时调用方式:options.color

3、插件API、参数设置和监听

因为API指向的是使用者,故需要在用户调用插件时将API暴露给用户,因用户API时是通过插件提供的名字进行使用,故将API设置为Object类型,用户就可以通过调用API的key进行使用,具体的代码如下:

var api = {
    config: function(ops) {
        //....
        return this;
    },
    listen: function listen(elem) {
        //...
        return this;
    },
    feature1: function() {
        //...
    },
    feature2: function() {
        //...
    }
}
this.pluginName = api;

上面提供了api的写法示范,该api提供了config以设置自定义参数,listen为插件监听的dom操作,feature为插件的主要功能,使用options参数的功能都要写在api下,注意api.configapi.listen两个函数都应该在最后返回this,以便实现插件的链式调用。

有了上面的框架,针对config设置函数的写法就有了明确的要求:在用户没有传入自定义函数时,默认使用上一节options中的参数,如果用户有设置config参数,使用用户自定义参数:

config: function(opts) {
    //没有参数传入,直接返回默认参数
    if (!opts) return options;
    //有参数传入,通过key将options的值更新为用户的值
    for (var key in opts) {
        options[key] = opts[key];
    }
    return this;
}

针对元素的监听listen,需要对所有符合条件的dom元素进行监听:

listen: function listen(elem) {
    //这里通过typeof设置监听的元素需为字符串调用,实际可根据需要进行更改
    if (typeof elem === 'string') {
        //这里使用ES5的querySelectorAll方法获取dom元素
        var elems = document.querySelectorAll(elem),
            i = elems.length;
        //通过递归将listen方法应用在所有的dom元素上
        while (i--) {
            listen(elems[i]);
        }
        return
    }
    //在这里,你可以将插件的部分功能函数写在这里

    return this;
}

在config和listen这两个最基本的API完成后,需要将API与插件的名字结合起来:

this.pluginName = api;

则最基本的API如下:

var api = {
    //插件参数设定
    config: function(opts) {
        if (!opts) return options;
        for (var key in opts) {
            options[key] = opts[key];
        }
        return this;
    },
    //插件监听
    listen: function listen(elem) {
        if (typeof elem === 'string') {
            var elems = document.querySelectorAll(elem),
                i = elems.length;
            while (i--) {
                listen(elems[i]);
            }
            return
        }
        //插件功能函数可以写在这
        return this;
    }
}
//将API赋值给插件名字
this.pluginName = api;

则用户使用该插件时,调用方式为:

pluginName.listen('#demo');

如需要自定义参数:

pluginName.config({
    key: 'para'
}).listen('#demo');
//因为config和listen已经返回this,所有可以这样调用:
pluginName.listen('#demo').config({
    key: 'para'
});
//还可以这样调用:
pluginName.config({
        key: 'para'
    })
    .listen('#demo');
目录
相关文章
|
6月前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
163 0
|
6月前
|
JavaScript 前端开发 安全
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
154 0
|
2天前
|
JavaScript 前端开发
javascript开发的简单的弹幕插件
这是一个原生javascript开发的简单的弹幕插件,具有美观、易用,占用的资源较低等特点,可以给弹幕设置内容、颜色、头像、链接地址等属性,鼠标悬停等,简单实用,欢迎下载!
18 5
|
3天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
12 0
|
14天前
|
存储 JSON JavaScript
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
31 0
|
3月前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
84 1
|
3月前
|
JavaScript 前端开发 测试技术
[译] 用 Vue.js 3 Composition API 创建 i18n 插件
[译] 用 Vue.js 3 Composition API 创建 i18n 插件
|
4月前
|
JavaScript 前端开发 API
Chrome插件实现问题之 content_script.js能做什么
Chrome插件实现问题之 content_script.js能做什么
|
4月前
|
JavaScript
js好用的动态分页插件
js好用的动态分页插件是一款简单的分页样式插件,支持样式类型,当前页,每页显示数量,按钮数量,总条数,上一页文字,下一页文字,输入框跳转等功能。
40 1
|
4月前
|
JavaScript
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
224 0