一、前言

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

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

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

第三個 W "How" -- 如何做?我們如何開發 JavaScript 插件?這是我們這片文章要談論的重點.

二、準備知識

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

假設我們現在要使用插件 js-plugin.js

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

第二步：通過插件提供的 API 實現我們所要的業務

以經典的 jquery 使用方法爲例

<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>

<script>

$(function(){

$("#Id").html('hello world!');

})

</script>

<div id="Id"></div>

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

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

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

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

除此之外，當然還有高效性，考慮執行的效率還有內存的優化。

三、模塊開發模式

插件開發不得不提的是 Modlule 模式，Module -- 模塊，模塊化開發，是在編程中十分通用的模式。說白了就是把業務需求分模塊。每一個模塊負責一個功能的實現。有點像其他面向對象編程語言中的類。例如 JsonHelper 專門負責 json 解析，FilesUpload,專門用來做文件上傳的，等等這些。

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

var HelloWorld = function(objId){

var _get_dom = function(Id){

return document.getElementById(Id);

}

var _aim_obj = _get_dom(objId);

var _say_hello = function(str){

_aim_obj.innerHTML = str;

}

return{

sayHello:_say_hello

}

由上述代碼可見，我們將某些功能，如 “sayHello” 給歸到 HelloWorld （模塊）中了。當然我們可以繼續在下面添加其他功能，但都歸於模塊 HelloWorld 來管理。這就是 Module 的體現。

使用方法（注意這裏使用了 new ）

var Hei = new HelloWorld('hello');

Hei.sayHello('Hello Word');

var Hei2 = new HelloWorld('hi');

Hei2.sayHello('hi');

更直觀點，我們來看下完整的代碼

<!DOCTYPE html>

<html>

<head>

<title>Module</title>

</head>

<body>

<div Id="hello"></div>

<div Id="hi"></div>

<script type="text/javascript">

var HelloWorld = function(objId){

var _get_dom = function(Id){

return document.getElementById(Id);

}

var _aim_obj = _get_dom(objId);

var _say_hello = function(str){

_aim_obj.innerHTML = str;

}

return{

sayHello:_say_hello

}

var Hei = new HelloWorld('hello');

Hei.sayHello('Hello World');

var Hei = new HelloWorld('hi');

Hei.sayHello('hi');

</script>

</body>

</html>

運行結果如下

我們這裏需要注意的是，每使用 new 創建出來的新對象都將開闢新的內存空間（新的一份copy），只要引用沒有釋放，那麼該對象的佔用的內存空間將不會被回收。那麼如何避免過多浪費內存呢？一句話“釋放引用”，只需要釋放對該對象的所有引用，垃圾回收機制就會將該對象佔用的內存空間回收。

var Hei = new HelloWorld('hello');

Hei.sayHello('Hello World');

Hei = null;//解除引用

這樣還要“手動”內存管理，麻煩。如何讓該模塊在內存中只保留一份（copy）呢？請看下面一段代碼

var HelloWorld = (function(){

var _getDom = function(Id){

return document.getElementById(Id)

}

var _sayHello = function(Id,str){

_getDom(Id).innerHTML = str;

}

return {

getDom:_getDom,

sayHello:_sayHello

}

}())

使用方法

1	`HelloWorld.sayHello('hello','hello text');`

是的,正如你所見到的,不需要 new 了。使用時不再需要創建新對象，也就是說我們只保持了該對象在內存中的一份引用，也就是HelloWorld 對它的引用。當 HelloWorld 對其引用解除時其所佔用的內存將得到釋放。上述代碼實質上是一個匿名閉包。如果對閉包不是很理解的朋友可以看看我寫的上一篇文章《淺析 JavaScript 中的閉包(Closures)》

四、插件基礎代碼

瞭解了上面的種種之後我們要開始直切主題了。

首先我們創建一個 js 文件取名爲 first-js-plugin.js(啥名字都行)，鍵入以下代碼

;

var plugin =(function(){

function _firstFunc(str){

console.log(str);

};

return{

firstFunc: _firstFunc,

};

})();

再創建一個 HTML頁面取名爲 pluginTest.html (啥名字都行)

完整代碼如下

<!DOCTYPE html>

<html>

<head>

<title></title>

<script type="text/javascript" src="./first-js-plugin.js"></script>

<script type="text/javascript">

plugin.firstFunc("Hello ! I am firstFunc");

</script>

</head>

<body>

</body>

</html>

運行結果如下圖顯示

通過這個簡單的插件，我們來分析一下里面的代碼.

在分析代碼之前我們先來了解另一個東西,自調用匿名函數(防止插件用戶定義函數與插件衝突)

(function(){

//code

})();

可能有些童鞋會覺得有點陌生,那看下下面的代碼

var func = function(){

//code

}

func();

其實這兩段代碼是等價的,當然有點差別,第一個是匿名函數.作用都是定義一個函數並立即執行.

(function(){

//code

})();

代碼分析:

最後面的小括號 () 表示執行該函數
(匿名函數) 小括號(分組表達式)包起來匿名函數的聲明,作用相當是將函數聲明轉爲表達式,這樣才能執行,僅此而已

如果採取以下寫法

function(){

//code

}();

編譯器報錯,問題是函數聲明無法執行,表達式才能執行

搞清楚這些之後我們回頭給下面的代碼加上分析,如下

;//JavaScript 弱語法的特點,如果前面剛好有個函數沒有以";"結尾,那麼可能會有語法錯誤

    /*
     plugin.api_funcs 給對象設置屬性,屬性值爲 自調用匿名函數
     這裏涉及到js作用域鏈以及閉包的知識點
    */    
    var plugin =(function(){
        function _firstFunc(str){
            alert(str);
        };
        
        //返回API
        return{
            firstFunc: _firstFunc
        };
    })();

我們將代碼抽取一下(只爲幫助理解，已經理解的朋友請忽略)

//01.定義變量

var plugin = 某對象;

//02.創建對象並返回

(function(){//code;return ...})();//匿名執行函數 return 某對象

//然後看核心的返回

return{firstFunc: _firstFunc};

//說白了就是,通過某個key將一個函數存儲起來.使用時通過key訪問到這個函數

var plugin = {key:function(){//code}}

//所以最終的體現如下

var plugin = {firstFunc: “具體的函數引用”}

所以我們最後才能通過，插件名.屬性 來使用插件，正如：

1	`plugin.firstFunc("Hello ! I am firstFunc");`

五、插件的幾種寫法

這裏我就不墨跡了,直接上代碼,關鍵處會給註釋

面向對象思想類方式

//自定義類

function plugin(){}

//提供默認參數

plugin.prototype.str = "default param";

//提供方法(如果不傳參,則使用默認參數)

plugin.prototype.firstFunc = function(str = this.str){

alert(str);

}

//創建"對象"

var p = new plugin();

//調用方法

p.firstFunc("Hello ! I am firstFunc");//Hello ! I am firstFunc

p.firstFunc();//default param

2.閉包方式

閉包方式就是我們剛剛一直在介紹

var plugin =(function(){

function _firstFunc(str){

alert(str);

};

return{

firstFunc: _firstFunc,

};

})();

3.第二種方式上的一些變化

(function(){

//定義一些默認參數

var _options={

default_word:"default hello"

}

//定義一些api

var _plugin_api = {

firstFunc:function(str = _options.default_word){

alert(str);

return this;//返回當前方法

},

secondFunc:function(){

alert("secondFunc");

return this;//返回當前方法

}

//這裏確定了插件的名稱

this.CJPlugin = _plugin_api;

})();

CJPlugin.firstFunc("hello");//hello

CJPlugin.firstFunc();//default hello

CJPlugin.secondFunc();//secondFunc

轉自：https://www.cnblogs.com/cboyce/p/6029782.html

分類: JavaScript, 前端框架

LucasLi2016

發佈了23 篇原創文章 · 獲贊 1 · 訪問量 4萬+

私信關注

JavaScript插件開發

一、前言

二、準備知識

三、模塊開發模式

四、插件基礎代碼

五、插件的幾種寫法

面向對象思想類方式

2.閉包方式

3.第二種方式上的一些變化

Spring基礎(很全面）

Docker高級

前端工程搭建

linux常用網絡操作

Docker搭建項目管理系統Redmine（超簡單吶）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

JavaScript插件開發

一、前言

二、準備知識

三、模塊開發模式

四、插件基礎代碼

五、插件的幾種寫法

面向對象思想 類方式

2.閉包方式

3.第二種方式上的一些變化

面向對象思想類方式