本文介绍了两种前端页面复用的方法：一是使用JQuery操作DOM节点加载外部文件；二是利用W3Data库实现页面元素的自动引入。这两种方法都能有效减少重复代码，提高前端开发效率。
在前端开发过程中，有部分通用的页面<节点>，如header/footer etc...，但是HTML没有提供引入页面的节点和方法，所有只能每个页面都将代码冗余这部分代码，但是这不仅对于前端开发者来说是一个工作量，对于后端整合人员，更是需要通过删除冗余代码，抽出通用部分，再进行引用，所有，很有必要通过某种方式使让前端可以直接抽成通用部分。
0.通过Jquery来操作节点：
main.html
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("content.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>b.html
<p> This is my include file - content.html </p>1.通过W3Data库进行引用<推荐>：
main.html
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>
<div w3-include-html="content.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>content.html
<p> This is my include file - content.html </p>Reference:http://www.w3schools.com/howto/howto_html_include.asp
扫一扫
654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
