使用jQuery實現簡單的組件化

使用jQuery實現簡單的組件效果

原理剖析：使用AJAX讀取HTML模板文件返回模板內容

//分頁載入JS代碼
function loadpage(murl){var res="頁面地址無效";$.ajax({url:murl,async:false,success:function(data){res=data}});return res}

//服務器請求且利用模板生成
var NewGoodsItemCache = ""; 
//商品展示模塊緩存，如果AJAX讀取過之後就不需要再次讀取直接調用模板文件;

function GetGoods(){
//獲取服務器數據
	var ModelArr = new Array(
		"{$imgsrc}",
		"{$name}",
		"{$contect}",
		"{$money}",
		"{$id}"
	);
	//獲取服務器傳回的數據
	$.get("PHPpage/GetGoods.php",function(data){
		data=eval(data);
		if(data.length){
			for(var i=0;data[i];i++){
				var ValueArr=new Array(
					data[i].goodsimage,
					data[i].goodstitle,
					data[i].goodscontect,
					data[i].goodsmoney,
					data[i].id
					
				);
				$(".goods").html($(".goods").html()+NewGoodsItem(ModelArr,ValueArr));//調用匹配關鍵字函數進行替換操作後，顯示到網頁指定位置
				
			}
		}
	});
}

function NewGoodsItem(NGIarrM, NGIarrV) {
	//新建一個商品
	//NGIarrM 模板
	//NGIarrV 參數

	if(NewGoodsItemCache.length == 0) {
		//模板文件緩存不存在，置入緩存
		NewGoodsItemCache = loadpage("HtmlModelPage/GoodsModel1.html");
	}
	var ModHtml = NewGoodsItemCache;
	for(var i = 0; i < NGIarrM.length; i++) {
		ModHtml = ModHtml.replace(NGIarrM[i], NGIarrV[i]);
	}//替換完畢
	return ModHtml;//返回替換結果
};

<!--購物車模板代碼示例-->
<a href="#?num=0" onclick="GetBuyCar({$id});">
		<div class="goods-list1">
		<div class="goods-left">
			<img src="{$imgsrc}" width="180px" height="180px"/>
		</div>
		<div class="goods-right">
			<div class="goods-name">{$name}</div>
			<div class="goods-contect">{$contect}</div>
			<div class="goods-money">￥{$money}</div>
			<div class="goods-buy">加入購物車</div>
		</div>
	</div>
</a>