html++菜单抽离,利用模板将HTML从JavaScript中抽离

利用模板将HTML从JavaScript中抽离

一、当需要注入大段的HTML标签到页面中时，应该使用服务器渲染(从服务器加载HTML标签)

该方法将模板放置于服务器中使用XMLHttpRequest对象来获取外部标签(如多页应用)

function loadDialog(name, oncomplete) {

var xhr = new XMLHttpRequest();

xhr.open('get', '/js/dialog/'+name, true);

xhr.onreadystatechange = function () {

if(xhr.readyState == 4 && xhr.status == 200){

var div = document.getElementById('dlg-holder');

div.innerHTML = xhr.responseText;

oncomplete();

}else {

//错误处理代码

}

};

xhr.send(null);

}

//使用YUI的API

function loadDialog(name, oncomplete) {

Y.one('#dlg-holder').log('/js/dialog/'+name,oncomplete);

}

//使用JQuery的API

function loadDialog(name, oncomplete) {

$('#dlg-holder').load('/js/dialog/'+name, oncomplete);

}

二、客户端模板

对于少量的标签段，应该考虑采用客户端模板。

客户端模板是一些带‘插槽’(占位符)的标签片段，这些占位符会被JavaScript程序(模板引擎)替换为数据，然后把该替换好的标签片段插入到页面中。

JavaScript程序(模板引擎)

自定义模板文本处理程序

