小编T.J*_*der的帖子

有很多问题要求缓存jQuery对象,但是我找不到一个问一个jQuery对象可以和应该缓存的地方.我有一个网页,其中包含一个包含一系列功能的JavaScript文件,如下所示.

$(document).ready(function () {

    // do some setup
});

/* function queries the DOM with the same selector multiple times without caching */
function myFunctionOne() {

    $('#name_input').css("border","1px solid #ccc");
    $('#name_input').val(someValue);        
}

/* function uses cached object from a single query */
function myFunctionTwo() {

    var nameInput = $('#name_input')
    nameInput.css("border","1px solid #ccc");
    nameInput.val(someValue);
    // do some other stuff with cached selector        
}

在myFunctionOne我低效地查询DOM两次,而在myFunctionTwo我查询DOM一次,将结果缓存在局部变量中,然后使用该变量.我知道这种方法myFunctionTwo更有效但我不确定我应该在哪里实际缓存这些对象.在那一刻我在方法级别缓存对象,但我想知道我是否可以实际缓存它在更高级别,然后在多个函数中使用它.这样我只会查询一次DOM,然后在该文件的所有函数中重用结果.我建议的一个例子如下所示.

$(document).ready(function () {

    // do some setup
    var nameInput = $('#name_input')
}); …

如何获取父容器的所有后代元素？我想把它们放在阵列中.

<div class="parent">
    <div class="child1">
        <span class="child2">
            <div class="child3">
                <div class="child4">
                    <span class="child5"></span>
                </div>
                <div class="child6">
                    <div class="class7"></div>
                </div>
            </div>
        </span>

        <div class="child8"></div>
        <span class="child9">
            <div class="child10"></div>
        </span>
    </div>
</div>

我认为递归是一种选择.在第一点,我知道parent元素.

以下示例演示了以下问题:

$("#ex1").append("\r"); //This one works as expected
$("#ex2").append("\n"); //This also works as expected
$("#ex3").append("\r\n"); //This also works as expected
$("#ex4").append("\r <el></el>"); //This replaces \r with \n
$("#ex5").append("\r\n <el></el>"); //This removes \r completely

$("div").on("click", function() { 
    alert(JSON.stringify(this.innerHTML)); 
});

<!-- Note: this also works in the JQuery 2.0 branch -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Click the divs below to see the result.
<div id="ex1">R: </div>
<div id="ex2">N: </div>
<div id="ex3">RN: </div>
<div id="ex4">R + El: </div>
<div id="ex5">RN + El: </div>

为什么jQuery的追加具有不一致的回车输出？

直接使用DOM,附加文本节点等,\r …

应用程序缓存作为创建离线浏览器应用程序的一种方式已被弃用。当前制作离线 Web 应用程序的方法是使用service workers。

Service Worker 允许您引导所有网络请求并为它们提供内容。由于即使用户关闭选项卡，Service Worker 也可以运行，因此它可以在 Internet 暂时不工作时提供缓存内容。

然而，当我对离线 Web 应用程序感兴趣时，是因为我希望即使在我永远无法访问互联网的情况下也能使用。我创建了简单的离线应用程序，但是当我关闭并打开浏览器时它不起作用 - 我收到无法加载页面的消息。

即使在浏览器关闭并重新打开后，有没有办法让 Service Worker 离线应用程序工作？如果没有，是否有任何计划的标准？这对移动用户来说非常有价值。

下面的调用24:00在最新的 Chrome 和 Opera 中返回00:00，而之前返回的是，这是设计行为吗？

const [, time] = new Date(2020, 1, 1, 0, 0).toLocaleDateString("en-us",
        {
            hour12: false,
            hour: "2-digit",
            minute: "2-digit"
        }).split(", ");

console.info(time); // 24:00

TL;DR - 当用户在另一个选项卡中注销时，我们如何使访问令牌过期？

细节：

在SSO 文档中，它说：

何时调用方法

如果在没有用户登录到Office无法使用您的加载就可以了，那么你应该调用getAccessToken 时加载启动，并通过allowSignInPrompt: true在选项参数getAccessToken。

这很好，很清楚。但是我们什么时候应该停止使用令牌？是否有一个事件我们可以用来知道用户已退出？（我一直没找到。）

我问是因为即使用户在另一个选项卡中注销，令牌仍会继续工作。因此，如果我们将令牌保留任何时间长度，就会导致用户帐户被错误使用的情况。例如：

1. 用户登录
2. 用户打开加载项；加载项获取访问令牌并保留它
3. 用户打开另一个选项卡
4. 用户在另一个选项卡中退出他们的帐户
5. 用户走开
6. 其他人使用加载项来做他们不应该做的事情

我只是这样做了（好吧，不是第 6 步），并且访问令牌继续在带有加载项的选项卡中工作。是的，用户在退出时可能应该关闭选项卡。是的，他们也不应该让计算机处于解锁状态。但我想在这种情况下使令牌过期。

这是另一个更容易看到的情况：

