如何開發(fā)原生的 JavaScript 插件(知識點+寫法)

一、前言

通過 "WWW" 原則我們來了解 JavaScript 插件這個東西

第一個 W "What" -- 是什么?什么是插件,我就不照搬書本上的抽象概念了,我個人簡單理解就是,能方便實現(xiàn)某個功能的擴展工具.(下面我會通過簡單的例子來幫助讀者理解)

第二個 W "Why" -- 為什么? 為什么要有插件這種東西,首先結(jié)合第一個 W 來理解就是,使用插件的目的是方便我們實現(xiàn)某一個功能. 也就是說在編程過程中我們只需要找輪子,或者改輪子而不需要重新造輪子.節(jié)省開發(fā)時間,并且各司其職會更加專業(yè)(做得更好)。其次就是方便維護(hù)，因為每個功能模塊可以分得更清楚，所謂的松耦合。

第三個 W "How" -- 如何做?我們?nèi)绾伍_發(fā) JavaScript 插件?這是我們這片文章要談?wù)摰闹攸c.

二、準(zhǔn)備知識

在討論如何做之前我們不妨先通過反向思維來看看插件的特點。我們從如何使用 Javascript 插件開始。

假設(shè)我們現(xiàn)在要使用插件 js-plugin.js

第一步：引入插件，注意依賴項，例如有些插件是基于 jquery 編寫的，先引入 jquery

第二步：通過插件提供的 API 實現(xiàn)我們所要的業(yè)務(wù)

以經(jīng)典的 jquery 使用方法為例 

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

順便說一句，能使用CDN的盡量使用CDN,這將使你的資源加載得更快.并節(jié)省你主機的帶寬開銷 傳送門: BootCDN

上述兩點其實也就是說我們的插件要做到，引入相關(guān)文件就可以方便地進(jìn)行使用。換句話說插件必須滿足下面的特點：

首先，我覺得插件最重要的一點 -- 復(fù)用性。就是說你這個插件在這個項目中是能用的，搬到另一個項目中它也是能用的（廢話），并且原則上依賴項越少越好

其次，我覺得這是插件的宗旨 -- 易用性。開發(fā)一個插件，如果使用繁瑣，倒不如重新造輪子，那就失去了插件的意義。

除此之外，當(dāng)然還有高效性，考慮執(zhí)行的效率還有內(nèi)存的優(yōu)化。

三、Module 模式

插件開發(fā)不得不提的是 Modlule 模式，Module -- 模塊，模塊化開發(fā)，是在編程中十分通用的模式。說白了就是把業(yè)務(wù)需求分模塊。每一個模塊負(fù)責(zé)一個功能的實現(xiàn)。有點像其他面向?qū)ο缶幊陶Z言中的類。例如 JsonHelper 專門負(fù)責(zé) json 解析，F(xiàn)ilesUpload,專門用來做文件上傳的，等等這些。

插件就是用這樣一種模塊化思想來進(jìn)行開發(fā)的，下面我們通過代碼來簡單解釋下 Module 模式。