`
QuarterLifeForJava
  • 浏览: 177835 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

简单JS页面视图模板

 
阅读更多
注：主要参考网上的一些思想和内容，结合自己的理解，记录下而已
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$&nbsp;&nbsp;&nbsp;<span>$data$</span></li>
				</ul>
			</td>
		</tr>
		<tr>
			<td>国内新闻</td>
			<td id="inside_news">
				<ul>
					<li>$title$&nbsp;&nbsp;&nbsp;<span>$data$</span></li>
				</ul>
			</td>
		</tr>
		<tr>
			<td>国外新闻</td>
			<td id="outside_news">
				<ul>
					<li>$title$&nbsp;&nbsp;&nbsp;<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);

};
分享到：
| 前端常用小结(持续追加)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript 视图模板 2.0

    总的来说，JavaScript视图模板2.0致力于提供更高效、更易用的模板解决方案，以帮助开发者更好地构建动态的、数据驱动的Web界面。通过合理利用模板引擎，可以极大地提高前端开发效率，同时保持代码的整洁和可维护性。

    js导出Word默认页面视图、横向显示、分栏、设置固定页眉

    在本文中，我们将深入探讨如何使用JavaScript来创建并导出Word文档，同时设置特定的页面视图，包括横向显示、分栏以及固定页眉。这是一项实用的技术，可以帮助开发者提供更丰富的交互式体验，特别是对于那些需要...

    Jquery 视图插件，模板插件，日期插件 案例

    在这个“Jquery 视图插件，模板插件，日期插件 案例”中，我们将深入探讨jQuery如何通过扩展增强其在用户界面呈现和管理上的能力。以下是关于这些主题的详细讨论： 1. **jQuery 视图插件**： jQuery视图插件通常...

    简单的template的js模板

    这里的"简单的template的js模板"就是一个这样的工具，它提供了一种优雅的方式来处理动态数据，比传统的字符串拼接方式更高效、更易读。 模板引擎的基本原理是通过特殊的语法（如Mustache风格的`{{ }}`或者EJS的`...

    简单后台单页面管理模板

    【绿色工作信息考核管理模板】是一款适用于轻量级后台管理的单页面应用模板，主要针对那些对后台界面设计要求不那么复杂，但又需要高效、直观的管理工具的用户。这款模板以其简洁的设计和易用的功能，为日常的信息...

    页面模板页面模板

    在这种模式下，模型负责数据的管理，视图（即页面模板）负责数据的展示，控制器协调模型和视图的交互。通过这种方式，可以实现更清晰的职责划分，使项目更加模块化，有利于团队协作和代码复用。 总的来说，页面模板...

    aspx页面模板

    ASPX页面模板是微软.NET Framework中的一个核心概念，主要用于构建动态网页应用。这些模板使用ASP.NET（Active Server Pages .NET）技术，允许开发者通过HTML、CSS、JavaScript以及服务器端脚本来创建交互式、数据...

    vue.js简约的后台页面模板

    它允许开发者通过简单的模板语法来声明视图与数据的关系，使得视图能够自动更新当数据变化时。组件化是Vue.js的一大亮点，它可以将复杂的应用拆解为可复用的独立组件，提高了代码的可维护性和复用性。 2. **Canvas...

    前端页面基本模板

    首先，前端页面模板通常包含一系列标准化的HTML、CSS和JavaScript文件，它们定义了页面布局、样式和交互功能。这些模板可以是响应式的，确保在不同设备和屏幕尺寸上都能良好显示。例如，一个常见的模板结构可能包括...

    vue移动端单页面开发模板

    1. **声明式渲染**：Vue.js 使用模板语法，使得数据绑定和事件处理变得简单直观，开发者可以专注于描述应用的状态，而不必关心如何操作DOM。 2. **虚拟DOM**：Vue.js 使用虚拟DOM来提高性能，它在内存中构建一个高效...

    实例讲解JavaScript的Backbone.js框架中的View视图

    在学习JavaScript前端开发框架时，Backbone.js是一个不可忽视...Backbone.js的View视图是单页面应用开发中不可或缺的一部分，它通过模板、事件监听和DOM更新的机制，给开发者提供了一个强大而灵活的用户界面管理方式。

    基于Vue.js2.0的后台管理模板

    它允许通过定义路由规则来实现页面间的导航，支持懒加载和命名视图，提高了用户体验。 4. **状态管理**：Vuex是Vue.js的状态管理库，它提供了一种集中管理应用状态的方式，确保数据在整个应用中的同步。在后台管理...

    template.js模板

    5. **插入HTML**：最后，将生成的HTML字符串插入到DOM中，更新页面视图。 **示例代码** ```html &lt;script src="template.js"&gt; var templateStr = '(var i=0; i; i++){ %&gt;&lt;li&gt;&lt;%= items[i] %&gt;&lt;/li&gt;&lt;% } %&gt;'; var ...

    PageHitCounter:用于ProcessWire的Page Hit Counter模块实现了简单的页面视图跟踪。 在定义的模板上自动跟踪访问者的页面视图，并监视多个页面视图。 即使页面已缓存。 还可以与ProCache和AdBlockers一起使用。 使用〜320字节的轻量级跟踪代码（压缩）

    在定义的模板上自动跟踪访问者的页面视图，并监视多个页面视图。 例如，您无需先打开复杂的工具（例如Google Analytics（分析）），就可以快速概览一下有多少访客阅读了新闻或博客文章。 该模块可以快速提供简单的...

    38套手机页面模板

    这些模板覆盖了多种应用场景，包括但不限于电商、社交、新闻资讯、生活服务、个人博客等，每一套模板都包含了完整的页面结构和元素设计，例如导航栏、轮播图、列表视图、表单、按钮、图标等。开发者可以根据实际需求...

    基于JavaScript的微信小程序前端模板

    在这个“基于JavaScript的微信小程序前端模板”中，我们将会探讨JavaScript在微信小程序开发中的核心作用，以及如何利用ECMAScript特性构建高效的前端模板。 1. **JavaScript基础**：JavaScript是微信小程序开发的...

    登录页面模板登录页面模板.zip

    基于提供的标签，“vue html css 前端”，我们可以推断这个登录页面模板是使用前端技术栈构建的，主要包括Vue.js（一个流行的JavaScript框架）、HTML（结构化网页的语言）和CSS（样式表语言，用于网页的布局和设计）...

    artTemplate.js，前端模板js引用，jquery静态模板

    1. **模板语法简洁**：`artTemplate.js`提供了简单的模板语法，如`{{ }}`用于包裹变量，`{{#}}`和`{{/}}`用于循环，使得模板编写清晰易懂。 2. **数据绑定**：通过将JavaScript对象与模板匹配，可以实现数据驱动...

    Vue项目以及简单的菜单视图和普通视图的路由配置Demo

    Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。Vue项目通常涉及到组件化开发、数据绑定、响应式系统以及路由管理等多个方面。在本Vue项目中，我们重点关注的是"菜单视图"和"普通视图"的路由配置，...

Magicbox
Global site tag (gtag.js) - Google Analytics