标签归档:JavaScript

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

继续阅读

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 版本来说明,开头有这么几行代码:

(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' & amp; & amp; localdom & amp; & amp; 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 后会把其放到数组的最后面。

继续阅读

innerHTML设置样式在IE下的问题

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

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

所使用的代码片段是:

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下获取链接相对路径的问题

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

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

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

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

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

anchor.getAttribute('href', 2);

References

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

JavaScript生成指定范围内的随机数

JavaScript 中,可以使用 Math.random() 来获得 [0, 1) 之间的随机数,但没有直接的获取一给定范围内的随机数,出于使用频率还算多,可以写成一个函数。

// mod from: http://roshanbh.com.np/2008/09/get-random-number-range-two-numbers-javascript.html

function randomToN(maxVal, floatVal) {
    var randVal = Math.random() * maxVal;
    return typeof floatVal === 'undefined' ?
        Math.floor(randVal) : randVal.toFixed(floatVal);
}

function randomXToY(minVal, maxVal, floatVal) {
    var randVal = minVal + Math.random() * (maxVal - minVal);
    return typeof randVal === 'undefined' ?
        Math.floor(randVal) : randVal.toFixed(floatVal);
}

// example usages:
randomToN(50);           // => 35
randomToN(50, 3);        // => 37.748
randomXToY(30, 80);      // => 51
randomXToY(30, 80, 2);   // => 68.36

JavaScript 之 String.replace

最简单的用法

直接的用字符串替换字符串是最简单的用法,这种情况下将只会替换掉第一个匹配的字符串。

var res = 'a1a2a3'.replace('a', 'b'); // => 'b1a2a3'

使用正则来达到复杂的要求

JavaScript 中正则的介绍可参照 MDN 的 RegExp

// 把字符串的所有英文字符都去掉,不论大小写
var pattern = /[a-z]/gi;
var str = '1aBc2d3E4f5e';
var res = str.replace(pattern, ''); // => '12345'

继续阅读