1. 用户登录
2. 用户打开加载项
3. 用户意识到他们需要切换帐户。由于您无法在 Web Excel 中执行此操作，因此他们在另一个选项卡中执行此操作
4. 用户尝试使用加载项 - 它使用的是旧帐户，而不是切换到的帐户

我们都只是获取令牌的每一个我们需要它的时候，但我们最近才开始运行到速率限制的问题。所以现在我们简单地缓存它，但弄清楚它有多简单是棘手的，特别是在上面的场景 #2 的情况下。我们想要避免速率限制，但不要让窗口打开太久。知道用户何时退出（没有达到速率限制）可以让我们这样做。

是否可以（以高性能的方式）在JavaScript中定义“后备”方法？

例如

function MyObject () {
   /* what do i have to add here to have my defaultMethod? */
}

var obj = new MyObject ();
obj.doesntExistInMyObject (); // I want defaultMethod to be called
obj.doesntExistEither (); // I want defaultMethod to be called, too

即：defaultMethod每当我编写obj.calledMethod ();和时obj.calledMethod == undefined，我都希望被调用，但是我不想undefined在调用代码中进行检查。

在我能找到的所有JavaScript运算符优先级图表中(如此和此一样),逻辑AND(&&)的逻辑OR()优先级稍高||.

我似乎无法弄清楚结果与它们具有相同优先级时的结果不同的表达式.我认为必须有某种方式使它重要,否则它们会被列为具有相同的优先级,如果它没有.

例如:

0 || 2 && 0 || 3

是的3,但无论我如何分割它,它总是会3:

(0 || 2) && 0 || 3

0 || (2 && 0) || 3

(0 || 2 && 0) || 3

0 || 2 && (0 || 3)

0 || (2 && 0 || 3)

如果我0先做其他事情(比如4),那么结果总是4因为第一个||甚至不看右边.如果我换了0,并3在最近||四周,结果依然3.

我最接近的是

0 || false …

我有一个流体设计的表格,由一系列标签和字段组成,我希望它们一个接一个地流动,并在必要时包裹以支撑窗口的宽度.(标签和输入必须作为一个单元流动,在一行的末尾没有悬挂标签,其输入在下一行.)但是当它们换行时,我希望这些字段以整齐的方式排列.有没有办法用HTML和CSS做到这一点？(不幸的是,我必须支持没有CSS3列的旧浏览器[如果他们甚至在这里帮助].)

我尝试了几件事,比如给标签(好吧,跨度)一个固定长度(你要点击代码片段中的"全屏"按钮,这样片段窗口宽度不固定):

.wrapped-fields label {
  display: inline-block;
}
.wrapped-fields label > span {
  display: inline-block;
  width: 8em;
  white-space: nowrap;
}

<form class="wrapped-fields">
  <label>
    <span>Short:</span>
    <input type="text" size="5">
  </label>
  <label>
    <span>Long label for field:</span>
    <input type="text" size="5">
  </label>
  <label>
    <span>Medium label:</span>
    <input type="text" size="5">
  </label>
  <label>
    <span>Short:</span>
    <input type="text" size="5">
  </label>
  <label>
    <span>Long label for field:</span>
    <input type="text" size="5">
  </label>
  <label>
    <span>Medium label:</span>
    <input type="text" size="5">
  </label>
</form>

......但由于以下几个原因,这是不能令人满意的:

1. 它要求我为标签跨度设置固定大小,但这些标签的名称可以来自配置,因此我不希望在运行时测量每个标签并将固定大小调整为最大.

2. 当它们堆叠在每列中最长的标签时看起来没问题:

   

   ......但是当它们不是时很可怕,例如:

   

   ...要么:

   

理想情况下,每个"列"将采用其中最长标签或字段的大小(尽管现在所有字段的大小相同),相应地,标签+字段对包装.

如果没有HTML/CSS解决方案,是否有一个简单的JavaScript解决方案？(如果没有,我会写一个复杂的;不要求人们做大量的代码,如果那就是它.)

如果相关:

• 我正在使用Bootstrap,所以如果网格系统有帮助(我没有运气),我们可以使用它 …

当我取消注释下面的“return”时，我有以下代码可以工作fetchData。我该如何设置才能等待this.fetchData完成填充项目？我尝试过其他承诺的变体，异步，等待，但无法让它实际工作......

到目前为止，我设置了一个this.items内部fetchData，但我意识到这绝对不是我真正想要做的。它显示了我的调用的前 X 行，因为这样设置，但是调用后应该发生的所有代码都会出现fetchData错误，从尝试执行items.length.

import axios from 'axios';

new Vue({
    el: '#app',
    data() {
        return {
            search: '',
            totalItems: 0,
            items: [],
            loading: true,
            pagination: {},
            headers: [ //some headers
            ],
            items: []
        }
    },
    watch: {
      pagination: {
        handler () {
          this.getDataFromApi()
            .then(data => {
              this.items = data.items
              this.totalItems = data.total
            })
        },
        deep: true
      }
    },
    mounted () {
      this.getDataFromApi()
        .then(data => {
          this.items = data.items …