1、等高布局，N列等高布局

效果如下：

2、跟随布局（时间紧跟在新闻条目之后，新闻太长会自动隐藏）

效果如下：

3、图片垂直并且水平居中

看了三种情况，会写的也应该会了。。不会的么，那肯定还是不会了的。

下面来揭晓答案：点我看答案

页面制作为什么需要模块化？

现在貌似要降低运营成本，也就是，让运营填写的部分就少了，也就同样的，整个页面基本上都是异步出来的。可以看一下整个页面：

红框为数据接口，共有7个接口。如果让页面一载入的时候，就一起把这些接口都异步出来，估计页面的打开速度会受到很大的影响。而如何解决这个问题，我们很容易想到：减少代码冗余、提高代码重用率、图片压缩等等，而这些要如何实现呢？模块化思维可以解决，即可以有效减少代码冗余、提高代码重用率，更重 要是可以支持到多人维护，降低维护成本。CSS写法较为灵活，容易产生代码的耦合，使用模块化也可以在一定程度上降低耦合度，对于BUG的定位也有帮助。 所以，我们更应该在站点前期就重视并使用“模块化的思维”编写站点。（“模块化”只是我们对于过去一直使用的技术、方法的一个新潮的称谓，就像“Ajax”。）

我们之前经常提到的站点性能优化，有相当一部分也是“模块化”的内容，比如提高代码重用，提高开发效率等等，“模块化”的优点还有很多，我大概列了一下：

提高代码重用率
提高开发效率、减少沟通成本
降低耦合
降低发布风险
减少Bug定位时间和Fix成本
提高页面容错
更好的实现快速迭代
更好的支持灰度发布
其中最重要的一点，我认为是“提高代码重用率”，这也是模块化最重要的特点之一。

如何实现“模块化”？

以我上面的页面为例：我将页面划分为八个大模块，当然了，第一屏那个大的模块，还是可以继续划分的。

在kissy里面，可以用add增加一个方法，在这个里面，去执行函数
add的用法

HTML：

<div>
    <div>111222</div>
    <textarea class='ks-datalazyload hidden'>
      <script>
          KISSY.use('yourmod1', function(S) {
            S.YourFn.init();
          });
      </script>
    </textarea>
</div>

JS:
KISSY.add("yourmod",function(S){
	var yourfn = function(){
		//在这里发送请求
	}

	//在这里定义一个函数
	S.YourFn= {
          init: function() {
              yourfn();
          }
        }
    }
);

这里用textarea 来延迟加载需要的js，这样我的请求，只有在滚动到需要执行的地方才会被发送。（不知道是不是我的理解有错：这里和我们定义一个function yourmod(){},到需要用到的时候再调用。。有区别么？。。。）

有两个误区需要先认清下：
模块化后并不是就能被使用在任何位置（模块化后的代码段也是有适用的范围限制，需要一个提供接口规则的环境）
模块化后并不是就不能再变更（模块化后的代码段可根据实际需要做修改）

该js基于jquery 的。

大家只要在想要翻转的地方加入   id=”container”  即可，

效果只要看我页面即可，右侧的鬼脸~~~

点一下就复原啦，再点一下又翻了。。

点击这里查看demo：愚人节JS

js地址：在这里

那么我们就可以再技术上做到，只加载第一和第二屏的内容就可以了，在亮屏幕之外的内容可以等用户拉动滚动条了，再去加载其他的内容，达到用户在第一次访问网站时候提速的效果。下面是用 基于KISSY库的datalazyload效果。

   <textarea class='ks-datalazyload hidden'>
        <script>
          KISSY.use("loader",function(S,loader){});
        </script>
   </textarea>

loader是我注册的一个方法，方法里面请求了一个接口，异步加载了一些数据进来，
如果你想直接使用这个组件，那么还是直接看demo吧，整个down下去就行了

这里是：datalazyload

下面是iframe的嵌入！

这里放代码意义不大，直接看源码吧！方法很封装，调用很简单！

