我正在创建一个 chrome 扩展。基本上，如果用户单击内容菜单选项，我想在所选文本之前和之后插入 HTML 格式标签。

这些标签被添加到事件页面中，在添加格式标签后，该事件页面会在消息对象的“粘贴”键中向内容脚本触发新值。

我的内容脚本的代码如下：

chrome.runtime.onMessage.addListener(handleRequest)

function handleRequest(message, sender)
{
    if (message.paste!==undefined) 
    {
        var newNode = document.createTextNode('');
        newNode.innerHTML=message.paste;   

        var cursor = window.getSelection().getRangeAt(0);       
        cursor.deleteContents();     
        cursor.insertNode(newNode);    
        alert(newNode.innerHTML);       
    }
}

我认为我这样做是正确的，因为根据这个

如果要将新节点添加到文本节点，则该节点将在插入点处拆分，并且插入发生在两个文本节点之间。

但是，单击上下文菜单选项的结果只是删除所选的任何文本。新文本永远不会添加，但不会将错误打印到控制台。

我知道这不适用于输入元素或文本区域中的内容，现在我只是试图让它在页面上的常规文本上工作。

正如预期的那样，警报弹出窗口的内容是格式化标签包围的选定文本。

有人可以解释我做错了什么吗？我不应该编辑文本节点的 HTML 吗？我是否缺少最后一步来使文本显示？

错误示范：

如果我突出显示该问题的标题，则会出现以下警告框（我单击了删除线选项）。请注意，标题已从页面上消失。

所以我很失望地发现JavaScript for ( var in array/object)并不等同于蟒蛇for var in list:.

在JavaScript中,您正在迭代索引本身,例如

0, 
1,
2,
... 

与Python一样,您正在迭代索引指向的值,例如

"string var at index 0", 
46, 
"string var at index 2",
["array","of","values"],
...

是否存在与Python的循环机制等效的标准JavaScript？

免责声明:

我知道for(var in object)构造意味着用于迭代字典中的键,而不是通常在数组的索引上.我问一个特定的问题,这个问题与我不关心顺序(或非常关于速度)的用例有关,并且只是不想使用while循环.

我一直在阅读有关在JS中进行OOP的不同方法.

Douglas Crockford有一种有趣的方法,他似乎根本不使用授权.相反,对我而言,他似乎纯粹利用对象连接作为他的继承机制,但是我很难说出最新情况,我希望有人可以提供帮助.

以下是克罗克福德在其中一次会谈中提出的一个例子.

function constructor(spec) {
  let {member} = spec,
      {other}  = other_constructor(spec),
      method   = function () {
        // accesses member, other, method, spec
      };

  return Object.freeze({
      method,
      other
  });
}

以下是一个要点的例子

function dog(spec) {

  var { name, breed } = spec,
      { say }   = talker({ name }),
      bark = function () {

        if ( breed === 'chiuaua' ) {
          say( 'Yiff!' );
        } else if ( breed === 'labrador' ) {
          say('Rwoooooffff!');
        }

      };

  return …

我有一个带有flex-direction: row柔性物品的弹性容器.flex项目本身会有各种高度,但由于默认设置align-items: stretch,它们都填充了Flex容器的高度.在我的具体用例中,这是完美的.

问题是我<div>在每个flex容器中都有这些,我需要它们占据其父级的全部高度.我以为我可以min-height: 100%坚持下去.此解决方案适用于Firefox和Internet Explorer,但出于某种原因不适用于Google Chrome.

这是一个演示问题的代码片段.如果你在chrome上查看它,你会发现较短的白色.card没有填满紫色.card_container.但是,如果你在IE或FF上查看它,它将填满父容器的高度.

#grid {
  background: rgba(255,0,0,0.2);
  padding: 10px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;      
}

.card_container {
  width: 300px; 
  background: rgba(0,0,255,0.2);
  margin: 15px;
  padding: 5px;
}


.card {
  background: white;
  min-height: 100%;    /* <- Why isn't this working? */
}

<div id="grid">
  <div class="card_container">
    <div class="card">
      This text is very short.
    </div>
  </div>
  <div class="card_container">
    <div class="card">
      This text is very long. …

背景

我有2个资源:courses和professors.

A course具有以下属性:

• ID
• 话题
• semester_id
• 年
• 部分
• professor_id

A professor具有以下属性:

• ID
• 学院
• SUPER_USER
• 名字
• 姓

所以,你可以说课程有一位教授,一位教授可能有很多课程.

如果我想获得所有课程或所有教授,我可以:GET /api/courses或GET /api/professors分别.

困惑

当我想要获得某位教授所教授的所有课程时,我的困境就来了.

我可以使用以下任何一种方法:

• GET /api/professors/:prof_id/courses
• GET /api/courses?professor_id=:prof_id

我不确定要使用哪个.

当前解决方案

目前,我正在使用后者的增强形式.我的理由是,如果我想添加过滤/排序标准,它更具可扩展性.

我实际上是在编码/嵌入JSON字符串到查询参数中.因此,(解码)示例可能是:

GET /api/courses?where={professor_id: "teacher45", year: 2016}&order={attr: "topic", sort: "asc"}

上述请求将检索教授使用2016年提供的professor_id教授(或当前正在)教授的所有课程,按照主题标题按升序ASCII顺序排序.

