使用GPT写代码实现高亮页面关键字

目录
  • 背景
  • 使用 GPT 编写代码
    • 撤销高亮
    • Range 范围算不准
    • 页面卡死
    • 支持 shadowRoot
    • 撤销操作支持 shadowRoot
    • highligh 函数需要支持重复调用
  • 使用体验

背景

最近用户跟我反馈了一个问题,他们使用的浏览器高亮关键字的插件在我们的网站不生效,我看了一下,因为使用了 webComponent 但插件没有进行兼容。他们说这个功能非常重要,因此,我们就要在系统内自己实现高亮页面关键字。

在做一个新功能的时候,首先要先调研一下方案。

但在网上找了一圈,发现基本上都是以下这种方案:

// js部分
var bodyContent = document.body.innerHTMl;  // 获取页面内容
var pattern = new RegExp('关键字', 'g'); // 生成正则表达式
// 匹配关键词并替换
document.body.innerHTMl = bodyContent.replace(pattern, '<span class="highlight">$&</span>');

在 innerHTML 匹配关键字,将关键字替换成高亮的 span,然后重新替换 innerHTML 这样实现虽然非常简单,但会导致 shadowRoot 和 iframe 失效。

于是我决定问问 GPT,看看它能不能给我一点惊喜

使用 GPT 编写代码

我:我要写一段 js 代码,传入指定的文本,在整个页面高亮

GPT: 你可以使用 JavaScript 中的 DOM 操作来实现这个功能。以下是一段示例代码:

function highlightText(text) {
  const body = document.body;
  const regex = new RegExp(text, 'gi');
  let match;
  while ((match = regex.exec(body.innerText))) {
    const span = document.createElement('span');
    span.style.backgroundColor = 'yellow';
    span.textContent = match[0];
    const range = document.createRange();
    range.setStart(body, match.index);
    range.setEnd(body, regex.lastIndex);
    range.deleteContents();
    range.insertNode(span);
  }
}

这段代码会将页面中所有匹配指定文本的文本节点用黄色高亮显示。你可以将需要高亮的文本作为参数传入 highlightText 函数中,例如:

highlightText('JavaScript');

点评:代码是写出来了,用了一个我还没见过的 API。。。赶紧学习了一下 原理是:用 Range API 去选择对应的文本,然后使用 Range API 删除和新增高亮节点,思路看起来是没问题的,而且跟网上找到的不同

撤销高亮

我: 还要能够撤销高亮

GPT: 好的,为了实现撤销高亮的功能,我们可以在高亮文本时将每个被高亮的文本节点保存到一个数组中,然后在需要撤销高亮时,遍历这个数组,将每个高亮的文本节点恢复到原来的状态。

以下是修改后的代码:

let highlightedNodes = [];
function highlightText(text) {
  const body = document.body;
  const regex = new RegExp(text, 'gi');
  let match;
  while ((match = regex.exec(body.innerText))) {
    const span = document.createElement('span');
    span.style.backgroundColor = 'yellow';
    span.textContent = match[0];
    const range = document.createRange();
    range.setStart(body, match.index);
    range.setEnd(body, regex.lastIndex);
    range.deleteContents();
    range.insertNode(span);
    regex.lastIndex -= match[0].length - span.textContent.length;
    highlightedNodes.push(span);
  }
}
function clearHighlight() {
  while (highlightedNodes.length > 0) {
    const node = highlightedNodes.pop();
    const parent = node.parentNode;
    parent.replaceChild(node.firstChild, node);
    parent.normalize();
  }
}

点评:牛逼,GPT 还是很聪明的,居然还会把 span 存起来,用于撤销高亮,这个思路也是非常的正确的。

Range 范围算不准

但是实际运行后,这段代码是会报错的,我排查了一下,发现计算出来的 Range 的 startend 的位置是错误的,于是我跟 GPT 说一下,看看它如何纠正

我:算不准 start 和 end 的位置

GPT: 如果 setStartsetEnd 方法的位置计算不准确,可能是因为在计算位置时没有考虑到文本节点之间的空格和换行符。在这种情况下,你可以使用 createTreeWalker 方法来遍历文档树中的所有文本节点,并计算出每个文本节点的起始和结束位置。

