小编dum*_*ter的帖子

这是我在jsFiddle问题的一个例子.

我有一个带有tr:nth-child(odd)在CSS中使用的条带行的表,就像在table-striped类的Twitter Bootstrap中一样.我想突出显示该表的最近点击的行.我用以下Javascript做到这一点:

$('#mytable tbody tr').live('click', function(event) {
    $clicked_tr = $(this);
    $clicked_tr.parent().children().each(function() {
        $(this).removeClass('highlight')
    });
    $clicked_tr.addClass('highlight');
});

该代码在没有条带行的表中正常工作.但是对于条带行,highlight类的背景颜色不会覆盖类的背景颜色table-striped.这是为什么？我怎样才能让它发挥作用？

我的理解是这两个函数在JavaScript中具有相同的行为:

const whatever1 = (): Promise<number> => {
    return new Promise((resolve) => {
        resolve(4);
    });
};

const whatever2 = async (): Promise<number> => {
    return new Promise((resolve) => {
        resolve(4);
    });
};

但TypeScript似乎不喜欢第二个,它说:

Type '{}' is not assignable to type 'number'.

这是TypeScript中的错误,还是我误解了异步函数？

我可以使用以下内容将源Type映射成功编译为单个JS文件:

tsc --sourcemap --out app.js app.ts

我还可以使用UglifyJS成功缩小输出,同时保持源映射的完整性:

uglifyjs app.js --source-map app.js.map --in-source-map app.js.map -o app.js

但是,我想稍微进一步.我想将我编译的TypeScript代码(app.js)与几个第三方JS库合并到一个缩小的文件中,该文件维护源映射指向原始TypeScript(对于我的代码)或JavaScript(对于第三方库).

我尝试过类似的东西,基本上只是将一个JS库文件添加到UglifyJS的输入中:

uglifyjs app.js lib/javascript-library.js --source-map app.js.map --in-source-map app.js.map -o app.js

不幸的是,这似乎不起作用.它确实将所有内容成功合并到一个文件中,并且似乎保留了TypeScript代码的源映射.但是当我输入错误时lib/javascript-library.js,浏览器中的JS控制台(使用源映射)说错误出现在我的一个TypeScript文件中,这显然是错误的.

我是一个TypeScript newb,我无法想象我是第一个想要将TS输出与随机JS库结合在一个带有源映射的缩小文件中的人,但我找不到任何人在谈论它.也许我的方法完全错了？

我在IndexedDB中有一些数据,只能异步访问.我想使用该数据构建React.js UI.一般的想法是我将有多个React组件从IndexedDB加载数据并根据该数据显示一些UI,用户将能够在当前显示的组件之间切换.

我担心的是,如果没有多余的UI闪烁,我不知道如何优雅地实现这一目标.我可以加载异步数据componentDidMount并将数据放入this.state,但随后render会在完成之前调用,迫使我显示任何内容,或者在检索到IndexedDB的数据时显示一些占位符数据.

我宁愿拥有它,render直到我加载了IndexedDB的数据.我知道加载不会花费很长时间,我宁愿在新数据加载时继续显示前一个组件,因此只有一个闪烁(旧 - >新)而不是两个(旧 - >空白/占位符 - >新).这更像是普通网页的工作方式.当您单击从一个网站到另一个网站的链接时,您的浏览器在等待来自链接网站的服务器进行响应时不会立即显示空白/占位符屏幕.

我想我可以在调用之前将数据加载到React组件之外,React.render然后将其传递给via this.props.但这看起来很混乱,因为嵌套组件会变得棘手,我的一些组件会随着时间的推移而更新,并通过初始化它们的完全相同的代码从IndexedDB中提取新数据.因此,它似乎是存储数据的理想用例,this.state因为当我得到新数据可用的信号时,我可以在组件内更新它.初始化和更新就像调用一个this.loadData()设置某些值的函数一样简单this.state......但是我有上面提到的额外闪烁.

有没有人有更好的想法？这个问题的规范解决方案是什么？是不是真的只有毫秒空白/占位符闪烁到处？

我在Reddit上看到了sync-promise,并与作者进行了讨论.我们注意到IndexedDB事务和promise之间的关系有一些奇怪的不一致.

所有onsuccess事件完成后,IndexedDB事务会自动提交.一个复杂的问题是,onsuccess除了在同一个事务上执行另一个操作之外,您不能在回调中执行任何异步操作.例如,您无法在a中启动AJAX请求onsuccess,然后在AJAX请求返回某些数据后重用相同的事务.

承诺与它有什么关系？据我了解,承诺解析应该始终是异步的.这意味着如果不自动提交IndexedDB事务,则无法使用promises.

这是我正在谈论的一个例子:

var openRequest = indexedDB.open("library");

