分类目录归档:写写代码

Touch 事件备忘

过了一次文档,做个备忘。

Touch 接口

每一个单独的触摸点,不可变。

interface Touch {
    readonly attribute long        identifier;
    readonly attribute EventTarget target;
    readonly attribute long        screenX;
    readonly attribute long        screenY;
    readonly attribute long        clientX;
    readonly attribute long        clientY;
    readonly attribute long        pageX;
    readonly attribute long        pageY;
};

继续阅读

postMessage

postMessage 被设计用来在窗口(window)间通信,特别地,用于跨域间的通信(可携带 cookie)。可支持在普通的页面、iframe / frame、用 open 打开的新窗口间使用。

使用的方法是:targetWindow.postMessage(message, targetOrigin),接收的事件是message

其中message不限定为字符串,targetOrigin是用来指定接收方的 Origin,不符合时浏览器禁掉该请求抛出异常,可以是 * ,但建议指定为具体的。

下面是一个单向通信的示例(A -> B)。

// A domain
windowB.postMessage('just a message', 'http://bdomain');


// B domain
window.onmessage = function(e) {
    // for safety
    if (e.origin == 'http://bdomain') {
        // source origin
        alert(e.source);
        // message data
        alert(e.data);
    }
};

通过设置隐藏的跨域 iframe,然后通过该 iframe 可以实现跨域无刷新提交需求。

这里是一个 DEMO

References

  1. postMessage – MDN
  2. compability – Can I use

CORS

CORS(Cross-Origin Resource Sharing),这技术的提出主要是为了解决 Ajax 的跨域问题。如果是 GET 类型的跨域请求的话,还有 JSONP 这种简单的解决方法,但像 POST 这种就复杂了,所以提出了 CORS。

XDomainRequest

IE 在 IE8 时就开始提供了跨域方案 XDomainRequest ,有了 error、timeout、progress 等处理函数,可惜得是走得太前并且当初考虑 .net 系列多导致限制有些多。

比如,对于普通的 Ajax post 来说,一般会设置 Content-Type: application/x-www-form-urlencoded,但 XDomainRequest 不能设置 header,从而只能发送纯文本,这对于服务器端会带来些困扰。PHP 在这种情况下不会把提交的键值对放进 $_POST 变量中,而需要用 HTTP_RAW_POST_DATA 来获取再解析。

也没法发送 cookie 来做身份验证。

因为限制有些多,所以 ie10 后抛弃了 XDomainRequest 而采用 XMLHttpRequest Level 2 了。

下面是一个简单的例子

继续阅读

语义化版本号

对于一个给定的版本号 MAJOR.MINOR.PATCH (主、次、补丁),其变化的规律是:

MAJOR version (主版本) 会在 API 发生不可向下兼容的改变时增大。
MINOR version (次版本) 会在有向下兼容的新功能加入时增大。
PATCH version (补丁版本) 会在bug以向下兼容的方式被修复时增大。

References

  1. [译]语义化版本管理
  2. Semantic Versioning 2.0.0

Chrome 开发者工具的 js 库黑盒调试

Chrome 的 devTools 终于有了 Firefox 的 black-boxing 功能,不过叫做frameworks debugging

目前依然是试验性功能,不但还简陋,而且需要先到 chrome://flags/#enable-devtools-experiments 中开启开发者工具实验,然后再在开发者试验性项目中勾选 Enable frameworks debugging support ,这之后才能在常规面板中找到设置。

使用上没有 Firefox 的简单明了,看看正式启用后会不会有所改进。

不过在调试时就比 Firefox 的好多了,Firefox 虽然不会进入到忽略的 js 源码界面,但还是会运行进去的。但 devTools 则不会,碰上忽略的 js,使用 F11 进行单步跟踪时会表现得和使用 F10 的 Step Over 一样,非常好。

下面是一个演示

References

  1. Tips and Tricks: Ignoring library code while debugging in Chrome

npm 源与代理

我大防火墙和跨国的原因,npm 和 Ruby gems 的待遇一样,慢且不时会死,所以还是切换为国内的源好点。应该有好几个源,这里选用清华的镜像源

npm config set registry http://npm.tuna.tsinghua.edu.cn/registry

代理环境下,即便终端中设置了 http_proxy 等环境变量,但 npm 在使用 nodejs 建立 http 请求时并没有使用这些值,而需要在配置文件(~/.npmrc)中添加独立的代理设置,下面是命令添加方式。

npm config set proxy http://proxyserver:port

可以通过 npm config get proxy 的返回值来看是否设置成功。

话说,在使用 spm 时,同样需要设置代理,一开始没在文档中找到。等我跟踪源码从 install 模块到 Yuan 模块再到 config 模块来找到设置方法并成功后,不死心又去看下文档,结果轻松找到了,泪奔。

iOS 下的 scroll 事件

iOS 下 Safari 支持 scroll 事件,但仅在滚动停止时触发一次,而不像 PC 端浏览器那样不停触发。带来的问题是对于比较常见的某些模块在页面滚动到一定范围则固定定位的情况将没法完美呈现,比如 msdn 页面的左树

虽然 touchmove 事件可以连续触发,但 touchmove 要求手指不能离开屏幕,所以,对于 scroll 的问题还是没办法完全解决。

iOS 下,Chrome 也如此,不知是否是 iOS 处于性能的要求而定下的规则。

References

border 与三角形

border,无处不在,针对三角形作个备忘。

1. 在设置了 border-style 和正的 border-width 但没设置 border-color 的情况下,border 的颜色是跟随字体颜色来的。
2. background 的覆盖范围是包括 border 的,所以在 border 的颜色是透明时,将显示 background。

紧跟着的图片的页面来源是 JS Bin 上的一个 demo

border 是包成一个矩形的,如下图左上。但单个 border 是如何的呢,可以看下图右上,可以看到对于交接处是采用对分的形式的。由于 background 的作用范围,所以左下图把右 border 设为透明后,显示出黑色的背景来。右下,在把 background 也设为透明后,border 处显示出更下方的内容了。

继续阅读