fetch

实现中的 fetch 是希望能比 XMLHttpRequest 更好地做网络请求。

1
2
3
4
5
6
7
8
9
10
fetch('/')
    .then(res => {
       if(res.ok) {
         return res.text();
       } else {
         throw new TypeError(res.statusText);
       }
    })
    .then(text => console.log(text.length))
    .catch(err => console.error(err.message));

注意点:

  1. fetch 仅在网络因素下 reject,业务的错误,如 502 或 404 等会 resolve,需要判断 response 是否 ok
  2. 默认不携带 cookie,需要明确指定
  3. 跨域时会受 CSP 控制影响,需要配置

Reference

JavaScript 中的零除

一直意味在 JavaScript 中也和别的语言一样会触发错误,所以一直依赖使用除法都先小心地做个判断。但偶然中却发现并不需要在做除法前判断,因为不会报错,只需要拿到结果后进行处理即可。

发现不会报错后,稍微去看了一下规定:

1
2
3
4
5
6
7
8
9
10
Infinity / Infinity = NaN
Infinity / 0 = Infinity
-Infinity / 0 = -Infinity
Infinity / nonZeroFinite = Infinity
-Infinity / nonZeroFinite = -Infinity
aPositive / Infinity = 0
aNegative / Infinity = -0
0 / 0 = NaN
aPositive / 0 = Infinity
aNegative / 0 - -Infinity

Touch 事件备忘

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

Touch 接口

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

1
2
3
4
5
6
7
8
9
10
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;
};

继续阅读“Touch 事件备忘”

element.scrollIntoView

有一个常见的需求是:把页面滚动到某一个元素处。

我一直以来的做法都是计算处该元素在页面的位置,然后设置 documentElement 的 scrollTop 或用 window.scrollTo(x, y) 来实现。

发现 DOM API 中有着一个简单的方法,并且兼容包括 IE6 等主流浏览器,那就是 element.scrollIntoView(alignWithtop) 。

从命名可知,是把对应元素滚入可视范围,可带一参数,参数类型是 boolean,true 时表示元素顶部和滚动区域的顶部对齐,false 时元素底部和滚动区域底部对齐,不带该参数和 true 的效果一致。

关于对齐,说的自然是尽可能对齐,当无法再滚时,不会拉伸页面来强行对齐。

上面用「滚动区域」而不是窗口来表述对齐,说的是不单对整个页面的滚动可用,也对页面别的有滚动条的元素生效。当对某一元素应用该方法时,从最内层的滚动区域开始调整 scrollTop,没进入可视范围,再继续调整外层滚动区域的 scrollTop 。

一个 demo

References

使用 jQuery.windowName 进行 ajax 提交数据时的一个注意事项

0.9.1 版本来说明,开头有这么几行代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
(function ($) {
$ = $ || window.jQuery;
var origAjax = $.ajax, idx = 0;
$.extend({
ajax: function (s) {
var remote = /^(?:\w+:)?\/\/([^\/?#]+)/,
data = '', status = '', requestDone = false,
xhr = null, type = s.type.toUpperCase(), ival = setTimeout(function () {}, 0),
onreadystatechange = null, success = null, complete = null,
localdom = remote.exec(s.url);
if (s.windowname || (type === 'POST' && localdom && localdom[1] !== location.host)) {

// more code...
} else {
return origAjax.apply(this, arguments);
}
}
});
})():

留意第 11 行的判断条件,当不满足的时候将使用回普通的非跨域的 ajax 提交。

那行的判断条件是:配置中存在着为 true 的 windowname 属性或是 post 类型的提交且存在着非同域的有效提交地址。

所以当想确保使用跨域 ajax 提交时,需要确保进入 if 分支才行,不然服务器那边用跨域的方式返回数据,js 这边却认为是非跨域的,结果就报错了。

由于测试的时候可能忘记了使用不同的域,所以最保险的方法是在 .ajax 方法中显式加上 windowname: 1

今天被测试机上的这个问题搞了 2 个小时,找到真相后欲哭无泪。

使用jquery windowname插件实现跨域提交的几个要点也提到些值得注意的地方。

JavaScript中的array.sort的一些注意事项

JavaScript 中,array.sort([compareFunction]) 在不指定比较函数的情况下,将会使用默认的比较函数,而这个比较函数是根据字母表数序来比较的。简单来说,先把数组中的各项转化为 string,然后再进行比较。

这意味着对于数字的排序,必须写比较函数而不能用默认的,否则,将会导致类似 [1, 10, 11, 2, 3] 这样的排序结果。

自然地,true, false, null 等也被先转为对应的字符串再进行比较,但 undefined 有点特殊,JavaScrip 1.2 后会把其放到数组的最后面。
继续阅读“JavaScript中的array.sort的一些注意事项”

innerHTML设置样式在IE下的问题

使用 innerHTML 设置内容时,如果内含 style 样式,在 IE7 及以下可能会发现样式没生效。

解决方法:把 <style> 样式放到待设置的 html 内容的最后。

所使用的代码片段是:

1
2
3
var str1 = '<style>#con{color:red;}</style><p>红字</p>',
    str2 = '<p>二:<style>#con{color:green;}</style>绿字</p>',
    str3 = '<p>蓝字</p><style>#con{color:blue;}</style>';

IE下获取链接相对路径的问题

1
<a href="about.html" id="anc">a link with href="about.html"</a>
1
2
3
4
var anchor = document.getElementById('anc');

console.log(anchor.href);
console.log(anchor.getAttribute('href'));

以上代码,对于第一个 log,希望得到形如 http://liunian.info/about.html 的绝对路径,对于第二个 log,希望得到 about.html 这个相对路径。

但在 ie 下,第二个却也由相对路径变为绝对路径了。

兼容的处理方法是使用第二个参数,这个参数是 IE 私有的,但由于 JavaScript 的语言特性,多参数并不会导致出错,所以,对于 Chrome、FF 等将仍是原来的方法。

1
anchor.getAttribute('href', 2);

References

  1. getAttribute(“HREF”) is always absolute
  2. 获得原始href属性的方法
  3. getAttribute method