在这个过程中也碰到了一个问题，小数浮点型相加会出问题的，看下图，相加的结果：

不能精确计算，所以就去网上抄了个方法，还不错。

忙里偷闲，写了个相对来说还比较完整的页面：不多说了，上 demo

下面是iframe的嵌入！

配置说明：(多个倒计时就重复div即可)
J_Cowntdown ：倒计时box的class值，js是通过这个来找元素的；
data-endTime ：结束时间，格式为 2012/03/16 15:01:00 。暂时只支持这个类型的；
cd-d ：这些就是时分秒的框，需要什么调用什么（可选）
cd_hide ：时间到了，会自动显示出来（可选）
cd_show ：时间到了，会自动隐藏（可选）

下面放个 demo：

下面是iframe嵌入的：

水平有限，肯定没有jquery那些专业的倒计时好，等以后有时间再来扩展

网上关于vim的介绍有很多，我也就不重复了，在这里我想说一下我自己的感受，对比我用过的几个编辑器：

1、dreamweaver
做前端的人肯定很熟悉，adobe出品的，可视化编辑，易上手。一般是新手上路的最佳工具。

媲美程度相当于假腿： 出得快，人人必备，可一直用到战斗结束

2、EditPlus
小型编辑器，轻便，速度快，用的不多，只是用来临时改个链接什么的，基本上不会用来做开发使用

媲美程度相当于大魔棒：平时用用还是很方便，但是丢的也快…

3、sublime text2
自带迷你小地图，可以概览整个文件。而且他的zencoding非常犀利，直接有实时预览功能。装了package control之后，可以随意安装插件，可以说，这个功能也是很强大的。美中不足的是，不能支持gbk编码，由于搞的很多东西是gbk的，所以，不得不忍痛割爱。

媲美程度相当于跳刀：自从有了他，居家旅行，杀人越货必备神器啊，可惜，有些人用不上

4、vim
被谦总鄙视了dw之后，开始下定决心学习，上手有点难，对着教程按键盘！不过上手之后，就好很多了。让鼠标见鬼去吧，现在如果开始专心写代码，基本上可以用不着鼠标了，这个太爽了，可以提高很多效率

媲美程度相当于圣剑：拿上它，代表的就是牛B。可是。。不是每个人都能买得起的。。。

每个人都有每个人的习惯，我在此列出来的只是自己使用过的编辑器，其实还有很多很犀利的编辑器，欢迎大家补充！

总结了一下我能想到的可以提高自己的工作效率的几个方面：

1、学习新知识，
新知识包括知识层面上的，当然，还可以是工具层面上的：
css3，html5这些新技术还是必须要学习的，圆角，渐变，阴影等，都可以很快速的完成，可以节省很多时间。
工具层面上么，比如我现在使用的vim，又比如zencoding（实用简单的代码自动化工具）。

2、凡事预则立，不预则废
刚拿到一个项目，千万不能拿过来就做，这样看起来很抓紧，其实会在后面花费更多的时间去修改前面没有想到的问题。
我们在项目开始之前，必须搞清楚：
项目需求是什么？
开发周期有多久？
每个阶段该完成多少内容？

将项目拆分，合理的安排各个阶段的任务，对整个项目的代码结构做一些合理分布，将页面模块化，这样才能更快的更好的去修改

3、 减少切换
其实人应该有3只手的，2只控制键盘，一只控制鼠标。干起活来，肯定能够迅猛如飞。在工作的时候，右手离开键盘到鼠标，再回来，这个动作在整个过程中得重复很多遍，相对的浪费了很多时间。现在，最现实的改变是，把双手留在键盘上。避免挪来挪去的浪费时间。

在这里就更要推荐vim了，传说vim的犀利之处就是，写一万行代码，双手不离开键盘一下！！这个觉得是真的！关于vim的教程么。。等我以后用熟了，再来分享。

先阶段么，能够用“快捷键”搞定的一律用“快捷键”，再找一些自动化、批处理的插件么。

