您的位置：首页 > Web前端 > JavaScript

js组织html代码块心得

2017-07-15 22:20 183 查看

引言

在js开发中，经常会通过拼接html字符串，来为前端页面动态增加元素。然而，这种方式非常不直观且不便于后期维护。尤其当添加的元素量较大时，与之相关的js代码会显得十分杂乱。针对此种情况，本文以通过js生成一个静态html页面代码块为例，结合Ecmascript6动态字符串标准和网友自定义的format函数，来分享一下js组织html代码块心得。

1 Ecmascript6动态字符串标准

Ecmascript6规定动态字符串用反引号“，动态字符串中需要引用变量的地方，只需参照${var}形式即可，样例如下：

var id="div1"

var divHtmlBlock=`<div id="${id}"></div>`;

2 js自定义扩展format函数

此函数同样用于组织动态代码块，但同时适用于引号和反引号两张形式的字符串。

format函数定义如下：

//判断是否为空对象
function isEmptyObject(e) {
var t;
for (t in e)
return !1;
return !0
}

if (!String.prototype.format) {
String.prototype.format = function (args) {
if (arguments.length > 0) {
var result = this;
if (arguments.length == 1 && typeof (args) == "object") {
if (isEmptyObject(args)) {
return "" + this;
}
for (var key in args) {
var key2 = key.replace(/\$/g, '\\$');//key中的特殊符号转义；
var reg = new RegExp("({" + key2 + "})", "g");
result = result.replace(reg, args[key] || '');//null 替换为''
}
}
else {
for (var i = 0; i < arguments.length; i++) {
if (arguments[i] == undefined) {
return "";
}
else {
var reg = new RegExp("({[" + i + "]})", "g");
result = result.replace(reg, arguments[i]);
}
}
}
return result;
}
else {
return "" + this;
}
}
}

format函数使用样例如下(注意format函数返回加工后的字符串，而并没有对原字符串进行替换)：

var opt={
id:"div1"
};

var divHtmlBlock=`<div id="{id}"></div>`;
divHtmlBlock=divHtmlBlock.format(opt);

3 编写html页面代码块

最后，我们混用1、2两种方式来轻松直观的编写一个html页面代码块。其中，子代码块采用方式2，设置元素属性或内容则采用方式1。

//从数据库读取的页面内容
var data={
divText:"欢迎您！"
}
//html页面代码块
htmlBlock=`
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>静态页面</title>
{cssBlock}
</head><!--/head-->
<html>
<body>
{bodyBlock}
{jsBlock}
</body>
</html>
`,
//页面子块对象
htmlOpt={
cssBlock:'<link href="css/my-css.css" rel="stylesheet">',
bodyBlock:`<div>${data.divText}</div>`,
jsBlock:'<script src="js/my-js.js"></script>'
};

htmlBlock=htmlBlock.format(htmlOpt);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航