简单JS页面视图模板

最新推荐文章于 2024-05-23 18:39:43 发布
最新推荐文章于 2024-05-23 18:39:43 发布
阅读量331 收藏
点赞数
分类专栏： 前端开发 文章标签： 数据库 javascript ViewUI
注：主要参考网上的一些思想和内容，结合自己的理解，记录下而已
a.html 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JTMA</title>
<script type="text/javascript" src="../js/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="a.js"></script>
</head>
<body onload="test()">
<div>
	<table>
		<tr>
			<td>通知</td>
			<td id="notice">
				<ul>
					<li>$title$   <span>$data$</span></li>
				</ul>
			</td>
		</tr>
		<tr>
			<td>国内新闻</td>
			<td id="inside_news">
				<ul>
					<li>$title$   <span>$data$</span></li>
				</ul>
			</td>
		</tr>
		<tr>
			<td>国外新闻</td>
			<td id="outside_news">
				<ul>
					<li>$title$   <span>$data$</span></li>
				</ul>
			</td>
		</tr>
	</table>
</div>
</body>
</html>

a.js 

/**
 * 比如数据库的字段设计为:
 * id 主键自增
 * title 主题
 * data 发布日期
 * type 类型(通知、国内新闻、国外新闻) 
 */

String.prototype.temp = function(obj) {
	//返回替换后的值
    return this.replace(/\$\w+\$/gi, function(matchs) {
    	//matchs输出符合正则表达式"$\w+\$"的所有字符串,如$data$
    	//matchs.replace(/\$/g, "")就是将$替换为"",如$data$替换后为data
        var returns = obj[matchs.replace(/\$/g, "")];
        return (returns + "") == "undefined"? "": returns;
    });
};

test = function(){

	var jsonData_notice = {
	    //url: "/project/xxx.do?method=xxx",
	    data: [{
	        id: "11",
	        title:"通知1",
	        data:"2014/09/12"
	    },{
	        id: "12",
	        title:"通知2",
	        data:"2014/09/11"
	    },{
	        id: "13",
	        title:"通知3",
	        data:"2014/09/10"
	    }]
	};

	var jsonData_inside_news = {
	    //url: "/project/xxx.do?method=xxx",
	    data: [{
	        id: "21",
	        title:"国内新闻1",
	        data:"2014/09/12"
	    },{
	        id: "22",
	        title:"国内新闻2",
	        data:"2014/09/11"
	    },{
	        id: "23",
	        title:"国内新闻3",
	        data:"2014/09/10"
	    }]
	};

	var jsonData_outside_news = {
	    //url: "/project/xxx.do?method=xxx",
	    data: [{
	        id: "31",
	        title:"国外新闻1",
	        data:"2014/09/12"
	    },{
	        id: "32",
	        title:"国外新闻2",
	        data:"2014/09/11"
	    },{
	        id: "33",
	        title:"国外新闻3",
	        data:"2014/09/10"
	    }]
	};

	var htmlList_notice = "";
	var htmlList_inside_news = "";
	var htmlList_outside_news = "";
	var htmlTemp = $("#notice").html();

	var notice_temp = htmlTemp;
	var inside_news_temp = htmlTemp;
	var outside_news_temp = htmlTemp;
	jsonData_notice.data.forEach(function(object) {
		htmlList_notice += notice_temp.temp(object);
	});
	jsonData_inside_news.data.forEach(function(object) {
		htmlList_inside_news += inside_news_temp.temp(object);
	});
	jsonData_outside_news.data.forEach(function(object) {
		htmlList_outside_news += outside_news_temp.temp(object);
	});
	$("#notice").html(htmlList_notice);
	$("#inside_news").html(htmlList_inside_news);
	$("#outside_news").html(htmlList_outside_news);

};
tank2140896
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js--视图模式
雪人的小屋
04-26 451
视图模式简介获取页面的宽/高度（包含滚动条）获取文档相关的高度/宽度（除去滚动条） 简介 可视化页面和可视化窗口 获取页面的宽/高度（包含滚动条） 获取文档相关的高度/宽度（除去滚动条） <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <t...
js网页模板
04-25
好的资源就应该一起快了的分享，这是个网页模板的。
Javascript 页面模板化 ——大部分人没有使用过的方法
weixin_34152820的博客
06-05 166
  介绍   今天遇到一个问题，这个问题也是我以前遇到的问题，以前的方式，也是大多数人使用的方式。大家可以看看我的文章。   从前的方式——我估计也是大多数人使用的方式   比如以下的代码——摘自新浪首页的一段js代码，这种方式也是大多数人使用的方式。 上面的代码，你看完有什么反应？你也许会把+=这种形式改成数组的push形式，有人说push比这种字符链接要快，但是...
