欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript插件化開發(fā)教程 （二）

 更新時(shí)間：2015年01月27日 14:45:05   投稿：hebedich  
本系列的開篇文章我們一起探討了jQuery如何開發(fā)插件，今天這篇文章，我們來繼續(xù)插件開發(fā)之旅，希望大家能夠喜歡。

一，開篇分析

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

那么今天我們帶著昨天的疑問來繼續(xù)我們的插件開發(fā)之旅。之前的問題如下：

（1），如果項(xiàng)目技術(shù)選型換了這些插件又是強(qiáng)依賴“jQuery”機(jī)制，我們以前寫的插件將會(huì)不能用（假設(shè)不用jQuery的情況），如何做重構(gòu)那？

（2），重構(gòu)插件的關(guān)鍵邏輯，我們將如何組織那？

好了，帶著問題去學(xué)習(xí)今天的文章吧。

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

（1），把全部代碼放在閉包(一個(gè)即時(shí)執(zhí)行函數(shù))里此時(shí)閉包相當(dāng)于一個(gè)私有作用域，外部無法訪問到內(nèi)部的信息，并且不會(huì)存在全局變量的污染情況。

（2），a) 避免全局依賴；b) 避免第三方破壞；c) 兼容jQuery操作符'$'和'jQuery '。

那我們重構(gòu)將以什么方式組織代碼那，是面向?qū)ο蟮乃枷耄∣OP）那？還是過程化的思路進(jìn)行到底那？還是兩者結(jié)合設(shè)計(jì)那？哈哈哈，繼續(xù)看。。。。。。

二，重構(gòu)昨天的例子

以下是昨天的Js部分源碼部分：　

復(fù)制代碼 代碼如下:

(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 : "這是一個(gè)簡單的測(cè)試" ,
        url : "data.json"
    } ;
})(jQuery) ;

　我們來逐行分析一下：

　　首先確定一下這個(gè)插件的功能

　　（1），顯示我們?cè)O(shè)置的標(biāo)題文字信息。

　?。?），動(dòng)態(tài)通過異步的方式獲取內(nèi)容信息。

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

以類的方式有效地組織起來?？慈缦轮貥?gòu)后的代碼：

復(fù)制代碼 代碼如下:

$(function(){
    $("#bb").bigbear() ;
}) ;
(function($){
    $.fn.bigbear = function(opts){
        opts = $.extend({},$.fn.bigbear.defaults,opts) ;
        return this.each(function(){
            var elem = $(this) ;
            var bb = new BigBear(elem,opts) ;
            bb.getElem().trigger("data") ;
        }) ;
    } ;
    $.fn.bigbear.defaults = {
        title : "這是一個(gè)簡單的測(cè)試" ,
        url : "data.json"
    } ;
})(jQuery) ;
function BigBear(elem,opts){
    this.elem = elem ;
    this.opts = opts ;
    this.init() ;
} ;
var bbProto = BigBear.prototype ;
bbProto.getElem = function(){
    return this.elem ;
} ;
bbProto.getOpts = function(){
    return this.opts ;
} ;
bbProto.init = function(){
    var that = this ;
    this.getElem().on("data",function(){
        that._setTitle(that.getOpts()["title"]) ;
        $.get(that.getOpts()["url"],function(result){
            that.getElem().find("div").text(result["text"]) ;
        }) ;
    }) ;
} ;
bbProto._setTitle = function(text){
    this.getElem().find("span").text(text) ;
} ;

　　哈哈哈，是不是代碼多了不少，其實(shí)這種方式就是面向?qū)ο蟮慕嵌瓤磫栴}，先去分析功能需求，然后設(shè)計(jì)我們的類，雖然說我們不可能一下設(shè)計(jì)得很出色，

但是看問題角度改變了，我們的代碼可讀性強(qiáng)了，以及更好地進(jìn)行維護(hù)這樣我們的目的也就達(dá)到了。

　　以下是是摘自“Bootstrap”Js部分的相關(guān)源碼實(shí)現(xiàn)，如下圖：

不難看出也是相似的實(shí)現(xiàn)方式，通過類來維護(hù)我們插件的主要邏輯。

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

　　現(xiàn)在需求增加了，需要在體驗(yàn)上有所變化，加載數(shù)據(jù)時(shí)有“l(fā)oading”效果。

　　實(shí)現(xiàn)思路可以這樣，在原始的內(nèi)容區(qū)把文字設(shè)置成“裝載數(shù)據(jù)中。。。?！钡淖謽?，然后引入一個(gè)新的類，如下：

復(fù)制代碼 代碼如下:

function Overlay(){

} ;
var olProto = Overlay.prototype ;
olProto.show = function(){} ;
olProto.hide = function(){} ;
// 具體實(shí)現(xiàn)就不寫了