以下是一段示例代码:

function highlightText(text) {
  const body = document.body;
  const regex = new RegExp(text, 'gi');
  let match;
  const walker = document.createTreeWalker(body, NodeFilter.SHOW_TEXT, null, false);
  while (walker.nextNode()) {
    const node = walker.currentNode;
    while ((match = regex.exec(node.nodeValue))) {
      const span = document.createElement('span');
      span.style.backgroundColor = 'yellow';
      span.textContent = match[0];
      const range = document.createRange();
      range.setStart(node, match.index);
      range.setEnd(node, regex.lastIndex);
      range.deleteContents();
      range.insertNode(span);
    }
  }
}

在这个修改后的代码中,我们使用 createTreeWalker 方法来遍历文档树中的所有文本节点。对于每个文本节点,我们使用 exec 方法来查找匹配指定文本的子串,并将每个匹配的子串用黄色高亮显示。在计算位置时,我们使用 setStartsetEnd 方法来设置范围的起始和结束位置,以确保高亮显示的文本范围正确。

点评:有点东西,我其实是不知道为什么算不准 startend 的位置,但 GPT 自己也能发现问题,并且给出了另一个解决方案,并且非常贴心解析了这段代码

根据 GPT 的提示,是空字符的文本节点导致的问题,跟 GPT 提出的假设类似。

页面卡死

但我把上面代码运行,发现页面卡死了,原因是,在 TreeWalker 遍历过程中,新增了高亮节点,然后又进入高亮节点进行遍历,然后又创建高亮节点。。。

因此应该在 TreeWalker 遍历节点之后再进行高亮节点替换,于是我让 GPT 继续改

我:在 TreeWalker 遍历过程中修改节点,会遍历到新节点,需要延迟修改节点

GPT: 是的,你说的很对。在 TreeWalker 遍历过程中修改节点,会导致遍历到新节点,从而可能会出现意外的结果。为了避免这种情况,我们可以将需要修改的节点保存到一个数组中,在遍历完成后再对这些节点进行修改。

以下是一段示例代码:

function highlightText(text) {
  const body = document.body;
  const regex = new RegExp(text, 'gi');
  let match;
  const nodesToHighlight = [];
  const walker = document.createTreeWalker(body, NodeFilter.SHOW_TEXT, null, false);
  while (walker.nextNode()) {
    const node = walker.currentNode;
    while ((match = regex.exec(node.nodeValue))) {
      const span = document.createElement('span');
      span.style.backgroundColor = 'yellow';
      span.textContent = match[0];
      const range = document.createRange();
      range.setStart(node, match.index);
      range.setEnd(node, regex.lastIndex);
      range.deleteContents();
      range.insertNode(span);
      nodesToHighlight.push(span);
    }
  }
  nodesToHighlight.forEach(node => {
    const parent = node.parentNode;
    parent.replaceChild(node.firstChild, node);
    parent.normalize();
  });
}

在这个修改后的代码中,我们新增了一个名为 nodesToHighlight 的数组,用于保存需要高亮的节点。在遍历过程中,每当找到一个需要高亮的节点时,我们将这个节点添加到 nodesToHighlight 数组中。在遍历完成后,我们遍历 nodesToHighlight 数组,对每个节点进行高亮处理。

这样做可以确保在遍历过程中不会修改节点,从而避免出现意外的结果。

点评:改了,但没完全改好,TreeWalker 中仍然有修改 DOM 的操作,于是我换了个说法

我:不能在遍历过程中调用 deleteContentsinsertNode

GPT: 是的,你说的很对。在遍历过程中调用 deleteContentsinsertNode 方法,会导致遍历到新节点,从而可能会出现意外的结果。为了避免这种情况,我们可以将需要修改的节点保存到一个数组中,在遍历完成后再对这些节点进行修改。

以下是一段示例代码:

