rollup打包处理注释的一个奇怪bug

用了个第三方zip压缩库,正常html用标签方式引入没有问题,用npm引入后发现不支持import,于是跑去github上翻了下issue,结果作者认为import不是正式标准,不打算支持,甚至有人push了修改后的代码,仍然被拒了,原因是破坏了原有的require路径。

这个也好办,把dist下的代码复制过来,加个export default就行了。结果发现下在打包时出现了奇怪的语法错误“SyntaxError: Unexpected token”,通过大段删代码的方式总算定位到一个注释的问题:

const _tr_tally = (s, dist, lc) =>
//    deflate_state *s;
//    unsigned dist;  /* distance of matched string */
//    unsigned lc;    /* match length-MIN_MATCH or unmatched char (if dist==0) 

Sublime Text 2的Less2Css插件介绍与安装

Sublime Text 2这个编辑器应该不用再介绍了,配合各种插件使用起来非常方便,今天要介绍的是一款Sublime Text 2的插件——Less2Css。这款插件的名字已经表明了它的作用——把less文件转换为css文件。

Less2Css插件特性

Less2Css插件的目前主要的功能包括:

  1. 当保存less文件的时候自动生成同名的css文件;
  2. 当保存less文件的时候提示编译错误信息;
  3. 批量编译项目目录下的所有less文件为css文件。

Less2Css未来还会增加@imports功能支持,能够同时自动编译其他引用了此less文件的文件。

安装Less2Css插件

Less2Css可以通过Sublime Text 2的包管理器(Package Control)来安装(强烈建议安装包管理器!安装方法很简单,可以参考前端观察的介绍或者官方文档)。安装完包管理器之后,需要重启Sublime Text 2。

安装Less2Css的方法如下:…

WebSocket Draft 10向客户端写文本数据的实现

在Draft 10中,如果解析数据的过程弄清楚了,这个就更简单了,返回数据的格式和之前接受到的数据格式非常类似,只是你不用生成mask了,头部的其他格式还是一模一样的。

第一个字节还是固定的,是0x81,意义和接受数据的意义一样,第二个字节也是,后七个位表示数据长度,由于没有mask,所以第一位是0;长度的表示方法和接受的标识方法一致,可能用7位表示,也可能用16位表示。

用NodeJS实现如下:

