javascript网站模板（web制作网站的模板）
本文目录一览：
- 1、Javascript 字符串模板的简单实现
- 2、如何使用网站模板
- 3、Visual Studio 2012,新建项目时，里面没有javascript项目模板，怎么办？
- 4、是不是用到javascript的网页都不是静态页面，而是动态页面？
- 5、html 初学者 网站模板
- 6、急求一份html、css、JavaScript的“个人主页”网页设计模板代码。
Javascript 字符串模板的简单实现
这是源于两年前，当我在做人生中第一个真正意义上的网站时遇到的一个问题
该网站采用前后端分离的方式，由后端的
REST
接口返回
JSON
数据，再由前端渲染到页面上。
同许多初学
Javascript
的菜鸟一样，起初，我也是采用拼接字符串的形式，将
JSON
数据嵌入
HTML
中。开始时代码量较少，暂时还可以接受。但当页面结构复杂起来后，其弱点开始变得无法忍受起来：
书写不连贯。每写一个变量就要断一下，插入一个
+
和
"。十分容易出错。
无法重用。HTML
片段都是离散化的数据，难以对其中重复的部分进行提取。
无法很好地利用
template
标签。这是
HTML5
中新增的一个标签，标准极力推荐将
HTML
模板放入
template
标签中，使代码更简洁。
当时我的心情就是这样的：
这TMD是在逗我吗
为了解决这个问题，我暂时放下了手上的项目，花了半个小时实现一个极简易的字符串模板。
需求描述
实现一个
render(template,
context)
方法，将
template
中的占位符用
context
填充。要求：
不需要有控制流成分（如
循环、条件
等等），只要有变量替换功能即可
级联的变量也可以展开
被转义的的分隔符
{
和
}
不应该被渲染，分隔符与变量之间允许有空白字符
例子：
render('My
name
is
{name}'，
{
name:
'hsfzxjy'
});
//
My
name
is
hsfzxjy
render('I
am
in
{profile.location}',
{
name:
'hsfzxjy',
profile:
{
location:
'Guangzhou'
}
});
//
I
am
in
Guangzhou
render('{
greeting
}.
\\{
This
block
will
not
be
rendered
}',
{
greeting:
'Hi'
});
//
Hi.
{
This
block
will
not
be
rendered
}
实现
先写下函数的框架：
function
render(template,
context)
{
}
显然，要做的第一件事便是
匹配模板中的占位符。
匹配占位符
匹配的事，肯定是交给正则表达式来完成。那么，这个正则表达式应该长什么样呢？
根据
需求
1、2
的描述，我们可以写出：
var
reg
=
/\{([^\{\}]+)\}/g;
至于需求
3，我第一个想到的概念是
前向匹配，可惜
Javascript
并不支持，只好用一个折衷的办法：
var
reg
=
/(\\)?\{([^\{\}\\]+)(\\)?\}/g;
//
若是第一个或第三个分组值不为空，则不渲染
现在，代码应该是这样：
function
render(template,
context)
{
var
tokenReg
=
/(\\)?\{([^\{\}\\]+)(\\)?\}/g;
return
template.replace(tokenReg,
function
(word,
slash1,
token,
slash2)
{
if
(slash1
||
slash2)
{
//
匹配到转义字符
return
word.replace('\\',
'');
//
如果
分隔符被转义，则不渲染
}
//
...
})
}
占位符替换
嗯，正则表达式确定了，接下来要做的便是替换工作。
根据
需求2，模板引擎不仅要能渲染一级变量，更要渲染多级变量。这该怎么做呢？
其实很简单：将
token
按
.
分隔开，逐级查找即可：
var
variables
=
token.replace(/\s/g,
'').split('.');
//
切割
token
var
currentObject
=
context;
var
i,
length,
variable;
//
逐级查找
context
for
(i
=
0,
length
=
variables.length,
variable
=
variables[i];
i
length;
++i)
currentObject
=
currentObject[variable];
return
currentObject;
不过，有可能
token
指定的变量并不存在，这时上面的代码便会报错。为了更好的体验，代码最好有一定的容错能力：
var
variables
=
token.replace(/\s/g,
'').split('.');
//
切割
token
var
currentObject
=
context;
var
i,
length,
variable;
for
(i
=
0,
length
=
variables.length,
variable
=
variables[i];
i
length;
++i)
{
currentObject
=
currentObject[variable];
if
(currentObject
===
undefined
||
currentObject
===
null)
return
'';
//
如果当前索引的对象不存在，则直接返回空字符串。
}
return
currentObject;
把所有的代码组合在一起，便得到了最终的版本：
function
render(template,
context)
{
var
tokenReg
=
/(\\)?\{([^\{\}\\]+)(\\)?\}/g;
return
template.replace(tokenReg,
function
(word,
slash1,
token,
slash2)
{
if
(slash1
||
slash2)
{
return
word.replace('\\',
'');
}
var
variables
=
token.replace(/\s/g,
'').split('.');
var
currentObject
=
context;
var
i,
length,
variable;
for
(i
=
0,
length
=
variables.length,
variable
=
variables[i];
i
length;
++i)
{
currentObject
=
currentObject[variable];
if
(currentObject
===
undefined
||
currentObject
===
null)
return
'';
}
return
currentObject;
})
}
除去空白行，一共
17
行。
将函数挂到
String
的原型链
甚至，我们可以通过修改原型链，实现一些很酷的效果：
String.prototype.render
=
function
(context)
{
return
render(this,
context);
};
之后，我们便可以这样调用啦：
"{greeting}!
My
name
is
{
author.name
}.".render({
greeting:
"Hi",
author:
{
name:
"hsfzxjy"
}
});
//
Hi!
My
name
is
hsfzxjy.
如何使用网站模板
具体的使用情况告诉你：
1、下载模板之后，应该在文件中有一个说明，打开记事本样式的文件，首先看看里面的如何进入后台模板。一般情况是：首先下载一个asw文件（相当于iss），然后在地址栏中输入：回车。输入用户名或者密码（一般用户名：admin密码是：admin或者admin888)
2、进入后台之后，一般有“文章”“下载”之类的模块，在里面的相应位置添加内容，然后保存。
3、最后别忘记，重新生成首页功能。一般是在“管理”模块中。
说明：
如果不能生成，在每个模块中，有一个生成html功能，打开之后，先生成地图功能，然后点击生成全部模块。
上述说的应该算是很明白了，如果还是不明白，请给我留言，具体操作给你演示。
Visual Studio 2012,新建项目时，里面没有javascript项目模板，怎么办？
Visual Studio主要用来开发asp.net网站，不清楚你说说的javascript模板具体指什么。vs里面aps.net网站是建好模板的还有mvc也是有模板的
是不是用到javascript的网页都不是静态页面，而是动态页面？
是。有javascript的网页仍是静态网页，不是动态网页。不是网页上有动态的元素才是动态网页。假如一个网页有javascript花花绿绿的，它仍是静态网页，所谓的静态、动态是指能否与数据库产生交互。只有PHP、asp、JSP这些网页，才是动态网页。静态网页与动态网页的区别，动态网页以.asp、.jsp、.php、.perl、.cgi等形式为后缀，并且在动态网页网址中有一个标志性的符号——“？”，静态网页：以.htm、.html、.shtml、.xml等形式为后缀。
在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页，例如HTML, ASP、PHP、JSP、ASP.net、CGI等。静态网页运行于客户端的程序、网页、插件、组件，属于静态网页，下面列出的四种情况都不一定是动态页面，带有音频和视频，带有flash动画，带有css动画，带有javascript动画。千锋教育截止目前已在北京、深圳、上海、广州、郑州、成都、大连等20余个核心城市建立直营校区，服务近20万学员、近千所高校和数万家企业。
html 初学者 网站模板
!DOCTYPE html
html
head
meta charset="UTF-8"
title/title
style
body{
height:500px;
background: linear-gradient(#A6CADE,#F8C6F8) no-repeat;
}
ul,li,div {
padding:0;margin:0;
}
.container{
width: 500px;
margin:0 auto;
}
#tab-con div{
display: none;
width:500px;
height:282px;
}
#tab-con div img{
width: 100%;
height:100%;
}
#tab-con div.active{
display: block;
}
#tab-list ul li{
float:left;
list-style: none;
}
#tab-list ul li a{
display: block;
width:70px;
text-align: center;
text-decoration: none;
color:#000;
background: #D6D6D1;
}
#tab-list ul li.active a{
color:#fff;
background:#f96302;
}
/style
/head
body
div class="container"
div id="tab-con"
div class="active"img src="img/test1.jpg"/div
divimg src="img/test2.jpg"/div
divimg src="img/test3.jpg"/div
div图片4/div
div图片5/div
div图片6/div
div图片7/div
/div
div id="tab-list"
ul
lia href="javascript:;"首页/a/li
lia href="javascript:;"美食/a/li
lia href="javascript:;"交通/a/li
lia href="javascript:;"图片4/a/li
lia href="javascript:;"图片5/a/li
lia href="javascript:;"图片6/a/li
lia href="javascript:;"图片7/a/li
/ul
/div
/div
script
var tablist = document.getElementById('tab-list').getElementsByTagName('li');
var tabcon = document.getElementById('tab-con').getElementsByTagName('div');
for(var i = 0; itablist.length; i++){
tablist[i].onclick = function(){
starttab(this);
};
};
function starttab(obj){
for(var i = 0; itablist.length; i++){
if(tablist[i] == obj){
tablist[i].className = "active";
tabcon[i].className = "active";
}else{
tablist[i].className = "";
tabcon[i].className = "";
};
};
};
/script
/body
/html
急求一份html、css、JavaScript的“个人主页”网页设计模板代码。
!--这个模版来自[最好模版-],需要更多模版请访问;
html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
title┆假想敌┆- 颓废模板/title
script language="JavaScript" type="text/JavaScript"
!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//--
/script
style type="text/css"
!--
BODY {
SCROLLBAR-FACE-COLOR: #3F2413;
SCROLLBAR-HIGHLIGHT-COLOR:
#FFFFFF;
SCROLLBAR-SHADOW-COLOR: #ffffff;
SCROLLBAR-3DLIGHT-COLOR: #3F2413;
SCROLLBAR-ARROW-COLOR:
#FFFFFF;
SCROLLBAR-TRACK-COLOR: #3F2413;
SCROLLBAR-DARKSHADOW-COLOR: #3F2413;
background-color: #FFFFFF;
background-image: url(bg.jpg);
}
--
/style
/head
body
div id="Layer1" style="position:absolute; width:1000px; height:628px; z-index:1; left: 0px; top: 0px;"
div align="center"
pnbsp;/p
pnbsp;/p
pnbsp;/p
pnbsp;/p
pimg src="1.jpg" width="650" height="400" border="0" usemap="#Map2"
map name="Map2"
area shape="rect" coords="321,379,490,399" href="" target="_blank" alt="┆假想敌┆"
area shape="rect" coords="196,15,242,43" href="home.htm" target="main1" alt="home"
/map
map name="Map"
area shape="rect" coords="18,196,60,220" href="home.htm" target="main1" alt="home"
/map
/p
/div
/div
div id="Layer2" style="position:absolute; width:412px; height:295px; z-index:2; left: 382px; top: 203px;"
iframe src="home.htm" name="main1" width="412" height="295"
frameborder="0" scrolling="yes" style="border:0px;"allowtransparency="true"/iframe/div
/body
/html
span style="display:none;"这个模版来自,更多模版请访问a href="";/anbsp;a href="";/anbsp;a href="";/a/span
javascript网站模板的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于web制作网站的模板、javascript网站模板的信息别忘了在易优之家进行查找喔。
发表评论
暂时没有评论，来抢沙发吧~