原生HTML中通过-JS-引入公共模块--组件化(header,footer,menu等)

1、html中通过id定义组件及引入

<!--header section -->
 <!-- 通过id注入组件 -->
<div id="header_page"></div>

<script>
// 通过load加载组件
$("#header_page").load("htmls/components/header.html", function(result) {
  });
</script>

 

2.header.html文件

<div class="headPage">
header组件
</div>
<script type="text/javascript">
$(function(){
   // 关于组件中使用的相关方法
});
</script>

 注意：在header.html文件中并非是标准的html文档格式，只需相应标签即可