WEB·攻城志

在ThinkPHP在使用Uploadify或其他基于Flash的上传插件的时候很多人会碰到上传控件无法传递Session的问题，特别是Firefox浏览器上面。官方解释可以将session id通过插件参数传递到后端，以下是Uploadify官方解决方案，但实测无法实现传递Session.

阅读全文…

jQuery添加插件主要有2种方法：

一、jquery.fn.extend(object) 为jQuery对象添加方法

jquery.fn 实际上就是jquery.prototype，如果从这个角度来看话，应该可以理解 jquery.fn.extend(object)实际上是对jquery.prototype进行扩展，就是为jQuery类添加“成员函数”，jquery实例对象可以直接使用该方法。这种方式添加的方法可以通过jquery实例进行调用，如：$(“.className”).foo();

二、jquery.extend(object) 为扩展jQuery本身添加方法，可以理解为给jquery类添加“静态方法”，通过这种方式添加的方法采用这种方式进行调用，$.foo();

另外，结合命名空间和闭包（自执行匿名函数）特性还可以进行扩展，为插件添加一些公有或私有的方法和属性，如 阅读全文…

经常使用JavaScript的同学应该注意过类似于下面这样结构的脚本语言

(function(){
… …
})();

著名的第三方类库jQuery就是用到这样的语法，这个就叫做“自执行匿名函数”

第一次看到这样的语法的时候其实感觉挺奇怪的，除了括号里面的匿名函数外“()();“，两个括号且以分号结尾，着实有点难以理解。其实仔细分析一下还是可以讲的通的。

首先，小括号在语句中起到”表达式组合分块“作用，并且每个分组都会有返回值，在控制台下运行执行下面的语句试试

alert(typeof function(){});   // “function”

可见自执行匿名函数的第一个括号返回的是一个“Function对象”，实际上小括号加上匿名函数返回的是一个匿名函数的引用，后面再加一个括号就跟普通函数的调用一样，由此便可以解释括号里面的匿名函数为什么可以达到自执行的效果了

结合闭包特性，对外实现接口封装

通常在复杂项目中会引用到多个JavaScript脚本，特别是在协同工作的时候，或者项目作为第三方库对外发布的时候，如果不做特殊处理，很容易出现变量、函数命名冲突。自执行匿名函数结合闭包特性可以有效实现有选择性地对外暴露接口

(function(){
  var foo = 'Hello';
  var bar = 'World!'

  function baz(){
      return foo + ' ' + bar;
  }
  function foo(){
      return foo + ' ' + bar;
  }

  window.baz = baz; //Assign 'baz' to the global variable 'baz'...
})();

console.log(baz()); //...and now this works.
console.log(foo()); //... do not works.

上面的代码运行结果，foo()之所以不执行是因为foo()的作用域限制，而baz()因为赋值作为window的属性而暴露在匿名函数之外，这样即可以保持foo()函数的私有特性，又可以对外提供接口.

 

 

 

尽管主流浏览器都支持并行下载，但事实情况是在下载脚本时并行下载是被禁用的，即使使用了不同的主机名，浏览器也不会启动其他的下载，解释是为了保证脚本能够按照正确的顺序执行，以及脚本可能使用document.write来修改页面内容。

在页面使用脚本时，对于所有位于脚本以下的内容，页面的逐步呈现都被阻塞尤其的在调用外部脚本的时候，因为速度原因导致页面半天不能正常显示尤为明显。通常我们会脚本放在页面最靠下标签之前的地方，以期尽可以多的内容能够逐步呈现。 阅读全文…

Post/Redirect/Get 简称PRG，是一种用来防止表单重复提交数据的一种Web设计模式，典型的重复提交form内容的情况像用户刷新提交响应页面等可通过PRG模式来得到避免。

当一个表单通过HTTP POST被请求提交的时候，用户在服务器端返回响应期间如果刷新了响应页面，将会导致原始HTTP POST过来的内容重复提交，可能会导致一些不可预期的结果，比如重复提交数据。

阅读全文…

       昨晚折腾一宿碰到个“鬼打架的事情”，在JavaScript处理时间的问题时发现月份总是不对，现在明明是2010年12月，结果显示的死活晚一个月，还以为是机器闹鬼，结果查了下机器时间丝毫没有问题的迹象。最终经过再三查看Date对象的方法发现一个确实很闹心的事情.

      JavaScript的Date对象所有关于月份的操作都参数是0~11，也就是说0代表1月份，11代表12月份，好家伙，这是什么逻辑？！！！

getMonth()

从 Date 对象返回月份 (0 ~ 11)。

getUTCMonth()

根据世界时从 Date 对象返回月份 (0 ~ 11)。

setMonth()

设置 Date 对象中月份 (0 ~ 11)。

setUTCMonth()

根据世界时设置 Date 对象中的月份 (0 ~ 11)。

 

 

另外天数也是0~6

getDay()

从 Date 对象返回一周中的某一天 (0 ~ 6)。

getUTCDay()