HTML+CSS+JS 网页设计实例 静态响应式前端网页模板(一键复制)①
最新发布
我们好像在哪见过
05-23 944
前端领域创作者。静态网页设计期末作业/毕设源码前端静态网页大作业源码，使用的是原生的 html，css，js 代码，期末作业必过，高分必备。
template.js 页面模板
03-27
用于简化套页面时候的字符串拼接, 方便开发人员在套页面的时候，避免使用 +=‘’ 等拼接html内容
javascript 视图模板 2.0
03-29
总的来说，JavaScript视图模板2.0致力于提供更高效、更易用的模板解决方案，以帮助开发者更好地构建动态的、数据驱动的Web界面。通过合理利用模板引擎，可以极大地提高前端开发效率，同时保持代码的整洁和可维护性。
页面模板页面模板
01-10
在这种模式下，模型负责数据的管理，视图（即页面模板）负责数据的展示，控制器协调模型和视图的交互。通过这种方式，可以实现更清晰的职责划分，使项目更加模块化，有利于团队协作和代码复用。 总的来说，页面模板...
给部门制定的简单代码框架模板
02-17
在框架模板中，可能会集成React、Vue.js或Angular等现代JavaScript库或框架，以提高用户体验和开发效率。 4. **简单代码框架模板**：这个概念强调的是易用性和可扩展性。一个好的框架模板应该有清晰的目录结构，...
简单后台单页面管理模板
04-19
【绿色工作信息考核管理模板】是一款适用于轻量级后台管理的单页面应用模板，主要针对那些对后台界面设计要求不那么复杂，但又需要高效、直观的管理工具的用户。这款模板以其简洁的设计和易用的功能，为日常的信息...
视图模板
Veblen1的博客
04-11 300
<?php echo 'hello, world'; 从简单开始理解 这就是个视图文件中的代码，没错就这么简单。视图，实际上是在 MVC 这种架构上提出的。MVC 中，视图负责呈现数据。因此可以说只要是输出了数据的，都叫做视图。 在没有使用框架的时候，业务逻辑、数据的读写、组织和展示都是在一堆代码里，难以剥离，随着项目增大变得越来越难以维护。MVC 有效的分离了三者，各司其职。视图作为呈现...
简单的网页模板 HTML源码下载
04-24
HTML 网页模板 用于网络制作 一个简单的HTML模板，可以使用
Nuxt.js 视图
weixin_45822542的博客
12-15 252
视图 默认模板 定制化默认的 html 模板，只需要在应用根目录下创建一个 app.html 的文件。 默认模板： <!DOCTYPE html> <html {{ HTML_ATTRS }}> <head {{ HEAD_ATTRS }}> {{ HEAD }} </head> <body {{ BODY_ATTRS }}> {{ APP }} </body> </html> 修改模板，对
七、HTML5单页框架View.js介绍 - 视图
baozhang007的专栏
09-28 778
不需要 Npm 的单页应用框架： View.js - http://view-js.com 视图，是用户视觉上看到的一页内容，也是由 View.js 驱动的单页应用的页面区块载体。视觉上一个界面向另一个界面的切换，在技术上则是同一HTML页面中一个视图区块向另一个视图区块的切换。 作为页面功能的单元载体，每个视图都是唯一的，都有唯一的ID及命名空间（开发者通常并不需要指定视图的命名空间，我们...
视图模板技术-Thymeleaf
AmorFati1996的博客
03-09 353
Thymeleaf - 视图模板技术 1） 添加thymeleaf的jar包 2） 新建一个Servlet类ViewBaseServlet 3） 在web.xml文件中添加配置 - 配置前缀 view-prefix - 配置后缀 view-suffix 4） 使得我们的Servlet继承ViewBaseServlet 5） 根据逻辑视图名称 得到 物理视图名称 //此处的视图名称是 index //那么thymeleaf会将这个 逻辑视图名称 对应到 物理视图 名称上去 //逻辑视图名称 ： index
数据转化为视图——JS
zk_html的博客
04-19 339
数据与视图之间的转化—— JS，innerHTML 和 innerText 区别
集训第一天--JavaScript-视图属性和方法
weixin_45822952的博客
10-16 233
window视图属性 innerHeight和innerWidth outerHeight和outerWidth pageXOffset和pageYOffset screenX和screenY innerHeight 和innerWidth 获取window浏览器内部的大小也就是视口的（viewport）大小 outerHeight 和 outerWidth 表示整个浏览器窗体的大小 pageXOffset和pageYOffset表示整个页面滚动的像素值（水平方向和垂直方向） screenX
JS中的定型数组与视图
火腿肠的博客
05-17 476
定型数组 了解定型数组前先复习一下基础知识： 1byte（又称为字节） = 8bit(又称为比特、位) 1kb = 1024byte; 前言 之所以要使用定型数组主要是因为WebGL的需求 因此在ES6中引入定型数组来解决这个问题，并提供更高性能的算术运算。所谓定型数组，就是将任何数字转换为一个包含数字比特的数组，随后就可以通过我们熟悉的JS数组方法来进一步处理 用人话说就是 js存储数字是以64位浮点格式存储，而一个字节仅需要8位 所以浪费太多了 新弄出来一个数据类型叫定型数组 这个数组可以存储数据
vue.js页面视图的元素
06-09
在 Vue.js 中，页面视图的元素主要包括以下几种： 1. 模板语法：Vue.js 提供了一种类似 HTML 的模板语法，用于声明和渲染视图元素。 2. 指令：Vue.js 提供了很多指令，用于操作 DOM 元素的属性、样式、内容等。 3...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值