artTemplate和tmodjs使用小记

最新推荐文章于 2024-05-18 09:52:28 发布

HapLeo

最新推荐文章于 2024-05-18 09:52:28 发布

阅读量5.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：网页前端

本文链接：https://blog.youkuaiyun.com/recordme/article/details/43736915

35 篇文章

订阅专栏

本文介绍了一种利用 artTemplate 和 tmodjs 实现前端页面元素动态加载的方法，通过将重复代码封装为独立模板文件，并使用 tmodjs 进行编译，简化了页面构建流程，同时便于后期维护和扩展。

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

起因：header和footer重复，不想用服务器端的include，而且不是正式项目，仅仅是自己的毕设。无关SEO优化，无关别的考虑。

于是：想前端解决。发现jQuery的get()和load()均为异步加载，不靠谱。

想看看有没有能包含文件的js模板框架，发现都无法干这样的事。（angularjs好像能，但是我只是想包含文件而已…而且其实也是ajax实现的…杀鸡焉用牛刀……）

然后看了看artTemplate，发现它的模板都写在了script标签里。

artTemplate的readme下面的一个小小的tmodjs，说是可以按模块（路径）组织模板，然后编译成最终的js来引用到页面中。于是，开工。

第一：Node.js

第二：设置Path，以在cmd中直接可以使用npm命令。

第三，安装tmod

第四，建文件夹，建模板，html的路径/名字就是模块名，和

<script id="test" type="text/html">
模板内容
</script>

一样，var html = template('header',data); 就可以获取把header.html作为模板渲染后的html。

把重复代码抠出，做成xx.html，运行tmod编译。tmod可以一直运行着，一旦模板文件(xx.html)修改，tmod会自动重新编译，输出template.js

所以仅需页面中引入编译好的template.js即可。

自己写个init.js,每个页面都引用：

				var html = template('header');
				$('.header').html(html);
				html = template('leftnav');
				$('.leftnav').html(html);

然后OK。

大概就是这样。

目前看是麻烦了些。

但是估计后期还会用到artTemplate的遍历数据等别的功能。就这样吧。不改了。

待更新。