根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。

 

 

 

       纯CSS实现圆角框是一件大家都说烂了的事件，我也写过两篇总结文章，为什么还会有这篇文章呢，事情是这样的。在我们的以前的项目中，实现圆角框往 往是用背景图片来实现的，但是，当这些项目发布上线后，在维护过程中，有时需要添加一些新的需求，因为以前的项目中大量采用了圆角图片，并且这些图片全部 采用了CSSsprites方式合并的图，为了不增加更多的额外工作，并且也不想用JS来添加更多的http请求，所以需要一些简单的CSS方案来解决这个问题。而我 的个人爱好，也喜欢采用无图片的方式来处理这些效果。总觉得CSS能完成的工作，为什么不让它来实现呢？        武汉百度

实现原理：

纯CSS方式实现圆角框的原理在网络上已经有很多人详细解说了，下面这个示意图是我将其中的一个圆角进行放大后的效果。

图一

从上面效果图中我们可以看到其实这种圆角框是靠一个个容器堆砌而成的，每一个容器的宽度不同，这个宽度是由margin外边距来实现的， 如：margin:05px;就是左右两侧的外边距5像素，从上到下有5条线，其外边距分别为5px，3px，2px，1px，依次递减。因此根据这个原理我们可以实现简单的 html结构和样式。

1、Html结构层：

<div class="sharp color1"> <bclass="b1"></b><b class="b2"></b><bclass="b3"></b><b class="b4"></b> <div class="content">文字内容</div> </div> <b class="b5"></b><b class="b6"></b><bclass="b7"></b><b class="b8"></b>   </div>

b1~b4构成上面的左右两个圆角结构体，而b5~b8则构建了下面左右两个圆角结构体。而content则是内容主体，将这些全部放在一个大的容 器中，并给它的一个类名sharp，用来设置通用的样式。再给它叠加了一个color1类名，这个类名用来区别不同的颜色方案，因为可能会有不同颜色的圆 角框。

2、CSS样式：

.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px;font-size:1px; overflow:hidden; display:block;} .b1,.b8{margin:05px;} .b2,.b7{margin:0 3px;border-right:2px solid; border-left:2pxsolid;} .b3,.b6{margin:0 2px;border-right:1px solid; border-left:1pxsolid;} .b4,.b5{margin:0 1px;border-right:1px solid; border-left:1pxsolid; height:2px;}

将每个b标签都设置为块状结构，并定义其高度为1像素，超出部分溢出隐藏。从上面样式中我们已经看到margin值的设置，是从大到小减少的。而 b1和b8的设置是一样，已经将它们合并在一起了，同样的原理，b2和b7、b3和b6、b4和b5都是一样的设置。这是因为上面两个圆和下面的两个圆是 一样，只是顺序是相对的，所以将它合并设置在一起。有利于减少CSS样式代码的字符大小。后面三句和第二句有点不同的地方是多设置了左右边框的样式，但是 在这儿并没有设置边框的颜色，这是为什么呢，因为这个边框颜色是我们需要适时变化，所以将它们分离出来，在下面的代码中单独定义。

接下我们设置内容区的样式：

.content {border-right:1px solid;border-left:1pxsolid;overflow:hidden;}

也是只设置左右边框线，但是不设置颜色值，它和上面八个b标签一起构成圆角框的外边框轮廓。

往往在一个页面中存在多个圆角框，而每个圆角框有可能其边框颜色各不相同，有没有可能针对不同的设计制作不同的换肤方案呢，答案是有的。在我的这个 应用中，可以换不同的皮肤颜色，并且设置颜色方案也并不是一件很难的事情。下面看看我是如何将它们应用到不同的颜色的。

在上面的样式设计中，我已经给颜色方案留下了可以扩展的空间。我将所有的涉及到边框色的类名全部集中在一起，用群选择符给它们设置一个边框的颜色就 可以了。如下所示：

