JavaScript – 小居

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));

注意点：

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

Reference

Fetch API

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 事件备忘”

Chrome insertRow 的 bug

按 w3c insertRow 规范的话，在没传参时，默认参数是 -1，此时，应当是把新的行插入表格底部，但 chrome 却是前插。

insertCell 也是如此。

关于这个问题，11 年的时候就有人报了，至今没理会，无奈。

测试页面

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

留意第 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>';

Image 的 complete 属性

判断图片是否已加载完，是则返回 true，否则返回 false。

所有主流浏览器均支持该属性。

Image complete Property

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