2

Revealing Module Pattern の方法でより良いコードを書くための提案が必要です。私はチュートリアルhttp://weblogs.asp.net/dwahlin/archive/2011/09/05/creating-multiple-javascript-objects-when-using-the-revealing-module-pattern.aspxに従っています。このパターンの基本を理解する。基本的な画像スライダーを作成しようとしています。jsfiddle リンクを確認してください。

http://jsfiddle.net/sWtDf/

var Slider = window.Slider = window.Slider || {};

    Slider = (function($){

        var $reelWrap = $('.fnSlider'),
            $reel = $('.fnSlider').children('ul'),
            $slide = $reel.children('li'),
            slideWidth = $slide.width(),
            numSlides = $slide.length,                
            reelWidth = numSlides*slideWidth,
            $prev = $('.prev'),
            $next = $('.next'),

            init = function(){   
                pageLoad();               
                nextSlide();
                prevSlide();
            },

            pageLoad = function(){
                var index = 2;                                  
                $reel.css('width', reelWidth);
                $slide.eq(index).addClass('fnActive');     
                $reel.css('left', -(index*slideWidth));
            }

            nextSlide = function(){ 

                $next.click(function(e){
                    e.preventDefault();

                    var index = $reel.children('.fnActive').index() + 1;
                    var scroll = index * slideWidth;

                    if(index < numSlides){
                        $reel.animate({left: -(scroll)}).children().removeClass('fnActive');
                        $slide.eq(index).addClass('fnActive');
                    }else{
                       $reel.animate({left: 0}).children().removeClass('fnActive'); 
                       $slide.eq(0).addClass('fnActive');
                    }

                });

            },

            prevSlide = function(){ 

                $prev.click(function(e){
                    e.preventDefault();

                    var index = $reel.children('.fnActive').index() - 1;
                    var scroll = index * slideWidth;
                    var lastScroll = (numSlides-1) * slideWidth;

                    if(index == "-1"){
                         $reel.animate({left: -(lastScroll)}).children().removeClass('fnActive');
                         $slide.eq(-1).addClass('fnActive');
                    }else{
                        $reel.animate({left: -(scroll)}).children().removeClass('fnActive');
                        $slide.eq(index).addClass('fnActive');  
                    }

                });

            }

            return {
                init: init
            }


    })(jQuery);

    $(function(){

        Slider.init();

    });

私が知りたいのは -

1）コードレビュー後に同じカルーセル機能を書くより良い方法はありますか

2) 複数のオブジェクト(インスタンス)の作り方 やってみた -

        var slider1, slider2;

        slider1 = Slider();
        slider2 = Slider();

        slider1.init();
        slider2.init();

これにより、エラー TypeError: Slider is not a function が発生します

3) グローバル関数とプライベート関数を保持する正しい方法ですか?

4) 提案があれば

お時間をいただきありがとうございます:)

4

2 に答える 2

5

複数のインスタンスを作成する場合は、モジュールでコンストラクター関数を返すことをお勧めします。

var Slider = (function($){

    function slider(id){  // <- 'foo' is an example of a constructor argument 
                          // (1 and 12 below when the instances are created)

        this.id = id; // <- something specific for each instance
        // this.$reelWrap = ...
    }

    slider.prototype = {

        init: function(){
            this.pageLoad();
        },

        pageLoad: function(){
             console.log('pageLoad called from instance with id', this.id);
        },

        getId: function(){
            return this.id; // <- 'this' refers to the current instance
        }
    };

    return slider;

})(jQuery);

var slider1 = new Slider(1);
var slider2 = new Slider(12);

console.log(slider1.getId());

var Vehicle = function(engine, speed){
    this.engine = engine;
    this.speed = speed || "786km/Hr";    
} 

Vehicle.prototype.engineInfo = function(){
    console.log("this vehicle has engine " + this.engine);
}

var Porsche = function(engine, speed, carName){                                       

    Vehicle.apply(this, arguments);   

// I stucked here and got answer 
// http://stackoverflow.com/questions/8605788/
// javascript-call-and-apply-functions-only-called-on-first-argument
// it means Vehicle functions arguments got copied here am I right :)

// J: The point is to call the 'base class' contructor with the arguments
// that you provide when you create a new Porsche as well.
// In other words, engine and speed will be set correctly in the 
// Vehicle constructor when you create a new Porsche()

    this.carName = carName;
}

Porsche.prototype = Object.create(Vehicle.prototype);
// Porsche.prototype = new Vehicle();
// http://stackoverflow.com/questions/4166616/
// understanding-the-difference-between-object-
// create-and-new-somefunction-in-j
// hmm need    more time to go into this :) 

// J: The difference is that if you just do Porsche.prototype = new Vehicle();
// The Vehicle constructor will be called even if you don't create an instance
// of Porsche

Porsche.prototype.constructor = Porsche;
// I stucked here and got http://stackoverflow.com/questions/9343193/
// why-set-prototypes-constructor-to-its-constructor-function

// J: I would say that it's good practice to do it, but I've personally never
// found any uses of that property.

Porsche.prototype.speedInfo = function(){
    console.log("this vehicle has speed " + this.speed);
}

var cayMan1 = new Porsche("Engine UV", "500km/hr", "CayMan");
var cayMan2 = new Porsche("Engine Ultra", "100km/hr", "911"); 

cayMan2.engineInfo();        
cayMan2.speedInfo();
于 2014-02-20T13:59:02.330 に答える
1

2）スライダーを公開していません


var Slider = (function($){

  return function() {
    var $reelWrap = $('.fnSlider'),
    .........
  }
}(jQuery))

3) 一般的に、スコーピングは適切です。必要以上に公開していません。

4) 質問 4 がありません!!

5) 機会があれば、一般的に安く買って高く売る

于 2014-02-20T14:05:09.390 に答える