.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1.b6, .color1 .b7,.color1 .content{}{border-color:#96C2F1;} .color1.b1,.color1 .b8{background:#96C2F1;}

注意：需要将这两句的颜色值设置为一样的，第二句中虽说是设置的background背景色，但它同样是上下边框线的颜色，这一点一定要记住。因为 b1和b8并没有设置border，但它的高度值为1px，所以用它的背景色就达到了模拟上下边框的颜色了。
现在已经将一个圆角框描述出来了，但 是有一个问题要注意，就是内容区的背景色，因为这儿是存载文字主体的地方。所以还需要加入下面这句话，也是群集选择符来设置圆角内的所有背景色。

.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5, .color1.b6,.color1 .b7,.color1 .content{background:#EFF7FF;}

这儿除了b1和b8外，其它的标签都包含进来了，并且包括content容器，将它们的背景色全部设置一个颜色，这样除了线框外的所有地方都成为一 种颜色了。在这儿我也用到包含选择符，给它们都加了一个color1，这是颜色方案1的类名，依照这个原理可以设置不同的换肤方案。

好了，我们将上面的所有代码集中起来，就完成一个纯CSS圆角框的实例模型，在源码中，我设置了六套颜色方案，其它的颜色方案就看你的了。

下面是源码演示后的截图：

图二

为了演示效果，本模型的宽度值全部采用百分比实现的，你可以随意伸缩宽度，看看它能否适应弹性的变化。

本模型在以下浏览器中完美通过： 武汉百度推广

IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。

      实时的动态数据比如新闻标题、证券报价和拍卖行情都需要尽快地发送给用户。然而，AJAX仍然受限于web请求/响应架构的弱点，使得服务器不能推送实时动态的web数据。            武汉百度推广

      Delft科技大学的Engin Bozdag、Ali Mesbah和Arie van Deursen一起讨论了下面这些可以实现基于web的实时事件通知的方法：

      1.HTTP拉取方式：在这种传统的方法中，客户端以用户可定义的时间间隔去检查服务器上的最新数据。这种拉取方式的频率要足够高才能保证很高的数据精确度，但高频率可能会导致多余的检查，从而导致较高的网络流量。而另一方面，低频率则会导致错过更新的数据。理想地，拉取的时间间隔应该等于服务器状态改变的速度。

      2.HTTP流：这种方法由存在于不间断的HTTP连接响应中或某个XMLHttpRequest连接中的服务器数据流所组成。                                       武汉百度公司

      3.反转AJAX：服务流应用到AJAX推送，就是所谓的反转AJAX 或者COMET 。它使得服务器在某事件发生时可以发送消息给客户端，而不需要客户端显式的请求。目标在于达到状态变化的实时更新。COMET使用了HTTP/1.1中的持续连接的特性。通过HTTP/1.1，除非另作说明，服务器和浏览器之间的TCP连接会一直保持连接状态，直到其中一方发送了一条明显的“关闭连接”的消息，或者有超时以及网络错误发生。

        4.长时间轮询：也就是所谓的异步轮询，这种方式是纯服务器端推送方式和客户端拉取方式的混合。它是基于BAYEUX协议的。这个协议遵循基于主题的发布——订阅机制。在订阅了某个频道后，客户端和服务器间的连接会保持打开状态，并保持一段事先定义好的时间。如果服务器端没有事件发生，而发生了超时，服务器端就会请求客户端进行异步重新连接。如果有事件发生，服务器端会发送数据到客户端，然后客户端重新连接。

在他们的实验性研究中，作者们在一个利用COMET推送方式实现(Dojo的Cometd库)的AJAX推送应用和一个纯拉取方式的应用之间，对数据一致性、服务器性能、网络性能以及数据遗失进行了比较。

        适才有朋友问道Kim Minji作品欣赏上显示图片的效果是怎么做到的，于是谈起了图片显示特效来。武汉百度推广

        我所知道的，比较经典的当属这两个：Lightbox和FancyBox。下面一一来介绍给朋友们。

       1. Lightbox                                   

       效果预览：

        http://blog.designlinks.cn/gallery
        http://www.flashpic.cn/down/code/js/lightbox-js-v2/
        http://beach.blogbus.com/logs/3470001.html

        如何使用:
步骤 1 – 安装
Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库. 你将需要外调这三个 Javascript 文件在你的 header. <script type=”text/javascript” src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/scriptaculous.js?load=effects”></script>
<script type=”text/javascript” src=”js/lightbox.js”></script>
外调 Lightbox CSS 文件 (或添加 Lightbox 样式到你现行的样式表中). <link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />
检查 CSS 并确定调用的 prev.gif 和 next.gif 文件在正确的位置. 同样要确定调用的 loading.gif 和 close.gif 文件及 lightbox.js 文件在正确的位置.
步骤 2 – 激活
添加 rel=”lightbox” 属性到任何一个链接标签去激活lightbox. 例如: <a href=”images/image-1.jpg” rel=”lightbox” title=”my caption”>image #1</a>
可选择项: 使用 title 属性加上说明.
如果你有一套你想分组的相关图片, 接着上一部并且又在 rel 属性中添加一个带方括号的组名. 例如: <a href=”images/image-1.jpg” rel=”lightbox[roadtrip]“>image #1</a>
<a href=”images/image-2.jpg” rel=”lightbox[roadtrip]“>image #2</a>
<a href=”images/image-3.jpg” rel=”lightbox[roadtrip]“>image #3</a>
没有限定每个页面的图片组数量和每个图片组图片的数量. 疯了！

        下载Lightbox：http://www.flashpic.cn/code/jscode_2.html

          2. FancyBox

         效果预览：

         http://flashpic.cn/down/code/js/jquery.fancybox-1.2.1/

        简介：              武汉百度公司

        FancyBox是一款基于jquery开发的类Lightbox插件。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽，该lightbox除了能够展示图片之外，还可以展示iframed内容， 通过css自定义外观。

         相对与Lightbox而言，阴影效果更好。但是比Lightbox绚丽。

         使用很是简单，可以参照Lightbox，修改添加代码。

         下载及更多介绍：

          http://www.flashpic.cn/code/jscode_7.html