Firebug控制台详解

April 8, 2012 | 作者：白菜 | 分类：网页前端 | No Comments

作者： 阮一峰

日期： 2011年3月26日


Firebug是网页开发的利器，能够极大地提升工作效率。


但是，它不太容易上手。我曾经翻译过一篇《Firebug入门指南》，介绍了一些基本用法。今天，继续介绍它的高级用法。

===================================

Firebug控制台详解

作者：阮一峰


控制台（Console）是Firebug的第一个面板，也是最重要的面板，主要作用是显示网页加载过程中产生各类信息。

一、显示信息的命令

Firebug内置一个console对象，提供5种方法，用来显示信息。

最简单的方法是console.log()，可以用来取代alert()或document.write()。比如，在网页脚本中使用console.log("Hello World")，加载时控制台就会自动显示如下内容。

另外，根据信息的不同性质，console对象还有4种显示信息的方法，分别是一般信息console.info()、除错信息console.debug()、警告提示console.warn()、错误提示console.error()。

比如，在网页脚本中插入下面四行：


　　console.info("这是info");

　　console.debug("这是debug");

　　console.warn("这是warn");

　　console.error("这是error");


加载时，控制台会显示如下内容。

可以看到，不同性质的信息前面有不同的图标，并且每条信息后面都有超级链接，点击后跳转到网页源码的相应行。

阅读剩余部分...

SPDY 协议介绍

February 5, 2012 | 作者：白菜 | 分类：网页前端 | No Comments

目前支持SPDY协议的应用有：firefox开发板，jetty8等。
SPDY 目前是一种应用层实验性协议，旨在让互联网访问更快速，减少web页面的延迟。

SPDY 设计特点

协议在SSL层的基础上，增加了一个session 层，从而在一个tcp 连接基础上，实现了多并发和交叉流传输

HTTP 的GET ,POST 仍旧采用旧有的消息格式，当然SPDY 协议对原有的数据做了封装和编码，这里采用Wrapper设计模式。
spdy.png

流是双向的，比如，既可以从客户端发起，也可以从服务器端发起（PUSH）

SDPY的目标就是通过其基本特性和高级特性，来达到低访问延迟

基本特性包括

1  流复用

SPDY最牛逼的地方，是允许在一个TCP连接里面，允许无限并发流（在双方资源可承受的情况下）。因为请求是在一个单一的通道交错传输，TCP的可以达到很高的效率，从而更少的网络连接需要，可以以很高的 数据密度做传输。
2  具备优先级的请求
虽然无限的并行数据流的解决了序列化的问题，但是它们引入了另一个问题：如果由于信道带宽的限制，客户端可能会阻止怕堵塞通道的要求。为了克服这个问题，SPDY实现请求的优先次序：客户端可以请求尽可能多的项目，每个请求分配一个优先级。这样即使高优先级的请求仍处在pending状态，通道也不会传输非关键的，低优先级的请求，这样就有效地阻止了传输拥塞。
3  HTTP Header 压缩
对于HTTP 请求，响应头，SPDY都做了压缩，这样包更小，对于RESTFUL类型的WEB2.0 ,or OpenAPI 业务，将会有可观的效率提升。
高级特性

1  服务器端推送
SPDY通过X-Associated-Content 协议头来向客户端推送数据，头通知客户端，我要向你推送资源，准备接收好了。最近火爆的Google+ ,如果你用chrome浏览器，默认就采用SPDY技术，并且开启了服务器推送技术。服务器的推技术，全面提升了用户体验，是G+ 产品很快占据了足够多的优势，最近Facebook 开发自己的浏览器，也有摆脱现在技术限制的考虑
2  服务器暗示
不像上面提到的PUSH 技术，服务器会先告诉浏览器，你可以下载ABC资源了，这个ABC资源，可能就是下一个页面的JS ,CSS ，或者内容。服务器不会主动推送的，仍旧等待客户端请求，这对于低速网络，是个很大的优化，有点类似于我们的预加载技术
效果测试
TOP25 网站的平均页面加载时间

 DSL 2 Mbps downlink, 375 kbps uplink Cable 4 Mbps downlink, 1 Mbps uplink

Average ms Speedup Average ms Speedup
HTTP 3111.916
2348.188
SPDY basic multi-domain* connection / TCP 2242.756 27.93% 1325.46 43.55%
SPDY basic single-domain* connection / TCP 1695.72 45.51% 933.836 60.23%
SPDY single-domain + server push / TCP 1671.28 46.29% 950.764 59.51%
SPDY single-domain + server hint / TCP 1608.928 48.30% 856.356 63.53%
SPDY basic single-domain / SSL 1899.744 38.95% 1099.444 53.18
SPDY single-domain + client prefetch / SSL 1781.864 42.74% 1047.308 55.40%

