通过js和模板动态加载html页面

yz06061079

于 2016-09-09 09:25:13 发布

阅读量2.6w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： javascript html html5 模板动态加载

本文链接：https://blog.youkuaiyun.com/yangzhen06061079/article/details/52484102

本文介绍了两种在HTML5中动态加载页面的方法。第一种是通过JavaScript和模板，利用formatString()函数和正则替换动态生成内容。第二种方法使用require.js的template()函数，提高了代码复用性。虽然第一种方法简单易懂，但代码封装不足；第二种方法复杂但具有更好的复用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.简述

html5页面中的静态部分代码好写，直接在.html文件中编写对应标签即可。但是对于动态的部分，就只能使用js和模板动态加载了。下面我介绍两种常用的动态加载html页面的实现方法。

二.实现方法一

实现方法如下面代码所示，在函数initAds()中，用变量template做一个html的模板，模板中可变的部分用“{变量}”括起来，然后从服务端读取数据，使用函数formatString()将服务端数据使用正则方法匹配替换template模板中的“{变量}”，然后将替换完成后的html代码插入到页面中对应的位置，这样就实现了通过javascript和模板动态给html页面添加内容。

这种方法的优点是简单易懂，缺点是代码封装得不好。每次都得重写ajax函数。

/**
 * 字符串格式化，用于在模板中注入值
 * 例：var s = "id={id}".formatString(obj);
 * @param obj 对象
 * @returns {string} 注入后的字符串
 */
String.prototype.formatString = function (obj) {
    var reg = /{([^{}]+)}/gm;
    return this.replace(reg, function (match, name) {
        return obj[name];
    });
}<