分类 JavaScript 相关 下的文章

[笔记] Javascript Selectors API

原生的Javascript 除了这些选择元素的方法之外:
Document.getElementById()
Document.getElementsByClassName()
Document.getElementsByName()
Document.getElementsByTagName()
Document.getElementsByTagNameNS()

又新增了 Selector API, 这些API 有:
document.querySelector()
document.querySelectorAll()
element.querySelector()
element.querySelectorAll()

参考文档: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

[笔记] Javascript 中的 Promise

如有梯子, 请看原文
Promise API 参考

除非额外注明,Chrome、Opera 和 Firefox(nightly)均支持下列所有方法。这个 polyfill 则在所有浏览器内实现了同样的接口。

静态方法

Promise.resolve(promise);
返回一个 Promise(当且仅当 promise.constructor == Promise)
Promise.resolve(thenable);
从 thenable 对象创建一个新的 Promise。一个 thenable(类 Promise)对象是一个带有“then”方法的对象。
Promise.resolve(obj);
创建一个以 obj 为肯定结果的 Promise。
Promise.reject(obj);
创建一个以 obj 为否定结果的 Promise。为了一致性和调试便利(如堆栈追踪),obj 应该是一个 Error 实例对象。
Promise.all(array);
创建一个 Promise,当且仅当传入数组中的所有 Promise 都肯定之后才肯定,如果遇到数组中的任何一个 Promise 以否定结束,则抛出否定结果。每个数组元素都会首先经过 Promise.resolve,所以数组可以包含类 Promise 对象或者其他对象。肯定结果是一个数组,包含传入数组中每个 Promise 的肯定结果(且保持顺序);否定结果是传入数组中第一个遇到的否定结果。
Promise.race(array);
创建一个 Promise,当数组中的任意对象肯定时将其结果作为肯定结束,或者当数组中任意对象否定时将其结果作为否定结束。
备注:我不大确定这个接口是否有用,我更倾向于一个 Promise.all 的对立方法,仅当所有数组元素全部给出否定的时候才抛出否定结果

构造器

new Promise(function(resolve, reject) {});
resolve(thenable)
你的 Promise 将会根据这个 “thenable” 对象的结果而返回肯定/否定结果
resolve(obj)
你的 Promise 将会以 obj 作为肯定结果完成
reject(obj)
你的 Promise 将会以 obj 作为否定结果完成。出于一致性和调试(如栈追踪)方便,obj 应该是一个 Error 对象的实例。构造器的回调函数中抛出的错误会被立即传递给 reject()。
实例方法

promise.then(onFulfilled, onRejected)
当 promise 以肯定结束时会调用 onFulfilled。 当 promise 以否定结束时会调用 onRejected。 这两个参数都是可选的,当任意一个未定义时,对它的调用会跳转到 then 链的下一个 onFulfilled/onRejected 上。 这两个回调函数均只接受一个参数,肯定结果或者否定原因。 当 Promise.resolve 肯定结束之后,then 会返回一个新的 Promise,这个 Promise 相当于你从 onFulfilled/onRejected 中返回的值。如果回调中抛出任何错误,返回的 Promise 也会以此错误作为否定结果结束。
promise.catch(onRejected)
promise.then(undefined, onRejected) 的语法糖。

使用浏览器的 Javascript 进行集合对比

有时候要做些集合的对比, 比如集合A有, 集合B 没有之类的, 或者二者都有的. 浏览器的console 是一个很好的工具, 可以用Javascript 来对比.

function onlyInSet1(set1, set2) {
    var onlySet1Has = [];
    for (var i in set1) {
        if (0 > set2.indexOf(set1[i])) {
            onlySet1Has.push(set1[i]);
        }
    }
    
    return onlySet1Has;
}

function inBothSets(set1, set2) {
    var bothHave = [];
    for (var i in set1) {
        if (0 <= set2.indexOf(set1[i])) {
            bothHave.push(set1[i]);
        }
    }
    
    return bothHave;
}

function printSet(set) {
    for (var i in set) {
        console.debug(set[i]);
    }
}

var set1 = ["a", "b", "c", "d"];
var set2 = ["b", "c", "d", "e"];

var onlySet1Has = onlyInSet1(set1, set2);
var onlySet2Has = onlyInSet1(set2, set1);

console.debug("Only Set1 has: ");
printSet(onlySet1Has);

console.debug("Only Set2 has: ");
printSet(onlySet2Has);

var bothHave = inBothSets(set1, set2);
console.debug("Both have: ");
printSet(bothHave);

html 页面内容不能选中, 不能复制

今天查看一朋友所在公司官方主页的联系我们页面, 发现竟然这个页面的内容竟然不能copy.
百度了一下, 竟然是有这么一段代码:

<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false">

里面的内容大概就是不准复制, 不准copy, 不能拖拉...

不过这个页面适得其反, 不能copy, 人家连你那么长的地址都要自己敲出来, 不能copy 真还是麻烦.

javascript:void(0) 你知道为什么这么写吗?

经常看到 html 页面中的 a 的 href 是这个值: javascript:void(0).

这个可以这么翻译: 它的协议是 javascript协议, 后面的javascript表达式是 void(0).
void 是 javascript 的一个操作符, 后面跟一个表达式. 不论表达式的最终结果是什么, 这个 void 操作符都返回 undefined.
浏览器发现 href 的值是 javascript 的undefined, 那么就不执行任何操作, 也不跳转.

a 的 href 常见的值有:

  1. href="https://example.com/s.php" //跳到另外一个网站s.php页面 页面刷新
  2. href="d.jsp" //跳到一个相对路径 d.jsp 页面刷新
  3. href="#top" //跳到锚点 top 页面不刷新
  4. href="#" //一般跳到页面顶端 页面不刷新
  5. href="" // 空值, 相当于当前页面, 页面刷新

继续前面的 javascript:void(0)
既然前面说了, 只要返回的是 undefined, 这个链接就打到不刷新的效果, 为何不用下面这2种方式呢?

  1. href="undefined" //这个undefined不属于javascript的, 它让浏览器跳转到相对路径为 undefined 的页面
  2. href="javascript:undefined" // 这个应该是和 javascript:void(0) 效果一样的

但是 undefined 在javascript中, 不是一个保留的关键字, 所以 它可以在非全局的命名空间中被用作变量名. 详情参看 这里
如果你再 html 中直接写 href="javascript:undefined" 那么, undefined 肯定是js中那个全局的 undefined值, 所以效果是和 void(0) 一致的. 只是怕出错而已.

另外 void(0) 和 void 0, void 1, void("hello world") 又有什么区别?
表达式加 (), 只是为了可读性. 既然不论表达式怎么执行, 返回都是 undefined, 其实表达式无所谓, 可以随便写.

一般情况下, 用 href="javascript:void(0)" 的地方, 都是不想执行这个默认的跳转链接, 而是通过 click 事件来决定跳转或提交.
既然用click 事件, 为什么不用 button 呢?