JavaScript插件化開發教學 （二）_javascript技巧

一，開頭分析

Hi，大家好！還記得前面的文章嗎------這個系列的開頭（JavaScript插件化開發教學一）。主要講述了以“jQuery的方式如何開發插件”，

那麼今天我們帶著昨天的疑問來繼續我們的插件開發之旅。之前的問題如下：

（1），如果專案技術選型換了這些插件又是強依賴「jQuery」機制，我們以前寫的插件將會不能用（假設不用jQuery的情況），如何做重構那？

（2），重構插件的關鍵邏輯，我們將如何組織那？

好了，帶著問題去學習今天的文章吧。

首先我不是否定“jQuery插件的方式”，其次是我們要從不同的角度分析問題，比如說“jQuery插件有以下優點”：

（1），把全部程式碼放在閉包(一個即時執行函數)裡此時閉包相當於一個私有作用域，外部無法存取到內部的信息，並且不會存在全域變數的污染情況。

（2），a) 避免全域依賴；b) 避免第三方破壞；c) 相容於jQuery運算元'$'和'jQuery '。

那我們重構將以什麼方式組織程式碼那，是物件導向的思想（OOP）那？還是過程化的思路進行到底那？還是兩者結合設計那？哈哈哈，繼續看下去。 。 。 。 。 。

二，重構昨天的例子

以下是昨天的Js部分原始碼部分：　

複製程式碼 程式碼如下:

(function($){
    $.fn.bigbear = function(opts){
        opts = $.extend({},$.fn.bigbear.defaults,opts) ;
        return this.each(function(){
            var elem = $(this) ;
            elem.find("span").text(opts["title"]) ;
            $.get(opts["url"],function(data){
                elem.find("div").text(data["text"]) ;
            }) ;
        }) ;
    } ;
    $.fn.bigbear.defaults = {
        title : "這是一個簡單的測試" ,
        url : "data.json"
    } ;
})(jQuery) ;

　我們來逐行分析一下：

　　先確定這個插件的功能

　　（1），顯示我們設定的標題文字資訊。

　　（2），動態透過非同步的方式取得內容資訊。

好了！需求明確就好展開討論了，從上面的程式碼不難看出邏輯組織很鬆散，過程化的思維很明顯，所以第一步就是把我們的功能需求

以類別的方式有效地組織起來。看如下重構後的程式碼：

複製程式碼 程式碼如下:

$(函數(){
    $("#bb").bigbear() ;
}) ;
（函數（$）{
    $.fn.bigbear = 函數(opts){
        opts = $.extend({},$.fn.bigbear.defaults,opts) ;
        回 this.each(function(){
            var elem = $(this) ;
            var bb = new BigBear(elem,opts) ;
            bb.getElem().trigger("data") ;
        }) ;
    } ;
    $.fn.bigbear.defaults = {
        title : "這是一個簡單的測試" ,
        url : "data.json"
    } ;
})(jQuery) ;
函數 BigBear(elem,opts){
    this.elem = elem ;
    this.opts = opts ;
    this.init() ;
} ;
var bbProto = BigBear.prototype ;
bbProto.getElem = function(){
    返回 this.elem ;
} ;
bbProto.getOpts = function(){
    返回 this.opts ;
} ;
bbProto.init = function(){
    var that = this ;
    this.getElem().on("data",function(){
        that._setTitle(that.getOpts()["標題"]) ;
        $.get(that.getOpts()["url"],function(結果){
            that.getElem().find("div").text(result["text"]) ;
        }) ;
    }) ;
} ;
bbProto._setTitle = 函數(文本){
    this.getElem().find("span").text(text) ;
} ;

呵呵，是不是程式碼多精彩，其實這種方式就是針對物件的角度看問題，先去分析功能需求，然後設計我們的類，雖然說我們不可能一下設計得非常出色，

但是看問題角度改變了，我們的程式碼競爭力變強了，以及更好地進行這樣我們的目的就達到了。

以下是摘自「Bootstrap」Js部分的相關源碼實現，如下圖：

不難看出類似的實作方式，透過類別來維護我們插件的主要邏輯。

（三），增加新功能，引出額外的類別

現在需求增加了，需要在體驗上感受到變化，載入資料時有「正在載入」效果。

實作思路可以這樣，在原始的內容區把文字設定成「裝載資料中。。。」的字樣，然後引入一個新的類，如下：

複製程式碼程式碼如下：

函數疊加（）{

} ;
var olProto = Overlay.prototype ;
olProto.show = function(){} ;
olProto.hide = function(){} ;
// 具體實作還沒寫完

好了，遮罩層已經有了，現在我們要怎麼整合進來？我們用組合的方式接入接入，如下：

複製程式碼程式碼如下：

 函數 BigBear(elem,opts){
     this.elem = elem ;
     this.opts = opts ;
     this.overlay = new Overlay() ;
     this.init() ;
 } ;
 var bbProto = BigBear.prototype ;
 bbProto.getElem = function(){
     返回 this.elem ;
 } ;
 bbProto.getOpts = function(){
     返回 this.opts ;
 } ;
 bbProto.init = function(){
     var that = this ;
     var loadText = "資料裝載量。。" ;
     this.getElem().on("data",function(){
         that._setTitle(that.getOpts()["標題"]) ;
         that.overlay.show() ;
         that.getElem().find("div").text(loadingText) ;
         $.get(that.getOpts()["url"],function(結果){
             that.overlay.hide() ;
             that.getElem().find("div").text(result["text"]) ;
         }) ;
     }) ;
 } ;
 bbProto._setTitle = 函數(文本){
     this.getElem().find("span").text(text) ;
 } ;

這只是為了我們的功能已經結束了，這樣寫的插件，我相信比第一個版本好很多，當然這不是最規範的實現，需要從細節上重構不斷，但這種方式是一種可選的開發外掛的方式。

以下是完整程式碼：

複製程式碼程式碼如下：

$(函數(){
    $("#bb").bigbear() ;
}) ;
（函數（$）{
    $.fn.bigbear = 函數(opts){
        opts = $.extend({},$.fn.bigbear.defaults,opts) ;
        返回 this.each(function(){
            var elem = $(this) ;
            var bb = new BigBear(elem,opts) ;
            bb.getElem().trigger("data") ;
        }) ;
    } ;
    $.fn.bigbear.defaults = {
        title : "這是一個簡單的測試" ,
        url : "data.json"
    } ;
})(jQuery) ;
函數 BigBear(elem,opts){
    this.elem = elem ;
    this.opts = opts ;
    this.overlay = new Overlay() ;
    this.init() ;
} ;
var bbProto = BigBear.prototype ;
bbProto.getElem = function(){
    返回 this.elem ;
} ;
bbProto.getOpts = function(){
    返回 this.opts ;
} ;
bbProto.init = function(){
    var that = this ;
    var loadText = "資料裝載量。。" ;
    this.getElem().on("data",function(){
        that._setTitle(that.getOpts()["標題"]) ;
        that.overlay.show() ;
        that.getElem().find("div").text(loadingText) ;
        $.get(that.getOpts()["url"],function(結果){
            that.overlay.hide() ;
            that.getElem().find("div").text(result["text"]) ;
        }) ;
    }) ;
} ;
bbProto._setTitle = 函數(文本){
    this.getElem().find("span").text(text) ;
} ;
函數最大值（）{
} ;
var olProto = Overlay.prototype ;
olProto.show = function(){} ;
olProto.hide = function(){} ;
// 具體實作還沒寫完

本文暫時先到這裡了，小夥伴們是否對插件化開發javascript有了新的認識了呢。