前端重构也已经有各种模块化的思想出现，结构模块化、样式模块化等等

今天和同事沟通视觉统一化的时候，发现流程中在产出物方面存在一个问题
如下图所示：

大家按照统一的思维过程在执行时 产出物在页面构建的环节，形成了一个聚合，从以UI组件为单位变为了以page为单位的产出物，而之后到了后端研发时，其实Template还是需要再次分拆，由于这个问题，而产生了更大的沟通成本，降低了整个团队的效率

基于这个问题 我提出了一个解决方法 还算不上解决方案，短暂的解决一下

在页面构建的环境 通过webserver的SSI Include指令 将静态页面也进行模块化，在交付产出物的时候后端研发人员是很清晰的看到module的复用代码，也降低了重构页面时对于统一的ui而产生不同html和css代码的错误率

具体实现如下：

在开发(测试环境)  建立webserver（nginx、apache均可） 然后通过配置文件开启SSI支持

Apache 开启SSI方式 http://www.uplinux.com/download/doc/apache/ApacheManual/howto/ssi.html

要使服务器允许SSI，必须在httpd.conf文件或.htaccess文件中有如下配置：

Options +Includes

告诉服务器以允许解析文件中的SSI指令。注意，在多数配置中，多个Options指令会互相覆盖，所以，可能必须对需要SSI的特定目录使用Options，以确保位于最后并起作用。

并不是所有文件中的SSI指令都会被解析，所以，必须告诉Apache应该解析哪些文件。有两种方法，使Apache解析带有特定文件后缀的任何文件，比如.shtml, 配置如下：

在 Nginx 开启 SSI ，加入以下3行就OK了，可以放在 http, server, 和 location 段都行

SSI Include 指令语法，我们主要用这个语法来调用相关组件文件代码

<!–#include virtual=”文件路径” –>

在构建页面时 目录结构可以是

demoproject/ 项目文件夹
|-- aboutus.shtml  综合性页面 包含module调用
|-- index.shtml    综合性页面 包含module调用
|-- other_page.shtml 综合性页面 包含module调用
|-- module  组件文件夹
|   |-- footer.html  组件文件
|   |-- header.html  组件文件
|   `-- other_module.html 组件文件
|-- images 其他静态文件
|-- js 其他静态文件
`-- style 其他静态文件

这样 我们形成的综合性页面的代码中会包含module调用，在我们每次对通用组建修改时，只需要修改组建文件即可
如下图，因为我们之前在webserver配置了SSI支持，所以我们能够实时预览效果

这样，除了在开发时方便了我们自己，我们的交付物也能够体现模块化思想，方便后端人员处理templates

同时我也用python写了一个开源项目，方便使用shtml这种方式构建页面的同事 产出传统html交付物

shtml2html项目

使用方法：

Usage: python shtml2html.py path 支持文件和目录（递归处理）

这是我目前的解决方法，正在试行中，小团队还没那么智能化，希望能给大家提供一些思路

如果你有更好的解决方案也请告诉我，多交流

使用方法：
在需要使用该插件的页面插入如下依赖 具体路径请自行修改
分别是：JQuery1.32 本插件核心代码 和本插件的css样式

<script src="jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="simpletip/jquery.tip-min.js" type="text/javascript"></script>
<link href="simpletip/SimpleTip.css" rel="stylesheet"/>

插件使用：

$(document).ready(function(){//jq的页面载入事件
    $("#tip2").tip({ //获取目标元素
    width: 100,//自定义宽度 也可以不设定此项
    text: "<span class='icon01'></span>宽度：100px 是自定义的"//提示内容 可以包含html代码
    });
})

核心代码分析：

(function($){//建立闭包
	var _tip;//创建提示对象
    $.fn.tip = function(options){//jq插件机制的核心函数$.fn
        var defaults = {	//默认参数
			width:300,
            text: "这里是提示文字"
        };
        var opts = $.extend(defaults, options);//参数合并 具体参见jq手册
        this.bind("mouseover", function(event){//给目标对象绑定事件
            showtip(event, opts);
        });
        this.bind("mouseout", function(event){
            _tip.hide();
        });
        this.css("cursor", "pointer");//目标对象的鼠标样式
    };
    function showtip(event, opts){//显示提示层方法
        target = $(event.target);//获取事件触发的对象
        if (!_tip) {//如果提示对象不存在
            _tip = $("<div/>");//创建一个div element
            _tip.addClass("tip").css("width", opts.width).appendTo($("body"));//根据参数设定宽度 插入到body中
            _tip.bind("mouseenter", function(event){//给提示对象绑定事件 这里使用mouseenter jq已经做了兼容
                $(this).show();
            });
            _tip.bind("mouseleave", function(event){//给提示对象绑定事件 这里使用mouseleave jq已经做了兼容
                $(this).hide();
            });
        }
        _tip.css("width", opts.width);//提示对象的宽度
        _tip.html("<div>"+opts.text+"</div>");//提示对象的内容
        _tip.append($("<iframe class='ie6iframe'></iframe>").css("width", _tip.width()).css("height", _tip.outerHeight(true)));
		//建立遮罩层
        _tip.css("position", "absolute").css("top",target.offset().top + target.height() - 3).css("left",target.offset().left);//提示对象定位
        _tip.show();
    };
    })(jQuery);

