小编Luk*_*uke的帖子

一个MutationObserver对象可以观察多个目标吗?

我想使用一个MutationObserver对象来观察我的一些DOM节点的变化.

文档提供了创建MutationObserver对象并在目标上注册它的示例.

// select the target node
var target = document.querySelector('#some-id');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);
Run Code Online (Sandbox Code Playgroud)

说我有上面的代码,但在它下面,我放置这个代码:

var target2 = document.querySelector('#some-other-id');
var config2 = {attributes: true, subtree: true};
observer.observe(target2, config2);
Run Code Online (Sandbox Code Playgroud)

威尔observer:

  • 现在正在观察2个目标?
  • 它会停止观察 …

html javascript dom mutation-observers

28
推荐指数
1
解决办法
1万
查看次数

Ruby如何在语义上处理赋值?

在Ruby中,我们使用=运算符为对象赋值.

将此与隐式类型相结合,我们经常遇到这样的情况:

myVar= :asymbol
Run Code Online (Sandbox Code Playgroud)

上面的行都创建了一个新的符号对象,并将该对象绑定到变​​量名称myVar.

从语义上讲,这是怎么做到的?

我已经在脑子里敲了一下,=操作符不是内置在解释器中的魔法语法,但实际上只是该object.=(value)方法的语法糖.

考虑到这一点,我最好的猜测是,该解释认为我们正在试图将值赋给一个未定义的变量名的时候,它首先会创建一些特殊类型的新对象,像undefinednull什么的,然后传递:=消息到有效载荷的对象是我们试图分配的值.

但是,调用.class一个未实例化的对象只会抛出一个异常,因为Ruby认为我们正在尝试调用一个方法(其名称是您尝试生成的变量的名称)self

> obj.class
    > NameError: undefined variable or method 'obj' for main:Object
Run Code Online (Sandbox Code Playgroud)

所以,据我所知,我无法通过实验来解决这个问题.


边注:

