分类导航

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

发布时间：2016年11月04日

一、前言

通过 "WWW" 原则我们来了解 JavaScript 插件这个东西

第一个 W "What" -- 是什么?什么是插件,我就不照搬书本上的抽象概念了,我个人简单理解就是,能方便实现某个功能的扩展工具.(下面我会通过简单的例子来帮助读者理解)

第二个 W "Why" -- 为什么? 为什么要有插件这种东西,首先结合第一个 W 来理解就是,使用插件的目的是方便我们实现某一个功能. 也就是说在编程过程中我们只需要找轮子,或者改轮子而不需要重新造轮子.节省开发时间,并且各司其职会更加专业(做得更好)。其次就是方便维护，因为每个功能模块可以分得更清楚，所谓的松耦合。

第三个 W "How" -- 如何做?我们如何开发 JavaScript 插件?这是我们这片文章要谈论的重点.

二、准备知识

在讨论如何做之前我们不妨先通过反向思维来看看插件的特点。我们从如何使用 Javascript 插件开始。

假设我们现在要使用插件 js-plugin.js

第一步：引入插件，注意依赖项，例如有些插件是基于 jquery 编写的，先引入 jquery

第二步：通过插件提供的 API 实现我们所要的业务

以经典的 jquery 使用方法为例

<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script> $(function(){
        $("#Id").html('hello world!');
    }) </script>

顺便说一句，能使用CDN的尽量使用CDN,这将使你的资源加载得更快.并节省你主机的带宽开销传送门: BootCDN

上述两点其实也就是说我们的插件要做到，引入相关文件就可以方便地进行使用。换句话说插件必须满足下面的特点：

首先，我觉得插件最重要的一点 -- 复用性。就是说你这个插件在这个项目中是能用的，搬到另一个项目中它也是能用的（废话），并且原则上依赖项越少越好

其次，我觉得这是插件的宗旨 -- 易用性。开发一个插件，如果使用繁琐，倒不如重新造轮子，那就失去了插件的意义。

除此之外，当然还有高效性，考虑执行的效率还有内存的优化。

三、Module 模式

插件开发不得不提的是 Modlule 模式，Module -- 模块，模块化开发，是在编程中十分通用的模式。说白了就是把业务需求分模块。每一个模块负责一个功能的实现。有点像其他面向对象编程语言中的类。例如 JsonHelper 专门负责 json 解析，FilesUpload,专门用来做文件上传的，等等这些。

插件就是用这样一种模块化思想来进行开发的，下面我们通过代码来简单解释下 Module 模式。

分类导航

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