扯来扯去扯来扯去

如标题表示的那样，以下文字存在的意义只在于一个字：扯。为扯而扯，内容不一，相当离题。要看图片的同学请直接滚到后面。

我想说，我不是Geek，不是技术宅，不是你们大家所想的那种戴着厚厚眼镜上反着荧光，等着在世界末日的时候出来拯救大家的那种人，事实上我根本就不戴眼镜。我对于技术这类东西的态度，可以说成是：那绝对不是最主要的东西，只是应该适当的掌握，在关键的时候为我所用，想做什么确没有能力去做，这种感觉是很不好的。只是如此。我甚至认为，技术的出现其实是阴谋着在50年后统治人类的，所以你瞧，绝不应该太把技术当回事，湿的东西(人)才是最主要的东西不是吗？

所以别整天问这些琐碎的基础的或许一找就有的干性问题了，能回答出来也只是先RTFM(Read The Fucking Manual)了一下，相信我，如果你自己去这么干，会有所收获的。这里说的技术和思想、方法一样，是在只在大脑中存在的那些东西，主要说的就是所谓的硬 (干)技术，也就是那些可能比摩尔定律变得更快的东西，还有那些对于任何人来说都是一样固定的东西，更重要的东西是经得起时间考验，同时是只有你自己才有的东西。所以我不会去读，也不推荐大家去读，更不会去写那种XX天精通XXX、XXX快速入门指南之类的东西，别太把那种东西当回事，你看过之后除了照着它说做一遍，别的，你什么也得不到。

我推崇的是the Zen of CSS Garden、DDD这样的书，还有一些个人博客的实践心得分享，还有就是社区里那些大佬们发起的对于某个问题解决方案的讨论。这样的东西要么就是不去注重具体的实践、技术上的细节，转而去研究思想、方法；要么就是针对某个具体问题的解决方案，你肯定不能直接拿来自己用，你可以吸收他人的经验与方法来解决自己的问题，更棒的是你可以直接回复作者讨论更多。

总结一下，要完全的掌握自己需要的那些技术，同时绝对不应该过分依赖技术，这里技术可以拓展到很多东西上，包括拍照片啊、做运动啊，都可以。好了，这个话题就到这里，我想说什么呢，大家自己去想。

=========================我是分割线=========================

这里演示一下之前说的吧，下面重点讨论实现兼容各种浏览器的圆角的方案，都是我自己的看法，如有不对请指正。

首先最简单是CSS3提供的方法，border-radius，现在某些浏览器的私有方法已经率先支持了这样的，前缀如-moz-(Gecko)、-webkit-(WebKit)、-khtml-(KHTML)、-o-(Opera)等等，实现很简单，效果一级棒：

border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
-o-border-radius:5px;

就是这样，大家可以试试。但是重点在于，目前没有任何版本的IE支持此特性，而不幸的是目前用IE的人口是最多的，所以，这意味着大部分用户是无法看到圆角的。

第二种方法就是Pixel画线法，例如一个3px的圆角，需要主容器内的上下各放上3个标签(一般是b)，给每个标签设置高度1px，同时设置背景颜色。然后例如上方来说，从上到下3个b标签的margin分别是0 4px、0 2px、0 1px，这样渐渐减少左右边距，就可以达到像素上的圆角效果。同时在上下总共6个多余b标签之间放置一个子容器，内容就放在子容器里了，同时子容器左右设置border，就可以描出整个圆角box的轮廓了。Google iG就是基于这样的方法实现的。还有一点就是在除去头尾2个b标签里面再放上一个b标签，设置背景颜色为子容器的背景颜色，然后margin都是0 1px，这样就描出单像素的线条框起了box。

另一种方法笼统的说就是图片法，但是仔细的说就分好几种了，例如最简单的是定高又定宽的box，只要做张圆角的背景图，设为背景，同时设置好padding，就可以有很完美的效果了。