function highlightText(text) {
  const body = document.body;
  const regex = new RegExp(text, 'gi');
  let match;
  const nodesToHighlight = [];
  const walker = document.createTreeWalker(body, NodeFilter.SHOW_TEXT, {
    acceptNode: function(node) {
      if (node.parentNode.nodeName.match(/^(script|style)$/i)) {
        return NodeFilter.FILTER_REJECT;
      }
      return NodeFilter.FILTER_ACCEPT;
    }
  }, false);
  while (walker.nextNode()) {
    const node = walker.currentNode;
    while ((match = regex.exec(node.nodeValue))) {
      const span = document.createElement('span');
      span.style.backgroundColor = 'yellow';
      span.textContent = match[0];
      const range = document.createRange();
      range.setStart(node, match.index);
      range.setEnd(node, regex.lastIndex);
      nodesToHighlight.push({ range, span });
      regex.lastIndex -= match[0].length - span.textContent.length;
    }
  }
  setTimeout(() => {
    nodesToHighlight.forEach(({ range, span }) => {
      range.deleteContents();
      range.insertNode(span);
    });
  }, 0);
}

在这个修改后的代码中,我们新增了一个名为 nodesToHighlight 的数组,用于保存需要高亮的节点和它们对应的范围。在遍历过程中,每当找到一个需要高亮的节点时,我们将这个节点和它对应的范围添加到 nodesToHighlight 数组中。在遍历完成后,我们使用 setTimeout 方法将对节点的修改延迟到下一个事件循环中执行。

这样做可以确保在遍历过程中不会修改节点,从而避免出现意外的结果。同时,使用 setTimeout 方法可以将对节点的修改延迟到下一个事件循环中执行,从而确保在修改节点时不会影响遍历过程。

点评:这段代码终于能运行了,非常的优秀!

支持 shadowRoot

我:但这样还不能遍历 webComponent shadowRoot 里面的元素

GPT:

function highlightText(text) {
  const body = document.body;
  const regex = new RegExp(text, 'gi');
  let match;
  const nodesToHighlight = [];
  const walker = document.createTreeWalker(body, NodeFilter.SHOW_TEXT, {
    acceptNode: function(node) {
      if (node.parentNode.nodeName.match(/^(script|style)$/i)) {
        return NodeFilter.FILTER_REJECT;
      }
      return NodeFilter.FILTER_ACCEPT;
    }
  }, false);
  while (walker.nextNode()) {
    const node = walker.currentNode;
    while ((match = regex.exec(node.nodeValue))) {
      const span = document.createElement('span');
      span.style.backgroundColor = 'yellow';
      span.textContent = match[0];
      const range = document.createRange();
      range.setStart(node, match.index);
      range.setEnd(node, regex.lastIndex);
      nodesToHighlight.push({ range, span });
      regex.lastIndex -= match[0].length - span.textContent.length;
    }
  }
  const shadowHosts = document.querySelectorAll('*');
  shadowHosts.forEach(shadowHost => {
    const shadowRoot = shadowHost.shadowRoot;
    if (shadowRoot) {
      const walker = document.createTreeWalker(shadowRoot, NodeFilter.SHOW_TEXT, {
        acceptNode: function(node) {
          if (node.parentNode.nodeName.match(/^(script|style)$/i)) {
            return NodeFilter.FILTER_REJECT;
          }
          return NodeFilter.FILTER_ACCEPT;
        }
      }, true);
      while (walker.nextNode()) {
        const node = walker.currentNode;
        while ((match = regex.exec(node.nodeValue))) {
          const span = document.createElement('span');
          span.style.backgroundColor = 'yellow';
          span.textContent = match[0];
          const range = document.createRange();
          range.setStart(node, match.index);
          range.setEnd(node, regex.lastIndex);
          nodesToHighlight.push({ range, span });
        }
      }
    }
  });
  setTimeout(() => {
    nodesToHighlight.forEach(({ range, span }) => {
      range.deleteContents();
      range.insertNode(span);
    });
  }, 0);
}

在这个修改后的代码中,我们使用 querySelectorAll 方法来获取所有元素,然后对于每个元素,我们检查它是否有 shadowRoot。如果有,我们使用 createTreeWalker 方法来遍历它的 shadowRoot 中的所有文本节点。在遍历过程中,我们使用与之前相同的方式来查找需要高亮的节点,并将它们添加到 nodesToHighlight 数组中。