　　好了，遮罩層已經(jīng)有了，現(xiàn)在我們?cè)趺醇蛇M(jìn)來那？我們用組合的方式接入進(jìn)來，如下：

復(fù)制代碼 代碼如下:

 function BigBear(elem,opts){
     this.elem = elem ;
     this.opts = opts ;
     this.overlay = new Overlay() ;
     this.init() ;
 } ;
 var bbProto = BigBear.prototype ;
 bbProto.getElem = function(){
     return this.elem ;
 } ;
 bbProto.getOpts = function(){
     return this.opts ;
 } ;
 bbProto.init = function(){
     var that = this ;
     var loadingText = "數(shù)據(jù)裝載中。。。" ;
     this.getElem().on("data",function(){
         that._setTitle(that.getOpts()["title"]) ;
         that.overlay.show() ;
         that.getElem().find("div").text(loadingText) ;
         $.get(that.getOpts()["url"],function(result){
             that.overlay.hide() ;
             that.getElem().find("div").text(result["text"]) ;
         }) ;
     }) ;
 } ;
 bbProto._setTitle = function(text){
     this.getElem().find("span").text(text) ;
 } ;

　　到此只為我們的功能就算是結(jié)束了，這樣寫的插件，我相信比第一個(gè)版本好很多，當(dāng)然這不是最優(yōu)的實(shí)現(xiàn)，需要從細(xì)節(jié)上不斷重構(gòu)，但是這種方式是一種可選的開發(fā)插件的方式。

　　以下是完整的代碼：

復(fù)制代碼 代碼如下:

$(function(){
    $("#bb").bigbear() ;
}) ;
(function($){
    $.fn.bigbear = function(opts){
        opts = $.extend({},$.fn.bigbear.defaults,opts) ;
        return this.each(function(){
            var elem = $(this) ;
            var bb = new BigBear(elem,opts) ;
            bb.getElem().trigger("data") ;
        }) ;
    } ;
    $.fn.bigbear.defaults = {
        title : "這是一個(gè)簡單的測(cè)試" ,
        url : "data.json"
    } ;
})(jQuery) ;
function BigBear(elem,opts){
    this.elem = elem ;
    this.opts = opts ;
    this.overlay = new Overlay() ;
    this.init() ;
} ;
var bbProto = BigBear.prototype ;
bbProto.getElem = function(){
    return this.elem ;
} ;
bbProto.getOpts = function(){
    return this.opts ;
} ;
bbProto.init = function(){
    var that = this ;
    var loadingText = "數(shù)據(jù)裝載中。。。" ;
    this.getElem().on("data",function(){
        that._setTitle(that.getOpts()["title"]) ;
        that.overlay.show() ;
        that.getElem().find("div").text(loadingText) ;
        $.get(that.getOpts()["url"],function(result){
            that.overlay.hide() ;
            that.getElem().find("div").text(result["text"]) ;
        }) ;
    }) ;
} ;
bbProto._setTitle = function(text){
    this.getElem().find("span").text(text) ;
} ;
function Overlay(){
} ;
var olProto = Overlay.prototype ;
olProto.show = function(){} ;
olProto.hide = function(){} ;
// 具體實(shí)現(xiàn)就不寫了

本文暫時(shí)先到這里了，小伙伴們是否對(duì)插件化開發(fā)javascript有了新的認(rèn)識(shí)了呢。

相關(guān)文章

  • 頂部緩沖下拉菜單導(dǎo)航特效的JS代碼

    頂部緩沖下拉菜單導(dǎo)航特效的JS代碼

    這篇文章介紹了頂部緩沖下拉菜單導(dǎo)航特效的JS代碼，有需要的朋友可以參考一下
    2013-08-08
  • javascript 獲取多條數(shù)據(jù)(模擬ajax獲取數(shù)據(jù))

    javascript 獲取多條數(shù)據(jù)(模擬ajax獲取數(shù)據(jù))

    javascript 獲取多條數(shù)據(jù)(模擬ajax獲取數(shù)據(jù)),這樣的好處不用額外的ajax讀取鏈接，減輕服務(wù)器負(fù)擔(dān)。
    2009-06-06
  • 使用pkg打包ThinkJS項(xiàng)目的方法步驟

    使用pkg打包ThinkJS項(xiàng)目的方法步驟

    這篇文章主要介紹了使用pkg打包ThinkJS項(xiàng)目的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-12-12
  • Window.Open打開窗體和if嵌套代碼

    Window.Open打開窗體和if嵌套代碼

    這篇文章主要介紹了Window.Open打開窗體和if嵌套代碼的相關(guān)資料,需要的朋友可以參考下
    2016-04-04

    • 最新評(píng)論