如何開(kāi)發(fā)原生的 JavaScript 插件(知識(shí)點(diǎn)+寫(xiě)法)
一、前言
通過(guò) "WWW" 原則我們來(lái)了解 JavaScript 插件這個(gè)東西
第一個(gè) W "What" -- 是什么?什么是插件,我就不照搬書(shū)本上的抽象概念了,我個(gè)人簡(jiǎn)單理解就是,能方便實(shí)現(xiàn)某個(gè)功能的擴(kuò)展工具.(下面我會(huì)通過(guò)簡(jiǎn)單的例子來(lái)幫助讀者理解)
第二個(gè) W "Why" -- 為什么? 為什么要有插件這種東西,首先結(jié)合第一個(gè) W 來(lái)理解就是,使用插件的目的是方便我們實(shí)現(xiàn)某一個(gè)功能. 也就是說(shuō)在編程過(guò)程中我們只需要找輪子,或者改輪子而不需要重新造輪子.節(jié)省開(kāi)發(fā)時(shí)間,并且各司其職會(huì)更加專(zhuān)業(yè)(做得更好)。其次就是方便維護(hù)，因?yàn)槊總€(gè)功能模塊可以分得更清楚，所謂的松耦合。
第三個(gè) W "How" -- 如何做?我們?nèi)绾伍_(kāi)發(fā) JavaScript 插件?這是我們這片文章要談?wù)摰闹攸c(diǎn).
二、準(zhǔn)備知識(shí)
在討論如何做之前我們不妨先通過(guò)反向思維來(lái)看看插件的特點(diǎn)。我們從如何使用 Javascript 插件開(kāi)始。
假設(shè)我們現(xiàn)在要使用插件 js-plugin.js
第一步：引入插件，注意依賴(lài)項(xiàng)，例如有些插件是基于 jquery 編寫(xiě)的，先引入 jquery
第二步：通過(guò)插件提供的 API 實(shí)現(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>
順便說(shuō)一句，能使用CDN的盡量使用CDN,這將使你的資源加載得更快.并節(jié)省你主機(jī)的帶寬開(kāi)銷(xiāo) 傳送門(mén): BootCDN
上述兩點(diǎn)其實(shí)也就是說(shuō)我們的插件要做到，引入相關(guān)文件就可以方便地進(jìn)行使用。換句話說(shuō)插件必須滿(mǎn)足下面的特點(diǎn)：
首先，我覺(jué)得插件最重要的一點(diǎn) -- 復(fù)用性。就是說(shuō)你這個(gè)插件在這個(gè)項(xiàng)目中是能用的，搬到另一個(gè)項(xiàng)目中它也是能用的（廢話），并且原則上依賴(lài)項(xiàng)越少越好
其次，我覺(jué)得這是插件的宗旨 -- 易用性。開(kāi)發(fā)一個(gè)插件，如果使用繁瑣，倒不如重新造輪子，那就失去了插件的意義。
除此之外，當(dāng)然還有高效性，考慮執(zhí)行的效率還有內(nèi)存的優(yōu)化。
三、Module 模式
插件開(kāi)發(fā)不得不提的是 Modlule 模式，Module -- 模塊，模塊化開(kāi)發(fā)，是在編程中十分通用的模式。說(shuō)白了就是把業(yè)務(wù)需求分模塊。每一個(gè)模塊負(fù)責(zé)一個(gè)功能的實(shí)現(xiàn)。有點(diǎn)像其他面向?qū)ο缶幊陶Z(yǔ)言中的類(lèi)。例如 JsonHelper 專(zhuān)門(mén)負(fù)責(zé) json 解析，F(xiàn)ilesUpload,專(zhuān)門(mén)用來(lái)做文件上傳的，等等這些。
插件就是用這樣一種模塊化思想來(lái)進(jìn)行開(kāi)發(fā)的，下面我們通過(guò)代碼來(lái)簡(jiǎn)單解釋下 Module 模式。
