嗨,当我开始进行Web开发时,我意识到javascript事件名称都是小写的,没有分隔符,即"mousedown","mouseup"等.当使用jQuery UI库时,我注意到它们也使用相同的约定; 即"dropdeactivate",如下例所示
javascript
$( ".selector" ).on( "dropdeactivate", function( event, ui ) {} )
虽然这对于只有2或3个单词的名称很有效,但对于包含更多单词的名称来说真的很糟糕.
尽管如此,当我必须触发我创建的自定义(合成)事件时,我也遵循了这个惯例,直到最近我决定最好开始使用某种形式的分隔符.现在我使用"drop:deactivate"或"app:ready"之类的东西.
在iOS上苹果最近为HTML 5 Airplay API添加了这个事件,我同意这篇文章的主题http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review,他说:
我认为"webkitcurrentplaybacktargetiswirelesschanged"赢得了记录:有史以来最长的JavaScript事件名称.
这个奇怪的惯例背后的原因是什么？为什么不使用任何形式的分隔符或camelCase约定以更易读的方式命名事件？
我认为有一个原因,很多聪明的人都在努力......但过了一段时间我还在想为什么？
我已经在javascript中工作了一段时间,并且通常做这样的事情只是为了缓存在深层结构或"命名空间"中声明的函数的属性值
//global scope
(function ($, lib) {
//function scope 1
var format = lib.format, // instead of calling lib.format all the time just call format
touch = lib.pointer.touch, //instead of calling lib.pointer.touch each time just touch
$doc = $(document),
log = logger.log; //not console log...
$doc.on('app:ready', function () {
//function scope 2
$doc.on('some:event', function (e) {
//function scope 3
//use the cached variables
log(format('{0} was triggered on the $doc object', e.type);
});
$doc.on(touch, function (e) {
//function scope 3
log(format('this …我有点惊讶的是，为了监听元素尺寸（而不是窗口对象）的变化，我们必须使用一个名为 的新接口ResizeObserver。虽然它看起来做得很好；这似乎与其他元素相关事件有点不同，只需添加一个侦听器即可使用这些事件。
以添加事件监听器来监听 mouseover 事件为例
document.querySelector('#ele').addEventListener('mouseover', callback);
为什么不简单地为元素上的调整大小事件添加一个新的侦听器？
document.querySelector('#ele').addEventListener('resize', callback);
是为了避免与windowresize事件冲突吗？如果是这样，为什么不以不同的方式称呼它
document.querySelector('#ele').addEventListener('elementResize', callback);
我知道创建一个辅助方法来简化ResizeObserver. addEventListener类似的东西可以像原始方法一样简单使用
export const getResizeObserver = ( ele, onResize ) => {
let obs;
const observerInterface = {
stop: () => { obs.unobserve( ele ); obs.disconnect() },
};
obs = new ResizeObserver( entries => {
for ( const entry of entries ) {
onResize && onResize( entry.contentRect );
}
} );
obs.observe( ele );
return observerInterface;
};
// usage to …我很难理解以下代码为何存在一些问题https://jsfiddle.net/q4w6e3n3/3/
注意：所有示例均在chrome版本52.0.2743.116中进行了测试，以防万一
const model = {
someVal: 'some val',
};
const obs = {
...model,
get accessor() {
return this.someVal;
},
}
// Expected: '>>> some val'
// Actual: '>>> undefined'
console.log('>>>', obs.accessor);
但是以下类似的代码片段有效https://jsfiddle.net/q4w6e3n3/5/
const model = {
someVal: 'some val',
};
const obs = {
get accessor() {
return this.someVal;
},
...model,
}
// Expected: '>>> some val'
// Actual: '>>> some val'
console.log('>>>', obs.accessor);
使用babel REPL，我可以看到Object.assign如果在编译代码中可用，可以使用它，当我直接使用它而不是对象散布时，我会遇到相同的问题，并且如果将model
变量放在末尾而不是在开头也可以使用。
这是错误吗？还是预期的行为？
另外，为什么以下代码段也能正常工作？：
const model = …