这样做可以确保遍历到 shadowRoot 中的所有文本节点,并将需要高亮的节点保存到 nodesToHighlight 数组中。然后,我们使用 setTimeout 方法将对节点的修改延迟到下一个事件循环中执行,从而确保在修改节点时不会影响遍历过程。

点评:这段代码也是能运行的,很牛逼,不过没考虑代码的复用性,shadowRoot 的处理,可以复用普通的 DOM 的高亮逻辑

撤销操作支持 shadowRoot

我:撤销操作也要作用到 shadowRoot

GPT: 是的,你说的很对。如果需要对 shadowRoot 中的高亮文本进行撤销操作,我们可以使用 Range 对象的 deleteContents() 方法来删除高亮文本所在的节点,并将原始文本重新插入到文档中。

以下是一段示例代码:

function removeHighlight() {
  const highlightedSpans = document.querySelectorAll('span[style="background-color: yellow;"]');
  highlightedSpans.forEach(span => {
    const range = document.createRange();
    range.selectNode(span);
    range.deleteContents();
    range.insertNode(document.createTextNode(span.textContent));
  });
  const shadowHosts = document.querySelectorAll('*');
  shadowHosts.forEach(shadowHost => {
    if (shadowHost.shadowRoot) {
      const highlightedSpans = shadowHost.shadowRoot.querySelectorAll('span[style="background-color: yellow;"]');
      highlightedSpans.forEach(span => {
        const range = document.createRange();
        range.selectNode(span);
        range.deleteContents();
        range.insertNode(document.createTextNode(span.textContent));
      });
    }
  });
}

点评:代码可以运行,但有以下缺点:

  • 同样是复用性不足,
  • 高亮节点的选择器 span[style="background-color: yellow;"] 不太优雅,不够健壮 但问题不大,我自己能改hhh

highligh 函数需要支持重复调用

目前的代码会有一个问题,就是重复调用 highlightText,已高亮的节点,仍然会创建 span,这就会导致 span 重复嵌套。需要先判断是否已经高亮了。

我:highlightText 如果同一个值多次调用,会给文本节点再嵌套一层高亮节点,要支持重复调用不会重复嵌套节点

GPT: 好的,如果需要支持重复调用 highlightText 函数时不会重复嵌套高亮节点,我们可以在每次调用函数之前先检查文本节点是否已经被高亮过,如果已经被高亮过,则不再重复嵌套高亮节点。

以下是修改后的 highlightText 函数代码:

function highlightText(text) {
  const body = document.body;
  const regex = new RegExp(text, 'gi');
  let match;
  const nodesToHighlight = [];
  const walker = document.createTreeWalker(body, NodeFilter.SHOW_TEXT, {
    acceptNode: function(node) {
      if (node.parentNode.nodeName.match(/^(script|style)$/i)) {
        return NodeFilter.FILTER_REJECT;
      }
      return NodeFilter.FILTER_ACCEPT;
    }
  }, false);
  while (walker.nextNode()) {
    const node = walker.currentNode;
    if (node.parentNode.classList.contains('highlighted')) {
      continue;
    }
    while ((match = regex.exec(node.nodeValue))) {
      const span = document.createElement('span');
      span.style.backgroundColor = 'yellow';
      span.textContent = match[0];
      const range = document.createRange();
      range.setStart(node, match.index);
      range.setEnd(node, regex.lastIndex);
      nodesToHighlight.push({ range, span });
      regex.lastIndex -= match[0].length - span.textContent.length;
    }
  }
  const shadowHosts = document.querySelectorAll('*');
  shadowHosts.forEach(shadowHost => {
    if (shadowHost.shadowRoot) {
      const shadowRoot = shadowHost.shadowRoot;
      const walker = document.createTreeWalker(shadowRoot, NodeFilter.SHOW_TEXT, {
        acceptNode: function(node) {
          if (node.parentNode.nodeName.match(/^(script|style)$/i)) {
            return NodeFilter.FILTER_REJECT;
          }
          return NodeFilter.FILTER_ACCEPT;
        }
      }, true);
      while (walker.nextNode()) {
        const node = walker.currentNode;
        if (node.parentNode.classList.contains('highlighted')) {
          continue;
        }
        while ((match = regex.exec(node.nodeValue))) {
          const span = document.createElement('span');
          span.style.backgroundColor = 'yellow';
          span.textContent = match[0];
          const range = document.createRange();
          range.setStart(node, match.index);
          range.setEnd(node, regex.lastIndex);
          nodesToHighlight.push({ range, span });
          regex.lastIndex -= match[0].length - span.textContent.length;
        }
      }
    }
  });
  nodesToHighlight.forEach(nodeToHighlight => {
    const range = nodeToHighlight.range;
    const span = nodeToHighlight.span;
    range.deleteContents();
    span.classList.add('highlighted');
    range.insertNode(span);
  });
}

