requirejs 音乐播放器列表

html文件:

<html>
<head>
	<meta charset="utf-8">
	<title ></title>
	
	<script data-main='js/main.js' src='js/libs/require.js'></script>
 
	
</head>
<body >

<div>
<audio  autoplay controls src=""></audio>
	<ul class='root'>
	</ul>
</div>


</body>
</html>

主入口文件:

define(['http','view','config'],function(http,view,config){
    http.http(config.publicUrl+config.path+config.list+"?type=1&count=20&offset=0",function(data){
        console.log(data);
        view.getView(data);
    })
})

main.js文件:

requirejs.config({
	baseUrl:'js/',
	paths:{
		'config':'apps/config',
		'http':'apps/http',
		'view':'apps/view',
		'index':'apps/index',
		'jquery':'libs/jquery-3.4.1'
	}
})

requirejs(['config','http','view','index','jquery'],function(config,http,view,index,jquery){

})

网络请求文件:

define(['jquery'],function($)
{
	function http(url,callback){
		$.ajax({
			url:url,
			type:'get',
			dataType:'json',
			success:function(res){
				callback(res);
			}
		})
	}

	return {
		http:http()
	}
})

配置文件:

define(function(){

	return{
		publicUrl:"http://www.wwtliu.com",
		path:"/sxtstu/music/baidu/"

	}
})

视口文件:

define(['jquery'],function($){

    //假如数据已经存在
    function getView(data)
    {
    	if(data.song_list){
        	$(data.song_list).each(function(index,ele){
            $('.root').append("<li musicid="+ele.song_id+">"+ele.title+'</li>');
        	})

        	//添加点击事件
        	$('.root').on('click',function(){
        		console.log($(this).attr('musicid'))
        		http.http("http://www.wwtliu.com"
"/sxtstu/music/baidu/play.php?mid="+$(this).attr('musicid'),function(data){})
        	})
    	}

    }

    return{
        getView:getView
    }
})
发布了317 篇原创文章 · 获赞 3 · 访问量 7160

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/104080978