我正在考虑在项目中使用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();
});
}
);