var socketWriter = {
    'draft10': function(socket, data){
        var frames,
            length = new Buffer(data, 'utf8').length;
        if(data.length 0x7d){
            frames = new Buffer(4);
            frames[0] = 0x81;
            frames[1] = 0x7e;
            frames[2] = length 8;
            frames[3] = length & 0xFF;

WebSocket草案10文本数据解析实现

握手协议实现了,接下来就是解析数据了,这个相对来说要麻烦很多,相比草案7.6变得更复杂了。下图是数据传输的格式:

各个值的具体含义可以参考这个中文翻译:http://blog.csdn.net/fenglibing/article/details/6852497,英文原文在这里:http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-10#section-4.2

简单概括一下就是:FIN一直为1,RSV1、RSV2、RSV3一直为0,当发送内容为文本时,opcode为1,MASK如果为1就使用掩码,需要获取四位掩码,依次轮流和数据做异或运算,第一个内容数据与第一个掩码异或,第二个内容数据与第二个掩码异或……第五个内容数据与第一个掩码异或……一直到结束,然后再对内容进行编码就可以了。

在Chrome/Firefox下面,FIN永远为1,如果只是文本消息,opcode一直是1,RSV1、RSV2、RSV3都为0,所以第一个数据是0x81;MASK为1,再跟上数据长度,所以第二个数据会大于0x80,由于数据长度不一样,其需要占用的字节数也不一样,因此掩码的位置也不一样。根据规范,换算下来是这样:数据总长度(包含FIN、RSV等等信息)小于0x84,则掩码为第三个数据到第六个数据;数据总长度(包含FIN、RSV等等信息)小于0xfe81,则掩码为第五个数据到第八个数据;其他掩码则为第十三个数据到第十六个数据。当数据长度超过一个包的长度时,后面的数据包不再包含RIN、RSV和MASK等信息,二是直接为内容数据,需要根据上一次取到的MASK来做异或运算。…

WebSocket草案10握手协议的实现

Chrome早就采用了websocket草案10的协议,很多以前支持websocket的代码突然之间都用不了了,很多作者也没空更新,索性自己看了下草案,自己实现了一套。

握手协议还是非常简单的,Chrome发过来的header大概是这样的:

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 8

要答复的头大概是这样的:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection:

Mac下SSH代理软件Secret Socks修改版

Secret Socks是Mac下不错的SSH代理软件,不过有两点非常的不爽:一是不能记住密码(可能原作者是考虑到安全因素),二是超时时间设置得有点过短,而且不能修改,导致经常半天都连不上,实在是让人很郁闷。

令人欣慰的是,作者公开了此软件的源代码,索性直接拿来改了下,重新发布一个新版本。专门针对以上两点做了修改,基于安全因素(相对安全)考虑,给保存的密码用DES进行了加密,key是一个随机的字符串,非公开的。

打包后的文件只在Lion(10.7.x)下进行了测试,要求系统的最低版本是10.5.x,但未进行测试。

安装包下载地址:http://vdisk.weibo.com/s/IAQS(新浪微盘)

下载地址:http://115.com/file/bevneg0p#Secret-Socks.zip

 …

js中函数预解析在Firefox下的异常表现

前几天同事发现的一个诡异现象,猜猜浏览器执行下面这段代码会弹出什么提示?

if(1){
    f(1);
    function f(a){
        alert(a);
    }
}

通常情况下,都认为javascript中function会被预解析,所以这里应该会弹出一个对话框,显示字符“1”。没错,在IE6-IE9,Chrome,Safari,Opera等待浏览器下也都是这个结果。但是偏偏Firefox有点特立独行,会提示“引用错误,f未定义”。

我们再试试,把if去掉,只留两个花括号看看:

{
    f(1);
    function f(a){
        alert(a);
    }
}

还是一样!现在我们在试试几种情况:

if(1){
    function f(a){
        alert(a);
    }
    f(1);
}

这个没有问题,正常显示1,再试试这个:

if(1){
    function f(a){
        alert(a);
    }
}
f(1);

也没有问题,再试试这个:

if(0){
    function f(a){
        alert(a);

解决Opera不能访问内网资源的问题

开发测试时,经常会把公网页面上的部分域名指向内网时,在Opera下并不会发送对应请求,导致页面不正常,而几乎所有的浏览器都正常。这个并不是页面兼容性问题,这其实是Opera独有的一种安全策略。解决此问题的方法如下:

菜单->设置->首选项->高级->安全性->信任的网站->安全的内部主机->添加,输入你内网服务器的IP即可。

opera 设置

 …

也谈JavaScript代码性能优化

差不多两年前写了个选择器whiz,除在DOM查找方面做了许多优化工作之外,还在代码优化上做了很多工作,一直没有分享。抽空总结一下,基本上在jQuery、Mootools和YUI的源码里面都可以看到这些写法。有些是已经在网上分享很多遍了,众所周知的,也有一些可能写了多年的JavaScript的开发人员也不一定想得到的。如果有说得不正确的地方,还请大家指出。还有特别说明的是,其中某些写法不是很推荐,虽然代码简洁了,但是有可能造成阅读困难。

1.尽量使用源生方法(Native Method)

js是解释性语言,相比编译性语言执行速度要慢。如果浏览器已经实现了该方法,就不要再用js再去实现一遍了。另外,绝大部分情况下,浏览器已经实现的方法已经在算法方面做了很多优化,再重复实现一遍只是浪费时间和精力还有带宽。当然,如果你只是为了练习算法,那另当别论。

2.尽可能减少循环次数

代码的瓶颈大多在循环,少一层循环,就能数倍地提高性能。如果要对一个数组的每个元素进行多次操作,尽可能使用一次循环,多次操作,而不是多次循环,每次循环执行一次操作。尤其是在进行多个正则匹配的时候,尽可能合并正则表达式,在一次遍历中尽可能找到相应的匹配。…

Merpressor——自动合并压缩与无缝调试

这个是在第19期WEB标准交流会上的分享PPT,分享的内容很简单,主要是大家讨论,都很诚恳地提出了各种想法和意见。在前端这一块,平常的交流太多都在于各种技术交流,而太少关注调试、测试和发布环境。

大的互联网公司可能都有各自的调试、测试和发布流程,但是在这方面的资料实在是不多。Bobby(曾在yahoo台湾,现在盛大创新院) 讲到yahoo内部其实也有这么一套,我的和他们的很类似,遗憾的是内部使用的,也无迹可寻。Hax(盛大创新院)也提到一些想法,比如自动解决依赖关系,部分更新等,都是不错的想法。