扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
轻量表格库。
创新互联主要从事网站建设、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务涵江,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792
1.wFormswForms是开源和不显眼的库,它简化了最常见的JavaScript形式的功能。它提供了现成的表单验证功能,可以通过向表单对象添加类信息来应用这些功能。除此之外,wForms具有强大的表单同步(如“Check”/“Uncheckall”)和条件表单功能(例如,如果选中x,则显示y)。
2.ValidanguageValidanguage也是一个不显眼的JavaScript表单验证框架。它有一个继承逻辑,其设置可以按照表单或每个元素进行全局定义。通过提供的2个API:以及集成的AJAX支持,缓存和回调函数等功能,该框架提供了强大的验证体验。它有一个类似HTML的API插入注释标记和一个基于JavaScript对象的API,用于高级配置。LiveValidationLiveValidation是一个轻量级库,为你提供一组验证功能。除了经典的验证方法,该库还具有强大的实时验证功能。
使用npm安装jsdoc后,其文件目录结构如下:
参考: taffydb
而static文件夹放置静态文件,它会被原封不动地复制到生成的文件夹中,tmpl是模板文件
taffyData是包含所有doclet的taffyData,doclet是@link,@name...
比如使用了@name,就可以使用docs[0].name获取第一个@name值
和模板相关的模块是:
生成template的语句是
再看template.js导出类的构造函数
layout的初始化语句:
所以,如果要自定义模板(假设为 selfTheme ,以下都以其为例)的配置项,只需要使用 env.conf.templates 获取即可。例如:
template.js导出类的方法如下:
因此,在 layout.tmpl 文件中,有 content 变量表示当前页内容
当然,同时具有data包含的其它属性变量
在publish.js中,直接使用render函数的有两处。
所以,要修改各页面的标题,只需要将调用这两个函数的title函数换掉,比如:
不过重点还是添加模板变量和方法
添加到view中的方法/属性:
docs是一个包含数据的Taffy对象,它的来源是:
// myClasses等就是传入模板文件的docs变量
在模板中则用this.find({kind: 'class'})代替(view.find)
docs的元素内容是:
特别的:
这是源于两年前,当我在做人生中第一个真正意义上的网站时遇到的一个问题
该网站采用前后端分离的方式,由后端的
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.
es6中增加了模板字符串,使字符的操作更加灵活和解决复杂的问题。
语法:
使用反引号( ` )来包裹普通字符串。如:
在模板字符串中可以将任何有效的 JS 表达式嵌入到模板字面量中,并将其结果输出为 字符串的一部分。如:
简单的变量替换
复杂的表达式
就是使用javascript做的一些非常漂亮的特效,比如导航条,一些炫酷的动画,这些模板的好处就是只需修改对应的html元素的id 或者class,就可以将这些效果应用到属于你自己的网页上。百度知道上也有很多JS特效,比如抽奖和商城页面的特效就非常炫酷。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流