JavaScriptプラグイン開発チュートリアル(2)_JavaScriptスキル

1、分析を開始します

皆さん、こんにちは！前回の記事 -- このシリーズの始まり (JavaScript プラグイン開発チュートリアル 1) をまだ覚えていますか。主に「jQuery を使用したプラグインの開発方法」について説明します。

今日は、昨日の質問を踏まえてプラグイン開発の旅を続けます。過去の質問は次のとおりです:

(1) プロジェクトのテクノロジの選択が変更され、これらのプラグインが「jQuery」メカニズムに強く依存する場合、以前に作成したプラグインは使用できなくなります (jQuery が使用されていないことが前提)。リファクタリングするにはどうすればよいですか?

(2)、プラグインの主要なロジックをリファクタリングします。どのように整理しますか?

それでは、今日の記事について質問しながら勉強していきましょう。

第一に、私は「jQuery プラグイン方式」を否定しているわけではありません。第二に、「jQuery プラグインには次のような利点があります」というように、問題をさまざまな角度から分析する必要があります。

(1)、すべてのコードをクロージャ（即時実行関数）に入れる。このとき、クロージャはプライベートスコープに相当し、外部から内部の情報にアクセスすることはできず、汚染は起こらない。グローバル変数の。

(2)、a) グローバルな依存関係を回避します。b) サードパーティによる被害を回避します。c) jQuery 演算子 '$' および 'jQuery ' と互換性があります。

では、リファクタリングの際にコードをどのように整理すればよいのでしょうか? それはオブジェクト指向思考 (OOP) でしょうか?それとも最後までプロセスベースのアプローチに従うべきでしょうか?それとも、その 2 つの組み合わせですか?ハハハ、見守ってください。 。 。 。 。 。

2. 昨日の例を再構成します

以下は昨日の Js 部分のソースコードです:

コードをコピーします コードは次のとおりです:

(関数($){
$.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 = {
タイトル: 「これは簡単なテストです」
URL：「data.json」
} ;
})(jQuery) ;

一行ずつ分析してみましょう:

まずこのプラグインの機能を決定します

(1)、設定したタイトル文字情報を表示します。

(2)、コンテンツ情報を非同期で動的に取得します。

わかりました!要件が明確になったら、議論を開始できます。上記のコードから、論理構成が非常に緩やかで、手続き的な考え方が明らかであることが簡単にわかります。そのため、最初のステップは機能要件を示すことです

。

クラスを効率的に編成します。以下のリファクタリングされたコードを見てください:

コードをコピー コードは次のとおりです:

$(関数(){
    $("#bb").bigbear() ;
}) ;
(関数($){
    $.fn.bigbear = function(opts){
        opts = $.extend({},$.fn.bigbear.defaults,opts) ;
        return this.each(function(){
            var elem = $(this) ;
            var bb = 新しい BigBear(elem,opts) ;
            bb.getElem().trigger("データ") ;
        }) ;
    } ;
    $.fn.bigbear.defaults = {
        タイトル : "これは一简单的测试" ,
        URL : "data.json"
    } ;
})(jQuery) ;
function BigBear(elem,opts){
    this.elem = elem ;
    this.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("データ",function(){
        that._setTitle(that.getOpts()["タイトル"]) ;
        $.get(that.getOpts()["url"],function(result){
            that.getElem().find("div").text(result["text"]) ;
        }) ;
    }) ;
} ;
bbProto._setTitle = function(text){
    this.getElem().find("span").text(テキスト) ;
} ;

哈哈哈，是不代多了不少，其种此方法是面的対象的角度視问题，先去分析機能需要，然后设计我们的类，虽然说我们不可能次设计得很出色，

しかし、問題の角度が変わったことに注目して、私たちのコードの可用性が改善され、より適切に実行されることで、このような私たちの目的は達成されました。

以下は「Bootstrap」Js 部分の関連ソースコード实现、以下の図：

これも同様の実現方法であり、クラスを介して私たちのアプリケーションの主要な概念を保護します。

（三）、新機能の追加、外部の種類の引き出し

要求が追加されると、要求がボディテスト上で変化し、データを追加すると「ロード」効果が生じます。

このようにして思考回路を実行すると、元のコンテンツ領域に「データをロードします。。」の文字が配置され、次に次のように新しい種類が挿入されます。

复制代 代码如下: 関数オーバーレイ(){

} ;
var olProto = Overlay.prototype ; olProto.show = function(){} ;

olProto.hide = function(){} ;
// 具体实现就不写了



好了，遮罩层已经有了，现在我们怎么集成进来那?我们用組合的方式接进来，如下：

复制代码代码如下:

 function BigBear(elem,opts){
     this.elem = elem ;
     this.opts = オプト ;
     this.overlay = 新しい Overlay() ;
     this.init() ;
 } ;
 var bbProto = BigBear.prototype ;
 bbProto.getElem = function(){
     this.elem を返します ;
 } ;
 bbProto.getOpts = function(){
     this.opts を返します ;
 } ;
 bbProto.init = function(){
     var that = this ;
     varloadText = "データ実装中。。。" ;
     this.getElem().on("データ",function(){
         that._setTitle(that.getOpts()["タイトル"]) ;
         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(テキスト) ;
 } ;

此処まで我们の機能就算是了了，这样写的插件，我相信比第一版本好很多，当然これ不最好的实现，需要軎细节上不断重构，但是此方式

は、選択可能な公開コンポーネントの方法の 1 つです。

以下は完全な代コード：

复制代 代码如下:

$(関数(){
    $("#bb").bigbear() ;
}) ;
(関数($){
    $.fn.bigbear = function(opts){
        opts = $.extend({},$.fn.bigbear.defaults,opts) ;
        return this.each(function(){
            var elem = $(this) ;
            var bb = 新しい BigBear(elem,opts) ;
            bb.getElem().trigger("データ") ;
        }) ;
    } ;
    $.fn.bigbear.defaults = {
        タイトル : "これは一简单的测试" ,
        URL : "data.json"
    } ;
})(jQuery) ;
function BigBear(elem,opts){
    this.elem = elem ;
    this.opts = オプト ;
    this.overlay = 新しい Overlay() ;
    this.init() ;
} ;
var bbProto = BigBear.prototype ;
bbProto.getElem = function(){
    this.elem を返します ;
} ;
bbProto.getOpts = function(){
    this.opts を返します ;
} ;
bbProto.init = function(){
    var that = this ;
    varloadText = "データ実装中。。。" ;
    this.getElem().on("データ",function(){
        that._setTitle(that.getOpts()["タイトル"]) ;
        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(テキスト) ;
} ;
関数オーバーレイ(){
} ;
var olProto = Overlay.prototype ;
olProto.show = function(){} ;
olProto.hide = function(){} ;
// 具体实现就不写了

ここに初めてアクセスしましたが、パッケージ化公開 JavaScript に新しい承認が与えられているかどうかがわかります。