原生js开发指南

https://www.jianshu.com/p/e65c246beac1

在jQuery大量使用的环境下,目前网上的众多jQuery插件也能基本满足要求,但是在项目具体需求下,有时候依旧需要自己造轮子,本文介绍了如何不依赖jQuery等库进行原生JavsScript插件的编写。

插件需要满足的条件

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

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

4、结语

以上介绍了原生插件的基本框架的写法,在我的github上还提供了几个由jQuery插件转化过来的原生插件实例:

ColorDivideJS

domzoom.js

在这个基础框架基础上,可以扩展出符合项目具体要求的特定插件。同时这样的插件没有其他库依赖,也具有更强的复用性。

原生JavaScript插件编写指南(转载)的更多相关文章

  1. JavaScript插件编写指南

    在编写插件之前,大家要先了解做插件的几个要点: 插件需要满足的条件 一个可复用的插件需要满足以下条件: 插件自身的作用域与用户当前的作用域相互独立,也就是插件内部的私有变量不能影响使用者的环境变量: ...

  2. 开源原生JavaScript插件-CJPCD(省市区联动)

    一.前言 上两篇博客笔者对 JavaScript Module 模式,闭包等知识点做了简单介绍之后,我们今天开始正式开发一款属于自己的 JavaScript 插件.由于最近项目刚好用到地区选择这一块的 ...

  3. jquery插件编写【转载】

    如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...

  4. javascript插件编写小结

    写JS插件,最好是先通过HTML方式将展示结果显示出来,然后再封装成JS插件,将其画出来.JS模板如下: (function($){ $.fn.fnName = function(options){ ...

  5. Blender插件编写指南

    前言 Blender插件是Blender的利器, 用户可以使用各种插件扩充Blender的功能. Blender Python插件以bpy.props, bpy.types.Operator, bpy ...

  6. 如何定义一个高逼格的原生JS插件

    插件的需求 我们写代码,并不是所有的业务或者逻辑代码都要抽出来复用.首先,我们得看一下是否需要将一部分经常重复的代码抽象出来,写到一个单独的文件中为以后再次使用.再看一下我们的业务逻辑是否可以为团队服 ...

  7. 原生JS插件(超详细)

    作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高呢?当然是利用js纯原生的写法啦. ...

  8. 封装js插件学习指南

    封装js插件学习指南 1.原生JavaScript插件编写指南 => 传送门 2.如何定义一个高逼格的原生JS插件 =>传送门 3.手把手教你用原生JavaScript造轮子 =>  ...

  9. 如何开发原生的 JavaScript 插件(知识点+写法)

    一.前言 通过 "WWW" 原则我们来了解 JavaScript 插件这个东西 第一个 W "What" -- 是什么?什么是插件,我就不照搬书本上的抽象概念了 ...

随机推荐

  1. (1.13)mysql优化数据库对象

    (1.13)mysql优化数据库对象 1.mysql优化数据库对象 [1.1]数据库对象类型优化 select * from test1 procedure analyse(); ,); --不要为那 ...

  2. vc让界面保持最上层

    vc让界面保持最上层.事实上就一个函数就ok了, ::SetWindowPos(AfxGetMainWnd()->m_hWnd,HWND_TOPMOST,-1,-1,-1,-1,0);

  3. MySQL数据库查询操作进阶——多表查询

    多表查询 在大部分情况下,我们用到的表都是彼此相关联的,所以我们会有相当大的需求用到跨表的查询,这个时候我们就需要将相关联的表连起来做多表查询. 多表查询分为连表查询和子查询,连表查询即将相关联的表连 ...

  4. 技巧:低版本VS打开高版本VS创建的工程

    错误一:当用低版本VS打开高版本VS创建的工程时,会出现: 方案:将该工程的解决方案文件的后缀由xxx.sln改成了xxx.txt然后,查看其内容如下: Microsoft Visual Studio ...

  5. vue常用插件汇总

    UI-框架element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量 ...

  6. Kinect2.0获取数据

    最近事情真是多,今天抽空研究一下Kinec2.0的数据获取! 系统要求 https://developer.microsoft.com/en-us/windows/kinect/hardware-se ...

  7. SSH服务知识

    1.ssh介绍 SSH 是 Secure Shell Protocol 的简写,由 IETF 网络工作小组(Network Working Group )制定:在进行数据传输之前,SSH先对联机数据包 ...

  8. background-size的兼容性

    做响应式布局的时候,如果有背景图,我们当然希望他能够全屏100%显示,这样显得页面非常的爆满,不过这又出现了一个问题,图片的尺寸多大合适呢,现在的浏览器分辨率参差不齐,对于Firefox等高级的浏览器 ...

  9. TortoiseGit推送代码到Gerrit的过程

    gerrit的安装不在本博客的说明范围中,本博客阐述的是使用TortoiseGit 提交代码到gerrit上的步骤和配置. 一.Git 说明:这个工具只要用来做一个仿真的linux环境,可以执行大部分 ...

  10. Struts2漏洞利用工具下载(更新2017-V1.8版增加S2-045/S2-046)

    Struts2漏洞利用工具下载(已更新V1.8版) 2017-03-21:增加S2-046,官方发布S2-046和S2-045漏洞引发原因一样,只是利用漏洞的位置发生了变化,S2-046方式可能绕过部 ...