前端杂谈 · Web

前端页面结构分模块化-引入公共部分

•̀.̫•́✧ · 7月22日 · 2020年本文1371字 · 阅读4分钟16

前言

如果没有母版页,那么大量相同布局的页面会有很多相同的代码,那么这就提到了一个概念,叫重用性;可以将相同布局的代码放在一个单独的文件,里面写一些公共模块,那么在其他页面只需要在指定位置引入他们就可以了。

例子:将页面头部作为公共部分

写一个头部,在top.html写入(只写的需要添加的):

< div style =“ width:100%; height:100px; background:green; text-align:center; line-height:100px;” >
  这是头部
</ div >

在center.html写入:

< div style =“ width:80%; margin:0 auto; text-align:center; border:1px solid;” >
  这是中间文本
</ div >

在index里,需要放置模块的位置放一个容器,然后再ready完成后加载进去:

<script>
/*用jq来写最方便
$(文档).ready(函数(){
  $(“#head”)。load(“ top.html”)
  $(“#center”)。load(“ center.html”)
});*/

// 也可以用原生js来实现ready    
function ready(fn){ 
  if(document.addEventListener){ 
    //标准浏览器 
    document.addEventListener('DOMContentLoaded',function(){ 

      document.removeEventListener('DOMContentLoaded',arguments.callee,false); //注销事件,避免反复触发 

      fn();//执行函数 
    },false); 
  }
  否则 if (document.attachEvent){ 
    // IE浏览器
    document.attachEvent(' onreadystatechange ' ,函数(){ 
      if (document.readyState == ' complete ' ){
        document.detachEvent(“ onreadystatechange ” ,arguments.callee);
        fn(); 
      } 
    }); 
  } 
}
// 在这里调用ready
ready(function(){
  $(“ #head ” )。加载(“ top.html ” )
  $(“ #center ” )。加载(“ center.html ” )
})
</ 脚本> 
< div id =“ head” > </ div > 
< div 样式=“ text-align:center; padding:20px;” >
  测试
</ div > 
< div id =“ center” > </ div >

注意:此段JS需要web服务,本地打开无效。

效果图:

前端页面结构分模块化-引入公共部分-歪?是3.1415926吗

比如一个网站的导航部分,采用结构分模块化的方式,引入公共部分。那么在后续的关联网页中,只需要修改单独的一个导航文件。

0 条回应