就到这里吧：）
[查看DEMO] [下载源码]新增了 template的机制 Demo -2010/9/7
转载请注明来源：）

<div class="Area">
  <div id="menu1" class="main_tit">
	<h2><a href="http://www.iamued.com">IamUed.com-前端开发</a></h2>
	<ul  class="sublist">
		<li><a href="http://www.iamued.com">javascript</a></li>
		<li><a href="http://www.iamued.com">Ria</a></li>
		<li><a href="http://www.iamued.com">ActionScript</a></li>
		<li><a href="http://www.iamued.com">Flash</a></li>
		<li><a href="http://www.iamued.com">Flex</a></li>
		<li><a href="http://www.iamued.com">W3C</a></li>
		<li><a href="http://www.iamued.com">xhtml</a></li>
	</ul>
  </div>
  一级内具体内容
</div>

可以看到 对于程序输出来讲 这样的结构不需要任何逻辑 相对代码结构清晰整洁

核心JS代码如下

//核心方法 传送一个数组参数
function submenumore(menuarr)
{
    for(var j=0;j<menuarr.length;j++)//循环该数组
    {
        var listli=document.getElementById(menuarr[j]).getElementsByTagName("ul")[0].getElementsByTagName("li");//根据数组获取到该子菜单的li
        if(listli.length > 5)//如果子菜单数量大于5
        {
            var newimg=document.createElement("a");//新建一个a元素 作为大于5个之后显示的小图标容器
            newimg.className="moreimg";//给a元素设置一个样式
            newimg.onmouseover=function()//绑定事件 主要用于显示之后的子菜单 这里不多做解释
            {
                showsubmore(this);
            }
            newimg.onmouseout=function()//绑定事件 主要用于隐藏之后的子菜单 这里不多做解释
            {
                hidesubmore(this);
            }
            var newul=document.createElement("ul");//新建一个Ul元素 用来存档多余的子菜单
            newul.className="sublistmore";//给新的UL设置样式
            for(var i=5;i<listli.length;i++)
            {
                newul.appendChild(listli[i]);//将其余的子菜单 添加到这个新的有序列表里
                i--;
            }
            newul.onmouseover=function()//绑定事件 主要用于显示之后的子菜单 这里不多做解释
            {
                this.style.display="block"
            }
            newul.onmouseout=function()//绑定事件 主要用于隐藏之后的子菜单 这里不多做解释
            {
                this.style.display="none"
            }
            var imgli=document.createElement("li");//新建一个li元素
            imgli.appendChild(newimg);//将之前建立的A元素 添加到这里 为了页面结构统一 可以比较好的调整样式
            document.getElementById(menuarr[j]).getElementsByTagName("ul")[0].insertBefore(imgli,null);//将新建的LI插入到5个子菜单后面
            document.getElementById(menuarr[j]).appendChild(newul);//将多余子菜单加入到数组所传的容器内
        }
    }
}

这里要解释一个地方

 for(var i=5;i<listli.length;i++)
  {
     newul.appendChild(listli[i]);//将其余的子菜单 添加到这个新的有序列表里
     i--;
  }

这里为什么要i–呢
由于读取出来的是一个引用对象
所以将之前数组内对象 添加到新的 对象里
之前的数组length将-1
所以将i–以获得之前数组的连贯对象

在代码中用到了2个之前收集的方法 主要是为了兼容各种浏览器

//该函数主要取得对象距离浏览器的真实距离Offset
function GetRealOffset(o)
{
    var elem = o;
    var leftOffset = elem.offsetLeft;
    var topOffset = elem.offsetTop;
    var parent = elem.offsetParent;
    while(parent)
    {
        leftOffset += parent.offsetLeft;
        topOffset += parent.offsetTop;
        parent = parent.offsetParent;
    }
    var Offsets = new Object();
    Offsets.top = topOffset;
    Offsets.left = leftOffset;
    return Offsets;
}
//该函数主要用于取得元素的兄弟节点 由于火狐下兄弟节点将TextNode也计算在内 所以用该函数兼容
function getnextSibling(o)
{
    do
    {
        o = o.nextSibling;
    }
    while (o.nodeType != 1)
    return o;
}

其他的更多的是页面样式的问题 不做过多解释了

查看DEMO
下载代码
转载请注明：转自我是UED-原文链接:http://www.iamued.com/qianduan/1010.html