转：JavaScript 的死与生

December 16, 2011 | 作者：白菜 | 分类：网页前端 | No Comments

很好的一篇文章：JavaScript is Dead. Long Live JavaScript! 下面是概要翻译与我的阅读笔记：

JavaScript 的成功得益于在正确的时间出现在正确的地点。JavaScript 的兴起与浏览器的支持息息相关。你瞧，VBScript 就没这么好运气。

JavaScript 很流行，但它有先天缺陷。Brendan Eich 当初只花了 10 天时间就把 JavaScript 设计出来了，作为 JavaScript 之父，BE 如是说：


与其说我爱 JavaScript，不如说我恨它。它是 C 语言和 Self 语言一夜情的产物。十八世纪英国文学家约翰逊博士说得好：“它的优秀之处并非原创，它的原创之处并不优秀。”


（摘选自阮一峰的翻译：JavaScript 诞生记）

JavaScript 的不足，最明显之处是语法。


糟糕冗长的语法


可选参数和默认值


function(a, b, option) {  option = option || {};  // ...}

上面的代码中，option 是可选参数，当没有传递时，默认值是 . 然而，传递的 option 值有可能是假值(falsy 值)。严格来写，得如下判断：


function(a, b, option) {  option = arguments.length > 2 ? option : {};  // ...}

注意：option = typeof option !== 'undefined' ? option : {} 也有可能是错误的，因为传递过来的可能就是 undefined

当不需要 b 参数，删除后，基于 arguments.length 的判断很容易导致忘记修改而出错：
function(a, option) {
  option = arguments.length > 2 ? option : {};
  // ...
}

如果能增加以下语法该多好呀：
function(a, b, option = {}) {
  // ...
}


Let


闭包很强大，也很恼火：
for (var i=0, ilen=elements.length; i<ilen; i++) {
  var element = elements[i];
  LIB_addEventListener(element, 'click', function(event) {
    alert('I was originally number ' + i);
  });
}

上面的代码经常在面试题中出现，解决办法是再包裹一层：
for (var i=0, ilen=elements.length; i<ilen; i++) {
  var element = elements[i];
  (function(num) {
    LIB_addEventListener(element, 'click', function(event) {
      alert('I was originally number ' + num);
    });
  }(i));
}

阅读剩余部分...

转：Simple JavaScript Template : substitute

December 16, 2011 | 作者：白菜 | 分类：网页前端 | No Comments

我们在平常使用字符串拼接的时候（如下例），会发现代码的可维护性和易读性将变得更加糟糕（代码中一堆的变量、双引号、单引号, 加号等，相信当情况更为复杂时，头一定发晕）：


var url= 'http://www.plannabc.net/',

    title= '落草为根——专注前端技术&关注用户体验',

    text = '怿飞's Blog';



var link = '<a href="' + url + '" title="' + title+ '">' + text+ '</a>';

如果上述代码变为：


var obj = {

    url: "http://www.plannabc.net/",

    title: "落草为根——专注前端技术&关注用户体验",

    text: "怿飞's Blog"

};

var link = '<a href="{url}" title="{title}">{text}</a>';

substitute(link, obj)

一切变得怡然自得。

阅读剩余部分...

JS实现图片上传时的本地预览，兼容IE和firefox

July 27, 2011 | 作者：白菜 | 分类：网页前端 | 2 Comments
   一般如果要实现在上传前预览图片的话，用纯服务器端的语言必定是办不到的，需要先传到服务器上，哪怕是只是服务器上的临时文件，这也是个很麻烦的事情，不过可以用javascript来做这件事。下面的javascript就可以是现在服务器上预览本地图片。不过代码还有一些问题，仅支持IE和firefox。不过我想也不会有多少人愿意去支持chrome，“吃肉么”浏览器一向我行我素，非要自己再弄套标准，谁吃饱了去支持吃肉么啊。明明IE和火狐都正常的代码，这个小不点的chrome浏览器非要跳出来不兼容你的代码。请无视google吧。
     firefox使用了getAsDataURL方法，而IE是用了滤镜。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <body>
        <input type=file name="doc" id="doc" onchange="javascript:setImagePreview();">
<p>
<div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div>
</p>
<script>
function setImagePreview() {
    var docObj=document.getElementById("doc");
    var fileName = docObj.value;
    var imgObjPreview=document.getElementById("preview");
        if(docObj.files &&  docObj.files[0]){
            //火狐下，直接设img属性
            imgObjPreview.style.display = 'block';
            imgObjPreview.style.width = '150px';
            imgObjPreview.style.height = '120px';          
            imgObjPreview.src = docObj.files[0].getAsDataURL();
        }else{
            //IE下，使用滤镜
            docObj.select();
            var imgSrc = document.selection.createRange().text;
            var localImagId = document.getElementById("localImag");
            //必须设置初始大小
            localImagId.style.width = "150px";
            localImagId.style.height = "120px";
            //图片异常的捕捉，防止用户修改后缀来伪造图片
            try{
                localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
            }catch(e){
                alert("您上传的图片格式不正确，请重新选择!");
                return false;
            }
            imgObjPreview.style.display = 'none';
            document.selection.empty();
        }
        return true;
    }
</script>
</body>
</html>
预览地址：http://aiyooyoo.com/t/imgprew.htm
有需要的可以自行改一下代码。

javascript contains方法

July 6, 2011 | 作者：白菜 | 分类：网页前端 | No Comments

IE有许多好用的方法，后来都被其他浏览器抄袭了，比如这个contains方法。如果A元素包含B元素，则返回true，否则false。唯一不支持这个方法的是IE的死对头firefox。
<script type="text/javascript">
  window.onload = function(){
    var A = document.getElementById('parent'),
    B = document.getElementById('child');
    alert(A.contains(B));
    alert(B.contains(A));
  }
</script>
<h2 style="text-align:center">contains方法</h2>

<div id="parent">
  <p>
    <strong id="child" >本例子会在火狐中会报错。</strong>
  </p>
</div>
不过火狐支持compareDocumentPosition() 方法，这是W3C制定的方法，标准浏览器都支持，不过实用性性很差，因此没有什么人用，推广不开来。它的使用形式与contains差不多，但返回的不是一个布尔值，而是一个很奇怪的数值，它是通过如下方式累加计算出来的：

000000 元素一致
000001 1 节点在不同的文档（或者一个在文档之外）
000010 2 节点 B 在节点 A 之前
4 节点 A 在节点 B 之前
001000 8 节点 B 包含节点 A
010000 16 节点 A 包含节点 B
100000 32 浏览器的私有使用

-

阅读剩余部分...

jquery常用技巧与代码总结

April 19, 2011 | 作者：白菜 | 分类：网页前端 | 3 Comments

1.jquery动态删除表格行或单元格
$("a[todo*='del']").click(function(e){
        var id = $(this).attr('todel');//获取ID
        var now=$(this);//防止作用域被篡改
        if (confirm("您确定要删除吗?")) {
            $.get("/p/ajax/pdel.do", {
                id: id
            }, function(data){
                switch (data._rc) {
                    case "success":
                        alert('删除成功', '删除账号');
                        now.parent().parent().find("td").eq(2).html("");
                        now.parent().parent().find("td").eq(3).html("");
                        now.parent().parent().find("td").eq(4).html("");
                        now.parent().parent().find("td").eq(4).html("<a href='../p/paddpre.do?pId=" + id + "'>添加账号</a>");
　　　　　　　　//$("#po"+id).remove();删除整行
                        break;
                    default:
                        jAlert("操作成功！");
                        break;
                }
            });
        }
    })

阅读剩余部分...

CSS Hack: 区分 IE6 / IE7 /IE8 /Firefox

November 18, 2010 | 作者：白菜 | 分类：网页前端 | No Comments
ie-firefox-hack.jpg
今天又遇到CSS问题了，还是那个Flash遮罩层错位，ie8和Firefox下正常，ie6也正常，就ie7错位了，没办法，偷个懒，用了CSS hack。为了一句CSS写多一个文件，或者在header上添加注释，那显然不是懒人的习惯做法。

selector{
property:value; /* 所有浏览器 */
property:value\9; /* 所有IE浏览器 */
+property:value; /* IE7 */
_property:value; /* IE6 */
}

当然，注意顺序。根据CSS的优先性，上面的写法，分别针对Firefox、IE8、IE7和IE6显示值。如果需要针对ie不同版本的浏览器显示，可以用IE条件注释。
<p class="ie">
<span style="display:block;display:none\9;">嘿嘿，小子竟然也用Firefox，蓝色文字。</span>
<!--[if IE 8]>不错不错，挺先进的嘛，使用IE8呢！文字是褐色的。<![endif]-->
<!--[if IE 7]>你，IE7，红色文字！<![endif]-->
<!--[if IE 6]>孩子，虽然显示的是绿色文字，不过，IE6可不是好东西呢！<![endif]-->
</p>

这里有类似的文章：
1.只用4个字符区分IE6,IE7和IE8
    Page :
  1. 1
  2. 2
  3. 3