使用jQuery实现简单的组件化_jquery组件化开发案例-优快云博客

本文链接：https://blog.youkuaiyun.com/FKDXHS/article/details/78839979

本文介绍了如何利用jQuery通过AJAX获取HTML模板文件内容，实现组件化的基础方法，帮助理解组件效果的实现原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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>