javascript - 命名空间未定义

Question

我正在构建一个 javaScript 插件，并在我的插件中定义了一个 namespace ；但是，网页找不到它。请尽可能明确地回答你的问题；当我学习更好地检查代码时，观看某人进行实时编码和测试的视频。

这是我的 HTML:

    ...  
   <article class="slider_cnt">
        <div class="slider">
          <img src="img/slide1.jpg" />
          <img src="img/slide2.jpg" />
          <img src="img/slide3.jpg" />
        </div>
    </article>
  </div>

  <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="js/modernizr-2.6.2.min.js"></script>
  <script type="text/javascript" src="js/elegant2_slider.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            elegantNamespace.initialize($('.slider'),'img');  // options setup
        });
    </script>
</body>

和我的 javaScript:

(function ($) {
    this.elegantNamespace = this.elegantNamespace || {};
    var ns = this.elegantNamespace;

    // settings
    var $slider; // class or id of carousel slider
    var $slide; // could also use 'img' if you're not using a li
    var $transition_time = 1000; // 1 second
    var $time_between_slides = 2300; // 2.3 seconds
    var $interval;

    ns.initialize = function(fram, slide){  // options setup
        $slider = fram;
        $slide = slide;
        startloop();
    }

    slides = function() {
        return $slider.find($slide);
    }

    slides().fadeOut();

    // set active classes
    slides().first().addClass('active');
    slides().first().fadeIn($transition_time);

    // auto scroll 
    startloop = function () {
        $interval = setInterval(

        function () {
            var $i = $slider.find($slide + '.active').index();

            slides().eq($i).removeClass('active');
            slides().eq($i).fadeOut($transition_time);

            if (slides().length == $i + 1) $i = -1; // loop to start
            slides().eq($i + 1).addClass('active');
            slides().eq($i + 1).fadeIn($transition_time+ 2000);
        }, $transition_time + $time_between_slides);
    }
    pauseLoop = function() {
        window.clearInterval($interval);
    }

    $slider.hover(

    function () {
        pauseLoop(); // pause the loop
    },

    function () {
        startloop(); //scroll()
    });
})();

Answer 1

浏览器可以很好地识别您的命名空间。你的程序有问题。
您创建了变量 $slider 和 $slide。
您使用 initialize 函数为这些变量赋值:

ns.initialize = function(fram, slide){  // options setup
    $slider = fram;
    $slide = slide;
    startloop();
}

这里有一个使用这些变量的函数:

 slides = function() {
    return $slider.find($slide);
}

为了使这个函数工作，变量必须被初始化。这意味着您必须在调用 slider 函数之前调用 initialize 函数。

这就是您的问题所在。通过调用 slider 函数，您正在尝试使用尚未初始化的 $slider。结果你的脚本中断了:

slides().fadeOut();
slides().first().addClass('active');
slides().first().fadeIn($transition_time);

在脚本的末尾，您还尝试使用 $slider:

$slider.hover(

function () {
    pauseLoop(); // pause the loop
},

function () {
    startloop(); //scroll()
});

要解决此问题，请将该代码移至 initialize 函数中。这样它应该工作。像这样:

ns.initialize = function(fram, slide){

    $slider = fram;
    $slide = slide;

    slides().fadeOut();
    slides().first().addClass('active');
    slides().first().fadeIn($transition_time);

    $slider.hover(

    function () {
        pauseLoop();
    },

    function () {
        startloop();
    });

    startloop();

}