利用AJAX的跨域原理重构页面 实现页面的模块化

jq的AJAX不光能请求网络数据，还能跨域访问html、js文件，举例说，当其跨域访问js文件时，其实是干了两件事情：1，创建<script>标签，src指向要访问的url，appendChild()去head标签中；2，声明函数fn，fn必须与请求目标js文件中调用的方法同名。

需要注意的点有：
1，html和js文件同时创建

有了这个基础，我们就可以利用ajax来实现模块化地构建页面，类似于mvc各种框架的思想。

1，在全局脚本app.js中定义两个函数

获取路径参数函数：

function getUrlParms(){
    
    var params={};
    
    var url=window.location.href;
    
    var arr=url.split("?");

    if(arr.length==2){
        var p=arr[1];     
    }else{
       console.log(params)
       return params;    
    }
    
    // p="a=1&b=2&c=3"
    var parr=p.split("&"); // ["a=1","b=2","c=3"]
    
    for(var i=0;i<parr.length;i++){

        var kv=parr[i].split("=");
              
        params[kv[0]]=kv[1];

    }   
    console.log(params)

    // {a:1,b:2,c:3}    
}

加载模块函数：

function router(m,container){

container=container||$("#share");

// 请求模块结构
$.ajax({
url:"views/"+m+".html",
success: function(data){
container.html(data);
}
})

// 请求js文件
loadJs(m);

}
function loadJs(m){
$.ajax({
url:"js/"+m+".js",
})
}

2，设置首次打开文件所呈现的页面，如果有欢迎页，要用到localStorage的知识：

$(function(){

// 首次加载 -- 打开欢迎页, 2次以上打开的是tab模块

if(!localStorage.count){
localStorage.count=0;
}

localStorage.count++;

console.log(localStorage.count);

if(localStorage.count==1){
router("hello")
}else{
router("tab")   //选项卡是本项目在欢迎页消失后首先呈现的页面
}
})

3，tab模块，不变的部分，比如header，写在tab.html里，需要动态更改的部分，在tab.js里调用router()方法，当然事先要在tab.html里留出空间，插入之后用ajax请求到的内容：

router("home",$("#tabcontainer"))            //home是home.html文件

差不多原理就是这样了，是不是很类似vue的组件。

4，如果home.html需要写一个需要请求网络数据的列表，具体该怎么操作呢？以下为例：

<img src="image/banner1.jpg" class="auto">
<p class="tj">推荐歌单3</p>

<div class="songlist">

</div>

<div id="templateItem" style="display: none;">        //这就是要动态插入的模板原型，display设置为none
//目的是让其在视图上不显示

<div class="item">
<div>200</div>
<img src="image/18581746511268315.jpg" class="auto">
<p>老板,给我来一打这样的男友</p>
</div>

</div>

然后在home.js中，重点是，用回调函数来处理ajax请求回来的数据

var server = "http://musicapi.duapp.com/api.php";            //服务器

//url: server+"?type=topPlayList&cat=%E5%85%A8%E9%83%A8&offset=0&limit="+9,        //URL地址

function getPlayList(limit,callback){

$.ajax({
type:"get",
url: server+"?type=topPlayList&cat=%E5%85%A8%E9%83%A8&offset=0&limit="+limit,
async:true,
success:function(data){
//console.log(data);
callback(data.playlists)
}
});

}

getPlayList(9,function(data){

console.log(data)

var $songlist=$(".songlist");

var template=$("#templateItem").html();        //不能在函数里面创建template，不然只能插入一个

for(var i=0;i<data.length;i++){

var $template=$(template);
$template.find("div").html(data[i].playCount);
$template.find("img").attr("src",data[i].coverImgUrl);
$template.find("p").html(data[i].name);
$template.appendTo($songlist);

}

});

用jq获取模板的html，注意用html()获取到的对象是js对象，如果要使用接下来的find()方法，要用$()对其进行包裹，转换成jq对象。

这里也可以使用字符串拼接的方法。