在符号赋值的情况下,我相信分配的值(AKA实例化对象的object_id方法返回的值,AKA unsigned long VALUE在C级别上的变量的值)是一个数字,表示某个表中的偏移量(我相信这个Ruby是如何实现符号对象的"直接价值"的.

在其他情况下,该值可以是对象本身的直接编码,或者意图在参考a时强制转换为指针的值struct.

无论如何,Ruby代表对象的方式以及我们最终是否分配引用或对象本身并不是我在这里要求的.

附加问题:

=继承自哪个类的方法?我在ObjectBasicObject的规范中找不到它.

ruby variable-assignment assignment-operator

13
推荐指数
1
解决办法
259
查看次数

JS继承:从子函数中调用父函数

必须有一些我不了解JS对象模型的东西.

从这些资源:

我已经收集了我认为或者认为是对象模型的准确心理表示的东西.这里是:


所有对象都有一个属性,文档称之为[[Prototype]].[[Prototype]]可以被认为是对象父级的引用.更精确地:

对[parent's]原型对象的引用将复制到[[Prototype]]新实例的内部属性中.(来源1)

您可以访问[[Prototype]]子项的属性.Object.getPrototypeOf(child)此处返回的值将是父项原型的引用(不是其内部[[Prototype]]属性,而是其实际原型)

obj.prototype与对象的内部[[Prototype]]属性不同.它的作用类似于用于创建此精确对象的实例的蓝图,而其[[Prototype]]属性指向用于生成其父实例的蓝图.

  • Parent.prototype === Object.getPrototypeOf(child); //true

详细说明:

  • 如果向child.prototype函数添加函数,则可以使用该函数child及其任何子函数.

  • 如果你添加一个函数parent.prototype,相当于添加一个函数Object.getPrototypeOf(child),那么该函数将可用于parent它的所有子函数,包括它的child所有子函数siblings.

您可以使用Object.create()任何[[Protoype]]属性创建新对象.因此,您可以将其用作实现继承的方法.有关示例,请参见源2.


考虑到这一点,我希望得到一个自己的实例.我的计划是创建一个父类'class',然后创建一个继承自它的子类'class'.

我希望子类实现一个方法,该方法从父方法重载方法.需要注意的是,我希望孩子的方法版本调用父方法的版本,然后做一些额外的事情.

以下是我提出的问题,请参阅下面的相关问题:

var Parent = function() {};

Parent.prototype.myF = function() {
  console.log('derp');
};


function Child() {
  Parent.call(this);
};

//make [[prototype]] of Child …
Run Code Online (Sandbox Code Playgroud)

javascript oop inheritance prototype

12
推荐指数
2
解决办法
5219
查看次数

document.querySelector是如何实现的?

我想这个问题的答案取决于你使用的浏览器,但我想这只会让它变得更有趣.

我想知道该querySelector()方法是如何实际实现的.同样,我很好奇querySelectorAll()和其他方法,如getElementById()getElementByClassName()等.

它是深度优先搜索,广度优先搜索,还是利用一些辅助数据结构,如全局哈希表作为注册表?

javascript browser algorithm tree dom

10
推荐指数
1
解决办法
1882
查看次数

如何判断dom-repeat是否完成了冲压元素

在Polymer中,只要将迭代结果标记到DOM中,dom-repeat模板助手就会发出一个dom-change事件.有没有办法让我知道所有迭代何时完成?

html javascript templates dom polymer

9
推荐指数
1
解决办法
3158
查看次数

有一种灵活的方法来修改可编辑元素的内容吗?

学科:

我正在创建一个Google Chrome扩展程序,通过内容脚本和事件页面与网页进行交互.

我有当用户点击被归类为一个元素上出现的上下文菜单选项editablechrome.contextMenusAPI.

这些选项就像常用文本的快捷方式一样.当用户单击选项时,某些文本将放置在光标位置的元素内.如果用户突出显示文本,则会将其删除.


问题:

并非所有可编辑元素都可以以相同方式修改.

如果元素很简单textarea,则可以通过实现此解决方案来实现所需的结果:

但是,我不能假设我正常与正常人交往textarea.

可能的细微差别包括:

  • 文本区域隐藏在一个内部Iframe,这使得查找要与之交互的元素的过程复杂化(document.activeElement可能返回Iframe,而不是实际包含文本的元素).

  • <textarea>不会是一个<textarea>/ <input>所有,而是一个contentEditable <div>.该.value方法不能在这种情况下工作.

所以我正在寻找一种灵活的方法,可以优雅地处理所有边缘情况.


我试过的一些解决方案:

  • 选项1:
    我最初计划将值存储在系统剪贴板中.然后,我可以想象只是document.execCommand('paste')用来修改元素.然而,在尝试之后,这种方法似乎与我最初的方法具有相同的缺点.(请参阅此问题)

    此外,此方法将删除操作前剪贴板中的所有内容.这是不可取的,任何利用这种方法的解决方案都必须提供解决方法.

  • 选项2:
    我考虑的另一个选项是为字符串中的每个字符分派键盘事件.但是,使用此解决方案,您仍然遇到Iframe问题,并且它不允许您使用特殊的Unicode字符.┻━┻(ヽ(`Д')ノ(┻━┻

html javascript text dom google-chrome-extension

7
推荐指数
1
解决办法
1009
查看次数

通过实例方法修改类的所有成员

在JavaScript中,是否可以在影响其所有兄弟姐妹的对象上调用实例方法?

例如,假设我有以下课程:

function Thing() {
  this.active = false;
}

Thing.prototype = {
  constructor: Thing,

  activate: function() {
    this.active = true;
  },
  deactivate: function() {
    this.active = false;
  }
  
};
Run Code Online (Sandbox Code Playgroud)

我是否可以创建一个activateAll 可以激活所有类实例的方法Thing

我需要this.active成为一个实例变量.

javascript prototype

7
推荐指数
1
解决办法
118
查看次数

我可以在自定义Polymer元素中使用jquery吗?

Polymer文档说:

Polymer提供了一个用于操作DOM的自定义API,以便正确维护本地DOM和轻型DOM树.这些方法和属性与其标准DOM等效项具有相同的签名,除了返回节点列表的属性和方法返回Array而不是NodeList.

注意:所有DOM操作都必须使用此API,而不是直接在节点上使用DOM API.

jQuery有很多有用的方法,虽然,这使我的生活更轻松,像toggleClass,hasClass,addClass,one...

我已经能够使用其中一些方法而不会影响我的元素,但我想知道上面引用的粗体部分背后的语义究竟是什么,所以我可以更清楚地推理事情.

注意:我不是在讨论在主文档中使用jquery,我正在讨论当我阴影边界时使用它,就像在元素的ready回调中一样.

javascript jquery dom shadow-dom polymer

7
推荐指数
1
解决办法
9990
查看次数

void 方法测试 javascript

我有一个用 javascript 编写的方法,我正在使用 Jasmine 来测试该方法。该方法是调用另一个方法的 void 类型。

我必须测试该方法是否正在调用其他方法,当前方法是否返回 void。

我应该在expect子句中写什么来比较它。

sendMessage=function(data){
if(data!=null)
 {
  postMessage(data);
 }
}
Run Code Online (Sandbox Code Playgroud)

茉莉花代码:

describe('unit test void method', function(){
    it("sendMessage method should invoke the postMessage", function () {
           expect(sendMessage("hello");
    }) 
})
Run Code Online (Sandbox Code Playgroud)

我应该将它与什么进行比较?

javascript jasmine

7
推荐指数
2
解决办法
2万
查看次数

类型检查反应儿童

如何确认通过道具(children例如)收到的反应元素在我的渲染方法中是否为给定类型?

例:

说我有一个List元素和一个ListItem元素.在渲染方法中List,我想寻找所有被传递的孩子,并对任何孩子做一些特别的事情ListItem.

我确实找到了一个有效的实现,但只有经过反复试验才能实现.请参阅下面的代码.(React 15.4.2)

List.jsx

import ListItem from 'list-item';

...

React.Children.map(children, child => {
  console.log(child);     // function ListItem() { ... }
  console.log(ListItem);  // function ListItem() { ... }

  if (isListItem(child)) {
    return (...);
  }
  return child;
})

// this implementation does not work
isListItem(element) {
  return (element.type === ListItem);
}

// this implementation does work, but might break if I'm using something like uglify or if I …
Run Code Online (Sandbox Code Playgroud)

html javascript validation reactjs react-jsx

6
推荐指数
1
解决办法
878
查看次数