在这个代码中,我们添加了一个名为 highlighted 的 CSS 类,用于标记已经被高亮过的文本节点。在每次遍历文本节点时,我们检查当前节点的父节点是否已经被标记为 highlighted,如果是,则跳过当前节点,不再重复嵌套高亮节点。在插入高亮节点时,我们还将其添加到 highlighted 类中,以便下次遍历时可以正确地跳过已经被高亮过的节点。

点评:完美符合要求~我只需要稍微复用以下代码,进行一些小修改即可。

最终还是成为了一名代码美化工程师~~~

使用体验

GPT 确实非常强大,它知道的非常多,有我不知道的知识,如果不是 GPT 我的确不会知道可以使用 Range API 去操作 DOM 实现高亮。

它还能较好的根据提示,纠正自己的错误

我们可以让 GPT 提供思路,写一个简单的 Demo,然后自己进行代码优化。

目前这种使用方式的效率还有待提升。整个过程耗费了 1 个多小时,写了不到 100 行代码。在对话的过程中,还需要将代码复制到 IDE 中,这并没有将 GPT 和 IDE 串联起来。

不过,我们可以尝使用 Cursor 这个 IDE,它可以直接在 IDE 中使用 GPT,这样应该会有更好的编码体验。

以上就是使用GPT写代码实现高亮页面关键字的详细内容,更多关于GPT 高亮页面关键字的资料请关注我们其它相关文章!

(0)

