requre.js模块管理页面中的js文件,优化页面,减少请求
更新:HHH   时间:2023-1-7


1、html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">	
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./public/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="public/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="./public/css/xie.css">
</head>
<body>
    <div class="swiper-container">
    	<div class="swiper-wrapper">
    		<div class="swiper-slide">
    			<h2 class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s">
    				<img src="public/p_w_picpaths/title01_slide01.png">
    			</h2>
    			<h3 class="ani" swiper-animate-effect="rotateIn" swiper-animate-duration="1s">
    				<img src="public/p_w_picpaths/title02_slide01.png">
    			</h3>
    			<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s">
    				<img src="public/p_w_picpaths/img01_slide01.png">
    			</p>
    			<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s">
    				<img src="public/p_w_picpaths/title03_slide.png">
    			</p>
    		</div>
    		<div class="swiper-slide">
    			<h2>
    				<img src="public/p_w_picpaths/title01_slide01.png">
    			</h2>
    			<h3>
    				<img src="public/p_w_picpaths/title02_slide01.png">
    			</h3>
    			<p>
    				<img src="public/p_w_picpaths/img01_slide01.png">
    			</p>
    			<p>
    				<img src="public/p_w_picpaths/title03_slide.png">
    			</p>
    		</div>
    	</div>
    </div>			
</body>
<script src="public/js/require.js" data-main="public/js/main" ></script>
</html>


2、require.js模块

require.config({
	paths:{
		jquery:"./jquery.min",
		swiper:"./swiper.jquery.min",
		animate:"./swiper.animate1.0.2.min"
	},
	shim:{
		swiper:{
			deps:["jquery"],
			exports:"Swiper"
		},
		animate:{
			deps:["swiper"],
			exports:"animate"
		}
	}
})

require(["jquery","swiper","animate"],function ($,swiper,animate) {
	 var mySwiper = new Swiper ('.swiper-container', {
	  direction : 'vertical',
	  onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
	    swiperAnimateCache(swiper); //隐藏动画元素 
	    swiperAnimate(swiper); //初始化完成开始动画
	  }, 
	  onSlideChangeEnd: function(swiper){ 
	    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
	  } 
	}) 
})


返回web开发教程...