RequireJS:垫片,我在做什么错?

时间:2019-01-28 17:46:31

标签: javascript requirejs

我目前正在使用RequireJs重构Express / EJS项目。

我刚刚开始学习RequireJS,但我无法弄清楚垫片的问题。

问题是我无法访问主页组件中的任何导出内容!

知道我在做什么错吗?

这是我的配置文件:

require.config({
    baseUrl: 'javascripts',
    paths: {
        'jquery': './lib/jquery',
        'jQueryUi': './lib/jquery-ui.min',
        'slick': './lib/slick',
        'domReady': './lib/domReady',
        'instafeed': './lib/instafeed.min'
    },
    shim: {
        'instafeed': {
            exports: 'Instafeed'
        },
        'jQueryUi': {
            deps: ['jquery'],
            exports: '$',
        },
        'slick': {
            deps: ['jquery'],
            exports: 'jquery.fn.slick'
        },
    }
});

require(['domReady', 'components/homepage'],
    function (domReady, homepage) {
        domReady(function () {
            homepage.initHomePage()
        })
    },

    function (err) {
        console.log('err:', err);
        console.error('ERROR: ', err.requireType);
        console.error('MODULES: ', err.requireModules);
    }
);

这是我的主页文件:

define(['jquery', 'Instafeed','components/homepage'], function($, Instafeed) {
  const userFeed = new Instafeed({
    get: 'user',
    userId: '21944101',
    clientId: 'Client',
    target: 'instafeed',
    accessToken: donna_token,
    resolution: 'standard_resolution',
    sortBy: 'most-recent',
    template: '<div class=slide><a href={{link}}><img src={{image}} class="img-responsive"/></a> </div>',
    after: () => {
      $('#instafeed').slick({
        infinite: false,
        speed: 300,
        slidesToShow: 10,
        slidesToScroll: 1,
        responsive: [
          {
            breakpoint: 1024,
            settings: {
              slidesToShow: 8,
              slidesToScroll: 1
            }
          }, {
            breakpoint: 600,
            settings: {
              slidesToShow: 6,
              slidesToScroll: 1
            }
          }, {
            breakpoint: 480,
            settings: {
              slidesToShow: 3,
              slidesToScroll: 1
            }
          }
        ],
        prevArrow: "<div class=insta-prev></div>",
        nextArrow: "<div class=insta-next></div>"
      });
    }
  });

// homePage
  const homePage = {
    loader: () => {
      $('.preloader').delay(1500).fadeOut('slow')
    },
    init: () => {
      document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click',  function (e) {
          e.preventDefault();
          document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
          });
        });
      });
    }

  };

// menu
  const menu = {
    show: () => {
      const overlay = $(".overlay");
      const slider = $(".menu");
      $(".menu__toggle").toggleClass('cross');
      menu.toggleOverlay(overlay);
      menu.toggleSlider(slider);

    },
    toggleSlider: (el) => el.toggle("slide", {direction: "left", easing: "easeInOutCirc"}, 500),
    toggleOverlay: (overlay) => overlay.toggle(),
  };

//about
  const about = {
    loader: () => $(".rectangle").toggle("slide", {direction: "left", easing: "easeInOutCirc"}, 700, () => $(".description-text").fadeIn("fast"))
  };

//Instafeed
  const instagram = {
    loader: () => userFeed.run()
  };

  const moreBtn = {
    toggleConcerts: () => {
      const loadMoreBtn =  $(".load-more");
      const lastConcerstDates = $(".dates-container .past-events li:nth-child(n+8)");
      lastConcerstDates.toggle();
      loadMoreBtn.toggle();

    }
  };

  return {
    initHomePage: function() {
      const overlay = $(".overlay");
      const burgerMenu = $(".menu__toggle");
      const loadMoreBtn =  $(".load-more");
      const navLink = $(".nav-link");
      $(window).on('load', homePage.loader());
      homePage.init();
      instagram.loader();
      about.loader();
      overlay.on("click", menu.show);
      burgerMenu.on("click", menu.show);
      navLink.on("click", menu.show);
      loadMoreBtn.on("click", moreBtn.toggleConcerts)
    }
  }
});

0 个答案:

没有答案