openRequest.onupgradeneeded = function() {
  // The database did not previously exist, so create object stores and indexes.
  var db = openRequest.result;
  var store = db.createObjectStore("books", {keyPath: "isbn"});
  var titleIndex = store.createIndex("by_title", "title", {unique: true});
  var authorIndex = store.createIndex("by_author", "author");

  // Populate with initial data.
  store.put({title: "Quarry Memories", author: "Fred", isbn: 123456});
  store.put({title: "Water Buffaloes", author: "Fred", isbn: 234567});
  store.put({title: "Bedrock Nights", author: …

我有一个客户端JS应用程序,它使用IndexedDB来存储其状态.工作良好.但是,它有点慢,因为我经常读取和写入IndexedDB,以便在打开多个选项卡时状态不会变得不一致.

我的想法是......将所有数据库访问内容放入Service Worker中,然后我可以在内存中缓存值,而不必担心另一个选项卡可能已经更改了数据库.

这似乎工作正常,除了我的应用程序的某些部分需要很长时间才能运行.我可以将服务工作者的状态(例如"X%done")传达给我的UI.但是如果它运行超过30秒,Firefox和Chrome似乎都会杀死它,这对我来说太短了.

这种限制有什么办法吗？如果没有,任何实现类似的想法？我认为共享工作者可以做到这一点,除了浏览器支持很差,我现在预计服务工作者背后的动力不会改善.

任务和微任务之间的区别很重要,因为IndexedDB事务跨任务提交,而不是微任务.在Promises中包装IndexedDB代码时会出现问题,因为在Firefox(可能还有其他浏览器)中,微任务中不会发生承诺解析,因此您的事务将提交.

此问题的解决方案是使用使用微任务的第三方承诺实现.lie它是其中一个库,并且它将微任务问题抽象到另一个名为的库中immediate,该库MutationObserver用于生成微任务.

大部分时间都很好用.但是在Web Worker中,MutationObserver不存在,所以这个技巧不起作用.这是一个易于运行的GitHub仓库中的问题示例.基本上我有这个代码:

var immediate = require('immediate');

var openRequest = indexedDB.open('firefox-indexeddb-promise-worker-test');

openRequest.onupgradeneeded = function() {
    var db = openRequest.result;
    var store = db.createObjectStore('whatever', {keyPath: 'id'});

    store.put({id: 1});
    store.put({id: 2});
    store.put({id: 3});
};

function get(tx, id, cb) {
    immediate(function () {
        var req = tx.objectStore('whatever').get(id);
        req.onsuccess = function (e) {
            console.log('got', e.target.result);
            if (cb) {
                cb(null, e.target.result);
            }
        };
        req.onerror = function (e) {
            console.error(e.target.error);
            if (cb) { …

我有一个完全静态的站点 - index.html和一些CSS/JS/PNG文件.我想使用服务工作者来缓存所有这些.似乎Workbox应该让这很容易.这是我的sw.js:

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.5.0/workbox-sw.js');
workbox.precaching.precacheAndRoute([]);
workbox.routing.registerNavigationRoute('/index.html');

这是我的构建脚本:

const workboxBuild = require("workbox-build");

// NOTE: This should be run *AFTER* all your assets are built
const buildSW = async () => {
  console.log("Generating sw.js...")

  const {count, size, warnings} = await workboxBuild.injectManifest({
    swSrc: "src/sw.js",
    swDest: "build/sw.js",
    globDirectory: "build",
    globPatterns: [
      "**/*.{js,css,html,png}",
    ]
  })

  warnings.forEach(console.warn);
  console.log(`${count} files will be precached, totaling ${size} bytes.`);
}

buildSW();

这一切似乎都很好.构建脚本运行,服务工作程序被激活,即使我处于脱机状态,我的站点也会继续工作.太棒了!

然后我对index.html进行了一些修改.我重装了我的页面.我在控制台中看到此消息,表明它已缓存我的index.html,尽管它仍在浏览器中显示旧的:

Precaching 1 file. 35 files are already cached.

我相信这是正确的,它在显示缓存的一个后缓存新的index.html.那么接下来重装它应该显示新的index.html,对吗？

错误!再次重新加载,旧的index.html仍然显示.重复这几次,没有变化.要实际看到新的index.html,正常的重新加载永远不会工作,我需要做ctrl + shift + R.

这不可能是它应该如何工作,对吧？我必须遗漏一些明显的东西,但是我的代码非常简单,几乎从工作箱网站上的示例中提取出来,我看不出我搞砸了.

编辑:我在GitHub上 …

这是一个典型的工作流程:

1. 编辑JS文件
2. 保存文件,watchify会自动开始为我重建它
3. alt-tab到浏览器
4. ctrl + R重新加载页面

这很好,除非watchify需要比第3步和第4步更长的时间,因为你得到过时的代码或错误,它很糟糕.

有没有一种简单的方法来保证永远不会发生？就像watchify向我的服务器发出信号的方式一样,它应该在尝试加载请求的页面之前等待另一秒钟？如果不存在这样的事情,人们如何在实践中处理这个问题？

我必须嘲笑谷歌,因为我甚至找不到人们在谈论这个问题,除了这个说"添加一个简单的(基于节点的)服务器,它将阻止请求,直到手表完成运行:这将避免总是令人沮丧重新加载页面只是为了找到手表尚未完全运行的现象." - 但不幸的是,这是todo列表中的条目,而不是该回购中存在的内容.

如果您想允许用户将您网站上的文件保存到 Google 云端硬盘，这非常简单。只需使用“保存到驱动器”按钮，几行代码即可处理所有事情。伟大的。

我希望我的网站具有这种行为。但是，我想在那里保存用户生成的文本，而不是服务器上的静态文件。我在 JavaScript 变量中有文本，但似乎无法使用简单的“保存到驱动器”按钮。文档指出“数据 URI ...不受支持”，我的测试表明对象 URL类似地不受支持（这个人发现了同样的事情）。

我知道，理论上，应该可以使用 Google Drive API 来做我想做的事情。这个问题和这个问题提供了一些关于它如何工作的提示，但这一切看起来都非常复杂（甚至没有人制作一个演示来证明它确实有效，AFAICT）。

我不想处理用户登录、会话、API 密钥、授权、权限、让用户在 Google Drive 中“安装”我的应用程序等。我只想要一个按钮，有人可以按下来存储来自 JS 的一些文本新文档中的变量。“保存到驱动器”按钮的具体工作原理。这是否可行？

这不仅关系到我的复杂性，也关系到我的用户的复杂性。我想为他们提供一个非常简单、独立的功能。我不希望我的应用程序与 Google 云端硬盘紧密相连。