RequireJS - 包含一个JS库,而不在特定模块中定义它

时间:2014-09-04 14:04:44

标签: javascript requirejs

我正在考虑在项目中使用Formalize。要做到这一点,我只需要在构建中包含.js文件(在头部或关闭体标记之前)。我如何使用RequireJS执行此操作?据我所知,我目前使用的库都是在某些模块中定义的,例如,使用Owl Carousel时我必须设置选项并初始化轮播,所以我有一个carousel.js定义此库使用的文件,因此将其包含在构建中。

define(['owlcarousel'], function() {

    var $ = jQuery,
        $carousel = $('.homepage-hero');

    return {

        init: function() {
            if($carousel.length >= 1) {
                this.setUp();
            } else {
                return false;
            }
        },

        setUp: function() {
            this.initCarousel();
        },

        initCarousel: function() {
            $carousel.owlCarousel({
                items: 1,
                loop: true, 
                nav:true,
                autoplay: true,
                autoplaySpeed: 500,
                dotsSpeed: 500,
                paginationSpeed: 500
            }); 
        }

    };

});

但是使用Formalize我不需要对它做任何事情,只需要包含它。这是我的main.js文件,用于配置require和我的库。

require.config({
    baseUrl: '/wp-content/themes/test/library/js/libs',
    paths: {
        base: '../',
        onmediaquery: 'onmediaquery.min',
        owlcarousel: 'owl.carousel.min',
        simpleweather: 'jquery.simpleWeather.min',
        formalize: 'jquery.formalize'
    }
});

(function($){
    $(document).ready(function() {
        require(['base/bootstrap']);
    });
})(jQuery);

这是我的bootstrap.js,用于组织我的模块。

require(['base/responsive', 'base/carousel', 'base/equal-heights', 'base/weather'],
    function(responsive, carousel, equal_heights, weather) {

            var $ = jQuery;

            $(document).ready(function() {

                //Prevent FOUC
                $('body').css('display', 'block');

                carousel.init();
                equal_heights.init();
                weather.init();

                responsive.init();

            });
    }
);

0 个答案:

没有答案