内容简介:原生JavaScript插件编写指南
在jQuery大量使用的环境下,目前网上的众多jQuery插件也能基本满足要求,但是在项目具体需求下,有时候依旧需要自己造轮子,本文介绍了如何不依赖jQuery等库进行原生JavsScript插件的编写。
插件需要满足的条件
一个可复用的插件需要满足以下条件:
- 插件自身的作用域与用户当前的作用域相互独立,也就是插件内部的私有变量不能影响使用者的环境变量;
- 插件需具备默认设置参数;
- 插件除了具备已实现的基本功能外,需提供部分API,使用者可以通过该API修改插件功能的默认参数,从而实现用户自定义插件效果;
- 插件需提供监听入口,及针对指定元素进行监听,使得该元素与插件响应达到插件效果;
- 插件支持链式调用。
以下便针对这四点要求进行逐个讲解,以实现自定义的原生插件。
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.config
和 api.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');
4、结语
以上介绍了原生插件的基本框架的写法,在我的github上还提供了几个由jQuery插件转化过来的原生插件实例:
在这个基础框架基础上,可以扩展出符合项目具体要求的特定插件。同时这样的插件没有其他库依赖,也具有更强的复用性。
(完)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- React Native 原生密码键盘插件
- Flutter插件开发《iOS原生模块开发》
- Layx 原生网页弹窗插件 v2.0.1 发布
- Layx 原生网页弹窗插件 v2.0.3 发布
- 原生 js 实现一个有动画效果的进度条插件 progress
- 如何用原生js来写一个swiper滑块插件(上)原理
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。