稍微复杂一点定宽不定高，一般也能满足内容自适应的需求了，就是在主容器里上下各加一个标签，设置定框的上下圆角背景，内容可以直接放在主容器里(但要设置适当左右padding，同时box的非头尾部分竖直方向平铺背景亦可，因为头尾的那2个标签总是会盖掉背景的。但如果box父容器的背景色不是单色，即放在box头尾标签里当背景的图片的某些部分是不可预估的，处理方法就是在主容器内的头尾标签之间放上子容器，而内容和非头尾部分竖直方向平铺背景就放在这个子容器里。这种方法大部分地方都是这样的，如果不需要不定宽的，这种方法是最好的。

更复杂一点的就是，不定高也不定宽。多余标签最少的方案就是加4个标签放4角的图片，主容器position:relative，4个多余标签 position:absolute，分别设置top:0;left:0;、top:0;right:0;、bottom:0;left0;、 bottom:0;right0;放置在四角，同时这也只是背景颜色为单色时候的方案。一个偷工减料的方法干脆拿这4个标签当遮罩，用相同box父容器的颜色来盖出圆角。

再复杂一点基于上面那个，在头部尾部再加入2个标签，中间加入一个放内容的子容器，位于同一个流里，头尾2个标签设置适当的左右margin给 position:absolute定位过的4角标签让出适当位置(就是每个4角标签宽度)，同时控制内容给子容器设置一样大小的padding。这样就不必要给主容器设置边框，而是给子容器设置左右边框，给头部标签设置上边框，给尾部容器设置下边框，同时头部尾部边框也可以换设置水平平铺背景，这样即可实现box父容器非单色背景。数一数，一共6个空标签。

现在换个思路，用语义性不强，现在不推荐的使用的table来做这个，那么就是一个九宫格式的东西，四角4个背景照旧，同时上下左右也有用了分别放上下左右边框，甚至是背景的位置，而正中的那个，放内容。

回到原来的思路上，table实现圆角，也和之前那个6个空标签的差不多了，干脆可以再加2个多余标签，分别放在左右，具体做法是再给原来的子容器里加3个次级标签，用float方式水平排列，中间那个留着放内容。这样左右边框不再只能是border实现的线条，可以用竖直平铺的背景来实现边框了。这样数了数8个多余标签，再加一个box主容器和一个子容器。好家伙一共10个空标签，如果是用服务端脚本，赶紧用一个Helper性质的函数把生成这10个空标签的步骤封装起来的，或者也可以交给客户端，用js来搞出这10个空标签。

总结下，在不支持CSS3以及类似私有属性的浏览器(基本就是ie了)下实现圆角，基本都需要有多余标签，最复杂可能达10个，这是相当可怕的，特别是 ie6还有png透明问题(因为这个我目前放弃了在ie6下圆角，虽然ie6可以滤镜实现透明，不过我想还是算了吧)，以及ie6和ie7对和box模型的理解错误(主要体现在margin上，不过可以用hack解决)等等问题。如果谁给更好的方案请尽管说的吧，我同时也意识到上面一堆东西可能错误百出。还是普及CSS3之后，用那个最简单的CSS3的方法实现圆角吧。

=========================我是分割线=========================

下面扯扯服务端脚本配合前端实现ajax翻页的方法，关键词是模块化。

典型的ajax方法应该是服务端生成一个html页面和xml数据文件，通过html来载入不同页数的xml文件，来翻页。这样一来就需要在js里将xml 数据格式化成html内容，放到页面dom里。于是在大量xml数据下，在低js效率的浏览器中，这么干明显是不妥当的，更别提用户关闭了js的情况。还有，后端程序除了准备生成html文件，还应该同时生成xml文件，2者之前某些地方明显是重复的，而js也在干这这样的事情，于是这有点不符合DRY规则了，而且相当麻烦，没鲁棒性，执行效率开发效率都很低下。我以前也这么干，但是真的是非常麻烦，可以查看我在早期jpsfm里的放置那几个实验性质的小玩意，你就知道它们是有多么的猥琐了。

如图，一个完整页面大概就是如此，重点就是Items部分和Pagination，按之前说的麻烦的方法就是点击Pagination部分的时候，载入xml数据，格式化成html后重写，替换原来的Items组。

下面来讨论一种新方法吧。没有xml，直接都是html，不需要js格式化xml，js用http组件载入模块化的html内容，放到原来页面的dom里，后端程序不需要太多改变，并且完美支持禁用js的情况。

实现的方法首先从后端程序开始，先搞定如url为?page=2，这样的方法，我想应该很容易吧？然后增加一个standalone参数(其他名字当然也可以)，也就是?page=2?standalone=1，standalone为1或者说为true的时候，后端生成的页面就只有上图绿框中的内容，即只有Items部分和重新生成的Pagination，这样用户禁用js之后，点击Pagination自然而然的是a标签的href链接，?page=1、?page=2这样的，保证功能正常。

下面是ajax的实现，给Pagination里a标签绑定上click事件，点击之后http组件载入href属性再加&standalone=1，如原来是href=”?page=2″，此时载入的是?page=2&standalone=1，然后你瞧，载入的内容是格式化过的html内容了，直接替换掉原来的包含Items和Pagination的dom的内容即可，相当方便。

总结：采用模块化思想，将一个完整的页面的翻页动态部分拆分成非Standalone和Standalone部分，html内容一律只由后端生成，通过js动态载入Standalone部分的内容。

=========================我是分割线=========================

下面是全部用TZ3在车上一路拍的，也就是电线杆子什么的，本来是不想放出的
，因为数量还是不如某人的多，不过重要的一点是：我的更黑。

话说TZ3拍得真的很爽，也就是我第一段里想表达的，技术还有工具真的不是最重要的，拍照片的话，一台简单方便的焦

段齐全画质可靠的小LUMIX真的已经足够了。