合理布局一下桌面上大大小小的窗口。
在么，顺便加一台显示器，弄个双屏的，这边写代码，那边看效果，真心很爽得。
每节省一秒钟，就是一秒钟。
每一个“切换”步骤的小优化，累积起来，都是效率的大提升。

4、清理干扰
要让同事们了解自己的开发习惯：不着急的需求，请发邮件。
强调一次没用就强调第二次。

干掉3分钟跑过来一趟，打扰你的人群。
闭掉1分钟n++条信息的QQ群。

保持一种良好的，不被打断的编码状态。

总结
做前端的同学，除了要处处考虑各种版本浏览器的兼容性这个脑力劳动之外，最大的体力劳动就是，在代码视图重复的输入代码了。由于有死机造成代码丢失的阴影，我现在习惯性狂按ctrl+s，（当然了，自从改用了vim,我已经不按ctrl+s了，而改用:w来保存了。。一样的其实。。。）估计这样长期下去除了椎间盘突出，这两个键也突出了
总而言之，言而总之。。。
为了让这种痛苦少一点。。就提高效率吧。。

    我们平时JavaScript进行前端开发的时候，做的最多的事情，除了操作dom以外，就是围绕json数据的操作了。而数据操作最麻烦的就是用json生成dom对象了，通常我们会写一堆for,if之类的代码来支持data向view的转化, 这样的代码一般会像：

html代码

<ul id="list">

</ul>

JS代码

var data = [{name: 'Claire', sex: 'female', age: 18, flag: true},
   {name: 'Mark', sex: 'male', age: 25, flag: true},
   {name: 'Dennis', sex: 'male', age: 32, flag: false},
   {name: 'Tracy', sex: 'female', age: 23, flag: true},
   {name: 'Wane', sex: 'male', age: 18, flag: true}];
   var html = '';
   for (var i = 0; i < data.length; i++) {
     var liHtml = "<li> 年龄："+data[i].name +"，性别："+ data[i].sex +"，年龄："+data[i].age+"</li>"
     html+= liHtml
   }
   document.getElementById("list").innerHTML = html;

    最终生成的html就是这样的

<ul id="list">
  <li> 年龄：Claire，性别：female，年龄：18</li>
  <li> 年龄：Mark，性别：male，年龄：25</li>
  <li> 年龄：Dennis，性别：male，年龄：32</li>
  <li> 年龄：Tracy，性别：female，年龄：23</li>
  <li> 年龄：Wane，性别：male，年龄：18</li>
</ul>

    这样做，看似也不烦，但是随着数据结构越来越复杂，很快你就会发现代码越来越臃肿，而且html完全嵌入在js代码中，几乎不可维护，如果要修改，都必须修改js代码，风险较高。实际上，将展现逻辑同数据分开在服务器端脚本中是很容易的事情，因为服务器端脚本一般都支持模板技术。模板语言的好处是能用一种灵活、易扩展的方式来将展现标记（如html）、数据（如json）和控制代码（如javascript）结合起来。

    现在也有不少浏览器端用javascript实现的模板引擎，如extjs的xtemplate,，jTemplate，TrimPath等。实现的思路都一样：将一段定义好的模板代码（像 <% do something %>之类的）compile为js代码；然后将json data作为这段js代码的输入，最终产生一段需要的文本（如html）。

在这里我引用的KISSY的template模板，

JS代码

KISSY.Template('Hello, {{name}}.').render({name: 'Frank'});

这里调用了kissy的template的组件，{{name}}就是需要替换的数据，render的就是数据data。这样我们就能够把data和html分开开处理了。

下面给出一个完整的例子，大家可以通过查看源码去看一下。

点这里过去看源码

最后给出一个不错的template的网址：
http://jsbin.com/exugah/9/edit#javascript,html,live

额，学习新的技术让自己不落伍！

css3的技巧，代码就不上了，直接上demo，能看懂的人肯定知道怎么去看源码！！