我从来没有见过有人这样做过,所以我想知道我是不是做了些蠢事.

结束问题

是否有使用查询字符串与资源路径进行过滤条件的标准做法？过去做过什么更大的API？是否可以接受或鼓励同时使用两种范例(使两个端点都可用)？如果我确实应该使用第二种范式,除了编码JSON之外,还有更好的组织方法吗？有没有人在他们的查询字符串中看到使用JSON的另一个公共API？

编辑基于意见较少.(看评论)

题

如何确认通过道具(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 …

我正在编写一个 chrome 扩展，IndexedDB用于IDBObjectStore在IDBDatabase.

数据的性质是这样的，我需要我的用户能够随心所欲地修改对象存储。（添加新对象修改现有对象等）我正在通过设置页面完成此操作，到目前为止一切都很好。

当我想发布（默认）对象存储的新版本时，需要注意。如果我不关心覆盖我用户的数据，那么我可以像处理onupgradeneeded事件一样处理事件，当它被触发以响应全新安装时。这将是这样的：

var request = window.indexedDB.open(DB_NAME, CURRENT_DB_VERSION);
request.onupgradeneeded = upgrade;
function upgrade(event){
  var db = event.target.result;
  var objectStore = db.createObjectStore("domains", {keyPath: "id", autoIncrement: true});
  objectStore.createIndex("domain", "domain", {multiEntry: true });
  for(var i=0; i<tags.length; i++){
    objectStore.add(tags[i]);
    console.log("added " + tags[i]["domain"] + " to the IDBObjectStore 'domains' in the IDBDatabase 'Tags' (Format)");
  }
}

……但我确实在乎。

所以，我目前正在做的是在upgrade(event)函数内部放置一个条件来检查event.oldVersion（在全新安装时为 0）的真实性。如果该值大于 0，那么我会打开一个新选项卡，其中包含一个选项页面，用户可以在其中挑选和选择他想要更新的对象。

现在是棘手的部分：一旦此页面关闭，我需要向包含必要升级信息的后台页面发送一条消息。通常，我只会在我的侦听器中接收消息并使用提供的信息执行更新。但是，IDBDatabase.createObjectStore()抛出一个InvalidStateErrorif：

该方法 [is] 不是从 versionchange …

说我有一个看起来像这样的帮手:

Template.profile.helpers({
  info: {
    Name: 'Bob Dinkleberg',
    Age: 45,
    Location: 'Earth, Milky Way'
  }
});

我想把这个信息放在一个<ul>.这是一些伪代码:

<template name="profile>
  <ul>
    {{#each}}
      <li> {{key}}: {{property}} </li>
    {{/each}}
  </ul>
</template>

请原谅我,如果这是微不足道的,我是Meteor和Blaze的新手,我无法在网上找到解决方案.

我需要查看一组列中是否有任何列包含列表中的值。

例如

...

SELECT * 
FROM Account
WHERE
  NOT (
    AccountWarningCode1     IN (02, 05, 15, 20, 21, 24, 31, 36, 40, 42, 45, 47, 50, 51, 52, 53, 55, 56, 62, 65, 66, 78, 79, 84, 110, 119, 120, 121, 125, 202)
    OR AccountWarningCode2  IN (02, 05, 15, 20, 21, 24, 31, 36, 40, 42, 45, 47, 50, 51, 52, 53, 55, 56, 62, 65, 66, 78, 79, 84, 110, 119, 120, 121, 125, 202)
    OR AccountWarningCode3  IN (02, 05, …

背景

我正在尝试使用 JSON Web 令牌通过我的 Web 应用程序实现令牌身份验证。

无论我最终使用什么策略，我都试图维护两件事：无状态和安全。然而，通过阅读本网站上的答案和互联网上的博客文章，似乎有些人确信这两个属性是相互排斥的。

在试图维持无国籍状态时，有一些实际的细微差别会起作用。我可以想到以下列表：

• 在到期日期之前按用户使受损令牌无效。
• 允许用户一次注销所有机器上的所有“会话”并使其立即生效。
• 允许用户注销当前机器上的当前“会话”并使其立即生效。
• 对用户记录进行权限/角色更改会立即生效。

当前策略

如果您在 JWT 中使用“发布时间”声明并结合数据库表中表示用户记录的“上次修改”列，那么我相信上述所有要点都可以得到妥善处理。

当 Web 令牌用于身份验证时，您可以查询数据库以获取用户记录并：

if (token.issued_at < user.last_modified) then token_valid = false;

如果您发现有人盗用了用户的帐户，则该用户可以更改其密码，并且last_modified可以更新该列，从而使之前发布的任何令牌失效。这也解决了权限/角色更改不会立即生效的问题。

此外，如果用户请求立即退出所有设备，您猜对了：更新last_modified列。

这留下的最后一个问题是每个设备的注销。但是，我相信这甚至不需要访问服务器，更不用说访问数据库了。退出操作不能只是触发一些客户端事件侦听器来删除保存 JWT 的安全 cookie 吗？

问题

首先，您是否在上述方法中看到了任何安全漏洞？我遗漏的可用性问题怎么样？

一旦这个问题得到解决，我真的不喜欢每次有人向安全端点发出 API 请求时都必须查询数据库，但这是我能想到的唯一策略。有没有人有更好的想法？