jQuery UI数据渲染插件开发 jquery-render插件

最新推荐文章于 2023-05-30 19:59:38 发布

TA远方

最新推荐文章于 2023-05-30 19:59:38 发布

阅读量534

点赞数

分类专栏： Web 前端开发文章标签： jquery ui javascript

本文链接：https://blog.csdn.net/zs1028/article/details/119950715

版权

Web 前端开发专栏收录该内容

10 篇文章 0 订阅

订阅专栏

此插件主要是处理模板UI渲染的，附带了本地存储取值的方法
创建一个js文件jquery-render.js，代码如下

//jQuery扩展支持的方法定义
jQuery.extend({
	format: function(text, args) {
		if (Array.isArray(args) == false) args = [args];
		for (var i = 0; i < args.length; i++) text = text.replaceAll('{' + i + '}', args[i]);
		return text;
	},
	storage: function(key, value) {
		if (value == undefined) return localStorage.getItem(key);
		localStorage.setItem(key, value);
	},
	getStorageValue: function(key, default_value='') {
		var value = jQuery.storage(key);
		if (value == null || value == undefined) return default_value;
		return value;
	},
	render: function(elem, args) {
		var el = typeof elem == 'string' ? jQuery(elem) : elem;
		for (var i = 0; i < el.length; i++) {
			var e = el.eq(i);
			var h = e.html();
			e.html(jQuery.format(h, args));
		}
		return elem;
	},
	renderList: function(elem, list, callback) {
		var el = typeof elem == 'string' ? jQuery(elem) : elem;
		for (var i = 0; i < el.length; i++) {
			var e = el.eq(i);
			var t = e.html();
			var h = '';
			list.forEach(function(item, index) {
				var args = callback(item, index);
				h += jQuery.format(t, args);
			});
			e.html(h);
		}
		return elem;
	},
	renderBaseNavTabs: function(listener) {
		var tabhost = $('.base-page-nav');
		var contents = tabhost.next('.base-page-contents').find('>div');
		var tabs = tabhost.find('li');
		var activeTab = tabhost.find('li.active');
		if (activeTab.length <= 0 && tabs.length > 0) {
			activeTab = tabs.eq(0);
			activeTab.addClass('active');
		}
		var render = function(index) {
			for (var i = 0; i < contents.length; i++) {
				if (i == index) {
					tabs.eq(index).addClass('active');
					contents.eq(index).addClass('base-show');
				} else {
					tabs.eq(i).removeClass('active');
					contents.eq(i).removeClass('base-show');
				}
			}
		};
		var index = activeTab.index();
		if (index < 0) throw new Error('init error!');
		render(index);
		tabhost.on('click', 'li', function() {
			var item = $(this);
			var index = item.index();
			render(index);
			if (typeof listener == 'function') listener({
				index: index,
				item: item,
				elem: tabhost
			});
		});
	},
	renderShowModal: function(tempalte, args) {
		var body = $('body');
		var modal = body.find('.base-show-modal');
		if (modal.length > 0) modal.remove();
		modal = typeof tempalte == 'string' ? jQuery(tempalte) : tempalte;
		body.append(jQuery.render(modal, args).html());
	},
	formatKeys(e,arg,val,key='item'){
		var t=e;
 		var v=[];
 		if (typeof arg == 'object') {
			if (!Array.isArray(arg)) {
	 			for(var k in arg) {
	 				t = t.replace(new RegExp('\\{'+key+'\\.'+k+'\\}','g'),arg[k]);
	 			}
	 			return t;
			}
			v = val;
			arg.forEach(function(a,b){
				var k = b;
				if (b<v.length) k=v[b];
				t = t.replace(new RegExp('\\{'+k+'\\}','g'),a);
			});
 		}else{
			t = t.replace(new RegExp('\\{'+key+'\\}','g'),arg);
		}
		return t;
	},
	//类似Vue的用法
	initApp(e){
		var app = e.elem ? $(e.elem) : $('body');
		var data = e.data || {};
 		var html = app.html();
 		var ids = e.renderIds || [];
 		var lIds = [];
 		for(var k in ids){
	 		var c = ids[k];
			if (!Array.isArray(c)) c = [c,c];
			if (c.length<1) continue;
			if (c.length==1) c = [c[0],c[0]];
	 		var id = c[0];
			var ke = c[1];
			var el = $('#'+id);
			if (el.length!=1) continue;
			const htm = el.html();
			var da = data[ke];
			if(typeof da != 'object') {
				lIds.push(k);
				continue;
			}
			if(Array.isArray(da)) {
				var htms = '';
 				da.forEach(function(ik){
					htms += $.formatKeys(htm,ik);
				});
				el.html(htms);
			}else{
				//for(var ik in da) {}
			}
		}
		for(var k in lIds){
			var c = ids[k];
			var id = c[0];
			var ke = c[1];
			html = $.formatKeys(html,id,ke);
		}
		app.css('visibility','visible');
		if (typeof e.onLoad == 'function') e.onLoad();
		if (typeof e.onReady == 'function') e.onReady();
	}
});

一个页面HTML例子

<html>
<body>
	<head>
		<meta charset="utf-8" />
	</head>
	<div id="app">
		<div id="view1">{item}</div>
	</div>
	<script src="./jquery.min.js"></script>
	<script src="./jquery-render.js"></script>
	<script>
		$(document).ready(function(){
			$.initApp({
				elem: '#app',
				renderIds: [
					'view1'
				],
				data: {
					view1:'Hello World!'
				},
				onLoad(){
				//TODO: 这里加载入口开始实现自己的逻辑
				}
			});
		})
	</script>
</body>
</html>

有此相关开源项目jQuery-Render,可前往codechina.csdn.net查看最新的下载使用，有什么意见欢迎提交留言哦 (*^_^*)

下面附一张收藏的可爱图请欣赏~ (●’◡’●)
在这里插入图片描述

TA远方

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery UI数据渲染插件开发 jquery-render插件

此插件主要是处理模板UI渲染的，附带了本地存储取值的方法jQuery.extend({ format: function (text,args) { if (Array.isArray(args)==false) args = [args]; for(var i=0; i<args.length; i++) text = text.replaceAll('{'+i+'}',args[i]); return text; }, storage: fun
复制链接

扫一扫