經過一週時間，做了一階段專案，仿站：魅族手機官網。總體完成度還可以，但仍有許多不足。自己本身有前端基礎打底，所以並沒有太重視頁面，老師說完成3到5個頁面，那我就只做了3個，囧。本來我應該做的更出色的，但是沒有太下功夫，唉。其實我決定仿這個站後，大體看了一遍，就知道我的重點只有一個，就是省市區三級聯動的那個js效果。這個js我是完全自己寫的，包括資料的獲取，因為對資料的處理一直是我的技術短板。

接下來主要說說通過寫這個js，我的收穫吧。 

官網效果：

我做的效果：

技術點：

1 json資料分析

我是從網上下載了一個json資料，大體長這樣：

分析一下他的資料結構，有兩個陣列：

其每個陣列元素都是一個json,

province下的元素有：id,name,city,

city的值又是一個數組，元素有：id,name

而areas包括：id,name,pid。這裡的pid對應著city的id

2 獲取省：

省的資料比較好辦，直接用一個for迴圈，取出province[i].name和province[i].id就可以了。

3 獲取市

市的獲取就比較難了，我當時做的時候，也是卡到這了，不知道怎麼取到市。問了老師，才知道需要建一個新的陣列，來儲存獲取到的市的資料，然後再迴圈這個新陣列，才能把資料找到。

4 獲取區

區的資料獲取和省的差不多，找到對應的id就可以了

程式碼如下：

//新增省
	function add_data(){
		var str='';
		for(var i=0; i<province.length; i++){			
			str+='<li p-id="'+province[i].id+'">'+province[i].name+'</li>'; //新增省的id和name
		}		
		$('#js_data_1').html(str);	//內容加到頁面中	
	}
	
	//點選省時，市改變
	$("#js_data_1 li").each(function(){
		$(this).click(function(){
			var p_id=$(this).attr('p-id');	//獲取點選的省的id		
			var citys = [];	 //用來儲存城市
			for(var i=0; i<province.length; i++){
				if(province[i].id==p_id){	//如果id相同，取出城市的資料
					citys = province[i].city;					
				}			
			}

			var str='';		
			for(var i=0; i<citys.length; i++){
				str+='<li p-id="'+citys[i].id+'">'+citys[i].name+'</li>'; //新增市的id和name						
			}			
			$('#js_data_2').html(str);		
		});	
	});

	//點選市時，區改變
	$(document).on('click','#js_data_2 li',function(){
		var p_id=$(this).attr('p-id');	//獲取點選的市的id	
		var str='';		
		for(var i=0; i<areas.length; i++){
			if(areas[i].pid==p_id){		//如果id相同，取出區的資料
				str+='<li>'+areas[i].name+'</li>';				
			}												
		}		
		$('#js_data_3').html(str);		
	});

5 新增事件的方式

因為市和區的資料是用jquery後新增的，所以直接用.click的方式，是不行的，要用on方法，這個也要特別注意。因為我直接用.click，就一直沒有效果，調了好久，還以為自己哪裡寫的不對。後來突然想到是不是事件根本沒有加上。改用了on後，就可以了。

最後總結一下，學習了這一階段，自己比之前在js上的提高有：

1 會字串拼接了

2 能分清js物件和jquery物件，分清了才能用對方法

3 會迴圈資料了

4 會用陣列了

5 框架和外掛的api，能看懂了，會查了

我覺的這些就是很大的進步，因為我之前一直只會用js寫一些效果，顯示隱藏啥的。涉及到資料的，根本沒辦法，只能看著，心裡一團亂。現在起碼有眉目了，能做到一點點胸中有丘壑。但是總體來說，寫的程式碼還是比較囉嗦，也沒有很好的體現面向物件的思想。現在只能說完成基本效果，但是完成的出色與否，是不是更利於維護，延展性等，離這個目標還有很大很大的距離。我想等學習了面向物件，應該會更好。

在專案展示時，又暴露了很多問題，一併總結一下，爭取下次專案做的更好：

1 展示時再說的詳細一些，把能體現出特色，難點的地方，多說一點。多展示點程式碼。

2 輪播，注意一行不要放置多個輪播，會導致自動播放時，看起來比較花，不好看。

3 還是輪播，我用的swiper，有一個引數我沒有注意到，就是loop迴圈，加上這個，會讓輪播的體驗更好，不會出現到最後一張了，然後很突兀的到第一張。這個我做的時候沒有注意，是老師指出來的，非常感謝。

4 通用的js程式碼可以適當封裝一下。