function sprintf(text){

var i=1,args=arguments;

return text.replace(/%s/g, function(){

return (i

});

}

模板文本存放位置

1.存放于HTML注释中

...

因为注释也是一个DOM节点，因此可以通过JS将其提取出来：

//格式化并插入DOM的方法定义

function addItem(url,text){

var mylist = document.getElementById('mylist');

var templateText = mylist.firstChild.nodeValue; //提取模板文本

var result = sprintf(templateText,url,text);

div.innerHTML = result;

mylist.insertAdjacentHTML('beforeend', result);

}

//调用方法

addItem('/item/4', 'First item');

addItem('/item/4', 'Second item');

2.存放于自定义type属性的script标签内

%s

function addItem(url,text){

var mylist = document.getElementById('mylist');

var script = document.getElementById('list-item');

var templateText = script.text; //提取模板文本

var result = sprintf(templateText,url,text);

var div = document.createElement('div');

div.innerHTML = result.replace(/^\s*/,''); //去除模板文本的前导空格(因为它是在

mylist.appendChild(div.firstChild);

}

使用第三方的模板系统(如：artTemplate-3.0、Jade、Handlebars、doT.js)

以Handlebars为例：

Handlebars建议将模板存放于script标签内

{{#if items}}

{{#each items}}

{{text}}

{{/each}}

{{/if}}

funtion addItem(url,text){

var mylist = document.getElementById('mylist'),

script = document.getElementById('list-item'),

template = Handlebars.compile(script.text), //提取模板文本,返回格式化方法

div = document.createElement('div'),

result;

result = template({text:text,url:url});

div.innerHTML = result;

mylist.appendChild(div.firstChild);

}

//调用

addItem('/item/4,'First item');

opengl学习-利用模板测试勾画物体轮廓中出现的一个问题

我在学习OpenGL模板测试勾画物体轮廓的时候,出现了这个问题: 这个出现的原因就是,改变摄像机的时候,每次绘制,上次绘制中模板缓冲区的数据没有清除的原因.也就是在while循环开始的时候,glCle ...

JavaScript中利用Ajax 实现客户端与服务器端通信(九)

一:Ajax (Asynchronous JavaScript and XML)不是一个新的技术,事实上,它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起 Ajax的关键技术: 1.使用X ...

JavaScript中作用域回顾(避免使用全局变量)(瀑布流的实现)(scroll事件)以及Django自定义模板函数回顾

页面显示照片样式为瀑布流: 上面的div个数可以按照自己安排进行划分.img的分布可以使用模板标签以及自定义模板函数进行排布: 自定义模板函数实现可以看,最后几列:python---django中模板 ...

如何在Javascript中利用封装这个特性

对于熟悉C#和Java的兄弟们,面向对象的三大思想(封装,继承,多态)肯定是了解的,那么如何在Javascript中利用封装这个特性呢? 我们会把现实中的一些事物抽象成一个Class并且把事物的属性( ...

think PHP5中，模板、控制器、JavaScript的url跳转重定向方法

php控制器中的跳转: 1, header()函数是PHP中进行页面跳转的一种十分简单的方法.主要功能是将HTTP协议标头(header)输出到浏览器. header("Location: ...

javaScript中利用ActiveXObject来创建FileSystemObject操作文件

注:如果用javascript读本地文件,遇到安全问题. 需在浏览器中进行设置,如下:     工具—> Internet选项->安全->自定义级别->启用“没有标识为安全的A ...

利用arguments对象在javaScript中实现重载(overload)

一些概念: 重载(overload): 什么是: 相同函数名,不同参数列表的多个函数,在调用时,可根据传入参数的不同,自动选择对应的函数调用! 为什么: 减轻调用者的负担,一个函数名,可执行多种操作 ...

JavaScript中常见的十五种设计模式

在程序设计中有很多实用的设计模式,而其中大部分语言的实现都是基于“类”. 在JavaScript中并没有类这种概念,JS中的函数属于一等对象,在JS中定义一个对象非常简单(var obj = {}), ...

简单分析JavaScript中的面向对象

初学JavaScript的时候有人会认为JavaScript不是一门面向对象的语言,因为JS是没有类的概念的,但是这并不代表JavaScript没有对象的存在,而且JavaScript也提供了其它的方 ...

随机推荐

不使用ASP.NET中的服务器控件将如何上传文件？

遇到文件的上传时,可能会有大部分的开发者喜欢使用服务器控件,虽然很方便,但是却不能很好的控制,不具灵活性. 现给出例子,使用html标签语言灵活的控制文件的上传. 1.html部分

JPA(7) spring-data-jpa

对于不是使用spring管理的项目,我们就自己创建对象使用:大概的思路就是①创建dao接口②实现该接口,并且编写逻辑: Dao: public interface StudentDao { publi ...

SDUT 2351 In Danger

点我看题目 题意 : 有n个兵想要自杀,所以他们决定围成一个圈,从1开始一直环到n,然后每第2个开始自杀,但是有一个兵不想死,所以让你编程求出最后一个应该死的人的位置,这样的话就剩他自己他可以不自杀了 ...

LeetCode 6. ZigZag Conversion Question

题意:给你一个字符串和行数numRows,要求把该字符串变成一个"之"字形状后,按行数输出该字符串. 例子:"ABCDEFGHIJKLMNO", 4. 该字符串 ...

openGl学习之加入颜色

OpenGL 支持两种颜色模式:一种是 RGBA模式.一种是 颜色索引模式. 不管哪种颜色模式.计算机都必须为每个像素保存一些数据,即通过每个像素的颜色,来改变总体图形的颜色.不同的是. RGBA 模 ...

SublimeText3安装Highlight插件

本来机子上装的是版本3,试了试网上的教程,比如这个:http://qq920924960.blog.163.com/blog/static/221611034201411247318866/ 结果都不 ...

python中的递归问题，求圆周率

以上面一个公式为例: import numpy as np def getPi(n): if n == 0: return np.power(-1,n)*(1.0/(2*n+1)) else: ret ...

最短路径算法 1.Floyed-Warshall算法

这几周开始正式系统学习图论,新学期开始新的记录.由于二模和生物地理两门高考的临近,时间比较仓促,所以暂时跳过图论的(一)和(二),即图的储存和遍历.从最短路径算法学起,首先要学习的是Floyed-Wa ...

Spring 全局异常捕捉

Spring全局异常捕捉类 注解@ControllerAdvice package com.sicdt.sicsign.web.bill.controller; import org.springfr ...