相关推荐

  • 一文解析ChatGPT 之 Fetch 请求

    目录 SSE 介绍 咋和 ChatGPT 控制台看到的内容不一样?

  • 两天没解决的问题chatgpt用了5秒搞定隐藏bug

    目录 前言 隐藏的“间谍” code 验证第一位”间谍“ 借助GPT“侦探柯南” 找出"真凶" AI已来,未来已来 前言 一个说难不难,说简单竟看不出来是哪里问题的一个bug.是的 可能自己能力和经验尚浅无法识别,下面你们能否用火眼金睛一眼让bug原形毕露 (这个问题是忽然暴露出来的,无任何征兆,没人改动过,生产上运行了很长时间,故很奇怪,所以这个间谍看来很会隐藏) 隐藏的“间谍” 下面先来看代码(伪代码) code /** * 两个从数据库查询的耗时任务 * @param count

  • 详解如何利用chatgpt保护您的js代码

    正文 ChatGPT是一个非常强大的自然语言处理模型,能够在多种应用场景下帮助人们更加高效地进行文本处理和语言交互.但是,由于其庞大的代码库和数据集,如果未经过适当的保护,可能会面临来自黑客和恶意用户的攻击. 为了保护ChatGPT的安全性,我们可以使用JavaScript混淆加密技术,这是一种将代码转换为难以理解的形式的技术.通过这种方式,黑客和攻击者将很难破解ChatGPT的代码,从而提高了其安全性. 使用JavaScript混淆加密 下面是一个使用JavaScript混淆加密的代码案例:

  • ChatGPT用于OA聊天助手导致访问量服务宕机

    目录 闲谈 开搞 面临的问题 聊天UI 服务端接口 上线宕机 优化问题处理 流式传输 MD格式 看看效果 闲谈 最近,火到不行的明星团队产品 ChatGPT,热度一度非常高,付费用户都开始通过邀请制,专属登陆链接来限制流量了.开了Plus以后返回内容和速度真是10倍速啊~ 但对于小白或普通用户(也可能非技术行业的大佬),想要访问和体验还是挺麻烦的.除了准备梯子.接码.账号以外还可能遇到节点或网络,多次连接失败的问题. 所以,本着能折腾绝对不休息的原则,2天搞了一个聊天助手,凭借其语义的理解,关联

  • 详解微信小程序如何实现类似ChatGPT的流式传输

    目录 正文 小程序上实现流失传输 什么是流式传输? 为什么小程序不支持流式传输? 我的解决方案 常规方案Axios 另辟蹊径:onChunkReceived方案 后端接口配置 正文 最近指导群里小兄弟技术问题,发现一个让我也棘手的难题.于是激发了我潜意识精神力-干到底. 由于最近沉浸在chatgpt中,很久不用google和百度搜索东西了,正如我所料一般,他们也没有这方面的解决方案.于是,记录一下探索研究的过程,给各位水友一个分享扩展. 小程序上实现流失传输 模拟ChatGPT的效果,实现流式传

  • 让chatGPT教你如何使用taro创建mbox

    目录 @tarojs/mobx如何使用useLocalstory创建实例 这样其他组件或页面能获取到数据变更吗? 那在函数式组件中如何使用inject @tarojs/mobx如何使用useLocalstory创建实例 @tarojs/mobx 是 Taro 框架的 MobX 实现,提供了 useLocalStore hook 用于在函数组件中创建 MobX store. 要使用 useLocalStore 创建实例,需要先定义一个 MobX store 类.例如,下面是一个简单的计数器示例:

  • LangChain简化ChatGPT工程复杂度使用详解

    目录 什么是LangChain? LangChain中的模块,每个模块如何使用? 具体代码 什么是LangChain? 使用ChatGPT大家可能都是知道prompt, (1)想像一下,如果我需要快速读一本书,想通过本书作为prompt,使用ChatGPT根据书本中来回答问题,我们需要怎么做? (2)假设你需要一个问答任务用到prompt A,摘要任务要使用到prompt B,那如何管理这些prompt呢?因此需要用LangChain来管理这些prompt. LangChain的出现,简化了我们

  • 2016年最热门的15 款代码语法高亮工具,美化你的代码

    前言: 代码高亮很有用,特别是在需要在网站或者blog中显示自己编写的代码的时候,或者给其他人查看或调试语法错误的时候.我们可以将代码高亮,以便阅读者可以十分方便的读取代码块,增加用户阅读代码的良好体验. 语法高亮是文本编辑器用来显示文本的,特别是源代码,根据不同的类别来用不同的颜色和字体显示.这个功能有助于编写结构化的语言,比如编程语言,标记语言,这些语言的语法错误显示是有区别的.语法高亮并不会影响文本自身的意义,而且能很好的符合人们的阅读习惯. 目前,有很多免费而且有用的代码高亮脚本.这些脚

  • 分享15个美化代码的代码语法高亮工具

    本文作者是Gavin McLeod,一个被困在<电子世界争霸战>里的骨灰级Web极客.在文中列举了15个帮助开发者快速编码.优化代码的语法高亮工具,每个高亮工具都有其功能特色.(以下是编译内容) 开发者和顽固的代码极客深知Code Syntax Highlighter(以下简称"代码语法高亮工具")作为二级符号的一种形式,便于在一个结构化语言或标记语言里书写代码.有些代码高亮编辑器里融合了多个语法高亮功能,例如拼写检查.代码折叠.语法高亮工具可以在总体策略的使用上起到较大的

  • 我,一个写代码的 程序员 感悟

    前几天一个朋友给我的blog留言,谈到希望在新年里能够看到的不仅仅是我对技术的分享,更希望能够看到对于技术学习.职业发展的规划.因此想到了写一点什么分享一下自己这些年的一点点"收获",周星驰的喜剧之王里面说到他是一个演员(虽然被叫做跑龙套的),我想我,就一个写代码的. 爱这行 从事任何行业都一样,只有真正的爱上了这份工作,才会投入热情,才会在顺境中自我警醒,在逆境中寻找突破.这个行业的竞争很激烈,你停下来走,别人就立刻会跑步超过你,没有对这一行业的一种热情,就很难在困境中保持一种执着的

  • 使用JavaScript库还是自己写代码?

    你必须做出决定以这两种方法中的哪一种来写你的JavaScript,为了帮助您作出明智的决定哪个更适合你,我们将对比一下这两种方法的一些优劣. 在过去使用JavaScript库的一个缺点是,库往往相当大,也许包括不少在你的个人网页中实际是不怎么使用的代码.或许,编写自己的代码可以被认为是最能完全满足你真正需求的方法,而且没有其他比这更有效的方法了.但在引入Google的一个通用仓库后,每个人都可用通过链接使用比较流行的JavaScript库的时候,就否定了这种说法,因为如果你链接到的是Google

  • 「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)

    1. 实现一个new操作符 new操作符做了这些事: 它创建了一个全新的对象. 它会被执行[[Prototype]](也就是__proto__)链接. 它使this指向新创建的对象.. 通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上. 如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error),那么new表达式中的函数调用将返回该对象引用. function New(func) { va

  • vue使用showdown并实现代码区域高亮的示例代码

    前言:当我们想把makedown文档转译为html在网页上显示,并且能漂亮的展示出自己想要的网页形式,接下来我给大家介绍插件来达到我们所想要的功能. 注:下面安装及使用方式是基于vue进行滴. 1.安装showdown npm install showdown --save 2.将showdown引入到使用的页面中 <template> <div v-html="htms"></div> </template> <script>

  • jupyter notebook 写代码自动补全的实现

    操作步骤 进入命令行环境.我使用的是conda.有两种方式进入命令行. 方法1:通过anconda navigator界面,选择environments,选择对应环境名,选择open terminal 方法2:直接使用cmd或者terminal等终端进入命令行.激活你想要配置代码补全的环境(如果是默认环境不用激活) 1.安装nbextensions pip install jupyter_contrib_nbextensions -i https://pypi.mirrors.ustc.edu.

  • IntelliJ IDEA 2021.1 推出语音、视频功能,边写代码边聊天(功能超级强大)

    推荐教程: idea2021以下版本适用,通过无限重置试用持续激活:https://www.jb51.net/article/198343.htm 正文 IDEA 2020.3 刚没用多久,2021.1 又陆续给我推送更新了: 启动就提醒更新,麻烦,那不如更新下,体验下新版本. 如上图所示,2021.1 更新了 9 个新特性,下面栈长会一一体验给大家介绍一下. 1.Code With Me 更新重启后,映入眼帘的就是这个 Code With Me 了: 牛逼啊,估计是去年疫情期间,很多人都选择在

  • ASPNET按钮只执行客户端代码不回送页面实现思路

    asp.net的Button默认行为是将页面回送后执行服务器代码.在页面中还可以使用html的按钮控件input type="button",但是这种HTML控件在cs文件中引用不到. asp:Button在cs文件中可用,如何使它只执行客户端JavaScript代码而不回送执行服务器端代码呢? 首先介绍asp:Button的两个事件OnClientClick和OnClick,前者OnClientClick是执行客户端JavaScript代码,后者OnClick是服务器代码,先执行po

  • pycharm 实现本地写代码,服务器运行的操作

    无图形界面的代码编写 python代码作为脚本语言,其实最好直接使用vim在字符界面里面直接编写,这才是正道,但是作初学者,其实直接在服务器上写代码是很不习惯的,所以我这边希望能写一篇帮助师弟师妹使用本地的ide编写代码,然后服务器的解释器运行代码. 原理 如何本地写代码,服务器运行呢? 其实原理还是比较简单的,就是一个ssh同步本地和服务器代码的工程,ide会自动同步你的本地代码到服务器上,同时服务器接受到你的ide运行指令后,就会直接在服务器上运行代码,代码运行结束后,服务器会直接同步结果到

随机推荐