6 引入公共页面_公共静态页面加载

【摘要】本文主要介绍PC商城开发过程中公共头部和尾部的解决思路，如果大家有什么建议，欢迎随时补充。

【作者】明月

本文分为三大部分：

第一部分：问题背景介绍

第二部分：解决方式

第三部分：遇到的问题

具体内容如下：

第一部分：问题背景介绍

公司中心管理系统的开发形式为多页面式，PC商城开发形式参考中心管理系统，也是多页面式开发，每个页面相同的部分都是分散在每个页面单独维护，在公司某大型采购B2B系统项目（以下简称项目）开发过程中遇到一个问题：当客户提出需求需要调整公共头部或者公共尾部的时候，需要对每个页面的相应部分做出调整，非常耗时，将公共部分提出一起维护可以减少维护的工作量。

图1：项目公共导航栏意图

第二部分：解决方式

在网上查看了相关资料，页面引入公共组件的方式比较多，比如iframe标签、js加载、PHP等，在跟同事商量之后，最后用的是Jquery load()方法，其他形式暂时没有做尝试，有兴趣的话大家可以百度一下具体实现方式，下面介绍一下query load()方法的实现方式：

第一步：将公共头部单独拎出来放在一个HTML文件中，公共组件不需要完整的HTML，以下图示是改项目公共头部代码（局部），大家可以看看代码结构：

图2：项目公共导航代码

第二步：在需要引入公共头部的HTML中的相应位置放上一个标签（以该项目引入公共头部代码为例）：

<div class="ui-topnav bgblue white"></div>

第三步：用js引入公共头部（由于每个页面都可能用到这个函数，可以将改函数放在公共的js文件中）：

M(".ui-topnav").load('000_common_topnav_blue.html',function(response,status,xhr){
    if(status === 'success'){
        //引入成功之后代码，比如添加点击事件
    }
});

第三部分：遇到的问题：

公共组件的数据渲染：调用引入代码之后没有考虑到返回的时间，偶尔会出现公共组件静态页渲染比向后台发送请求返回数据慢的情况，数据返回后公共头部没有完全加载出来导致数据渲染报错。

解决方式：页面所有的渲染都在公共组件加载完成后进行，即写在上述第三部成功引用之后的代码块中。