刘钢的博客 - 我是UED » 重构 http://www.iamued.com http://www.IamUED.com Wed, 18 Jan 2012 02:51:35 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 [原创]通过shtml实现重构页面模块化构建—实现交付物模块化 http://www.iamued.com/qianduan/1998.html http://www.iamued.com/qianduan/1998.html#comments Wed, 19 Oct 2011 13:39:43 +0000 RichieLiu http://www.iamued.com/?p=1998 模块化思想已经不再是创新，陆续的演变成一种思维模式，在处理各种问题时都会考虑模块化思想

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

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

大家按照统一的思维过程在执行时 产出物在页面构建的环节，形成了一个聚合，从以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, 配置如下：

AddType text/html .shtml
AddOutputFilter INCLUDES .shtml

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

ssi on;
ssi_silent_errors on;
ssi_types text/shtml;

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项目

介绍：替换shtml中include内容为真实调用内容 并在同级目录生成.html文件 给重构团队在构建页面时使用

使用方法：

必须安装python环境 2.x版本
Usage: python shtml2html.py path 支持文件和目录（递归处理）

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

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

]]> http://www.iamued.com/qianduan/1998.html/feed 3 前端：减少reflow 提升性能 http://www.iamued.com/qianduan/535.html http://www.iamued.com/qianduan/535.html#comments Sun, 15 Nov 2009 02:32:29 +0000 RichieLiu http://www.iamued.com/?p=535
  • 原文：Minimizing browser reflow
  • 作者：Lindsey Simon
  • 翻译：ytzong

    • 浏览器为了重新渲染部分或整个页面，重新计算页面元素位置和几何结构（geometries）的进程叫做 reflow。由于 reflow 是一种浏览器中的用户拦截（user-blocking）操作，所以了解如何减少 reflow 次数，及不同的文档属性（DOM 层级（DOM depth），CSS 效率，不用类型的 style 变化）对 reflow 次数的影响对开发者来说非常必要。有时 reflow 页面中的一个元素会 reflow 它的父元素（译注：这里是复数）以及所有子元素。

    有多种用户操作和 DHTML 变化可能会触发 reflow。调整浏览器窗口的大小，用 javascript 计算样式（computed styles），在 DOM 中创建删除元素，改变元素的 class 都会触发 reflow。值得注意的是，有些操作会多次触发 reflow，超出你的想象。下图源自 Steve Souders 的演讲 “Even Faster Web Sites“：

    从上表可以很明显的看出，在所有浏览器中并非所有 javascript 控制的样式都触发 reflow，即使触发了触发的次数也不尽相同。同时可以看出现代浏览器在控制 reflow 次数方面做的越来越好。

    在 Google，我们通过多种方式对我们的页面及 Web 应用测速，同时 reflow 是我们增加 UI 时考虑的一个关键因素。我们致力于传达轻快的（lively），交互性强的（interactive）和令人愉悦的（delightful）的用户体验。

    原则

    下面是一些减小 reflow 的原则：

    1. 减少不必要的 DOM 层级（DOM depth）。改变 DOM 树中的一级会导致所有层级的改变，上至根部，下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面。
    2. 尽量减少 CSS 规则，去除未用到的 CSS。
    3. 如果做复杂的表现变化，如动画，让它脱离文档流。用绝对定位或 fixed 定位来完成。
    4. 避免不必要的复杂的 CSS 选择器，尤其是后代选择器（descendant selectors），因为为了匹配选择器将耗费更多的 CPU。

    在下面的视频中（译注：引用自 youtube，无法观看，请到原文翻墙），Lindsey 介绍了一些减少 reflow 的方法。

    延伸阅读

    ]]>     http://www.iamued.com/qianduan/535.html/feed 0     基于vertical-align的表单元素垂直对齐方式研究 http://www.iamued.com/qianduan/474.html http://www.iamued.com/qianduan/474.html#comments Sun, 08 Nov 2009 11:38:09 +0000 RichieLiu http://www.iamued.com/?p=474 原文链接：http://www.hplus.org.cn/blog/2009/07/143

    （本文的标题叫做“方式研究”，是因为，我最终也没有想通原理，只猜出了方法，但是，的确是实现了效果。）

    最近的项目涉及到很多表单的制作，特别是复选框(checkbox)和单选框(radio)。但是在前端开发过程中发现，单(复)选框和它们后面的提示文字在不进行任何设置的情况下，是无法对齐的，而且在Firefox和IE中相差甚大。即使设置了vertical-align:middle，也依然不能完美对齐。如下图所示：

    01

    于是上网查看了一些网站，发现这个问题是普遍存在的，如下图（FF3.5）：

    error

    在很多网站涉及到表单的页面中，都存在这种表单元素与提示文字无法对齐的问题。于是打算研究一下这个问题。首先，搜索到了wheatlee前辈的文章《大家都对vertical-align的各说各话》。wheatlee在他的文章中关于垂直居中提到了这样几个关键点：

    1、vertical-align:middle的时候，是该元素的中心对齐周围元素的中心。

    2、这里“中心”的定义是：图片当然就是height的一半的位置，而文字应该是基于baseline往上移动0.5ex，亦即小写字母“x”的正中心。但是很多浏览器往往把ex这个单位定义为0.5em，以至于其实不一定是x的正中心

    （baseline等名词如果不懂，请先阅读wheatlee的文章）

    按照这个思路，对照我遇到的问题，首先想到的是先验证一下浏览器对于“复选框”和图片是不是使用同样的规则来渲染（是不是把复选框当成一个正方形图片来对待）。于是写出下面的代码：


    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
    <title>测试vertical-align</title>
    <style>
    body{font-size:12px;}
    </style>
    </head>
    <body>

    <input style=”vertical-align:middle;” name=”test” type=”checkbox”>
    <img style=”vertical-align:middle;”  src=”testpic.gif” />
    测试文字
    </html>

    代码中的testpic.gif是一个尺寸与复选框完全一样的黑色图片。FF3.5下显示如下：

    02

    事实证明，FF3.5对于复选框和图片的垂直对齐方式是采用同样的规则进行渲染的，即将复选框当作一个正方形的图片(IE不是)。按照wheatlee“middle的时候，是该元素的中心对齐周围元素的中心”的观点，如果我在复选框后面输入英文字符，那么复选框的中心将与英文中小写字母x的中心对齐。经测试，FF3.5下面基本上是这样的(在一些字号的时候会有一定的误差，比如，如果字体高度是偶数，那么这个中心点有时在一般偏上1px，有时在一半偏下1px)。如图：

    03

    但是这对于中文来说，并不是一个好的结果。因为中文是方块字，并且相同字号的情况下，高度会比小写的x高出很多。所以，按照浏览器内置的方式，只用vertical-align:middle是无论如何也无法对齐中文的（无论是只写中文，中文在前，英文在前，FF3.5都是按照小写x中心那种方法来对齐的。）。但是回头再看看wheatlee的文章，他说这个小写x中心对齐的渲染方式，是对于“文字”来说的。那么，如果不是文字呢…？如果复选框后面跟的是一个行内元素，如label，而文字是写在它内部的，会是什么样呢？浏览器会不会将这个内联元素整体看作一个“块”，然后依照类似图片的规则进行渲染呢？如果那样，我们就达到目的了。

    但是经过测试，很遗憾，事实并不是这样，加上label后跟没加没有任何区别。FF3.5/IE6/IE7均是如此。在FF3.5中用firebug看一下，证明浏览器并没有按照label的高度值来去对齐中心点。如图：

    04

    如果按照之前的设想，红蓝两线应该是重合的。但现在的情况是，它们相差了1px。并且这1px是没有规律的，随着字号的放大，并不恒定，貌似轻易也无法提炼出对应关系来。于是想到，再试一下将label也加上vertical-align:middle。结果如图：

    05

    在FF3.5和IE7下面已经很接近于我们希望的状态了，只差1px。IE6下… 无语了。

    经过以上折腾，我得出了跟wheatlee相同的结论，就是，各种浏览器之间对这个问题的处理貌似没有任何规律。并且，似乎每一种浏览器对于vertical-align:middle的渲染都不是完全遵从W3C所说的“Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.”

    但是经过仔细总结和分析，发现好像最终对齐的结果跟label的高度和当前字体中小写x的中心点都有关系，两者同时影响着渲染结果。那么，既然现在的情况以及非常接近于希望的状态了，是否可以通过设置字体的方式来改变小写x的中心点的位置，接入对垂直对齐结果进行“微调”呢？

    最终，在不断的测试中发现，如果将font-family中的第一个字体设置为Tahoma，则可以完美的实现对齐(Verdana等字体也可以)。而且在FF3.5/IE6/IE7/IE8和Chrome中均显示正常。最终代码如下：

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
    <title>测试vertical-align</title>
    <style>
    label{vertical-align:middle}
    .inputcheckbox{vertical-align:middle;}
    body{font-family:tahoma;font-size:12px;}
    </style>
    </head>
    <body>
    <input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
    <label>测试文字x</label>
    </html>

    最终效果：

    06

    至此，多选框(checkbox)和提示文字对齐的问题已经解决，那么其他表单元素呢？试验了一下单选框(radio)，发现，还是有问题。文字提示依然是偏上。用firebug看了一下，发现radio元素默认有5px的左边距和3px的上、右边距，却没有下边距。如图：

    08

    于是，尝试去掉radio的外边距，刷新后显示正常。（其实多选框也是有外边距的，只是它的外边距四个方向都有，并且相等，所以对于垂直对齐没有影响。）下图是一些常用表单元素的最终显示效果以及最终代码，大家可以用不同浏览器看一下实际的效果（注：由于演示使用的12px的中文实际只有11px高，而IE下文本框等元素的高度是22px，一个是奇数，一个是偶数，所以这些部分在IE中是无论如何也对不齐的，差1px。如果手动控制文本框高度为奇数，或者将文字设置成为偶数的高度，则显示正常）：

    09

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
    <title>测试vertical-align</title>
    <style>
    *{margin:0;}
    label{vertical-align:middle}
    .inputcheckbox{vertical-align:middle;}
    body{font-family:tahoma;font-size:12px;}
    </style>
    </head>
    <body>
    <input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
    <label>测试文字x</label>
    <br/><br/>
    <input class=”inputcheckbox ” name=”test2″ value=”2″ type=”radio”>
    <label>测试文字x</label>
    <br/><br/>
    <input class=”inputcheckbox ” name=”Text1″ type=”text” />
    <label>文字</label>
    <input  class=”inputcheckbox ” name=”Text1″ type=”text” />
    <label>文字</label>
    <br/><br/>
    <label>测试文字</label>
    <input   class=”inputcheckbox ” name=”Button1″ type=”button” value=”按钮” />
    <br/><br/>
    <select class=”inputcheckbox ” name=”Select1″>
    <option>测试文字</option>
    </select>
    <label>测试文字</label>
    </html>

    而且我发现，不但解决了中文的问题，如果提示信息换成其他语言，基本上也能够对齐，至少不会像开始那样偏移太多。下面是截图、代码和一些例子：

    07

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
    <title>测试vertical-align</title>
    <style>
    label{vertical-align:middle}
    .inputcheckbox{vertical-align:middle;}
    body{font-family:tahoma;font-size:12px;}
    </style>
    </head>
    <body>
    <input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
    <label>测试文字x</label>
    <br/>
    <input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
    <label>這是繁體中文</label>
    <br/>
    <input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
    <label>次回から自動的にログイン</label>
    <br/>
    <input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
    <label>English</label>
    <br/>
    <input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
    <label>Чужой компьютер</label>
    <br/>
    <input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
    <label>صفحات من ‏السعودية </label>
    <br/>
    <input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
    <label>회원가입</label>
    <br/>
    <input class=”inputcheckbox ” name=”test” value=”1″ type=”checkbox”>
    <label>הפתוח</label>
    <br/>
    </html>

    至此，我的研究过程高于段落。

    但是，还是想不通各浏览器为什么最后会显示出这样的效果。牛人们有空可以解释一下吗？

    ]]>     http://www.iamued.com/qianduan/474.html/feed 2